/* Sprachschulsystem */
:root {
/* === Mandanten-Farben (Defaults, werden per JS überschrieben) === */
--primary-dark: #47584e;
--primary-medium: #5d7365;
--primary-light: #86968c;
--accent-beige: #f3edec;
--primary-dark-rgb: 71, 88, 78;
/* === Strukturelle Farben (fix, mandantenunabhängig) === */
--background: #f9f9f8;
--surface: #f5f5f4;
--surface-container-low: #f3f4f3;
--surface-container-lowest: #ffffff;
--surface-container-highest: #e8e9e8;
--surface-variant: #edeeed;
--on-surface: #1a2b23;
--on-surface-variant: #5c6660;
--on-surface-muted: #8a948f;
/* === Borders / Outlines === */
--outline-variant: rgba(71, 88, 78, 0.18);
--outline-strong: rgba(71, 88, 78, 0.32);
/* === Semantische Farben (Curator-B) === */
--success: #5d7365;
--success-bg: rgba(93, 115, 101, 0.10);
--danger: #c44a3f;
--danger-bg: rgba(196, 74, 63, 0.10);
--warning: #b08c4f;
--warning-bg: rgba(176, 140, 79, 0.12);
--info-bg: rgba(71, 88, 78, 0.08);
/* Editorial accent (Curator-B Variante B, derzeit ungenutzt — Showcase) */
--editorial-accent: #c47a4a;
--editorial-accent-bg: rgba(196, 122, 74, 0.10);
/* Legacy-Kompatibilität (werden schrittweise ersetzt) */
--accent-gray: #796e6c;
--bg-light: #f6f2f1;
--text-dark: #1f1f1f;
--white: #ffffff;
--border-color: #e9dedc;
/* Schriftarten */
--font-display: 'Newsreader', Georgia, serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-main: var(--font-body);
--font-heading: var(--font-display);
/* Abstände (Legacy: rem-basiert) */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Abstände (Curator-B: pixel-basiert; identische Skala wie Legacy, ergänzend nutzbar) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
/* Radien */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Schatten */
--shadow-ambient: 0 2px 32px rgba(71, 88, 78, 0.06);
--shadow-sm: 0 1px 3px rgba(var(--primary-dark-rgb), 0.08);
--shadow-md: 0 4px 12px rgba(var(--primary-dark-rgb), 0.08);
--shadow-lg: 0 12px 40px rgba(var(--primary-dark-rgb), 0.12);
--shadow-xl: 0 20px 40px rgba(var(--primary-dark-rgb), 0.2), 0 8px 16px rgba(0, 0, 0, 0.06);
/* Transitions (Legacy + Curator-B-Aliase) */
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
--transition-slow: 300ms ease;
--t-fast: var(--transition-fast);
--t-normal: var(--transition-normal);
/* Sidebar */
--sidebar-width: 240px;
--sidebar-width-collapsed: 64px;
}
/* ============================================
GLOBAL ANIMATIONS (Curator-B)
============================================ */
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* Scrollbar-Platz immer reservieren — verhindert Layout-Shift, wenn
beim Seitenwechsel zwischen "Inhalt fits" und "Inhalt scrollbar"
gewechselt wird. */
scrollbar-gutter: stable;
/* iOS Safari skaliert Text in Landscape auto auf — Layout bricht. Fixieren. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-surface);
background-color: var(--background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Sicherheitsnetz: kein horizontaler Scroll, falls eine Komponente die
Viewport-Breite überschreitet (z.B. lange Wörter, Inline-Padding-Bugs). */
overflow-x: hidden;
max-width: 100%;
}
/* ============================================
MATERIAL ICONS
============================================ */
.material-symbols-rounded {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
vertical-align: middle;
margin-right: 0.25rem;
user-select: none;
}
/* Icon-only buttons (keine Labels) */
.btn .material-symbols-rounded:only-child,
button .material-symbols-rounded:only-child {
margin-right: 0;
}
/* Icon-Grössen */
.material-symbols-rounded.icon-sm { font-size: 18px; }
.material-symbols-rounded.icon-lg { font-size: 24px; }
.material-symbols-rounded.icon-xl { font-size: 28px; }
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Basis (Curator-B) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--t-fast);
text-decoration: none;
text-align: center;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn .material-symbols-rounded {
font-size: 18px;
}
/* Primary (.btn-success als Alias für Curator-B-Konsolidierung) */
.btn-primary,
.btn-success {
background-color: var(--primary-dark);
color: var(--white);
border-color: var(--primary-dark);
}
.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
filter: brightness(0.9);
}
/* Secondary — Surface mit Border (.btn-info als Alias) */
.btn-secondary,
.btn-info {
background-color: var(--surface-container-lowest);
color: var(--on-surface);
border-color: var(--outline-variant);
}
.btn-secondary:hover:not(:disabled),
.btn-info:hover:not(:disabled) {
background-color: var(--surface-container-low);
}
/* Danger — transparent + danger color, Hover füllt mit danger-bg */
.btn-danger {
background-color: transparent;
color: var(--danger);
border-color: var(--outline-variant);
}
.btn-danger:hover:not(:disabled) {
background-color: var(--danger-bg);
border-color: var(--danger);
}
/* Warning — analog danger */
.btn-warning {
background-color: transparent;
color: var(--warning);
border-color: var(--outline-variant);
}
.btn-warning:hover:not(:disabled) {
background-color: var(--warning-bg);
border-color: var(--warning);
}
/* Größen */
.btn-sm {
font-size: 0.75rem;
padding: 6px 10px;
}
.btn-sm .material-symbols-rounded {
font-size: 16px;
}
.btn-lg {
font-size: 0.875rem;
padding: 10px 18px;
}
/* Icon-only */
.btn-icon {
padding: 6px;
min-width: 32px;
min-height: 32px;
}
/* Plain Icon-Button fuer Quick-Actions (z.B. Mail/Tel im Detail-Header).
Kein Border und kein Hintergrund — nur das Icon, das sich beim Hover faerbt.
Vorbild: Claude-Design-Prototyp. */
.icon-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--on-surface-variant);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color var(--transition-fast);
text-decoration: none;
padding: 0;
}
.icon-btn:hover {
color: var(--on-surface);
}
.icon-btn .material-symbols-rounded {
font-size: 22px;
}
/* Overflow-/Kebab-Menü für selten genutzte Aktionen.
Trigger ist ein .icon-btn mit Icon "more_vert"; das Popup wird per
app.overflowMenu absolut auf document.body positioniert. */
.overflow-menu-trigger[aria-expanded="true"] {
color: var(--on-surface);
background-color: var(--surface-container-low);
border-radius: var(--radius-sm, 6px);
}
.overflow-menu {
position: fixed;
z-index: 1000;
width: max-content;
min-width: 200px;
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md, 10px);
box-shadow: var(--shadow-lg);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.overflow-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border: none;
background: transparent;
color: var(--on-surface);
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm, 6px);
font-size: 0.95rem;
transition: background-color var(--transition-fast);
}
.overflow-menu-item:hover,
.overflow-menu-item:focus {
background-color: var(--surface-container-low);
outline: none;
}
.overflow-menu-item-danger {
color: var(--error, #b3261e);
}
.overflow-menu-item-danger:hover,
.overflow-menu-item-danger:focus {
background-color: rgba(179, 38, 30, 0.08);
}
.overflow-menu-item-icon {
font-size: 20px;
flex-shrink: 0;
}
.overflow-menu-divider {
height: 1px;
background-color: var(--outline-variant);
margin: 4px 0;
}
/* Button-Gruppe (segmented control) — Buttons in einem Container,
Innen-Trenner statt eigener Border je Button */
.btn-group {
display: inline-flex;
}
.btn-group > .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group > .btn:first-child {
border-top-left-radius: var(--radius-sm);
border-bottom-left-radius: var(--radius-sm);
margin-left: 0;
}
.btn-group > .btn:last-child {
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
}
.btn-group > .btn:hover,
.btn-group > .btn:focus {
/* Focus/Hover-Border über Nachbarn legen */
z-index: 1;
}
/* Loading state */
.btn-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.btn-loading::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 6px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
vertical-align: middle;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* ============================================
APP-SHELL + SIDEBAR
============================================ */
/* App-Shell Grid */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
min-height: 100vh;
transition: grid-template-columns var(--transition-normal);
}
.app-shell.sidebar-collapsed {
grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}
/* Sidebar */
.sidebar {
background-color: var(--surface);
border-right: 1px solid var(--outline-variant);
display: flex;
flex-direction: column;
height: 100vh;
position: sticky;
top: 0;
z-index: 200;
overflow: hidden;
transition: width var(--transition-normal);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: var(--spacing-md) 12px;
min-height: 72px;
}
.sidebar-logo {
width: 100%;
max-width: 200px;
height: auto;
object-fit: contain;
flex-shrink: 0;
}
.sidebar-title {
/* Versteckt — Logo enthält bereits den Namen */
display: none;
}
.sidebar-nav {
flex: 1;
padding: var(--spacing-sm) 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.sidebar-section-label {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-surface-muted);
padding: 14px 12px 6px;
user-select: none;
}
.sidebar-section-label:first-child {
padding-top: var(--spacing-xs);
}
.sidebar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: var(--radius-sm);
color: var(--on-surface-variant);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.84375rem;
font-weight: 500;
letter-spacing: 0.01em;
transition: all var(--transition-fast);
white-space: nowrap;
cursor: pointer;
}
.sidebar-item:hover {
background-color: var(--surface-variant);
color: var(--on-surface);
}
.sidebar-item.active {
background-color: var(--primary-dark);
color: var(--white);
font-weight: 600;
}
.sidebar-item .sidebar-icon {
font-size: 22px;
flex-shrink: 0;
margin-right: 0;
}
.sidebar-label {
overflow: hidden;
text-overflow: ellipsis;
transition: opacity var(--transition-normal), width var(--transition-normal);
}
.sidebar-footer {
padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
border-top: 1px solid var(--outline-variant);
}
.sidebar-user {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 8px 12px;
border-radius: var(--radius-sm);
color: var(--on-surface-variant);
font-size: 0.8125rem;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.sidebar-user:hover {
background-color: var(--surface-variant);
}
.sidebar-user .material-symbols-rounded {
font-size: 20px;
flex-shrink: 0;
margin-right: 0;
}
.sidebar-logout-btn {
display: flex;
align-items: center;
gap: var(--spacing-sm);
width: 100%;
padding: 8px 12px;
background: none;
border: none;
color: var(--on-surface-variant);
font-family: var(--font-body);
font-size: 0.8125rem;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-logout-btn:hover {
background-color: rgba(215, 58, 48, 0.08);
color: var(--danger);
}
.sidebar-logout-btn .material-symbols-rounded {
font-size: 20px;
flex-shrink: 0;
margin-right: 0;
}
.sidebar-collapse-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 6px;
background: none;
border: none;
color: var(--on-surface-variant);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.sidebar-collapse-btn:hover {
background-color: var(--surface-variant);
}
.sidebar-collapse-btn .material-symbols-rounded {
margin-right: 0;
}
/* Sidebar Collapsed */
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-title {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar-collapsed .sidebar-section-label {
/* Im collapsed-Modus als dünner Trenner statt Label */
height: 1px;
padding: 0;
margin: var(--spacing-sm) auto;
width: 24px;
background: var(--outline-variant);
color: transparent;
overflow: hidden;
font-size: 0;
}
.sidebar-collapsed .sidebar-section-label:first-child {
/* Erste Sektion braucht keinen Trenner */
margin-top: var(--spacing-xs);
background: transparent;
}
.sidebar-collapsed .sidebar-header {
justify-content: center;
padding: var(--spacing-lg) var(--spacing-xs);
}
.sidebar-collapsed .sidebar-logo {
width: 36px;
max-width: 36px;
}
.sidebar-collapsed .sidebar-item {
justify-content: center;
padding: 10px;
}
.sidebar-collapsed .sidebar-user {
justify-content: center;
}
.sidebar-collapsed .sidebar-logout-btn {
justify-content: center;
padding: 8px;
}
/* Main Area */
.main-area {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
}
/* Sidebar Backdrop (Mobile) */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 199;
}
/* Content Area (für neue Views) */
.content-area {
display: none;
}
/* Alte Content-Bereich innerhalb der Shell */
.app-shell .content {
flex: 1;
}
/* Sidebar Hamburger-Button (versteckt auf Desktop, sichtbar wenn collapsed/mobile) */
.sidebar-hamburger {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--on-surface);
cursor: pointer;
padding: var(--spacing-xs);
border-radius: 8px;
transition: background-color var(--transition-fast);
}
.sidebar-hamburger:hover {
background-color: var(--surface-variant);
}
.sidebar-hamburger .material-symbols-rounded {
font-size: 28px;
}
/* ============================================
RESPONSIVE: SIDEBAR
============================================ */
/* Tablet: Sidebar standardmässig collapsed */
@media (max-width: 1024px) {
.app-shell {
grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}
.sidebar-hamburger {
display: flex;
}
.sidebar-label,
.sidebar-title {
opacity: 0;
width: 0;
overflow: hidden;
}
/* Section-Labels werden im schmalen Mode zu dünnen Trennstrichen
(gleiches Verhalten wie im Desktop-Collapsed-Modus). */
.sidebar-section-label {
height: 1px;
padding: 0;
margin: var(--spacing-sm) auto;
width: 24px;
background: var(--outline-variant);
color: transparent;
overflow: hidden;
font-size: 0;
}
.sidebar-section-label:first-child {
margin-top: var(--spacing-xs);
background: transparent;
}
.sidebar-logo {
display: none;
}
.sidebar-header {
justify-content: center;
padding: var(--spacing-lg) var(--spacing-xs);
}
.sidebar-item {
justify-content: center;
padding: 10px;
}
.sidebar-user {
justify-content: center;
}
.sidebar-logout-btn {
justify-content: center;
padding: 8px;
}
.sidebar-collapse-btn {
display: none;
}
}
/* Sidebar-Overlay (Tablet + Mobile: Hamburger öffnet breite Sidebar) */
.sidebar-mobile-open .sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
z-index: 300;
}
.sidebar-mobile-open .sidebar-backdrop {
display: block;
}
.sidebar-mobile-open .sidebar-label,
.sidebar-mobile-open .sidebar-title {
opacity: 1;
width: auto;
}
.sidebar-mobile-open .sidebar-logo {
display: block;
}
.sidebar-mobile-open .sidebar-hamburger {
display: none;
}
.sidebar-mobile-open .sidebar-header {
justify-content: flex-start;
padding: var(--spacing-lg) var(--spacing-md);
}
.sidebar-mobile-open .sidebar-item {
justify-content: flex-start;
padding: 10px 12px;
}
.sidebar-mobile-open .sidebar-user {
justify-content: flex-start;
}
.sidebar-mobile-open .sidebar-logout-btn {
justify-content: flex-start;
padding: 8px 12px;
}
/* Section-Labels (Übersicht, Verwaltung, …) im Drawer als Text statt als Trennstrich. */
.sidebar-mobile-open .sidebar-section-label {
height: auto;
width: auto;
padding: 14px 12px 6px;
margin: 0;
background: transparent;
color: var(--on-surface-muted);
font-size: 0.6875rem;
overflow: visible;
}
.sidebar-mobile-open .sidebar-section-label:first-child {
padding-top: var(--spacing-xs);
background: transparent;
}
/* ============================================
MOBILE TOPBAR (≤768px) — ersetzt schmales Sidebar-Strip auf Handys.
Standardmässig versteckt; eingeblendet im Mobile-Media-Query weiter unten.
============================================ */
.mobile-topbar {
display: none;
position: sticky;
top: 0;
z-index: 199;
align-items: center;
gap: var(--spacing-sm);
height: 56px;
padding: 0 12px;
background: var(--surface-container-lowest);
border-bottom: 1px solid var(--outline-variant);
}
.mobile-topbar-hamburger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--on-surface);
cursor: pointer;
}
.mobile-topbar-hamburger:active {
background: var(--surface-container-low);
}
.mobile-topbar-hamburger .material-symbols-rounded {
font-size: 26px;
}
.mobile-topbar-logo {
height: 32px;
width: auto;
object-fit: contain;
}
.mobile-topbar-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.0625rem;
color: var(--on-surface);
letter-spacing: 0.01em;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* ============================================
PAGE LAYOUT (neue Views)
============================================ */
.page {
/* Curator-B: linksbündig, volle Breite */
max-width: none;
margin: 0;
padding: var(--spacing-lg);
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--on-surface-variant);
margin-bottom: var(--spacing-md);
}
.breadcrumb-link {
color: var(--on-surface-variant);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
color: var(--on-surface);
text-decoration: underline;
}
.breadcrumb-sep {
color: var(--on-surface-variant);
opacity: 0.5;
}
.breadcrumb-current {
color: var(--on-surface);
font-weight: 500;
}
/* Page Header (Curator-B Variant B) */
.page-header {
margin-bottom: var(--spacing-lg);
}
.page-header-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.page-title-block {
min-width: 0;
}
.page-title {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 500;
color: var(--on-surface);
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0;
}
.page-subtitle {
font-family: var(--font-display);
font-size: 0.875rem;
font-style: italic;
color: var(--on-surface-variant);
line-height: 1.5;
margin-top: 6px;
}
.page-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.page-divider {
height: 1px;
background: var(--outline-variant);
margin-top: var(--spacing-md);
}
/* Toolbar-Reihe unter der Trennlinie (Filter, Suche, View-Switcher) */
.page-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
flex-wrap: wrap;
}
/* Page Content */
.page-content {
margin-top: var(--spacing-lg);
}
/* ============================================
RESPONSIVE TABLE + CARDS
============================================ */
.responsive-table-wrapper {
width: 100%;
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
box-shadow: var(--shadow-ambient);
overflow: hidden;
}
/* Wenn die Tabelle bereits in einer Card sitzt, kein doppelter Rahmen */
.detail-card .responsive-table-wrapper,
.dashboard-card .responsive-table-wrapper,
.card .responsive-table-wrapper,
.modal-body .responsive-table-wrapper {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
/* Desktop: Table — Curator-B Stil */
.data-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 0.8125rem;
}
.data-table thead th {
background-color: var(--surface-container-low);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
padding: 10px 16px;
text-align: left;
white-space: nowrap;
}
.data-table tbody tr {
height: 48px;
border-bottom: none;
transition: background-color var(--t-fast);
}
.data-table tbody td {
padding: 12px 16px;
color: var(--on-surface);
vertical-align: middle;
}
.data-table.zebra tbody tr:nth-child(even) {
background-color: var(--surface-container-low);
}
.data-table tbody tr:hover {
background-color: var(--accent-beige) !important;
}
/* Numerische Spalten rechtsbündig + tabular-nums */
.data-table td.num,
.data-table th.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.data-table tbody tr.clickable {
cursor: pointer;
}
/* Heutige Zeile hervorheben */
.data-table tbody tr.row-heute {
background-color: var(--accent-beige) !important;
}
.data-table tbody tr.row-heute td:first-child {
box-shadow: inset 3px 0 0 var(--primary-dark);
}
.responsive-card.row-heute {
background-color: var(--accent-beige);
border-left: 3px solid var(--primary-dark);
}
/* Auswahl-Modus Kurstage (Kurs-Detail): Mehrfachauswahl */
.auswahl-info {
font-weight: 600;
color: var(--on-surface);
}
.auswahl-checkbox {
pointer-events: none;
accent-color: var(--primary-medium);
}
/* Kopf-Checkbox "Alle auswählen": muss selbst klickbar sein (eigener Handler) */
.auswahl-checkbox-alle {
pointer-events: auto;
cursor: pointer;
}
/* Nach .row-heute platziert, damit eine ausgewählte heutige Zeile als ausgewählt erscheint */
.data-table tbody tr.row-ausgewaehlt {
background-color: var(--info-bg) !important;
}
.data-table tbody tr.row-ausgewaehlt td:first-child {
box-shadow: inset 3px 0 0 var(--primary-medium);
}
.responsive-card.row-ausgewaehlt {
background-color: var(--info-bg);
border-left: 3px solid var(--primary-medium);
}
/* Verschieben-Modal: Vorschau */
.verschieben-vorschau {
max-height: 280px;
overflow-y: auto;
margin-top: var(--spacing-md);
border-top: 1px solid var(--outline-variant);
padding-top: var(--spacing-sm);
}
.verschieben-vorschau-zeile {
padding: var(--spacing-xs) 0;
font-variant-numeric: tabular-nums;
}
.verschieben-warnung {
color: var(--warning);
font-size: 0.85em;
}
.verschieben-warnung .material-symbols-rounded {
font-size: 1em;
vertical-align: text-bottom;
}
/* Mobile: Cards (standardmässig versteckt) */
.responsive-cards {
display: none;
}
/* Empty State (Curator-B Rezept 6) */
.empty-state {
padding: 48px 24px;
text-align: center;
color: var(--on-surface-variant);
font-size: 0.875rem;
}
.empty-state-icon {
display: inline-flex;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--surface-container-low);
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--primary-dark);
margin-bottom: 16px;
}
.empty-state-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--on-surface);
margin-bottom: 6px;
}
.empty-state-text {
font-size: 0.8125rem;
max-width: 360px;
margin: 0 auto 20px;
line-height: 1.5;
}
/* ============================================
SKELETON (Curator-B Rezept 7) — Loading-Zustände
============================================ */
.skeleton-bar {
display: inline-block;
height: 12px;
border-radius: var(--radius-sm);
background: linear-gradient(
90deg,
var(--surface-container-low) 0%,
var(--surface-variant) 50%,
var(--surface-container-low) 100%
);
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-row td {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* ============================================
TOAST-STACK (Curator-B Rezept 8)
============================================ */
#toast-stack {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
display: flex;
flex-direction: column-reverse;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-left: 3px solid var(--primary-dark);
border-radius: var(--radius-md);
padding: 12px 16px;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
min-width: 280px;
max-width: 420px;
animation: toast-in 0.25s ease-out;
}
.toast-success { border-left-color: var(--success); }
.toast-warning { border-left-color: var(--warning); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--primary-dark); }
.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-error .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--primary-dark); }
.toast-text { flex: 1; color: var(--on-surface); }
.toast-close {
background: none;
border: none;
cursor: pointer;
color: var(--on-surface-muted);
font-size: 18px;
padding: 2px;
border-radius: var(--radius-sm);
transition: background var(--t-fast);
}
.toast-close:hover {
background: var(--surface-container-low);
}
@keyframes toast-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) {
#toast-stack {
bottom: 16px;
right: 16px;
left: 16px;
}
.toast {
min-width: 0;
max-width: none;
}
}
/* Responsive Card Styles */
.responsive-card {
background: var(--surface-container-lowest);
border-radius: var(--radius-md);
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-md);
border-left: 3px solid var(--primary-dark);
}
.responsive-card.clickable {
cursor: pointer;
transition: background-color var(--transition-fast);
}
.responsive-card.clickable:hover {
background-color: var(--accent-beige);
}
.responsive-card-field {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 3px 0;
font-size: 0.8125rem;
}
.responsive-card-field.primary {
font-size: 1rem;
font-weight: 600;
color: var(--on-surface);
padding-bottom: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
}
.responsive-card-label {
color: var(--on-surface-variant);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
margin-right: var(--spacing-sm);
}
.responsive-card-value {
text-align: right;
color: var(--on-surface);
}
/* === Compact-Card-Modus (Mobile, opt-in via mobileCard-Option in renderResponsiveTable) ===
Flache Termin-Reihen mit Trennstrich statt Card-Wrapper. Hauptzeile + Subline.
Aktiviert primär für Datums-Listen wie Dashboard «Nächste Kurstage» und Seite Kurstage. */
.responsive-card.compact {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 4px;
margin-bottom: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--outline-variant);
border-radius: 0;
box-shadow: none;
}
.responsive-card.compact:last-child {
border-bottom: none;
}
/* Heute-Hervorhebung: dezenter Akzent links statt vollflächigem Hintergrund. */
.responsive-card.compact.row-heute {
background: transparent;
border-left: 3px solid var(--primary-dark);
padding-left: 8px;
}
/* Auswahl-Hervorhebung (Mehrfachauswahl, Compact-Card): gleiche Spezifität wie .compact-Regeln */
.responsive-card.compact.row-ausgewaehlt {
background: var(--info-bg);
border-left: 3px solid var(--primary-medium);
padding-left: 8px;
}
/* Optionale Leading-Spalte (z.B. Time) links neben dem Body — eigene fixe Spalte,
damit die Subline unter dem Titel beginnt, nicht unter der Leading-Spalte. */
.responsive-card.compact .responsive-card-leading {
flex: 0 0 auto;
min-width: 42px;
align-self: flex-start;
padding-top: 1px;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.875rem;
color: var(--on-surface);
}
.responsive-card.compact .responsive-card-body {
flex: 1;
min-width: 0;
}
.responsive-card.compact .responsive-card-primary {
font-size: 0.875rem;
font-weight: 500;
color: var(--on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.responsive-card.compact .responsive-card-secondary {
margin-top: 1px;
font-size: 0.75rem;
color: var(--on-surface-variant);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Footer-Slot für Block-Inhalte (z.B. Progress-Bar) — keine Ellipsis-Beschränkung. */
.responsive-card.compact .responsive-card-footer {
margin-top: 6px;
font-size: 0.75rem;
color: var(--on-surface-variant);
}
.responsive-card.compact .responsive-card-chevron {
flex-shrink: 0;
color: var(--on-surface-muted);
font-size: 18px;
}
/* Datums-Gruppen-Header für gruppierte Mobile-Listen (groupBy-Option). */
.responsive-card-group-header {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
padding: 12px 4px 6px;
margin-top: var(--spacing-sm);
border-bottom: 1px solid var(--outline-variant);
}
.responsive-card-group-header:first-child {
margin-top: 0;
}
.responsive-card-group-header .group-primary {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.25rem;
line-height: 1;
color: var(--on-surface);
}
.responsive-card-group-header .group-secondary {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--on-surface-muted);
}
.responsive-card-group-header .group-meta {
margin-left: auto;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--accent-beige);
color: var(--primary-dark);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Badges */
/* Badges (Curator-B) — Pille mit optionalem Farbpunkt via [data-dot] */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
padding: 3px 10px;
border-radius: var(--radius-full);
}
.badge[data-dot]::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.badge-success {
background-color: var(--success-bg);
color: var(--success);
}
.badge-danger {
background-color: var(--danger-bg);
color: var(--danger);
}
.badge-warning {
background-color: var(--warning-bg);
color: var(--warning);
}
.badge-info {
background-color: var(--info-bg);
color: var(--primary-medium);
}
.badge-neutral {
background-color: var(--surface-container-highest);
color: var(--on-surface-variant);
}
.badge-active {
background-color: var(--primary-dark);
color: var(--white);
}
/* Editorial accent — fuer Rabatt-Badges am Kurs */
.badge-rabatt {
background-color: var(--editorial-accent-bg);
color: var(--editorial-accent);
}
/* Klickbare Badge-Variante (z.B. "abw. Rechnung") */
.badge-clickable {
cursor: pointer;
border: 1px dashed var(--outline-variant);
transition: background var(--t-fast);
}
.badge-clickable:hover {
background-color: var(--info-bg);
}
/* ============================================
DASHBOARD
============================================ */
/* Dashboard Subtitle */
.dashboard-subtitle {
display: block;
font-size: 0.8125rem;
color: var(--on-surface-variant);
margin-top: -4px;
margin-bottom: var(--spacing-sm);
}
.dashboard-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-ambient);
}
.dashboard-card-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.dashboard-card-title {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 500;
color: var(--on-surface);
margin: 0;
}
.dashboard-card-body {
padding: 0;
}
.dashboard-anwesenheiten {
padding: 0;
border-color: var(--warning);
border-left-width: 3px;
overflow: hidden;
}
.dashboard-anwesenheiten .dashboard-card-header {
background: var(--warning-bg);
padding: var(--sp-3) var(--sp-4);
margin-bottom: 0;
}
.dashboard-anwesenheiten .dashboard-card-title {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.dashboard-anwesenheiten .dashboard-card-title .material-symbols-rounded {
color: var(--warning);
font-size: 1.125rem;
}
.dashboard-anwesenheiten-liste .data-table thead {
/* Spalten bleiben für Screenreader benannt, ohne zusätzliche Kopfzeile. */
clip-path: inset(50%);
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
.dashboard-anwesenheiten-liste .data-table td {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--outline-variant);
}
.dashboard-anwesenheiten-liste .data-table td:first-child {
width: 140px;
white-space: nowrap;
}
.dashboard-anwesenheiten-liste .data-table td:last-child {
text-align: right;
}
.dashboard-anwesenheiten-kurs {
appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
padding: 0;
cursor: pointer;
}
.dashboard-anwesenheiten-detail {
display: block;
color: var(--on-surface-variant);
font-size: 0.75rem;
font-weight: 400;
}
.dashboard-anwesenheiten-liste .responsive-card.compact {
padding: var(--sp-3) var(--sp-4);
}
.dashboard-anwesenheiten-liste .responsive-card-primary,
.dashboard-anwesenheiten-liste .responsive-card-secondary {
white-space: normal;
}
.dashboard-anwesenheiten-mehr {
margin: var(--sp-2) var(--sp-4);
}
.dashboard-filter {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.dashboard-radio-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8125rem;
font-weight: 400;
color: var(--on-surface-variant);
cursor: pointer;
}
.table-cell-sub {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
.mini-progress-bar {
height: 4px;
background: var(--outline-variant);
border-radius: 2px;
overflow: hidden;
}
.mini-progress-fill {
height: 100%;
background: var(--primary-dark);
border-radius: 2px;
transition: width 0.3s ease;
}
.mini-progress-fill.mini-progress-complete {
background: var(--success);
}
.mini-progress-fill.mini-progress-full {
background: var(--warning);
}
.stat-progress-bar {
height: 4px;
background: var(--outline-variant);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.stat-progress-fill {
height: 100%;
background: var(--primary-dark);
border-radius: 2px;
transition: width 0.4s ease;
}
/* Geburtstage-Leiste über der Tabelle */
.dashboard-geburtstage-leiste {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.text-secondary {
color: var(--on-surface-variant);
font-size: 0.8125rem;
}
.text-center {
text-align: center;
}
/* ============================================
RESPONSIVE: PAGE + TABLE
============================================ */
@media (max-width: 768px) {
.page {
padding: var(--spacing-md);
}
.page-title {
font-size: 1.375rem;
}
.page-toolbar {
flex-direction: column;
align-items: stretch;
}
/* Tabelle verstecken, Cards anzeigen */
.responsive-table-wrapper .data-table {
display: none;
}
.responsive-cards {
display: block;
}
/* Auf Mobile haben einzelne .responsive-card schon eigene Card-Optik
— Wrapper-Border würde Card-in-Card geben, also weg */
.responsive-table-wrapper {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.hide-mobile {
display: none;
}
/* Sidebar komplett ausblenden, Mobile-Topbar einblenden.
Sidebar bleibt im DOM und wird via .sidebar-mobile-open als Drawer-Overlay
wieder eingeblendet (siehe weiter oben). */
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
.sidebar-mobile-open .sidebar {
display: flex;
}
.mobile-topbar {
display: flex;
}
}
/* Content */
.content {
padding: var(--spacing-xl) 0;
}
/* Cards (generisch — Curator-B-Basis-Stil) */
.card {
background-color: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: var(--shadow-ambient);
transition: box-shadow var(--t-fast);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
background-color: var(--surface-container-low);
margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.card-header h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
color: var(--primary-dark);
margin: 0;
}
.card-body {
/* Hauptinhalt der Card */
}
/* Toolbar */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
}
.toolbar-left, .toolbar-right {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
/* Search (Curator-B) */
.search-box {
position: relative;
flex: 1;
min-width: 200px;
max-width: 400px;
}
.search-box input {
width: 100%;
padding: 8px 12px 8px 36px;
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--on-surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.10);
}
.search-box::before {
content: 'search';
font-family: 'Material Symbols Rounded';
font-size: 18px;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--on-surface-muted);
pointer-events: none;
}
/* Filter-Chips (Curator-B Rezept 10) — additiv, neue Komponente.
Verwendung: */
.filter-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
color: var(--on-surface-variant);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--t-fast);
}
.chip:hover {
border-color: var(--outline-strong);
color: var(--on-surface);
}
.chip.is-active {
background: var(--primary-dark);
color: var(--white);
border-color: var(--primary-dark);
}
.chip .count {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
font-size: 0.6875rem;
color: var(--on-surface-muted);
}
.chip.is-active .count {
color: rgba(255, 255, 255, 0.75);
}
/* Forms */
.form-group {
margin-bottom: var(--spacing-md);
}
.form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 500;
color: var(--primary-dark);
}
.form-label.required::after {
content: ' *';
color: var(--danger);
}
.form-control {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
background: var(--surface-container-lowest);
font-size: 0.875rem;
font-family: var(--font-body);
color: var(--on-surface);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}
.form-control[readonly] {
background-color: var(--bg-light);
cursor: not-allowed;
}
textarea.form-control {
min-height: 100px;
resize: vertical;
}
select.form-control {
cursor: pointer;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
/* Im Slide-Over (Body ~500px) reicht 250px-Minimum nicht für 2 Spalten */
.slide-over-body .form-row {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Inline-Radio-Labels (z.B. Richtungswahl im Verschieben-Modal) */
.radio-inline {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
margin-right: var(--spacing-md);
font-weight: normal;
cursor: pointer;
}
/* Form Sections */
.form-section {
background-color: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: var(--shadow-ambient);
}
.form-section:last-child {
margin-bottom: 0;
}
.modal-body .form-section {
border: none;
padding: 0;
background: none;
box-shadow: none;
}
.form-section-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--on-surface);
margin: 0 0 var(--spacing-md) 0;
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--outline-variant);
}
/* Flex-based form row (for proportional columns) */
.form-row-flex {
display: flex;
gap: var(--spacing-md);
}
@media (max-width: 768px) {
.form-row-flex {
flex-direction: column;
}
}
/* Flex utility classes for form layouts */
.flex-3 { flex: 3; }
.flex-2 { flex: 2; }
.flex-1 { flex: 1; }
.max-w-120 { max-width: 120px; }
.max-w-200 { max-width: 200px; }
.ml-2 { margin-left: 0.5rem; }
/* Logo previews in settings */
.logo-preview {
max-height: 60px;
padding: 10px;
border-radius: 4px;
}
.logo-preview-dark {
background: var(--primary-dark);
}
.logo-preview-light {
background: var(--surface-container-lowest);
border: 1px solid var(--border-color);
}
/* SMTP fields toggle transition */
.smtp-fields {
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
max-height: 600px;
opacity: 1;
}
.smtp-fields.hidden {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.checkbox-group {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
/* Tables — Curator-B Stil (gilt auch für Ad-hoc-s ohne .data-table-Klasse) */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
background-color: var(--surface-container-lowest);
font-family: var(--font-body);
font-size: 0.8125rem;
}
thead {
background-color: var(--surface-container-low);
color: var(--on-surface-variant);
}
thead th {
padding: 10px var(--spacing-md);
text-align: left;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
tbody tr {
border-bottom: 1px solid var(--outline-variant);
transition: background-color var(--t-fast);
}
tbody tr:hover {
background-color: var(--accent-beige);
}
tbody td {
padding: var(--spacing-md);
color: var(--on-surface);
}
.table-actions {
display: flex;
gap: var(--spacing-xs);
white-space: nowrap;
}
/* Stats/Dashboard */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
/* Stat-Cards Grid + Cards (verwendet in Kurs-Detail-Ansicht) */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.stat-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
box-shadow: var(--shadow-ambient);
}
.stat-card-icon {
font-size: 32px;
color: var(--primary-dark);
flex-shrink: 0;
}
.stat-card-info {
min-width: 0;
}
.stat-card-value {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 500;
color: var(--on-surface);
line-height: 1.2;
}
.stat-card-label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
margin-top: 2px;
}
/* Modals */
/* Modal (Curator-B Rezept 12) */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 43, 35, 0.45);
backdrop-filter: blur(2px);
z-index: 1000;
overflow-y: auto;
padding: var(--spacing-lg);
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
animation: modalBackdropIn 0.25s ease-out;
}
@keyframes modalBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background-color: var(--surface-container-lowest);
border-radius: var(--radius-lg);
max-width: 800px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
animation: slideIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes slideIn {
from { transform: translateY(8px) scale(0.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-header {
padding: var(--spacing-md) var(--spacing-lg);
background-color: var(--surface);
border-bottom: 1px solid var(--outline-variant);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-sm);
flex-shrink: 0;
}
.modal-header h2 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--on-surface);
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--on-surface-muted);
transition: background-color var(--t-fast), color var(--t-fast);
flex-shrink: 0;
}
.modal-close:hover {
color: var(--on-surface);
background-color: var(--surface-container-low);
}
.modal-body {
padding: var(--spacing-lg);
color: var(--on-surface);
line-height: 1.55;
flex: 1;
overflow-y: auto;
min-height: 0;
}
.modal-footer {
padding: var(--spacing-md) var(--spacing-lg);
background-color: var(--surface);
border-top: 1px solid var(--outline-variant);
display: flex;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
}
/* Alerts */
.alert {
padding: var(--spacing-md);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-md);
}
.alert-success {
background-color: rgba(93, 115, 101, 0.10);
color: var(--success);
}
.alert-danger {
background-color: rgba(215, 58, 48, 0.10);
color: var(--danger);
}
.alert-warning {
background-color: rgba(152, 133, 100, 0.10);
color: var(--warning);
}
.alert-info {
background-color: rgba(93, 115, 101, 0.10);
color: var(--primary-medium);
}
/* Login Page */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
padding: var(--spacing-lg);
}
.login-card {
background-color: var(--white);
border-radius: 8px;
padding: var(--spacing-xl);
box-shadow: var(--shadow-lg);
max-width: 400px;
width: 100%;
}
.login-card h1 {
font-family: var(--font-main);
font-size: 1.1rem;
font-weight: 400;
color: var(--primary-dark);
text-align: center;
margin-bottom: var(--spacing-xl);
}
.login-logo {
display: block;
margin: 0 auto var(--spacing-lg) auto;
max-width: 200px;
width: 100%;
height: auto;
object-fit: contain;
}
/* Responsive */
@media (max-width: 768px) {
.login-logo {
max-width: 150px;
}
.card {
padding: var(--spacing-md);
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.toolbar,
.page-toolbar {
flex-direction: column;
align-items: stretch;
}
/* Page-Actions auf Mobile: volle Breite, Filter stretchen */
.page-actions {
width: 100%;
justify-content: flex-start;
}
.page-actions input[type="text"],
.page-actions input[type="search"],
.page-actions select {
flex: 1;
min-width: 0;
}
.toolbar-left, .toolbar-right {
width: 100%;
}
.search-box {
max-width: none;
}
.table-container {
margin: 0 calc(-1 * var(--spacing-md));
}
table {
font-size: 0.8rem;
min-width: 500px;
}
thead th, tbody td {
padding: var(--spacing-sm);
}
.stats-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.modal {
padding: var(--spacing-sm);
}
.modal-content {
max-height: 95vh;
}
.btn-sm {
min-height: 36px;
min-width: 36px;
}
}
/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--accent-gray); opacity: 0.7; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.flex-wrap { flex-wrap: wrap; }
/* Extra grosse Modals */
.modal-xl {
max-width: 1200px;
width: 95%;
}
/* Grosse Modals */
.modal-lg {
max-width: 900px;
width: 90%;
}
/* Hover-Effekte für klickbare Zeilen */
tr[style*="cursor: pointer"]:hover {
background-color: var(--accent-beige);
}
@media (max-width: 768px) {
.modal-xl, .modal-lg {
width: 95%;
max-width: none;
}
}
/* Responsive Spalten-Klassen */
@media (max-width: 768px) {
.hide-tablet {
display: none !important;
}
}
/* Smartphone-Optimierung */
@media (max-width: 480px) {
.hide-mobile {
display: none !important;
}
table {
font-size: 0.75rem;
min-width: 400px;
}
thead th, tbody td {
padding: 4px 6px;
}
.modal {
padding: 0;
}
.modal-content, .modal-xl, .modal-lg {
width: 100%;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
}
.modal-header, .modal-body, .modal-footer {
padding: var(--spacing-md);
}
}
/* ============================================
KALENDER-ANSICHT (Stundenplan-Style)
============================================ */
.calendar-week-nav {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-family: var(--font-body);
font-size: 0.875rem;
}
/* Grid Container */
.calendar-grid {
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-container-lowest);
box-shadow: var(--shadow-ambient);
}
/* Tages-Header */
.calendar-header {
display: grid;
grid-template-columns: 80px repeat(7, 1fr);
background: var(--surface-container-low);
border-bottom: 1px solid var(--outline-variant);
}
.calendar-day-header {
padding: var(--spacing-sm) var(--spacing-xs);
text-align: center;
min-width: 0;
overflow: hidden;
border-left: 1px solid var(--outline-variant);
}
.calendar-day-header:first-child {
background: transparent;
border-left: none;
}
.day-name {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--on-surface);
margin-bottom: 2px;
}
.day-date {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 400;
color: var(--on-surface-variant);
}
/* Kalender-Body */
.calendar-body {
position: relative;
}
.calendar-row {
display: grid;
grid-template-columns: 80px repeat(7, 1fr);
height: 40px;
border-bottom: 1px solid var(--outline-variant);
}
.calendar-row:last-child {
border-bottom: none;
}
/* Zeit-Labels */
.time-label {
padding: 0 var(--spacing-sm);
text-align: right;
font-family: var(--font-body);
font-weight: 400;
font-size: 0.75rem;
color: var(--on-surface-muted);
display: flex;
align-items: center;
justify-content: flex-end;
background: var(--surface-container-lowest);
}
/* Zellen mit vertikalen Trennlinien — auch Mo-Zelle bekommt Border-Left
(der bildet die Trennung zwischen Zeitspalte und Mo, analog zum Header). */
.calendar-cell {
border-left: 1px solid var(--outline-variant);
}
/* Event-Layer */
.calendar-events-layer {
position: absolute;
top: 0;
left: 80px;
right: 0;
bottom: 0;
pointer-events: none;
}
.calendar-events-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
height: 100%;
position: relative;
}
.calendar-day-events {
position: relative;
pointer-events: auto;
}
/* Event-Blöcke */
.calendar-event {
padding: var(--spacing-xs) var(--spacing-sm);
margin: 0 2px;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.75rem;
line-height: 1.3;
overflow: hidden;
z-index: 1;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.calendar-event:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
z-index: 100 !important;
}
.event-title {
font-weight: 600;
font-size: 0.75rem;
margin-bottom: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-time {
font-weight: 500;
font-size: 0.6875rem;
margin-bottom: 1px;
}
.event-lehrer {
font-size: 0.6875rem;
opacity: 0.85;
}
.event-room {
font-size: 0.6875rem;
font-weight: 600;
opacity: 0.85;
}
/* Event-Farben (pastellig mit Accent-Streifen) */
:root {
--event-blue-bg: #dce4f5; --event-blue-fg: #2c4277; --event-blue-accent: #4361a5;
--event-green-bg: #d4e8dc; --event-green-fg: #1e5437; --event-green-accent: #2e7d53;
--event-orange-bg: #f5dece; --event-orange-fg: #8a3a00; --event-orange-accent: #c75400;
--event-purple-bg: #ead8f0; --event-purple-fg: #52296b; --event-purple-accent: #7b3fa0;
--event-teal-bg: #d0e8e8; --event-teal-fg: #0f5252; --event-teal-accent: #1a7a7a;
--event-rose-bg: #f0d4de; --event-rose-fg: #752040; --event-rose-accent: #b03060;
--event-amber-bg: #ede0c4; --event-amber-fg: #5c4800; --event-amber-accent: #8a6d00;
--event-indigo-bg: #d8ddf0; --event-indigo-fg: #262f6e; --event-indigo-accent: #3949ab;
--event-cyan-bg: #cce5e2; --event-cyan-fg: #004d45; --event-cyan-accent: #00796b;
--event-lime-bg: #dde8cf; --event-lime-fg: #385c1f; --event-lime-accent: #558b2f;
}
.event-blue { background: var(--event-blue-bg); color: var(--event-blue-fg); border-left: 3px solid var(--event-blue-accent); }
.event-green { background: var(--event-green-bg); color: var(--event-green-fg); border-left: 3px solid var(--event-green-accent); }
.event-orange { background: var(--event-orange-bg); color: var(--event-orange-fg); border-left: 3px solid var(--event-orange-accent); }
.event-purple { background: var(--event-purple-bg); color: var(--event-purple-fg); border-left: 3px solid var(--event-purple-accent); }
.event-teal { background: var(--event-teal-bg); color: var(--event-teal-fg); border-left: 3px solid var(--event-teal-accent); }
.event-rose { background: var(--event-rose-bg); color: var(--event-rose-fg); border-left: 3px solid var(--event-rose-accent); }
.event-amber { background: var(--event-amber-bg); color: var(--event-amber-fg); border-left: 3px solid var(--event-amber-accent); }
.event-indigo { background: var(--event-indigo-bg); color: var(--event-indigo-fg); border-left: 3px solid var(--event-indigo-accent); }
.event-cyan { background: var(--event-cyan-bg); color: var(--event-cyan-fg); border-left: 3px solid var(--event-cyan-accent); }
.event-lime { background: var(--event-lime-bg); color: var(--event-lime-fg); border-left: 3px solid var(--event-lime-accent); }
/* Dimmed-State fuer gefilterte Events */
.event-dimmed {
opacity: 0.15;
pointer-events: none;
}
/* Filterleiste */
.wochenplan-filter-bar {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
margin-bottom: var(--spacing-sm);
padding: var(--spacing-xs) 0;
}
.filter-group {
display: flex;
align-items: center;
gap: var(--spacing-xs);
flex-wrap: wrap;
}
.filter-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-right: 2px;
}
.filter-btn {
padding: 6px 12px;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--on-surface-variant);
cursor: pointer;
transition: all var(--t-fast);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.filter-btn:hover {
border-color: var(--outline-strong);
color: var(--on-surface);
}
.filter-btn.active {
background: var(--primary-dark);
color: var(--white);
border-color: var(--primary-dark);
}
/* Geburtstags-Banner */
.birthday-banner {
background: var(--warning);
color: white;
border-radius: var(--radius-sm);
padding: 2px var(--spacing-xs);
font-family: var(--font-body);
font-size: 0.6875rem;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap: 2px;
}
.birthday-banner .material-symbols-rounded {
font-size: 1.1em;
}
/* Kalender-Abo Feed-Liste (Profil-Drawer, Benutzer-Drawer, Teilnehmer-Profil, Dashboard) */
.kalender-abo-hinweis {
font-size: 0.85em;
}
.feed-row {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) 0;
}
.feed-row + .feed-row {
border-top: 1px solid var(--outline-variant);
}
.feed-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--surface-container-low);
color: var(--primary-dark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feed-icon .material-symbols-rounded {
font-size: 20px;
}
.feed-text {
flex: 1;
min-width: 0;
}
.feed-title {
font-weight: 600;
font-size: 0.9rem;
color: var(--on-surface);
}
.feed-desc {
font-size: 0.8rem;
color: var(--on-surface-variant);
margin-top: 1px;
}
.feed-actions {
display: flex;
gap: var(--spacing-xs);
flex-shrink: 0;
}
.feed-actions .material-symbols-rounded {
font-size: 16px;
}
/* Profil-/Benutzer-Drawer Header (Avatar + Name + Meta, Kurstag-Panel-Stil) */
.profil-header-flex {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.profil-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--primary-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.1rem;
flex-shrink: 0;
}
.profil-sub {
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--on-surface-variant);
margin-top: 2px;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.profil-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
margin-top: var(--spacing-xs);
font-size: 0.85rem;
color: var(--on-surface-variant);
}
.profil-meta .material-symbols-rounded {
font-size: 16px;
vertical-align: middle;
}
/* Responsive: Tablet */
@media (max-width: 1024px) {
.calendar-header,
.calendar-row {
grid-template-columns: 60px repeat(7, 1fr);
}
.calendar-events-layer {
left: 60px;
}
.calendar-event {
font-size: 0.6875rem;
padding: 2px var(--spacing-xs);
}
}
/* Responsive: Mobile */
@media (max-width: 768px) {
.calendar-header,
.calendar-row {
grid-template-columns: 50px repeat(5, 1fr);
}
.calendar-events-layer {
left: 50px;
}
.calendar-day-header:nth-child(7),
.calendar-day-header:nth-child(8),
.calendar-day-events:nth-child(6),
.calendar-day-events:nth-child(7) {
display: none;
}
.calendar-event {
font-size: 0.625rem;
padding: 2px;
}
.event-lehrer,
.event-room {
display: none;
}
.birthday-banner {
font-size: 0.625rem;
}
.wochenplan-filter-bar {
flex-direction: column;
gap: var(--spacing-xs);
}
}
/* Utility Classes */
.text-muted-light { color: var(--on-surface-variant); opacity: 0.6; }
.text-muted-medium { color: var(--on-surface-variant); }
.text-muted-dark { color: var(--on-surface-variant); font-size: 0.9em; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary-dark); }
.cursor-pointer { cursor: pointer; }
.section-heading {
margin-top: 1.5rem;
margin-bottom: 1rem;
color: var(--primary-dark);
}
.card-beige {
background-color: var(--accent-beige);
border: none;
}
.card-header-dark {
background-color: var(--primary-dark);
color: #fff;
}
.badge-abgemeldet {
background-color: rgba(152, 133, 100, 0.15);
color: var(--warning);
font-size: 0.75em;
padding: 2px 6px;
border-radius: 3px;
}
.status-icon { font-size: 16px; }
.inline-form-group {
display: inline-block;
margin-bottom: 0;
}
.label-normal {
margin-right: 10px;
font-weight: normal;
}
.row-inactive {
opacity: 0.5;
background-color: var(--surface);
}
.search-results-dropdown {
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
max-height: 200px;
overflow-y: auto;
display: none;
position: absolute;
left: 0;
right: 0;
background: var(--surface-container-lowest);
z-index: 1000;
margin-top: 2px;
box-shadow: var(--shadow-lg);
box-sizing: border-box;
}
.autocomplete-item {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid var(--surface-container-low);
}
.no-results {
padding: 10px;
color: var(--on-surface-variant);
}
.stat-box {
flex: 1;
min-width: 120px;
padding: 10px;
border-radius: 5px;
text-align: center;
}
.stat-box-beige { background-color: var(--accent-beige); }
.stat-box-blue { background-color: rgba(93, 115, 101, 0.08); }
.stat-box-green { background-color: var(--primary-medium); color: #fff; }
.stat-box-label { font-size: 0.75em; color: var(--on-surface-variant); margin-bottom: 3px; }
.stat-box-green .stat-box-label { color: inherit; }
.stat-box-value { font-size: 1.5em; font-weight: bold; }
.stat-box-beige .stat-box-value { color: var(--primary-dark); }
.stat-box-blue .stat-box-value { color: var(--primary-dark); }
.tfoot-summary {
border-top: 2px solid var(--primary-dark);
font-weight: bold;
}
.warning-box {
background-color: rgba(152, 133, 100, 0.10);
border-radius: var(--radius-sm);
border: 1px solid var(--warning);
}
.toolbar-section {
border-bottom: 1px solid var(--surface-container-low);
padding-bottom: 10px;
}
.badge-inaktiv {
color: var(--danger);
font-size: 0.8em;
margin-left: 5px;
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 2px solid var(--primary-medium);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--primary-medium);
outline-offset: 2px;
}
.modal-close:focus-visible {
outline: 2px solid white;
outline-offset: -2px;
}
/* Anwesenheit Icon-Buttons */
.anw-status-btns {
display: inline-flex;
gap: 4px;
}
.anw-btn {
border: 1px solid var(--outline-variant);
background: var(--surface);
border-radius: var(--radius-sm);
width: 32px;
height: 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.anw-btn .material-symbols-rounded {
font-size: 18px;
}
.anw-btn:hover {
background: var(--surface-variant);
}
.anw-btn-yes.active {
background: var(--success);
color: #fff;
border-color: var(--success);
}
.anw-btn-yes.active:hover {
background: var(--primary-dark);
}
.anw-btn-no.active {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.anw-btn-no.active:hover {
background: #c0392b;
}
/* ============================================
MODAL SUBTITLE & KURSTAG-DETAILS COLLAPSE
============================================ */
.modal-subtitle {
font-size: 0.85rem;
font-weight: 400;
color: var(--on-surface-variant);
margin-top: 4px;
font-family: var(--font-body, sans-serif);
}
.modal-subtitle .material-symbols-rounded {
font-size: 16px;
vertical-align: middle;
margin-right: 2px;
}
.kurstag-details-collapse {
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
margin-bottom: 1.25rem;
background: var(--bg-light, #faf8f6);
}
.kurstag-details-collapse summary {
padding: 10px 16px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--primary-dark, #47584e);
list-style: none;
display: flex;
align-items: center;
gap: 4px;
user-select: none;
transition: background 0.15s;
border-radius: 8px;
}
.kurstag-details-collapse summary:hover {
background: rgba(0, 0, 0, 0.03);
}
.kurstag-details-collapse summary::-webkit-details-marker {
display: none;
}
.kurstag-details-collapse summary::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
margin-left: auto;
transition: transform 0.2s;
}
.kurstag-details-collapse[open] summary::after {
transform: rotate(180deg);
}
.kurstag-details-collapse[open] summary {
border-bottom: 1px solid var(--border-color, #ddd);
border-radius: 8px 8px 0 0;
}
.kurstag-details-body {
padding: 16px;
}
/* Sperrtag-Icons (Feiertage, Schulferien, Betriebsferien) */
.sperrtag-icon {
font-size: 16px;
vertical-align: middle;
cursor: default;
position: relative;
}
.sperrtag-icon[data-tip]:hover::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
white-space: nowrap;
z-index: 1000;
pointer-events: none;
}
.sperrtag-feiertag { color: var(--danger); }
.sperrtag-schulferien { color: var(--success); }
.sperrtag-betriebsferien { color: var(--primary-medium); }
/* ============================================
Kursbericht-Erfassung: Bewertungskriterien
============================================ */
.kb-kriterium-block { margin-bottom: 16px; }
.kb-kriterium-label { background: var(--accent-beige); padding: 6px 12px; font-weight: 500; border-radius: 4px; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-dark); }
.kb-optionen-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px; }
.kb-option-badge { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); background: white; cursor: pointer; font-size: 0.88rem; color: var(--text-dark); transition: all 0.15s; font-family: inherit; }
.kb-option-badge.selected { background: var(--primary-dark); color: white; border-color: var(--primary-dark); font-weight: 500; }
.kb-option-badge:hover:not(.selected) { border-color: var(--primary-medium); background: var(--accent-beige); }
/* ============================================
Kursbericht-Erfassung: Lernziele
============================================ */
.kb-lernziele-list { display: flex; flex-direction: column; }
.kb-lernziel-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.kb-lernziel-row .kb-lz-bezeichnung { flex: 1; }
.kb-lz-circles { display: flex; gap: 8px; flex-shrink: 0; }
.kb-lz-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--primary-dark); cursor: pointer; transition: background 0.15s; box-sizing: border-box; }
.kb-lz-circle.filled { background: var(--primary-dark); }
.kb-lz-circle:hover { opacity: 0.7; }
/* ============================================
DETAIL PAGES (Teilnehmer-Detail etc.)
============================================ */
.detail-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: var(--shadow-ambient);
}
.detail-card-title {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
font-weight: 500;
color: var(--on-surface);
margin: 0 0 var(--spacing-md) 0;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.detail-section-title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 600;
color: var(--on-surface);
margin: var(--spacing-xl) 0 var(--spacing-md) 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.detail-col {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.detail-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.detail-label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
display: flex;
align-items: center;
gap: 4px;
}
.detail-label .material-symbols-rounded {
font-size: 14px;
}
.detail-value {
font-size: 0.95rem;
color: var(--on-surface);
}
@media (max-width: 768px) {
.detail-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
DETAIL TABS (Kurs-Detail: TN / Kurstage / Berichte)
============================================ */
.detail-tabs {
display: flex;
align-items: stretch;
gap: 0;
margin-top: var(--spacing-lg);
border-bottom: 2px solid var(--surface-container-low);
}
.detail-tab {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
color: var(--on-surface-variant);
background: none;
border: none;
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--transition-fast);
/* Inhalt vertikal mittig, damit Tabs mit/ohne Counter gleich hoch sind
und alle Border-Bottom-Linien auf einer Y-Position liegen. */
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.detail-tab:hover {
color: var(--on-surface);
background: var(--surface-variant);
}
.detail-tab.active {
color: var(--primary-dark);
border-bottom-color: var(--primary-dark);
font-weight: 500;
}
.detail-tab-count {
color: var(--on-surface-variant);
font-weight: 400;
font-size: 0.875rem;
font-style: normal;
font-family: var(--font-body);
/* margin-left entfaellt, gap: 6px im Parent .detail-tab uebernimmt das */
}
.detail-tab.active .detail-tab-count {
color: var(--primary-dark);
}
.detail-tab--muted {
opacity: 0.45;
}
.detail-tab--muted:hover {
opacity: 0.7;
}
.detail-tab-content {
margin-top: var(--spacing-lg);
}
.tab-action-bar {
display: flex;
gap: var(--spacing-md);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--spacing-md);
}
/* ============================================
KURS-DETAIL UEBERSICHT (Curator-B)
2-Spalten-Layout: Cards links, Stat-Sidebar rechts
============================================ */
.uebersicht-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: var(--spacing-lg);
align-items: start;
}
.uebersicht-main {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
min-width: 0;
}
.uebersicht-main > .detail-card {
margin-bottom: 0;
}
.uebersicht-sidebar {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
min-width: 0;
}
/* Im Edit-Mode sind die Stat-Werte stale (referenzieren noch nicht gespeicherte Aenderungen) */
.uebersicht-sidebar.is-editing {
opacity: 0.5;
pointer-events: none;
}
/* Inline-Edit: alle Inputs fuellen die Wert-Lane zu 100%, sodass beide
Kanten (links durch das feste Label-Column-Ende, rechts durch die Card)
eine konsistente Linie bilden. Read-Mode-Werte teilen dieselbe Lane. */
.detail-row-input {
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
background: var(--surface-container-lowest);
color: var(--on-surface);
font: inherit;
font-weight: 500;
padding: 6px 10px;
width: 100%;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Inhalts-Ausrichtung INNERHALB des Inputs:
- Text/Textarea linksbuendig (natuerliches Tippen)
- Number/Date rechtsbuendig (matcht Read-Mode-Werte) */
input[type="text"].detail-row-input,
textarea.detail-row-input {
text-align: left;
}
input[type="number"].detail-row-input,
input[type="date"].detail-row-input {
text-align: right;
}
textarea.detail-row-input {
min-height: 78px;
resize: vertical;
line-height: 1.5;
}
.detail-row-input:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}
/* Date-Range: zwei Date-Inputs + Reload-Icon teilen die Lane */
.detail-row-dates {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.detail-row-dates input.detail-row-input {
flex: 1 1 0;
text-align: center;
min-width: 0;
}
/* Aktiv-Toggle: Inhalt rechtsbuendig auf der Lane (wie der read-mode "Aktiv · Publiziert"-Wert) */
.detail-row-toggle-wrap {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
width: 100%;
}
.detail-row-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
font-weight: 500;
}
.detail-row-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary-dark);
}
.detail-row-suffix {
color: var(--on-surface-variant);
font-weight: 400;
font-size: 0.8125rem;
}
.detail-row-suffix-muted {
color: var(--on-surface-variant);
flex: 0 0 auto;
}
/* Price-Input: Number-Input fuellt den freien Platz, "CHF" als Suffix rechts */
.detail-row-price {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.detail-row-price .detail-row-input {
flex: 1 1 auto;
min-width: 0;
}
/* Reload-Icon-Button im date-range */
.detail-row-icon-btn {
background: transparent;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
padding: 4px 6px;
cursor: pointer;
color: var(--on-surface-variant);
display: inline-flex;
align-items: center;
transition: all var(--transition-fast);
flex: 0 0 auto;
}
.detail-row-icon-btn:hover {
background: var(--surface-variant);
color: var(--on-surface);
}
.detail-row-icon-btn .material-symbols-rounded {
font-size: 18px;
}
/* Vertikale Attribut/Wert-Liste innerhalb einer detail-card.
2-spaltiges Grid: feste Label-Spalte links, linksbuendiger Wert daneben
(Curator-B: Werte sind nie rechtsbuendig). */
.detail-row {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: var(--spacing-lg);
align-items: baseline;
padding: 8px 0;
font-size: 0.875rem;
}
.detail-row + .detail-row {
border-top: 1px dashed var(--outline-variant);
}
/* Mehrzeilige Werte (Textarea): Label oben buendig statt am Baseline der ersten Zeile */
.detail-row:has(textarea) {
align-items: flex-start;
}
.detail-row:has(textarea) .detail-row-label {
padding-top: 8px;
}
.detail-row-label {
color: var(--on-surface-variant);
font-weight: 400;
}
.detail-row-value {
color: var(--on-surface);
font-weight: 500;
text-align: left;
overflow-wrap: break-word;
white-space: pre-wrap;
min-width: 0;
}
/* Sidebar-Grid: einspaltig auf Tablet/Mobile; Widgets nebeneinander.
KPI-Sidebar wird auf Mobile/Tablet ÜBER die Stammdaten-Cards verschoben,
damit die Kennzahlen nicht erst nach allen Detail-Cards sichtbar werden. */
@media (max-width: 1024px) {
.uebersicht-grid {
grid-template-columns: 1fr;
}
.uebersicht-sidebar {
flex-direction: row;
flex-wrap: wrap;
order: -1;
}
.uebersicht-sidebar > .uebersicht-widget {
flex: 1 1 200px;
}
/* Schmalere Cards: Label-Spalte enger */
.detail-row {
grid-template-columns: 160px minmax(0, 1fr);
gap: var(--spacing-md);
}
}
/* Schmal (Phones): Label-Spalte noch enger, Toggle/Price linksbuendig */
@media (max-width: 720px) {
.detail-row {
grid-template-columns: 130px minmax(0, 1fr);
gap: var(--spacing-md);
}
.detail-row-toggle-wrap,
.detail-row-price {
justify-content: flex-start;
}
}
/* Mobile (sehr schmal): Label oben, Wert darunter (Stack) */
@media (max-width: 520px) {
.detail-row {
grid-template-columns: 1fr;
gap: 4px;
}
.detail-row-label {
flex: 0 0 auto;
}
.detail-row-value {
text-align: left;
width: 100%;
}
}
/* Sidebar-Widget: vertikale Stat-Card-Variante (kein Icon) */
.uebersicht-widget {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
padding: var(--spacing-md) var(--spacing-lg);
box-shadow: var(--shadow-ambient);
display: flex;
flex-direction: column;
gap: 6px;
}
.uebersicht-widget-label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--on-surface-variant);
}
.uebersicht-widget-value {
font-family: var(--font-display);
font-size: 1.875rem;
font-weight: 500;
color: var(--on-surface);
line-height: 1.1;
}
.uebersicht-widget-value-suffix {
font-size: 1rem;
color: var(--on-surface-variant);
font-weight: 400;
}
.uebersicht-widget-sub {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
.uebersicht-widget-bar {
height: 6px;
background: var(--surface-container-low);
border-radius: 3px;
overflow: hidden;
margin-top: 4px;
}
.uebersicht-widget-bar-fill {
height: 100%;
background: var(--primary-medium);
transition: width 300ms ease;
}
@media (max-width: 768px) {
.detail-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Scrollbar verstecken — sonst zerhaut sie das Layout, sobald sie auftaucht. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.detail-tabs::-webkit-scrollbar {
display: none;
}
.detail-tab {
white-space: nowrap;
padding: 8px 10px;
font-size: 0.8125rem;
/* Label oben, Count klein darunter — alle Tabs gleich hoch + gleich breit aligniert. */
flex: 1 1 0;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
text-align: center;
}
.detail-tab-count {
font-size: 0.6875rem;
line-height: 1;
}
}
/* ============================================
KURS CARDS (in Teilnehmer-Detail)
============================================ */
/* ============================================
KURS-CARD (Teilnehmer-Detail Tab "Kurse")
Curator-B Redesign: ein-/ausklappbare Card mit
Header (Title + Pills + Anwesenheits-Quote rechts +
optionaler Fortschritts-Bar) und Body (Aktionen +
Kurstage-Sub-Sections).
============================================ */
/* Section-Label "Aktuelle Kurse · 2" / "Vergangene Kurse · 2" */
.kurs-card-section + .kurs-card-section { margin-top: var(--sp-8); }
.kurs-card-section-label {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--on-surface-muted);
margin-bottom: var(--sp-3);
}
/* Card-Container: ersetzt .detail-card fuer Kurs-Cards */
.kurs-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
margin-bottom: var(--sp-3);
overflow: hidden;
box-shadow: var(--shadow-ambient);
}
.kurs-card.collapsed .kurs-card-body { display: none; }
/* Header: clickable, toggelt Collapse */
.kurs-card-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
cursor: pointer;
user-select: none;
transition: background var(--t-fast);
}
.kurs-card-head:hover { background: var(--surface); }
.kurs-card-chevron {
font-size: 22px !important;
color: var(--on-surface-muted);
flex-shrink: 0;
align-self: start;
margin-top: 0;
}
.kurs-card-title-block { min-width: 0; }
.kurs-card-title-row {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.kurs-card-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: 1.1875rem;
line-height: 1.2;
color: var(--on-surface);
}
.kurs-card-meta {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: var(--sp-1);
}
/* Quote-Block rechts: 3-zeilig (Wert / Label / Verhältnis) */
.kurs-card-quote {
text-align: right;
flex-shrink: 0;
padding-left: var(--sp-2);
line-height: 1.15;
}
.kurs-card-quote-value {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.625rem;
color: var(--primary-dark);
}
.kurs-card-quote-value.q-good { color: var(--success); }
.kurs-card-quote-value.q-mid { color: var(--warning); }
.kurs-card-quote-value.q-bad { color: var(--danger); }
.kurs-card-quote-label {
font-size: 0.5625rem;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--on-surface-muted);
margin-top: var(--sp-1);
}
.kurs-card-quote-ratio {
font-size: 0.6875rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
/* Fortschritts-Bar (volle Breite des Headers, nur bei aktuellen Kursen) */
.kurs-card-progress {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-3);
font-size: 0.6875rem;
color: var(--on-surface-variant);
}
.kurs-card-progress-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.625rem;
font-weight: 700;
color: var(--on-surface-muted);
flex-shrink: 0;
}
.kurs-card-progress-bar {
flex: 1;
height: 5px;
background: var(--surface-variant);
border-radius: var(--radius-full);
overflow: hidden;
}
.kurs-card-progress-fill {
height: 100%;
background: var(--primary-medium);
border-radius: var(--radius-full);
transition: width var(--t-slow);
}
.kurs-card-progress-text {
flex-shrink: 0;
white-space: nowrap;
}
.kurs-card-progress-text strong {
font-family: var(--font-display);
color: var(--on-surface);
font-weight: 600;
font-size: 0.75rem;
}
/* Card-Body: nur sichtbar wenn nicht collapsed */
.kurs-card-body {
padding: var(--sp-3) var(--sp-5) var(--sp-5);
border-top: 1px solid var(--outline-variant);
}
/* Action-Row: kompakte Link-Buttons */
.kurs-card-actions {
display: flex;
gap: var(--sp-1);
flex-wrap: wrap;
}
.kurs-card-action {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-dark);
background: transparent;
border: none;
cursor: pointer;
transition: background var(--t-fast);
}
.kurs-card-action:hover { background: var(--info-bg); }
.kurs-card-action .material-symbols-rounded {
font-size: 16px !important;
opacity: 0.85;
}
/* Sub-Section: "Naechste Kurstage" / "Letzte Kurstage" */
.kurs-card-sub {
border-top: 1px solid var(--outline-variant);
padding-top: var(--sp-3);
margin-top: var(--sp-3);
}
.kurs-card-sub-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sp-2);
}
.kurs-card-sub-title {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-surface-muted);
}
.kurs-card-sub-action {
font-size: 0.75rem;
color: var(--primary-dark);
cursor: pointer;
background: transparent;
border: none;
padding: 2px var(--sp-2);
border-radius: var(--radius-sm);
transition: background var(--t-fast);
}
.kurs-card-sub-action:hover { background: var(--info-bg); }
/* Toggle-Button "+ N zukuenftige Kurstage anzeigen" — sitzt zwischen
vergangener und zukuenftiger Sub-Section */
.kurs-card-show-future {
display: block;
width: 100%;
text-align: left;
margin-top: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-dark);
background: var(--info-bg);
border: 1px dashed var(--outline-variant);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--t-fast);
}
.kurs-card-show-future:hover { background: var(--surface-variant); }
/* Empty-Sub: wenn weder vergangene noch zukuenftige Kurstage */
.kurs-card-sub-empty {
font-size: 0.75rem;
color: var(--on-surface-muted);
font-style: italic;
padding: var(--sp-2) 0;
}
/* ============================================
DATEI (Dateien-Karte)
============================================ */
.datei-liste {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.datei-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--outline-variant);
gap: var(--spacing-sm);
}
.datei-item:last-child {
border-bottom: none;
}
.datei-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.datei-upload {
border-top: 1px solid var(--outline-variant);
padding-top: var(--spacing-md);
}
.datei-upload-row {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.datei-upload-row .form-control {
flex: 1;
}
/* ============================================
FORM PAGES
============================================ */
.page-form {
max-width: 900px;
}
.form-actions {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.form-actions-secondary {
display: flex;
gap: var(--spacing-sm);
align-items: center;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--outline-variant);
}
/* ============================================
BUTTON VARIANTS
============================================ */
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--on-surface-variant);
}
.btn-ghost:hover:not(:disabled) {
background: var(--surface-container-low);
color: var(--on-surface);
}
.btn-danger-ghost {
color: var(--danger);
}
.btn-danger-ghost:hover:not(:disabled) {
background: var(--danger-bg);
color: var(--danger);
}
/* ============================================
TOOLBAR EXTRAS
============================================ */
.toolbar-search-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
width: 100%;
}
.toolbar-control {
height: 38px;
padding: 0 0.875rem;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
background: var(--surface-container-lowest);
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--on-surface);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.toolbar-control:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}
/* Kurstage Sidebar Layout */
.kurstage-layout {
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
}
.kurstage-sidebar {
width: 240px;
flex-shrink: 0;
position: sticky;
top: var(--spacing-md);
}
.kurstage-sidebar-section {
margin-bottom: var(--spacing-md);
}
.kurstage-sidebar-label {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
padding: 0 var(--spacing-sm);
margin-bottom: var(--spacing-xs);
}
.kurstage-kurs-liste {
display: flex;
flex-direction: column;
gap: 2px;
max-height: calc(100vh - 220px);
overflow-y: auto;
}
.kurstage-kurs-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: var(--spacing-xs) var(--spacing-sm);
border: none;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--on-surface);
transition: background-color var(--transition-fast);
width: 100%;
}
.kurstage-kurs-item:hover {
background: var(--surface-variant);
}
.kurstage-kurs-item.active {
background: var(--primary-dark);
color: white;
}
.kurstage-kurs-item.active .kurstage-kurs-meta {
color: rgba(255, 255, 255, 0.7);
}
.kurstage-kurs-name {
font-weight: 600;
line-height: 1.3;
}
.kurstage-kurs-meta {
font-size: 0.6875rem;
color: var(--on-surface-variant);
line-height: 1.3;
}
.kurstage-kurs-empty {
padding: var(--spacing-sm);
color: var(--on-surface-variant);
font-size: 0.8125rem;
font-style: italic;
}
.kurstage-limit-liste {
flex-direction: row;
flex-wrap: wrap;
}
.kurstage-limit-liste .kurstage-kurs-item {
width: auto;
text-align: center;
flex: 1;
}
.kurstage-main {
flex: 1;
min-width: 0;
}
@media (max-width: 768px) {
.kurstage-layout {
flex-direction: column;
}
.kurstage-sidebar {
width: 100%;
position: static;
}
.kurstage-kurs-liste {
flex-direction: row;
flex-wrap: wrap;
max-height: none;
}
.kurstage-kurs-item {
width: auto;
}
}
.toolbar-search-row .search-box input.toolbar-control {
height: 38px;
padding-top: 0;
padding-bottom: 0;
padding-left: 2.5rem;
}
.toolbar-search-row .btn {
height: 38px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.toolbar-checkbox {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.85rem;
color: var(--on-surface-variant);
white-space: nowrap;
}
/* Zukunftige Kurstage hervorheben */
.zukunftig-row {
background-color: rgba(var(--primary-dark-rgb), 0.04);
}
/* Table container in detail cards */
.detail-card .table-container {
margin: 0 calc(-1 * var(--spacing-lg));
width: calc(100% + 2 * var(--spacing-lg));
}
.detail-card .data-table {
margin-bottom: 0;
}
@media (max-width: 768px) {
.datei-upload-row {
flex-direction: column;
align-items: stretch;
}
.toolbar-search-row {
width: 100%;
}
/* Quote-Block bei schmalem Viewport unter den Title statt rechts daneben */
.kurs-card-head {
grid-template-columns: auto 1fr;
}
.kurs-card-quote {
grid-column: 1 / -1;
text-align: left;
padding-left: 0;
margin-top: var(--sp-2);
display: flex;
align-items: baseline;
gap: var(--sp-2);
}
.kurs-card-quote-label,
.kurs-card-quote-ratio { margin-top: 0; }
}
/* ============================================
SLIDE-OVER PANEL
============================================ */
.slide-over {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 900;
}
.slide-over.active {
display: block;
}
.slide-over-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
animation: slideOverBackdropIn 0.25s ease-out;
}
@keyframes slideOverBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideOverBackdropOut {
from { opacity: 1; }
to { opacity: 0; }
}
.slide-over-panel {
position: absolute;
top: 0;
right: 0;
width: 600px;
max-width: 100%;
height: 100%;
background-color: var(--surface-container-lowest);
box-shadow: var(--shadow-lg);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
display: flex;
flex-direction: column;
transform: translateX(0);
animation: slideOverPanelIn 0.25s ease-out;
overflow: hidden;
}
@keyframes slideOverPanelIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.slide-over.closing .slide-over-panel {
animation: slideOverPanelOut 0.2s ease-in forwards;
}
@keyframes slideOverPanelOut {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.slide-over.closing .slide-over-backdrop {
animation: slideOverBackdropOut 0.2s ease-in forwards;
}
.slide-over-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--spacing-lg);
}
/* Slideout-Footer (Curator-B) — sticky unten, Löschen links / Aktionen rechts */
.slide-over-footer {
flex-shrink: 0;
padding: 12px 16px;
border-top: 1px solid var(--outline-variant);
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.slide-over-footer-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/* Mobile: fullscreen */
@media (max-width: 768px) {
.slide-over-panel {
width: 100vw;
border-radius: 0;
}
/* Footer-Buttons stretchen für bessere Touch-Targets */
.slide-over-footer .btn {
flex: 1;
justify-content: center;
}
.slide-over-footer-actions {
flex: 1;
}
}
/* ============================================
KURSTAG PANEL — HEADER
============================================ */
.kt-panel-header {
padding: var(--spacing-lg);
background-color: var(--surface);
border-bottom: 1px solid var(--outline-variant);
flex-shrink: 0;
}
.kt-panel-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-sm);
}
.kt-panel-header-actions {
display: flex;
gap: var(--spacing-xs);
flex-shrink: 0;
}
.kt-panel-kursname {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--primary-dark);
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.03em;
font-variant: small-caps;
}
.kt-panel-kursname:hover {
text-decoration: underline;
}
.kt-panel-datum {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--on-surface);
margin-top: var(--spacing-xs);
}
.kt-panel-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
margin-top: var(--spacing-sm);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--on-surface-variant);
}
.kt-panel-meta-sep {
color: var(--on-surface-variant);
opacity: 0.4;
}
.kt-panel-close {
background: none;
border: none;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--on-surface);
opacity: 0.5;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.kt-panel-close:hover {
opacity: 1;
background-color: var(--surface-variant);
}
/* ============================================
INLINE EDITABLE FIELDS
============================================ */
.inline-editable {
cursor: pointer;
padding: 2px 4px;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
display: inline-block;
}
.inline-editable:hover {
background-color: var(--surface-variant);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
text-decoration-color: var(--on-surface-variant);
}
.inline-editable-input {
font-family: var(--font-body);
font-size: inherit;
padding: 2px 6px;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-sm);
background: var(--surface-container-lowest);
color: var(--on-surface);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.inline-editable-input:focus {
border-color: var(--primary-dark);
box-shadow: 0 0 0 3px rgba(var(--primary-dark-rgb), 0.12);
}
/* Save flash feedback */
@keyframes inlineSaveFlash {
0% { box-shadow: 0 0 0 0 rgba(93, 115, 101, 0.4); }
50% { box-shadow: 0 0 0 3px rgba(93, 115, 101, 0.2); }
100% { box-shadow: 0 0 0 0 rgba(93, 115, 101, 0); }
}
.inline-save-flash {
animation: inlineSaveFlash 0.6s ease-out;
}
/* ============================================
KURSTAG PANEL — ANWESENHEIT SECTION
============================================ */
/* Tab-Bar im Kurstag-Slideout (Curator-B): Italic + Underline */
.kt-tab-bar {
display: flex;
gap: 24px;
border-bottom: 1px solid var(--outline-variant);
margin: 0 calc(-1 * var(--spacing-lg)) var(--spacing-md);
padding: 0 var(--spacing-lg);
}
.kt-tab {
background: transparent;
border: none;
padding: 12px 0;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
color: var(--on-surface-variant);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
margin-bottom: -1px;
white-space: nowrap;
}
.kt-tab:hover {
color: var(--on-surface);
}
.kt-tab.active {
color: var(--on-surface);
font-style: italic;
border-bottom-color: var(--primary-dark);
}
.kt-tab-content {
/* Container nimmt die einzelnen Sektionen auf */
}
.kt-section {
margin-top: var(--spacing-lg);
}
/* Erste Section im Tab-Content braucht keinen oberen Abstand */
.kt-tab-content > .kt-section:first-child {
margin-top: 0;
}
.kt-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
}
.kt-section-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--on-surface);
}
.kt-section-actions {
display: flex;
gap: var(--spacing-sm);
}
/* Section-Label (Curator-B) — etwas größer und dunkler als kleinste Labels */
.kt-anw-section-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--on-surface-variant);
margin: 0;
}
/* Section-Header mit Sub-Zeile (z.B. Status-Counter unter Label) */
.kt-anw-title-wrap {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.kt-anw-counters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
font-size: 0.6875rem;
color: var(--on-surface-muted);
}
.kt-anw-counter strong {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kt-anw-counter-anwesend strong { color: var(--success); }
.kt-anw-counter-entschuldigt strong { color: var(--warning); }
.kt-anw-counter-abwesend strong { color: var(--danger); }
.kt-anw-counter-offen strong { color: var(--on-surface-variant); }
/* Avatar (Initialen-Kreis, Curator-B subtil) */
.kt-anw-avatar {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface-container-low);
border: 1px solid var(--outline-variant);
color: var(--on-surface-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
user-select: none;
}
.kt-anw-avatar.is-gast {
background: var(--accent-beige);
color: var(--primary-dark);
border-color: var(--accent-beige);
}
.kt-anw-list {
display: flex;
flex-direction: column;
}
.kt-anw-row {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: 8px 12px;
border-bottom: 1px solid var(--outline-variant);
transition: background-color var(--transition-fast);
}
.kt-anw-row:last-child {
border-bottom: none;
}
/* Curator-B: Keine Status-Background-Färbung pro Zeile —
der active-State des Toggle-Buttons rechts ist der einzige Marker. */
.kt-anw-name {
flex: 1;
min-width: 0;
font-weight: 400;
font-size: 0.8125rem;
color: var(--on-surface);
}
.kt-anw-name .badge {
margin-left: var(--spacing-xs);
font-size: 0.6875rem;
}
.kt-anw-bemerkung {
flex: 1;
min-width: 0;
font-size: 0.8125rem;
color: var(--on-surface-variant);
cursor: pointer;
padding: 2px 4px;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.kt-anw-bemerkung:hover {
background-color: var(--surface-variant);
}
.kt-anw-bemerkung-placeholder {
opacity: 0.25;
color: var(--on-surface-muted);
}
/* Leere Bemerkungs-Cell ist default versteckt — der Stift-Button im btnsDiv
ist der einzige Trigger für den Edit-Mode. is-editing überschreibt das,
damit das Input-Feld auch bei vormals leerer Cell sichtbar ist. */
.kt-anw-bemerkung.is-empty {
display: none;
}
.kt-anw-bemerkung.is-empty.is-editing {
display: block;
}
/* Stift-Button im btnsDiv: dezenter Sekundär-Trigger, optisch leichter als die
3 Status-Buttons (Ghost-Style ohne Border). Aktiv-State wenn Bemerkung gesetzt. */
.kt-anw-btn-bem {
border-color: transparent;
background: transparent;
}
.kt-anw-btn-bem.active-bem {
color: var(--primary-dark);
}
/* Auf Mobile: Stift-Button schmaler, damit die Name-Spalte nicht in 2 Zeilen
umbricht. Die 3 Status-Buttons behalten ihr 44×40 Touch-Target. Doppelt-
klassierter Selektor für höhere Specifity als die generische .kt-anw-btn-Regel. */
@media (max-width: 768px) {
.kt-anw-btn.kt-anw-btn-bem {
width: 28px;
height: 38px;
}
.kt-anw-btn.kt-anw-btn-bem .material-symbols-rounded {
font-size: 16px;
}
}
/* Gast-Toggle: wie der Stift ein Sekundär-Trigger (Ghost-Style), aktiv in Warn-Farbe,
weil der Kurstag damit aus der Verrechnung fällt. Nur sichtbar für Kurstage bis
zum Anmeldedatum — siehe app.kurstagPanel.js _renderAnwesenheitRow. */
.kt-anw-btn-gast {
border-color: transparent;
background: transparent;
}
.kt-anw-btn-gast.active-gast {
color: var(--warning);
background: var(--warning-bg);
}
/* Toggle-Buttons (Curator-B): 3 separate Buttons mit Gap, keine Group */
.kt-anw-btns {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.kt-anw-btn {
border: 1px solid var(--outline-variant);
background: var(--surface-container-lowest);
border-radius: var(--radius-sm);
width: 32px;
height: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--on-surface-muted);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.kt-anw-btn .material-symbols-rounded {
font-size: 16px;
}
.kt-anw-btn:hover {
border-color: var(--outline-strong);
color: var(--on-surface);
}
.kt-anw-btn.active-yes {
background: var(--success);
color: var(--white);
border-color: var(--success);
}
.kt-anw-btn.active-yes:hover {
filter: brightness(0.9);
}
.kt-anw-btn.active-no {
background: var(--danger);
color: var(--white);
border-color: var(--danger);
}
.kt-anw-btn.active-no:hover {
filter: brightness(0.9);
}
.kt-anw-btn.active-e {
background: var(--warning);
color: var(--white);
border-color: var(--warning);
}
.kt-anw-btn.active-e:hover {
filter: brightness(0.9);
}
/* Gast entfernen — dezent rötlich, optisch getrennt von den Status-Buttons */
.kt-anw-btn-remove {
color: var(--danger, #b00020);
margin-left: 6px;
}
.kt-anw-btn-remove:hover {
background: var(--danger, #b00020);
color: white;
border-color: var(--danger, #b00020);
}
/* Mobile: larger touch targets, fixed grid layout (avatar | name | buttons / · | bemerkung).
Grid statt Flex-Wrap, sonst verdrängt der Bemerkungs-Input die Buttons aus der Reihe,
sobald die Cell auf width:100% expandiert. */
@media (max-width: 768px) {
.kt-anw-row {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"avatar name buttons"
". bemerk bemerk";
gap: var(--spacing-xs) var(--spacing-md);
padding: var(--spacing-md);
}
.kt-anw-avatar { grid-area: avatar; align-self: center; }
.kt-anw-name {
grid-area: name;
align-self: center;
flex-basis: auto;
width: auto;
}
.kt-anw-btns { grid-area: buttons; align-self: center; }
.kt-anw-bemerkung {
grid-area: bemerk;
margin-top: var(--spacing-xs);
font-size: 0.8125rem;
}
.kt-anw-btn {
width: 38px;
height: 38px;
}
.kt-anw-btn .material-symbols-rounded {
font-size: 18px;
}
/* Header-Meta bleibt horizontal (Raum · Dauer · Lehrperson in einer Zeile);
wrap nur wenn der Inhalt zu breit ist. Separator bleibt sichtbar. */
.kt-panel-meta {
gap: var(--spacing-xs) var(--spacing-sm);
}
}
/* ============================================
KURSTAG PANEL — DETAILS SECTION
============================================ */
.kt-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
@media (max-width: 768px) {
.kt-details-grid {
grid-template-columns: 1fr;
}
}
.kt-details-grid .full-width {
grid-column: 1 / -1;
}
.kt-detail-field {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.kt-detail-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--on-surface-variant);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.kt-detail-value {
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--on-surface);
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
min-height: 32px;
display: flex;
align-items: flex-start;
transition: background-color var(--transition-fast);
}
.kt-detail-value:hover {
background-color: var(--surface-variant);
}
.kt-detail-value-placeholder {
color: var(--on-surface-variant);
opacity: 0.5;
font-style: italic;
}
.kt-detail-value textarea.inline-editable-input {
width: 100%;
min-height: 60px;
resize: vertical;
}
.kt-detail-value select.inline-editable-input {
width: 100%;
}
/* ============================================
KURSTAG PANEL — DATEIEN SECTION
============================================ */
.kt-datei-card {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.kt-datei-card:nth-child(even) {
background-color: var(--surface-container-low);
}
.kt-datei-icon {
flex-shrink: 0;
color: var(--on-surface-variant);
}
.kt-datei-info {
flex: 1;
min-width: 0;
}
.kt-datei-beschreibung {
font-size: 0.875rem;
font-weight: 500;
color: var(--on-surface);
cursor: pointer;
padding: 2px 4px;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.kt-datei-beschreibung:hover {
background-color: var(--surface-variant);
}
.kt-datei-meta {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
.kt-datei-actions {
display: flex;
gap: var(--spacing-xs);
flex-shrink: 0;
}
/* ============================================
KANBAN — Interessenten-Pipeline
============================================ */
.kanban-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
/* Mobile: Kanban-Spalten vertikal stapeln, sonst sind 3 Spalten je ~100px breit
und kaum benutzbar. */
@media (max-width: 768px) {
.kanban-board {
grid-template-columns: 1fr;
}
}
.kanban-col-readonly {
opacity: 0.95;
}
.kanban-col-readonly .kanban-col-title {
color: var(--on-surface-variant);
}
.kanban-col {
background: var(--surface-container-low);
border-radius: var(--radius-md);
padding: var(--spacing-md);
transition: background 0.15s ease;
display: flex;
flex-direction: column;
/* Spalten passen ihre Höhe dem Inhalt an. Im Grid würden sie sich sonst
auf die Höhe der vollsten Spalte strecken. */
align-self: start;
}
.kanban-col-dragover {
background: var(--accent-beige);
box-shadow: 0 0 0 2px var(--primary-dark) inset;
}
.kanban-col-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.kanban-col-title {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
color: var(--primary-dark);
letter-spacing: 0.01em;
}
.kanban-col-count {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
background: var(--surface-container-highest);
padding: 2px 8px;
border-radius: var(--radius-full);
min-width: 22px;
text-align: center;
}
.kanban-col-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
/* Platz für eine zusätzliche Karte — als Drop-Hint und damit leere Spalten
nicht komplett kollabieren. */
min-height: 80px;
}
.kanban-col-empty {
color: var(--on-surface-variant);
font-size: 0.8rem;
text-align: center;
padding: var(--spacing-lg) 0;
opacity: 0.5;
}
/* ---- Karten ---- */
.kanban-card {
background: var(--surface-container-lowest);
border-radius: var(--radius-sm);
padding: var(--spacing-sm) var(--spacing-md);
cursor: grab;
box-shadow: var(--shadow-sm);
border-left: 3px solid transparent;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.kanban-card:active {
cursor: grabbing;
}
.kanban-card-dragging {
opacity: 0.4;
transform: rotate(1deg);
}
/* Temperatur-Akzent links */
.kanban-card-temp-hot { border-left-color: var(--danger); }
.kanban-card-temp-warm { border-left-color: var(--warning); }
.kanban-card-temp-cold { border-left-color: var(--primary-light); }
.kanban-card-temp-stale { border-left-color: var(--accent-gray); }
.kanban-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 4px;
}
.kanban-card-header .overflow-menu-trigger {
flex-shrink: 0;
margin: -4px -4px -4px 0;
}
.kanban-card-name {
font-weight: 600;
color: var(--on-surface);
font-size: 0.9rem;
flex: 1;
min-width: 0;
}
.kanban-card-fuer {
font-size: 0.75rem;
font-style: italic;
color: var(--on-surface-variant);
margin: -2px 0 4px;
}
.kurstag-gaeste {
font-size: 0.8rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
/* ============================================
COMBOBOX — filterbares Dropdown (Gast-Dialog)
============================================ */
.combobox {
position: relative;
}
.combobox-input-wrap {
position: relative;
}
.combobox-input {
padding-left: 36px;
}
.combobox-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--on-surface-variant);
font-size: 18px;
pointer-events: none;
}
.combobox-list {
list-style: none;
margin: 6px 0 0;
padding: 4px 0;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--outline-variant);
border-radius: var(--radius-md);
background: var(--surface);
}
.combobox-list li {
padding: 8px 12px;
cursor: pointer;
font-size: 0.9rem;
color: var(--on-surface);
}
.combobox-list li:hover,
.combobox-list li.active {
background: var(--accent-beige);
}
.combobox-list li.selected {
font-weight: 600;
}
.combobox-status {
font-size: 0.8rem;
color: var(--on-surface-variant);
margin-left: 4px;
}
.combobox-empty {
margin: 8px 0 0;
padding: 12px;
text-align: center;
font-style: italic;
color: var(--on-surface-variant);
border: 1px dashed var(--outline-variant);
border-radius: var(--radius-md);
}
.kanban-card-meta {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 4px;
}
.kanban-chip {
font-size: 0.7rem;
font-weight: 500;
background: var(--accent-beige);
color: var(--primary-dark);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.kanban-chip-muted {
background: var(--surface-container-highest);
color: var(--on-surface-variant);
}
.kanban-chip-interesse {
background: var(--primary-dark);
color: var(--on-primary, #fff);
}
.kanban-card-termin {
font-size: 0.75rem;
margin-top: 6px;
font-weight: 500;
}
.kanban-card-termin-urgent { color: var(--danger); }
.kanban-card-termin-soon { color: var(--warning); }
.kanban-card-termin-later { color: var(--on-surface-variant); }
.kanban-card-abklaerung {
margin-top: 10px;
padding: 6px 10px;
border: 1.5px dashed var(--primary-dark);
border-radius: var(--radius-sm);
background: var(--surface-container-lowest);
color: var(--primary-dark);
line-height: 1.3;
}
.kanban-card-abklaerung-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 600;
}
.kanban-card-abklaerung-icon {
font-size: 15px;
line-height: 1;
color: var(--primary-dark);
}
.kanban-card-abklaerung-time {
margin-top: 2px;
font-size: 0.7rem;
font-weight: 500;
color: var(--on-surface);
}
.kanban-card-abklaerung-meta {
margin-top: 1px;
font-size: 0.68rem;
color: var(--on-surface-variant);
}
.kanban-card-nachfass {
margin-top: 8px;
padding: 6px 10px;
background: var(--accent-beige);
border-radius: var(--radius-sm);
color: var(--on-surface);
line-height: 1.35;
}
.kanban-card-nachfass-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.7rem;
font-weight: 600;
color: var(--primary-dark);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.kanban-card-nachfass-icon {
font-size: 14px;
line-height: 1;
}
.kanban-card-nachfass-text {
margin-top: 3px;
font-size: 0.7rem;
color: var(--on-surface);
white-space: pre-wrap;
word-break: break-word;
}
/* ---- Drop-Zonen (terminal states) ---- */
.kanban-dropzones {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.kanban-dropzone {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
border-radius: var(--radius-md);
border: 2px dashed var(--outline-variant);
background: var(--surface-container-low);
color: var(--on-surface-variant);
font-size: 0.85rem;
transition: all 0.15s ease;
}
.kanban-dropzone .material-symbols-rounded {
font-size: 1.25rem;
}
.kanban-dropzone-gewonnen {
color: var(--success);
border-color: rgba(93, 115, 101, 0.35);
}
.kanban-dropzone-verloren {
color: var(--danger);
border-color: rgba(215, 58, 48, 0.3);
}
.kanban-dropzone-active {
border-style: solid;
background: var(--accent-beige);
transform: scale(1.01);
}
.kanban-dropzone-count {
margin-left: auto;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--surface-container-highest);
color: var(--on-surface-variant);
cursor: pointer;
}
.kanban-dropzone-count:hover {
background: var(--accent-beige);
color: var(--primary-dark);
}
.kanban-verloren-liste {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.kanban-verloren-item {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--surface-container-low);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s ease;
}
.kanban-verloren-item:hover {
background: var(--accent-beige);
}
/* ---- Responsive ---- */
@media (max-width: 1100px) {
.kanban-board {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.kanban-board {
grid-template-columns: 1fr;
}
.kanban-dropzones {
grid-template-columns: 1fr;
}
}
/* Temperatur-Badge in Listen-Ansicht */
.kanban-temp-badge {
font-size: 0.7rem;
padding: 2px 8px;
border: 1px solid currentColor;
border-radius: var(--radius-full);
background: transparent;
}
.kanban-temp-badge.kanban-card-temp-hot { color: var(--danger); border-color: var(--danger); }
.kanban-temp-badge.kanban-card-temp-warm { color: var(--warning); border-color: var(--warning); }
.kanban-temp-badge.kanban-card-temp-cold { color: var(--primary-medium); border-color: var(--primary-medium); }
.kanban-temp-badge.kanban-card-temp-stale { color: var(--accent-gray); border-color: var(--accent-gray); }
/* Ghost-Button-Varianten für Quick-Actions */
.btn-success-ghost { color: var(--success); }
.btn-success-ghost:hover:not(:disabled) { background: var(--success-bg); }
/* ============================================
AKTIVITAETEN-TIMELINE (im Teilnehmer-Detail)
============================================ */
.aktivitaeten-empty {
color: var(--on-surface-variant);
text-align: center;
padding: var(--spacing-lg) 0;
font-size: 0.9rem;
margin: 0;
}
.aktivitaeten-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 0.8125rem;
}
.aktivitaeten-table thead {
background-color: var(--surface-container-low);
color: var(--on-surface-variant);
}
.aktivitaeten-table thead th {
text-align: left;
font-weight: 600;
color: var(--on-surface-variant);
padding: var(--spacing-sm);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.aktivitaeten-table tbody td {
padding: var(--spacing-sm);
vertical-align: top;
border-top: 1px solid var(--border-color);
}
.aktivitaeten-table tbody tr {
cursor: pointer;
transition: background-color 0.15s ease;
}
.aktivitaeten-table tbody tr:hover {
background: var(--accent-beige);
}
.aktivitaeten-table tbody tr:first-child td {
border-top: none;
}
.aktivitaeten-table .akt-datum-time {
display: block;
color: var(--on-surface-variant);
font-size: 0.8rem;
margin-top: 2px;
}
.aktivitaeten-table .akt-typ-icon {
vertical-align: middle;
margin-right: var(--spacing-xs);
color: var(--primary-dark);
font-size: 18px;
}
.aktivitaeten-table .akt-beschreibung-meta {
display: block;
color: var(--on-surface-variant);
font-size: 0.8rem;
margin-top: 2px;
}
/* ============================================
KALENDER-EVENT: ABKLAERUNGSGESPRAECH
============================================ */
.calendar-event-abklaerung {
/* Post-it-Look: warmes Gelb mit solidem, etwas dunklerem Rahmen */
background: #fef5c4;
border: 1.5px solid #d9b84a;
color: var(--primary-dark);
cursor: pointer;
padding: 3px 6px;
overflow: hidden;
line-height: 1.25;
display: flex;
flex-direction: column;
gap: 1px;
/* 30-Min-Events sind bei 45px/h nur ~22px hoch — drei Zeilen
(Name+Niveau / Zeit / Lehrer+Raum) brauchen mindestens ~50px.
Der Block waechst nach unten ueber seinen Zeitslot hinaus; das
ist bei i.d.R. seltenen Abklaerungsgespraechen akzeptabel. */
min-height: 52px;
}
.calendar-event-abklaerung .event-title {
font-weight: 600;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
white-space: nowrap;
min-width: 0;
}
.calendar-event-abklaerung .event-title-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-event-abklaerung .event-icon {
font-size: 15px;
flex-shrink: 0;
color: var(--primary-dark);
}
.calendar-event-abklaerung .event-niveau {
display: inline-block;
flex-shrink: 0;
font-size: 0.62rem;
font-weight: 600;
padding: 0 5px;
background: var(--accent-beige);
color: var(--primary-dark);
border-radius: 8px;
line-height: 1.5;
}
.calendar-event-abklaerung .event-interesse {
background: var(--primary-dark);
color: var(--on-primary, #fff);
}
.calendar-event-abklaerung .event-time {
font-size: 0.68rem;
font-weight: 500;
color: var(--on-surface-variant);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-event-abklaerung .event-meta {
font-size: 0.68rem;
color: var(--on-surface-variant);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-event-abklaerung:hover {
background: #fdeb94;
z-index: 100 !important;
}
/* Veranstaltungen (Grammatik-Treff & Co.) im Wochenplan — read-only.
Ruhiger Sage-Look (Publikations-Akzent #4B9380), klar von der gelben
Abklaerung abgegrenzt; kein Cursor-Pointer, da nicht klickbar. */
.calendar-event-veranstaltung {
background: #e3efe9;
border: 1.5px solid #4B9380;
color: var(--primary-dark);
cursor: default;
padding: 3px 6px;
overflow: hidden;
line-height: 1.25;
display: flex;
flex-direction: column;
gap: 1px;
min-height: 52px;
}
.calendar-event-veranstaltung .event-title {
font-weight: 600;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
white-space: nowrap;
min-width: 0;
}
.calendar-event-veranstaltung .event-title-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-event-veranstaltung .event-icon {
font-size: 15px;
flex-shrink: 0;
color: #4B9380;
}
.calendar-event-veranstaltung .event-time,
.calendar-event-veranstaltung .event-meta {
font-size: 0.68rem;
color: var(--on-surface-variant);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Aktivitaet-Panel (Slide-Over): Name + Niveau-Badge im Header */
.akt-panel-name-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.akt-panel-niveau {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
background: var(--accent-beige);
color: var(--primary-dark);
border-radius: 10px;
letter-spacing: 0.02em;
}
.akt-panel-interesse {
background: var(--primary-dark);
color: var(--on-primary, #fff);
}
.akt-panel-fuer {
font-size: 0.8rem;
font-style: italic;
color: var(--on-surface-variant);
margin-top: 2px;
}
/* ============================================
STATISTIKEN
============================================ */
.stats-tabs {
display: flex;
gap: var(--spacing-xs);
border-bottom: 1px solid var(--outline-variant);
margin-bottom: var(--spacing-lg);
overflow-x: auto;
}
.stats-tab-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--on-surface-variant);
font-family: var(--font-body);
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
}
.stats-tab-btn:hover {
color: var(--primary-dark);
}
.stats-tab-active {
color: var(--primary-dark);
border-bottom-color: var(--primary-dark);
font-weight: 600;
}
.stats-chart-wrap {
position: relative;
min-height: 280px;
margin-top: var(--spacing-sm);
}
.stats-zeitraum-label {
color: var(--on-surface-variant);
font-size: 0.85rem;
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--accent-beige);
border-radius: var(--radius-sm);
display: inline-block;
}
/* Konflikt-Marker auf Wochenplan-Event */
.calendar-event-konflikt {
border-color: var(--danger) !important;
border-style: solid !important;
}
.calendar-event-konflikt::before {
content: "⚠";
position: absolute;
top: 2px;
right: 4px;
color: var(--danger);
font-size: 0.9rem;
font-weight: 700;
}
/* Buchhaltung: Monatsbericht-Gruppen (detail-card-Pattern) */
.monatsberichte-groups {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.monatsbericht-group {
/* Base-Styling kommt von .detail-card; hier nur Kleinigkeiten */
}
/* Gruppen-Titel: Label links, Summary rechts in derselben Zeile */
.monatsbericht-group > .detail-card-title {
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}
.monatsbericht-group-summary {
color: var(--on-surface-variant);
font-size: 0.8125rem;
font-weight: 400;
font-family: var(--font-body);
letter-spacing: 0.01em;
}
/* KPI-Grid (Stat-Cards nebeneinander) für Einnahmen/Prognose */
.stats-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
/* Statistik-Cockpit: 6 Kennzahlen in zwei vollen Reihen, Inhalt oben ausgerichtet */
.cockpit-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cockpit-kpis .stat-card {
align-items: flex-start;
}
.cockpit-kpis .stat-card-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.stat-card-sub {
font-size: 0.8125rem;
color: var(--on-surface-variant);
line-height: 1.4;
}
@media (max-width: 900px) {
.cockpit-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.cockpit-kpis {
grid-template-columns: 1fr;
}
}
/* Filter-Toolbar im Buchhaltungs-Modul einzeilig halten
(Default .form-control setzt width:100%, das muss hier auto werden). */
.buchhaltung-toolbar select.form-control,
.buchhaltung-toolbar input.form-control {
width: auto;
min-width: 140px;
}
.kurs-cell {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.kurs-cell-badges {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.dauer-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
background: var(--accent-beige);
color: var(--primary-dark);
white-space: nowrap;
}
.dauer-badge.dauer-60 {
background: #d5e8d4;
color: #2f5f2f;
}
.dauer-badge.dauer-material {
background: #fcedd6;
color: #8a4a00;
}
.betrag-cell {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 100px;
}
.betrag-currency {
font-size: 0.75rem;
color: var(--on-surface-variant);
line-height: 1;
margin-bottom: 2px;
}
.betrag-value {
font-size: 1.1rem;
color: var(--primary-dark);
font-variant-numeric: tabular-nums;
}
.betrag-unit {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 2px;
}
.betrag-missing {
color: #d58512;
font-size: 0.85rem;
font-style: italic;
}
.lektionen-widget {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* "Rechnung gestellt"-Haken in der Monatsbericht-Tabelle */
.rechnung-gestellt-toggle {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.rechnung-gestellt-toggle input {
cursor: pointer;
}
.rechnung-gestellt-row {
opacity: 0.55;
}
/* Ratenzahlungs-Editor im Rechnungsdetails-Modal */
.raten-vorschlag-zeile {
display: flex;
align-items: flex-end;
gap: 12px;
margin-bottom: 16px;
}
.raten-vorschlag-zeile .form-group {
flex: 0 0 220px;
margin-bottom: 0;
}
.raten-editor-table td input.form-control {
min-width: 70px;
}
.raten-editor-table tfoot td {
font-weight: 600;
}
.lektionen-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.8rem;
line-height: 1.4;
background: var(--accent-beige);
color: var(--on-surface);
white-space: nowrap;
}
.lektionen-pill.lektionen-alle {
background: var(--accent-beige);
color: var(--primary-dark);
font-weight: 600;
}
.lektionen-pill.lektionen-besucht {
background: #e0f2e9;
color: #1f6b43;
}
.lektionen-pill.lektionen-entschuldigt {
background: #fff4d6;
color: #8a6100;
}
.lektionen-pill.lektionen-gefehlt {
background: #fde4e4;
color: #a42020;
}
.verrechnet-cell {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
line-height: 1.35;
}
.verrechnet-value {
font-size: 1.05rem;
color: var(--primary-dark);
font-variant-numeric: tabular-nums;
}
.verrechnet-detail {
font-size: 0.85rem;
color: var(--on-surface-variant);
}
.verrechnet-detail.verrechnet-rabatt {
color: #8a6100;
font-style: italic;
}
.tfoot-verrechnet {
background: var(--accent-beige);
font-weight: 500;
}
.tfoot-verrechnet td {
padding-top: 8px !important;
}
/* ============================================
DEPRECATED — to remove after 2026-05-13
============================================
Klassen, die durch das Curator-B-Redesign nicht mehr verwendet
werden. Werden NICHT sofort gelöscht (Briefing-Regel: erst nach
2 Wochen Live-Nutzung), falls extern referenziert (E-Mail-Templates,
PDF-Header, externe Bookmarks etc.).
Bei Erreichen des Datums oben dürfen alle Regeln in diesem Block
gelöscht werden, sofern grep nichts mehr findet.
============================================ */
/* Page-Layout (alte 1-Spalten-Title-Row) — ersetzt durch
.page-header-row + .page-title-block + .page-actions */
.page-title-row {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.page-title-meta {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
/* Wochenplan-Custom-Nav (alt) — ersetzt durch .btn-group + .btn-icon */
.wochenplan-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--on-surface);
cursor: pointer;
transition: background-color var(--t-fast);
}
.wochenplan-nav-btn:hover {
background: var(--surface-variant);
}
.wochenplan-nav-btn .material-symbols-rounded {
font-size: 24px;
}
.calendar-week-label {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--on-surface);
min-width: 200px;
text-align: center;
}