/* ============================================
   STABSSCHULUNG - Military Style Dashboard CSS
   ============================================ */

@font-face {
    font-family: 'Dunant';
    src: url('/css/fonts/Dunant-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dunant';
    src: url('/css/fonts/Dunant-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dunant';
    src: url('/css/fonts/Dunant-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dunant';
    src: url('/css/fonts/Dunant-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

:root {
    --primary: #2d2d2d;
    --primary-light: #5e5e5e;
    --primary-dark: #171717;
    --accent: #e2001a;
    --accent-light: #f03a4d;
    --success: #27ae60;
    --warning: #f39c12;
    --info: #8a8f95;
    --muted: #7a7a7a;
    --light: #f5f5f5;
    --dark: #2d2d2d;
    --border: #d7d7d7;
    --transition: all 0.3s ease;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #f2f2f2 0%, #ffffff 100%);
    color: #1f1f1f;
    font-family: 'Dunant', Arial, Helvetica, sans-serif;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
    background: linear-gradient(90deg, #b70017 0%, var(--accent) 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid var(--accent);
}

.navbar .nav-left,
.navbar .nav-center,
.navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
}

.user-info {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.active-users {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.user-count {
    opacity: 0.8;
}

.active-user {
    background: rgba(39, 174, 96, 0.8);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
}

.btn-logout {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.btn-logout:hover {
    background: var(--accent-light);
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.container {
    max-width: 1400px;
    margin: 1rem auto;
    padding: 0 1rem;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 450px;
    padding: 1rem;
}

.login-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-top: 4px solid var(--accent);
}

.login-card h1 {
    margin: 0 0 0.5rem;
    text-align: center;
    color: var(--primary-dark);
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
}

.subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.form-group {
    display: grid;
    gap: 0.4rem;
}

.form-group label {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.95rem;
    transition: var(--transition);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid transparent;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.error-banner {
    background: #fee;
    color: var(--accent);
    padding: 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--accent);
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-light);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-secondary {
    background: var(--info);
    color: white;
}

.btn-secondary:hover {
    background: #2980b9;
}

.login-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light);
}

.login-info h3 {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    color: var(--primary);
}

.login-info ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ============================================
   MESA PAGE
   ============================================ */

.mesa-page .container {
    padding-bottom: 2rem;
}

.mesa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.mesa-panel {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--accent);
}

.mesa-panel h2 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 1.1rem;
}

.mesa-panel h3 {
    margin: 1rem 0 0.75rem;
    color: var(--primary);
    font-size: 0.95rem;
}

.task-form-section,
.message-form-section {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.form-stack {
    display: grid;
    gap: 0.8rem;
}

.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn {
    background: var(--light);
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

.filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-btn:hover {
    border-color: var(--accent);
}

.task-list,
.message-list {
    display: grid;
    gap: 0.75rem;
    max-height: 600px;
    overflow-y: auto;
}

.task-card {
    background: #f8f9fa;
    border-left: 4px solid var(--info);
    padding: 0.9rem;
    border-radius: 4px;
    transition: var(--transition);
}

.task-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.task-card.status-abgeschlossen {
    border-left-color: var(--success);
    background: #f0fdf4;
}

.task-card.status-in_bearbeitung {
    border-left-color: var(--warning);
    background: #fffbf0;
}

.task-card.status-ausstehend {
    border-left-color: var(--muted);
}

.task-card.priority-kritisch {
    background: #fef2f2;
}

.task-card.priority-hoch {
    background: #fef3f2;
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.task-role,
.task-from {
    background: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-weight: 600;
    color: var(--primary);
}

.task-status {
    background: var(--accent);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
}

.task-card h4 {
    margin: 0.5rem 0 0.3rem;
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.task-card p {
    margin: 0.3rem 0;
    color: #555;
    font-size: 0.85rem;
    line-height: 1.4;
}

.task-meta {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted);
}

.task-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.btn-action {
    padding: 0.4rem 0.8rem;
    background: var(--info);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}

.btn-start {
    background: var(--success);
}

.btn-complete {
    background: var(--accent);
}

.btn-action:hover {
    opacity: 0.9;
}

.task-completed {
    background: #f0fdf4;
    color: var(--success);
    padding: 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.task-notes {
    background: white;
    padding: 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--primary);
    margin-top: 0.5rem;
}

.message-card {
    background: white;
    border: 1px solid var(--border);
    padding: 0.8rem;
    border-radius: 4px;
    border-left: 3px solid var(--info);
}

.message-card.unread {
    border-left: 3px solid var(--accent);
    background: #fff9f7;
    font-weight: 500;
}

.message-card.msg-unread {
    border-left: 4px solid var(--accent);
    background: #fff0f0;
    box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.18);
}

.message-state {
    display: inline-block;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.msg-action-row {
    margin-top: 0.45rem;
}

.btn-mark-read {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-mark-read:hover {
    background: #b90015;
}

.msg-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.msg-role {
    background: var(--info);
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: bold;
}

.message-card p {
    margin: 0.4rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.message-card small {
    color: var(--muted);
    font-size: 0.75rem;
}

/* ============================================
   S-FUNCTION PAGE
   ============================================ */

.s-function-page .container {
    padding-bottom: 2rem;
}

.s-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

.s-panel {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--info);
}

.s-panel h2 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 1.1rem;
}

.s-panel h3 {
    margin: 1rem 0 0.75rem;
    color: var(--primary);
    font-size: 0.95rem;
}

.status-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.stat-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #ecf0f1 100%);
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--border);
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent);
}

/* ============================================
   ADMIN PAGE
   ============================================ */

.admin-page .container {
    padding-bottom: 2rem;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-top: 3px solid var(--accent);
}

.stat-card h3 {
    margin: 0 0 0.8rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.stat-large {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent);
}

.stat-large.pending {
    color: var(--muted);
}

.stat-large.inprogress {
    color: var(--warning);
}

.stat-large.completed {
    color: var(--success);
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.admin-panel {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-panel.full-width {
    grid-column: 1 / -1;
}

.admin-panel h2 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 1.1rem;
}

.role-stats {
    display: grid;
    gap: 1rem;
}

.role-stat-card {
    background: #f8f9fa;
    padding: 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--info);
}

.role-stat-card h4 {
    margin: 0 0 0.5rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.role-stat-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.role-stat-detail strong {
    color: var(--primary);
}

.progress-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 3px;
    transition: var(--transition);
}

.users-list {
    display: grid;
    gap: 0.5rem;
}

.user-item {
    background: #f8f9fa;
    padding: 0.7rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 2px solid var(--success);
}

.user-name {
    font-weight: 600;
    color: var(--primary);
}

.user-role {
    background: var(--info);
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
    font-size: 0.75rem;
}

.search-input,
.filter-select {
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
}

.search-input {
    flex: 1;
}

.tasks-table {
    overflow-x: auto;
    margin-top: 1rem;
}

.tasks-table-element {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tasks-table-element th {
    background: var(--primary);
    color: white;
    padding: 0.7rem;
    text-align: left;
    font-weight: 600;
}

.tasks-table-element td {
    padding: 0.7rem;
    border-bottom: 1px solid var(--light);
}

.task-row:hover {
    background: #f8f9fa;
}

.task-row.status-abgeschlossen {
    background: #f0fdf4;
}

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.status-badge.ausstehend {
    background: var(--muted);
}

.status-badge.in_bearbeitung {
    background: var(--warning);
}

.status-badge.abgeschlossen {
    background: var(--success);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .mesa-grid,
    .s-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr;
    }

    .status-overview {
        grid-template-columns: 1fr;
    }

    .navbar {
        flex-direction: column;
        gap: 1rem;
    }

    .navbar .nav-left,
    .navbar .nav-center,
    .navbar .nav-right {
        width: 100%;
        justify-content: center;
    }

    .nav-title {
        font-size: 1.1rem;
    }

    .tasks-table-element {
        font-size: 0.75rem;
    }

    .tasks-table-element th,
    .tasks-table-element td {
        padding: 0.4rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.5rem;
    }

    .login-card {
        padding: 1.5rem;
    }

    .mesa-panel,
    .s-panel,
    .admin-panel {
        padding: 1rem;
    }

    .task-list,
    .message-list {
        max-height: 400px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DIGITALE UHR IN NAVBAR
   ============================================ */

.digital-clock-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.12);
    padding: 4px 12px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    margin-top: 2px;
}

.clock-nav-display {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.clock-nav-date {
    font-size: 0.7rem;
    opacity: 0.85;
    font-weight: 500;
    color: #fff;
}

/* ============================================
   S1 PERSONALPLANUNG - SPEZIFISCHE STYLES
   ============================================ */

/* Setting Bar */
.setting-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.setting-bar input[type="number"] {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.88rem;
}

.small-status {
    font-size: 0.82rem;
    color: var(--success);
}

/* S1 Dashboard */
.s1-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

.dash-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

.dash-card.dash-ok    { border-left: 4px solid var(--success); }
.dash-card.dash-warn  { border-left: 4px solid var(--warning); }
.dash-card.dash-alert { border-left: 4px solid var(--accent); }

.dash-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.dash-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.dash-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 2px;
}

.loc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.loc-badge {
    background: #eef6ff;
    color: var(--info);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.loc-count {
    font-weight: 700;
}

.warn-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--accent);
}

/* Section Cards */
.section-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* 3-Spalten Formular */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}

.field input, .field select {
    padding: 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.87rem;
    font-family: inherit;
}

.field input:focus, .field select:focus {
    outline: 2px solid transparent;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

/* Toolbar */
.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.search-input-sm {
    flex: 1 1 200px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.87rem;
}

.search-input-sm:focus {
    outline: 2px solid transparent;
    border-color: var(--info);
}

.small { font-size: 0.82rem; color: var(--muted); }

/* Buttons */
.btn-sm { padding: 4px 10px; font-size: 0.82rem; }

/* Personaltabelle */
.table-wrap {
    overflow: auto;
    max-height: 50vh;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 8px;
}

.person-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1100px;
    font-size: 0.87rem;
}

.person-table th,
.person-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    word-break: break-word;
}

.person-table th {
    background: #f8fafc;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid #e2e8f0;
}

.person-table tr:nth-child(even) td { background: #fbfcfd; }
.person-table tbody tr:hover td { background: #eef6ff; }

.person-table .th-actions,
.person-table .td-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #f8fafc;
    box-shadow: -4px 0 6px rgba(0,0,0,0.05);
}

.person-table td.td-actions { background: #fff; }
.person-table tr:nth-child(even) td.td-actions { background: #fbfcfd; }
.person-table tbody tr:hover td.td-actions { background: #eef6ff; }

.row-warn td   { background: #fffaf0 !important; }
.row-overdue td { background: #fff5f5 !important; }

/* Status-Badges */
.sbadge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.sbadge-einsatz   { background: #c6f6d5; color: #276749; }
.sbadge-reserve   { background: #bee3f8; color: #2c5282; }
.sbadge-abgeloest { background: #e2e8f0; color: #4a5568; }
.sbadge-verfuegbar{ background: #fefcbf; color: #744210; }

.actions { display: flex; gap: 4px; flex-wrap: wrap; }
.empty-row td { text-align: center; color: var(--muted); padding: 1.5rem; font-size: 0.9rem; }

/* S-Funktion rechte Spalte */
.s-right-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Placeholder Card */
.placeholder-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-top: 1rem;
}

.placeholder-card h3 { color: #1a202c; margin-bottom: 0.5rem; }

.role-subtitle {
    font-size: 0.9rem;
    color: var(--muted);
    margin: -0.5rem 0 1rem;
}

.muted-text { color: var(--muted); font-size: 0.88rem; }

/* Einsatztagebuch actions */
.diary-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* ============================================
   S-FUNCTION GRID: wird oben definiert
   ============================================ */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
}
.process-page{background:#eef2f5;color:#17202b}.process-shell{max-width:1500px;margin:auto;padding:20px}.process-hero{background:linear-gradient(120deg,#172a3a,#244b63);color:#fff;border-radius:14px;padding:24px;display:flex;justify-content:space-between;gap:20px;align-items:center}.process-hero h1{font-size:1.35rem;margin:.6rem 0 0}.process-status{background:#c8102e;border-radius:99px;padding:6px 12px;font-weight:700}.meeting-clock{text-align:right;display:grid;gap:4px}.meeting-clock strong{font:700 1.7rem monospace;color:#ffdd78}.workflow{display:flex;align-items:center;justify-content:center;gap:10px;overflow:auto;padding:17px 5px}.workflow span{white-space:nowrap;background:#fff;border:1px solid #d5dce2;border-radius:99px;padding:8px 13px;font-weight:700}.workflow i{color:#c8102e;font-style:normal}.process-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.process-metrics div{background:#fff;border-radius:10px;padding:14px;border-left:4px solid #c8102e;display:flex;align-items:center;gap:12px}.process-metrics b{font-size:1.7rem}.process-metrics span{font-size:.82rem}.process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.process-card{background:#fff;border:1px solid #dfe5ea;border-radius:12px;padding:18px;box-shadow:0 2px 8px #1c304312}.process-card.wide{grid-column:1/-1}.process-card h2{font-size:1.05rem;color:#24394a;margin:0 0 14px}.process-card form{display:grid;gap:10px}.process-card label{display:grid;gap:5px;font-size:.82rem;font-weight:700}.process-card input,.process-card textarea,.process-card select{width:100%;box-sizing:border-box;border:1px solid #c9d2da;border-radius:6px;padding:9px;font:inherit}.role-checks{display:flex;gap:12px;flex-wrap:wrap}.role-checks label,.process-card label:has(input[type=checkbox]){display:flex;align-items:center;gap:5px}.role-checks input,.process-card input[type=checkbox]{width:auto}.process-list{display:grid;gap:10px}.process-list article{border:1px solid #dae1e7;border-left:4px solid #7b8c99;border-radius:7px;padding:12px}.process-list article header,.process-list article footer{display:flex;justify-content:space-between;gap:12px}.process-list article header span{font-size:.8rem;background:#edf1f4;border-radius:99px;padding:3px 8px}.process-list article footer{font-size:.78rem;color:#667784;align-items:center}.process-list button{background:#c8102e;color:white;border:0;border-radius:5px;padding:7px 10px}.process-list blockquote{margin:10px 0 0;padding:9px;background:#eef6fa;border-left:3px solid #3485ae}.process-list blockquote.problem{background:#fff0f0;border-color:#c8102e}.decision{background:#fff5d6;padding:8px}.process-toast{position:fixed;right:20px;bottom:20px;background:#163d2a;color:#fff;padding:12px 18px;border-radius:8px;transform:translateY(100px);transition:.2s}.process-toast.show{transform:none}.process-toast.bad{background:#a31328}@media(max-width:800px){.process-grid{grid-template-columns:1fr}.process-card.wide{grid-column:auto}.process-metrics{grid-template-columns:repeat(2,1fr)}.process-hero{align-items:flex-start;flex-direction:column}.meeting-clock{text-align:left}.workflow{justify-content:flex-start}}
.process-widget{position:fixed;z-index:9999;right:16px;bottom:16px;width:260px;background:#172a3a;color:#fff!important;padding:11px 14px;border-radius:10px;box-shadow:0 5px 22px #0005;text-decoration:none;display:grid;gap:3px}.process-widget span{font-size:.72rem;color:#ffcf65;text-transform:uppercase}.process-widget b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.process-widget strong{font:700 .8rem monospace}

/* Benutzerführung im zentralen Führungsprozess */
.process-page{scroll-behavior:smooth}.process-page .navbar{position:sticky;top:0;z-index:50}.process-context{position:sticky;top:70px;z-index:40;margin:0 0 16px;padding:10px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid #dfe5ea;border-radius:10px;display:flex;align-items:center;gap:22px;box-shadow:0 3px 12px #1c304312}.process-context>div{display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800;color:#72808c}.process-context nav{display:flex;gap:4px;flex:1}.process-context nav a{color:#334b5d;text-decoration:none;padding:7px 9px;border-radius:6px;font-size:.82rem;font-weight:700}.process-context nav a:hover,.process-context nav a:focus-visible{background:#edf2f6;color:#a31328}.sync-state{font-size:.74rem;color:#48735d;white-space:nowrap}.sync-state::before{content:'●';margin-right:5px}.sync-state.offline{color:#a31328}.card-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px}.card-heading h2{margin:1px 0 3px}.card-heading p,.section-help{margin:0;color:#667784;font-size:.82rem;line-height:1.45}.step-number{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#c8102e;color:#fff;font-weight:800}.prep-details{margin-top:14px;border-top:1px solid #e5e9ed;padding-top:10px}.prep-details summary{cursor:pointer;font-size:.82rem;font-weight:750;color:#334b5d}.prep-details p{display:grid;grid-template-columns:36px 1fr;gap:8px;margin:8px 0;font-size:.8rem}.list-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:10px 0 13px;border-bottom:1px solid #edf0f2;margin-bottom:12px}.list-toolbar label{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700}.list-toolbar select{padding:7px 28px 7px 8px;border:1px solid #c9d2da;border-radius:6px;background:#fff}.list-toolbar span{font-size:.78rem;color:#667784}.empty-state{display:flex;align-items:center;justify-content:center;gap:12px;min-height:105px;background:#f7f9fa;border:1px dashed #cbd4db;border-radius:8px;color:#526573}.empty-state>span{width:30px;height:30px;display:grid;place-items:center;background:#dbefe3;color:#247048;border-radius:50%;font-weight:900}.empty-state b{color:#273b4b}.empty-state p{margin:3px 0 0;font-size:.8rem}.process-list article{transition:border-color .15s,box-shadow .15s}.process-list article:hover{border-color:#aab9c4;box-shadow:0 3px 12px #1c304310}.process-list article p{line-height:1.5}.process-list article footer button{cursor:pointer;font-weight:700}.process-list article footer button:hover{background:#9e0b23}.diary-list article{border-left-color:#3485ae}.process-dialog{width:min(680px,calc(100vw - 32px));padding:0;border:0;border-radius:14px;box-shadow:0 22px 70px #10182066;color:#1c2e3c}.process-dialog::backdrop{background:#10233199;backdrop-filter:blur(2px)}.process-dialog form{display:grid;gap:13px;padding:20px}.process-dialog header,.process-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.process-dialog h2{margin:2px 0 0}.process-dialog label{display:grid;gap:5px;font-size:.82rem;font-weight:700}.process-dialog input,.process-dialog textarea,.process-dialog select{box-sizing:border-box;width:100%;border:1px solid #bdc9d2;border-radius:7px;padding:10px;font:inherit}.process-dialog input:focus,.process-dialog textarea:focus,.process-dialog select:focus,.process-card input:focus,.process-card textarea:focus,.process-card select:focus{outline:3px solid #c8102e24;border-color:#c8102e}.dialog-close{border:0;background:#edf1f4;color:#31495a;border-radius:50%;font-size:1.4rem;width:34px;height:34px;cursor:pointer}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.process-dialog footer{justify-content:flex-end;padding-top:6px}.process-toast{z-index:10000;max-width:min(420px,calc(100vw - 40px));box-shadow:0 8px 30px #0004}
@media(max-width:800px){.process-context{top:58px;overflow:auto}.process-context>div,.sync-state{display:none}.process-context nav{min-width:max-content}.form-pair{grid-template-columns:1fr}.list-toolbar{align-items:stretch;flex-direction:column}.list-toolbar label{justify-content:space-between}.process-widget{left:12px;right:12px;bottom:10px;width:auto}.process-list article header,.process-list article footer{align-items:flex-start;flex-direction:column}}

/* WCAG 2.2 AA: Tastatur, Touch, Kontrast und Anpassbarkeit */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;z-index:20000;left:12px;top:8px;padding:12px 16px;background:#fff;color:#111;border:3px solid #111;border-radius:6px;font-weight:800;text-decoration:none;transform:translateY(-150%)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffbf47!important;outline-offset:3px!important;box-shadow:0 0 0 2px #111!important}.btn,.btn-action,.btn-icon,.btn-mark-read,.filter-btn,.btn-logout,.btn-logout-sm,.role-card button{min-height:44px}.btn-icon{min-width:44px}.filter-btn{padding-left:12px;padding-right:12px}.role-card-desc,.overview-sub,.muted-text,.small,.dash-sub{color:#536273!important}.role-card-footer{color:#596979!important}.table-wrap:focus-visible{outline-offset:2px!important}.table-wrap{scrollbar-color:#5b6b78 #eef1f3}.person-table th{color:#17202b}.status-badge.ausstehend{background:#596979}.status-badge.in_bearbeitung{background:#8a5700}.status-badge.abgeschlossen{background:#17613a}.active-user{background:#17613a}.process-widget{min-height:44px}.process-dialog{max-height:calc(100vh - 24px);overflow:auto}input:disabled,select:disabled,textarea:disabled{opacity:1;color:#4a5560;background:#eef1f3;cursor:not-allowed}@media(max-width:768px){body{font-size:100%}.navbar{padding:.7rem}.navbar .nav-left,.navbar .nav-center,.navbar .nav-right{gap:.65rem;flex-wrap:wrap}.active-users{flex-wrap:wrap}.table-wrap{border:2px solid #aeb9c1;border-radius:6px}.process-shell{padding:10px}.process-card{padding:14px}.process-metrics{grid-template-columns:1fr 1fr}.overview-main{box-sizing:border-box;padding:1.5rem 1rem!important}.overview-header{padding:1rem!important;gap:12px;flex-wrap:wrap}.overview-header h1{font-size:1.05rem!important}.process-dialog form{padding:15px}}@media(max-width:420px){.process-metrics{grid-template-columns:1fr}.toolbar-row{align-items:stretch}.toolbar-row>*{width:100%;box-sizing:border-box}.nav-subtitle{display:block}.login-card{padding:1.25rem}.process-hero{padding:18px}.meeting-clock strong{font-size:1.35rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.role-card:hover{transform:none}.skip-link{transition:none}}@media(forced-colors:active){.process-status,.step-number,.status-badge,.active-user{border:1px solid currentColor}.process-list article,.process-card,.role-card{border:2px solid CanvasText}.btn,.btn-action,.filter-btn{border:1px solid ButtonText}}