/* ========================================
   MAIN LAYOUT FIX - Page Content Wrapper
   ======================================== */

/* Wrapper für den gesamten Content (verhindert Overlap mit Hamburger) */
.main-content {
    padding-left: 70px; /* 50px Button + 20px Abstand */
    padding-top: 1rem;
    min-height: 100vh;
    transition: padding-left 0.3s ease;
}

/* Content innerhalb des Wrappers */
.main-content .content {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .main-content {
        padding-left: 60px;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding-left: 55px;
    }
    
    /* Überschriften auf Mobile kleiner */
    .main-content h1 {
        font-size: 1.75rem;
    }
    
    .main-content h2 {
        font-size: 1.5rem;
    }
}

/* ========================================
   DARK MODE - Feuerwehr Datenbank
   ======================================== */

:root {
    --primary-color: #dc3545;
    --primary-hover: #c82333;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    
    /* Dark Mode Colors */
    --bg-dark: #1a1a1a;
    --bg-dark-secondary: #2d2d2d;
    --bg-dark-tertiary: #3a3a3a;
    --text-light: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-dark: #404040;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-light);
}

h1:focus {
    outline: none;
}

/* ========================================
   LINKS & BUTTONS
   ======================================== */

a {
    color: #5dade2;
    text-decoration: none;
}

a:hover {
    color: #3498db;
    text-decoration: underline;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--text-light);
    border-color: var(--border-dark);
}

.btn-outline-secondary:hover {      
    background-color: var(--bg-dark-secondary);
    color: var(--text-light);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background-color: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    color: var(--text-light);
}

.card-body {
    background-color: var(--bg-dark-secondary);
}

.card-title {
    color: var(--text-light);
}

/* ========================================
   CARD HEADERS - Einheitliche Styles
   ======================================== */

/* Card Headers mit Gradients - Textfarbe vereinheitlichen */
.card-header {
    color: var(--text-light);
}

.card-header h5 {
    color: inherit;
    margin-bottom: 0;
}

/* Warning-Gradient Header braucht dunklen Text */
.bg-warning-gradient {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529 !important;
}

.bg-warning-gradient h5,
.bg-warning-gradient .mb-0 {
    color: #212529 !important;
}

/* Info-Gradient Header */
.bg-info-gradient {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: #fff !important;
}

/* Einheitliche "Hinzufügen"-Buttons in Card-Headers */
.card-header .btn-sm {
    font-weight: 500;
}

/* Light-Button für dunkle Header */
.card-header:not(.bg-warning-gradient) .btn-light,
.card-header:not(.bg-warning-gradient) .btn-sm.btn-light {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    color: #212529;
}

.card-header:not(.bg-warning-gradient) .btn-light:hover {
    background-color: #fff;
    border-color: #fff;
}

/* Dark-Button für Warning-Header (gelb) */
.bg-warning-gradient .btn-dark {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.bg-warning-gradient .btn-dark:hover {
    background-color: #343a40;
    border-color: #343a40;
}

/* ========================================
   OUTLINE BUTTONS FÜR DARK MODE
   ======================================== */

/* Bessere Lesbarkeit für Outline-Buttons */
.btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* ========================================
   FUNCTION & AWARD CARDS
   ======================================== */

.function-card,
.award-card {
    background-color: var(--bg-dark-tertiary);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 1rem;
}

.function-card strong,
.award-card strong {
    color: var(--text-light);
}

.award-card .text-dark {
    color: var(--text-light) !important;
}

/* ========================================
   TABLES
   ======================================== */

.table {
    color: var(--text-light);
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--bg-dark-tertiary);
    --bs-table-hover-bg: var(--bg-dark-tertiary);
    --bs-table-active-bg: var(--bg-dark-secondary);
    border-color: var(--border-dark);
}

.table > :not(caption) > * > * {
    background-color: var(--bg-dark-secondary);
    border-bottom-color: var(--border-dark);
    color: var(--text-light);
}

.table tbody tr {
    background-color: var(--bg-dark-secondary);
}

.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: var(--text-light);
}

.table thead th {
    background-color: var(--bg-dark-tertiary);
    color: var(--text-light);
    border-color: var(--border-dark);
    font-weight: 600;
}

.table td, .table th {
    border-color: var(--border-dark);
    padding: 0.75rem;
}

.table-success {
    background-color: rgba(40, 167, 69, 0.15) !important;
}

/* ✅ NEU: table-warning für Dark Mode */
.table-warning,
.table-warning > td,
.table-warning > th,
.table > tbody > tr.table-warning > td {
    --bs-table-bg: rgba(255, 193, 7, 0.15) !important;
    --bs-table-hover-bg: rgba(255, 193, 7, 0.25) !important;
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--text-light) !important;
}

.table-hover > tbody > tr.table-warning:hover,
.table-hover > tbody > tr.table-warning:hover > td {
    --bs-table-hover-bg: rgba(255, 193, 7, 0.25) !important;
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: var(--text-light) !important;
}

.table-responsive {
    background-color: transparent;
}

/* ========================================
   FORMS
   ======================================== */

.form-control, .form-select {
    background-color: var(--bg-dark-tertiary);
    border-color: var(--border-dark);
    color: var(--text-light);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-dark-tertiary);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.form-label {
    color: var(--text-light);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    font-weight: 500;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-info {
    background-color: var(--info-color) !important;
}

.bg-warning {
    background-color: var(--warning-color) !important;
    color: #000 !important;
}

.bg-dark {
    background-color: #212529 !important;
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-dark);
    color: var(--text-light);
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.2);
    border-color: var(--info-color);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-danger {
    color: #e74c3c !important;
}

.text-success {
    color: #2ecc71 !important;
}

.text-warning {
    color: #f39c12 !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination .page-link {
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-dark);
    color: var(--text-light);
}

.pagination .page-link:hover {
    background-color: var(--bg-dark-tertiary);
    color: var(--text-light);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-dark-secondary);
    color: var(--text-muted);
}

/* ========================================
   TABS
   ======================================== */

.nav-tabs {
    border-bottom: 1px solid var(--border-dark);
}

.nav-tabs .nav-link {
    color: var(--text-light);
    background-color: transparent;
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    border-color: var(--border-dark);
    background-color: var(--bg-dark-secondary);
}

.nav-tabs .nav-link.active {
    color: var(--text-light);
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-dark) var(--border-dark) transparent;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.content {
    padding-top: 1.1rem;
    background-color: var(--bg-dark);
}

/* ========================================
   VALIDATION
   ======================================== */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color);
}

.invalid {
    outline: 1px solid var(--danger-color);
}

.validation-message {
    color: var(--danger-color);
}

/* ========================================
   ERROR UI
   ======================================== */

#blazor-error-ui {
    background: var(--danger-color);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9TiA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI6U2UyNDYwLjYgNTQuMjI4OSAyMDAuMTg0IDIwMC4xNTggMjAwLjIxMDQgMjAwLjI0NzAgMTYuNTA3IDI5NS4yMzM1IEM5LjUzNzcsMC41MTE3NTg5NjIgNS43MDY2NSwwLjE4MjA2NzQ1Mg0KCXdlYnBhY2s6cm93Mjs7IzEyOS04NTMiLz48cGF0aCBjbGFzcz0ic2ljayIgc3R5bGU9Im1hcmdpbjogMTBweCBhdXRvOyIgZD0iTTI2My41NTUgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9TiA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUEyMDguMzc1IDUwLjk5OTkgMjY2LjYwNiA1Mi4yNjU4Cgl9fQ==) no-repeat 1rem/1.8rem, var(--danger-color);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ============================================
   MEMBER DETAIL - MODERN ANIMATIONS
   ============================================ */

/* Card Hover Effects */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.1);
}

    .hover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.4);
        border-color: rgba(255,255,255,0.2);
    }

/* Button Lift Effect */
.hover-lift {
    transition: all 0.2s ease;
}

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .hover-lift:active {
        transform: translateY(0);
    }

/* Fade In Up Animation */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In Animation */
.slide-in {
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In Animation (for modals) */
.scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse Badge Animation */
.pulse-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(25, 135, 84, 0);
    }
}

/* Gradient Headers */
.bg-primary-gradient {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
}

.bg-success-gradient {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    color: white;
}

.bg-danger-gradient {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
    color: white;
}

.bg-warning-gradient {
    background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
    color: #000;
}

.bg-info-gradient {
    background: linear-gradient(135deg, #0dcaf0 0%, #31d2f2 100%);
    color: #000;
}

.bg-secondary-gradient {
    background: linear-gradient(135deg, #6c757d 0%, #5c636a 100%);
    color: white;
}

/* Modal Dark Mode */
.modal-dark .modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}

.modal-dark .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-dark .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.modal-dark .form-control,
.modal-dark .form-select {
    background: #16213e;
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

    .modal-dark .form-control:focus,
    .modal-dark .form-select:focus {
        background: #1a1a2e;
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

.modal-dark .form-label {
    color: rgba(255,255,255,0.8);
}

.modal-dark .btn-close {
    filter: invert(1);
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 30px;
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #0d6efd, #6c757d);
    }

.timeline-item {
    position: relative;
    animation: fadeInUp 0.3s ease-out;
}

.timeline-badge {
    position: absolute;
    left: -30px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

/* Staggered animations for lists */
.stagger-item {
    animation: fadeInUp 0.4s ease-out backwards;
}

    .stagger-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .stagger-item:nth-child(2) {
        animation-delay: 0.1s;
    }

    .stagger-item:nth-child(3) {
        animation-delay: 0.15s;
    }

    .stagger-item:nth-child(4) {
        animation-delay: 0.2s;
    }

    .stagger-item:nth-child(5) {
        animation-delay: 0.25s;
    }

    .stagger-item:nth-child(6) {
        animation-delay: 0.3s;
    }

/* Table row animations */
.table tbody tr {
    transition: background-color 0.2s ease;
}

    .table tbody tr:hover {
        background-color: rgba(13, 110, 253, 0.1) !important;
    }

/* Icon animations */
.icon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-bounce {
    animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Badge glow effects */
.badge-glow-success {
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.5);
}

.badge-glow-danger {
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.badge-glow-warning {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* Smooth tab transitions */
.nav-tabs .nav-link {
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

    .nav-tabs .nav-link:hover {
        border-bottom-color: rgba(13, 110, 253, 0.5);
        background: rgba(13, 110, 253, 0.1);
    }

    .nav-tabs .nav-link.active {
        border-bottom-color: #0d6efd;
    }

/* Input focus animations */
.form-control, .form-select {
    transition: all 0.2s ease;
}

    .form-control:focus, .form-select:focus {
        transform: scale(1.01);
    }

/* Switch animation */
.form-check-input {
    transition: all 0.2s ease;
}

    .form-check-input:checked {
        animation: switchOn 0.3s ease;
    }

@keyframes switchOn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
/* ========================================
   PRINT COLORS - Status-Farben für Ausdrucke
   ======================================== */

/* Status-Badges für Druck */
.print-status-active {
    background: #d9534f !important;
    color: #fff !important;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

.print-status-passive {
    background: #6c757d !important;
    color: #fff !important;
    padding: 2px 6px;
    border-radius: 3px;
}

.print-status-supporting {
    background: #5cb85c !important;
    color: #fff !important;
    padding: 2px 6px;
    border-radius: 3px;
}

.print-status-youth {
    background: #5bc0de !important;
    color: #000 !important;
    padding: 2px 6px;
    border-radius: 3px;
}

.print-status-child {
    background: #f0ad4e !important;
    color: #000 !important;
    padding: 2px 6px;
    border-radius: 3px;
}

.print-status-honorary {
    background: #9b59b6 !important;
    color: #fff !important;
    padding: 2px 6px;
    border-radius: 3px;
}

/* G26.3 Status */
.print-g26-valid {
    background: #dff0d8 !important;
    color: #3c763d !important;
}

.print-g26-expiring {
    background: #fcf8e3 !important;
    color: #8a6d3b !important;
}

.print-g26-expired {
    background: #f2dede !important;
    color: #a94442 !important;
}

/* Checkbox-Markierungen */
.print-check-yes {
    color: #3c763d !important;
    font-weight: bold;
}

.print-check-no {
    color: #999 !important;
}

@media print {
    .print-status-active,
    .print-status-passive,
    .print-status-supporting,
    .print-status-youth,
    .print-status-child,
    .print-status-honorary,
    .print-g26-valid,
    .print-g26-expiring,
    .print-g26-expired {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* ========================================
   LOADING SPINNER
   ======================================== */

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border-dark);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primary-color);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--text-light);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ========================================
   CODE BLOCKS
   ======================================== */

code {
    color: #e74c3c;
    background-color: var(--bg-dark-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

/* ========================================
   MODERN OVERLAY NAVIGATION
   ======================================== */

/* Hamburger Button */
.hamburger-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    background-color: var(--primary-color);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hamburger-btn:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
}

.hamburger-btn span {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Backdrop */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
/* Overlay Menu */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: linear-gradient(180deg, #1e1e1e 0%, #151515 100%);
    z-index: 1050;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.sidebar-overlay.open {
    left: 0;
}

/* Header */
.sidebar-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #a82834 100%);
    flex-shrink: 0;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-icon {
    font-size: 2rem;
}

.header-brand h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Scrollable Content */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}

.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Navigation Sections */
.nav-section {
    padding: 0.5rem 0;
}

.nav-section:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-section-title {
    padding: 0.75rem 1.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

/* Nav Links */
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 0.125rem 0.5rem;
    border-radius: 8px;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: rgba(220, 53, 69, 0.15);
    color: #fff;
}

.nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.nav-icon.icon-info { background: rgba(23, 162, 184, 0.2); color: #17a2b8; }
.nav-icon.icon-success { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.nav-icon.icon-warning { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.nav-icon.icon-danger { background: rgba(220, 53, 69, 0.2); color: #dc3545; }

.nav-link.active .nav-icon {
    background: var(--primary-color);
    color: white;
}

/* User Footer */
.sidebar-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), #a82834);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    font-weight: 600;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
}

.user-role {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.logout-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.15);
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   EXERCISE LISTS - DASHBOARD
   ======================================== */

/* Container & Header */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.fire-icon {
    display: inline-block;
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

.dashboard-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0;
}

/* ========================================
   PRINT STYLES - Anwesenheitsliste
   ======================================== */
/* Screen: print-only verstecken */
.print-only {
    display: none !important;
}

/* Print: screen-only verstecken, print-only zeigen */
@media print {
    /* Screen-Elemente ausblenden */
    .screen-only,
    .hamburger-btn,
    .sidebar-overlay,
    .sidebar-backdrop,
    .nav,
    .nav-tabs,
    .modal {
        display: none !important;
    }
    .print-sheet {
        display: flex !important;
        flex-direction: column !important;
        min-height: calc(297mm - 10mm) !important; /* A4 minus Ränder */
        page-break-after: always;
        page-break-inside: avoid;
    }

    .print-foot {
        margin-top: auto !important;
    }
    /* Print-Inhalte zeigen */
    .print-only {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset für Body/HTML */
    body, html {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Layout-Container zurücksetzen */
    .main-content,
    .content,
    #app,
    .page {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Print-Sheet Styles */
    /* ===== Print Sheet (Screen-Styles) ===== */
    .print-sheet {
        width: 100%;
        max-width: 100%;
        min-height: 297mm; /* A4 Höhe - WICHTIG! */
        padding: 15px;
        background: #fff;
        color: #333;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 9pt;
        box-sizing: border-box;
        display: flex; /* Flexbox für Footer-Positionierung */
        flex-direction: column;
    }

    /* Footer am Seitenende */
    .print-foot {
        display: flex;
        justify-content: space-between;
        padding: 8px 15px;
        margin-top: auto; /* WICHTIG: Schiebt Footer ans Ende */
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        font-size: 8pt;
        color: #666;
    }

    /* Print-Tabellen sollen wachsen */
    .print-tbl {
        flex: 1; /* Tabelle nimmt verfügbaren Platz */
        width: 100%;
        border-collapse: collapse;
        font-size: 9pt;
    }

    /* Print-Elemente mit Farben beibehalten - NUR für Übungslisten, NICHT für MemberPrintView */
    .print-section-title:not(.print-sheet .print-section-title) {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Nur .print-tbl OHNE .print-tbl-data (Mitglieder-Datenblatt hat eigene Styles) */
    .print-tbl:not(.print-tbl-data) th {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-info {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-summary {
        background: #d4edda !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 5mm 8mm;
    }
}

/* ===== Print Sheet (Screen-Styles) ===== */
.print-sheet {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    background: #fff;
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9pt;
    box-sizing: border-box;
}

/* Footer relativ positioniert */
.print-foot {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    margin-top: 15px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    font-size: 8pt;
    color: #666;
    /* KEIN position: absolute; bottom: 0; */
}

/* ===== Print Header ===== */
.print-head {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 3px solid #000;
}

.print-logo-img {
    height: 55px;
    width: auto;
    margin-right: 20px;
}

.print-head-title {
    flex: 1;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===== Info Box ===== */
.print-info {
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 1px solid #999;
}

.print-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
}

    .print-row:last-child {
        margin-bottom: 0;
    }

    .print-row .lbl {
        font-weight: 600;
        font-size: 9pt;
        white-space: nowrap;
    }

    .print-row .line {
        border-bottom: 1px solid #000;
        height: 22px;
        min-width: 50px;
    }

        .print-row .line.grow {
            flex: 1;
        }

        .print-row .line.w50 {
            width: 60px;
        }

        .print-row .line.w60 {
            width: 70px;
        }

        .print-row .line.w80 {
            width: 100px;
        }

        .print-row .line.w120 {
            width: 150px;
        }

/* ===== Teilnehmer-Tabelle ===== */
.print-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}

    .print-tbl th, .print-tbl td {
        border: 1px solid #333;
        padding: 4px 8px;
        height: 24px;
        vertical-align: middle;
    }

    .print-tbl th {
        background: #333;
        color: #fff;
        font-size: 8pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .print-tbl .c-name {
        width: 34%;
        font-size: 9pt;
    }

    .print-tbl .c-anw {
        width: 6%;
        text-align: center;
    }

    .print-tbl .c-sign {
        width: 18%;
    }

    .print-tbl .c-gap {
        width: 2%;
        border: none;
        background: #fff;
    }

    .print-tbl tbody tr:nth-child(odd) td:not(.c-gap) {
        background: #f5f5f5;
    }

    .print-tbl tbody tr:nth-child(even) td:not(.c-gap) {
        background: #fff;
    }

/* ===== Footer ===== */
.print-foot {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    margin-top: 8px;
    border-top: 2px solid #000;
    font-size: 8pt;
}

.print-foot-left {
    font-weight: 600;
}

.print-foot-center {
    padding: 3px 10px;
    background: #eee;
    font-size: 7pt;
}

.print-foot-right {
    color: #555;
}

/* Print Farben erhalten */
@media print {
    .print-tbl th,
    .print-info,
    .print-tbl tbody tr:nth-child(odd) td:not(.c-gap),
    .print-foot-center {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* ========================================
   DASHBOARD - Modern Animated Design
   (Nach den Print Styles hinzufügen!)
   ======================================== */

/* Fade In Animation */
.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading Animation */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) { animation-delay: -0.45s; }
.spinner-ring:nth-child(2) { animation-delay: -0.3s; opacity: 0.8; }
.spinner-ring:nth-child(3) { animation-delay: -0.15s; opacity: 0.6; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 1rem;
}

/* Stagger Animations */
.stagger-1 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.15s; opacity: 0; }
.stagger-3 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.2s; opacity: 0; }
.stagger-4 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.25s; opacity: 0; }
.stagger-5 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.3s; opacity: 0; }
.stagger-6 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.35s; opacity: 0; }
.stagger-7 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.4s; opacity: 0; }
.stagger-8 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.45s; opacity: 0; }
.stagger-9 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.5s; opacity: 0; }
.stagger-10 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.55s; opacity: 0; }
.stagger-11 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.6s; opacity: 0; }
.stagger-12 { animation: fadeSlideUp 0.5s ease forwards; animation-delay: 0.65s; opacity: 0; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero Stat Card */
.hero-stat-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, #a82834 100%);
    border-radius: 20px;
    padding: 2rem;
    color: white;
    box-shadow: 0 10px 40px rgba(220, 53, 69, 0.3);
    position: relative;
    overflow: hidden;
}

.hero-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse-bg 4s ease-in-out infinite;
}

@keyframes pulse-bg {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

.hero-stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-stat-info {
    display: flex;
    flex-direction: column;
}

.hero-stat-label {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.hero-stat-number {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hero-stat-sublabel {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Ring Chart */
.member-ring-chart {
    position: relative;
    width: 140px;
    height: 140px;
}

.member-ring-chart svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 8;
}

.ring-active {
    fill: none;
    stroke: #fff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: calc(var(--percentage) * 2.51), 251;
    animation: ringFill 1.5s ease-out forwards;
}

@keyframes ringFill {
    from { stroke-dasharray: 0, 251; }
}

.ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.ring-percent {
    font-size: 1.75rem;
    font-weight: 700;
}

.ring-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Stat Cards */
.stat-card {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-dark);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-card:hover .stat-card-hover-icon {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-card-active .stat-card-icon { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.stat-card-passive .stat-card-icon { background: rgba(108, 117, 125, 0.2); color: #6c757d; }
.stat-card-supporting .stat-card-icon { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.stat-card-honorary .stat-card-icon { background: rgba(255, 193, 7, 0.2); color: #ffc107; }

.stat-card-content {
    display: flex;
    flex-direction: column;
}

.stat-card-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card-label {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.stat-card-bar {
    height: 4px;
    background: var(--bg-dark-tertiary);
    border-radius: 2px;
    margin-top: 1rem;
    overflow: hidden;
}

.stat-card-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    animation: barFill 1s ease-out forwards;
    animation-delay: 0.5s;
}

.stat-card-active .stat-card-bar-fill { background: linear-gradient(90deg, #28a745, #34ce57); }
.stat-card-passive .stat-card-bar-fill { background: linear-gradient(90deg, #6c757d, #868e96); }
.stat-card-supporting .stat-card-bar-fill { background: linear-gradient(90deg, #dc3545, #e4606d); }
.stat-card-honorary .stat-card-bar-fill { background: linear-gradient(90deg, #ffc107, #ffda6a); }

@keyframes barFill {
    to { width: var(--bar-width); }
}

.stat-card-hover-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateX(10px) translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    color: var(--text-muted);
}

/* Section Header */
.section-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

/* Feature Cards (Youth & Child) */
.feature-card {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-dark);
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.feature-card-bg {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 8rem;
    opacity: 0.05;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-card-bg {
    opacity: 0.1;
    transform: scale(1.1);
}

.feature-card-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.feature-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.feature-icon {
    font-size: 1.5rem;
}

.feature-card-youth .feature-icon { color: #17a2b8; }
.feature-card-child .feature-icon { color: #ffc107; }

.feature-card-header h5 {
    margin: 0;
    font-weight: 600;
    color: var(--text-light);
}

.feature-card-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.feature-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.feature-label {
    color: var(--text-muted);
}

.feature-card-progress {
    height: 6px;
    background: var(--bg-dark-tertiary);
    border-radius: 3px;
    margin-top: 1rem;
    overflow: hidden;
}

.progress-bar-animated {
    height: 100%;
    width: 0;
    border-radius: 3px;
    animation: barFill 1.2s ease-out forwards;
    animation-delay: 0.6s;
}

.feature-card-youth .progress-bar-animated { background: linear-gradient(90deg, #17a2b8, #20c9e0); }
.feature-card-child .progress-bar-animated { background: linear-gradient(90deg, #ffc107, #ffda6a); }

.feature-card-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
    margin-left: 1rem;
}

.feature-card:hover .feature-card-arrow {
    transform: translateX(5px);
    color: var(--text-light);
}

/* Readiness Cards */
.readiness-card {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    border: 1px solid var(--border-dark);
    transition: all 0.3s ease;
}

.readiness-card:hover {
    border-color: var(--primary-color);
}

.readiness-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.readiness-icon.breathing {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.2), rgba(23, 162, 184, 0.1));
    color: #17a2b8;
}

.readiness-icon.active-duty {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: #28a745;
}

.readiness-content {
    flex: 1;
}

.readiness-content h5 {
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    color: var(--text-light);
}

.readiness-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.readiness-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
}

.readiness-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.readiness-bar {
    position: relative;
    height: 8px;
    background: var(--bg-dark-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.readiness-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #17a2b8, #20c9e0);
    border-radius: 4px;
    animation: barFill 1.5s ease-out forwards;
    animation-delay: 0.8s;
}

.readiness-bar-fill.success {
    background: linear-gradient(90deg, #28a745, #34ce57);
}

.readiness-bar-text {
    position: absolute;
    right: 0;
    top: -1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dark);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.quick-action-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), #a82834);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.quick-action-btn.primary:hover { box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4); color: white; }

.quick-action-btn.success {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.quick-action-btn.success:hover { box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); color: white; }

.quick-action-btn.info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.quick-action-btn.info:hover { box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4); color: white; }

.quick-action-btn.warning {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.quick-action-btn.warning:hover { box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4); color: #212529; }

/* Hero Actions (für Übungslisten) */
.hero-actions {
    display: flex;
    gap: 0.5rem;
}

.hero-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Exercise List Hero */
.exercise-result-hero {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

/* Exercise Cards */
.exercise-card { cursor: pointer; position: relative; }
.exercise-card.selected {
    border-color: var(--success-color) !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
}
.exercise-card .stat-card-number.exercise-title { font-size: 1.1rem; font-weight: 600; }
.exercise-selected-badge { position: absolute; top: 0.75rem; right: 0.75rem; color: var(--success-color); font-size: 1.25rem; }

/* Icon Background Colors */
.icon-bg-info { background: rgba(23, 162, 184, 0.2) !important; color: #17a2b8 !important; }
.icon-bg-warning { background: rgba(255, 193, 7, 0.2) !important; color: #ffc107 !important; }
.icon-bg-danger { background: rgba(220, 53, 69, 0.2) !important; color: #dc3545 !important; }
.icon-bg-success { background: rgba(40, 167, 69, 0.2) !important; color: #28a745 !important; }
.icon-bg-primary { background: rgba(220, 53, 69, 0.2) !important; color: #dc3545 !important; }
.icon-bg-secondary { background: rgba(108, 117, 125, 0.2) !important; color: #6c757d !important; }

/* Bar Colors */
.bar-info { background: linear-gradient(90deg, #17a2b8, #20c9e0) !important; }
.bar-warning { background: linear-gradient(90deg, #ffc107, #ffda6a) !important; }
.bar-danger { background: linear-gradient(90deg, #dc3545, #e4606d) !important; }
.bar-success { background: linear-gradient(90deg, #28a745, #34ce57) !important; }
.bar-primary { background: linear-gradient(90deg, #dc3545, #e4606d) !important; }
.bar-secondary { background: linear-gradient(90deg, #6c757d, #868e96) !important; }

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-title { font-size: 1.75rem; }
    .hero-stat-content { flex-direction: column; text-align: center; }
    .hero-stat-number { font-size: 3rem; }
    .member-ring-chart { margin-top: 1.5rem; }
    .quick-actions { justify-content: center; }
    .quick-action-btn { flex: 1; min-width: 140px; justify-content: center; }
}
/* ========================================
   BIRTHDAYS PAGE - Modern Styles
   ======================================== */

/* Year Selector Card */
.year-selector-card {
    background: linear-gradient(135deg, var(--bg-dark-secondary), var(--bg-dark-tertiary));
    border: 1px solid var(--border-dark);
    border-radius: 16px;
    padding: 1.5rem;
}

.year-selector-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.year-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-dark);
    background: var(--bg-dark-tertiary);
    color: var(--text-light);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .year-nav-btn:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        transform: scale(1.1);
    }

.year-display {
    text-align: center;
}

.year-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.year-value {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), #fd7e14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Birthday Card */
.birthday-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
}

/* Month Section */
.birthday-month-section {
    border-bottom: 1px solid var(--border-dark);
}

    .birthday-month-section:last-child {
        border-bottom: none;
    }

.birthday-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: var(--bg-dark-tertiary);
    font-weight: 600;
}

.month-name {
    text-transform: capitalize;
}

/* Birthday Entry */
.birthday-entries {
    padding: 0.5rem;
}

.birthday-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
}

    .birthday-entry:last-child {
        margin-bottom: 0;
    }

    .birthday-entry:hover {
        background: var(--bg-dark-tertiary);
        border-color: var(--primary-color);
        transform: translateX(5px);
    }

    .birthday-entry.past {
        opacity: 0.6;
    }

    .birthday-entry.today {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(32, 201, 151, 0.1));
        border-color: #28a745;
    }

/* Date Badge */
.birthday-date-badge {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark-tertiary);
    border: 2px solid var(--border-dark);
    flex-shrink: 0;
}

    .birthday-date-badge .day {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
    }

    .birthday-date-badge .month-short {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .birthday-date-badge.past {
        border-color: var(--secondary-color);
        opacity: 0.7;
    }

    .birthday-date-badge.today {
        background: linear-gradient(135deg, #28a745, #20c997);
        border-color: #28a745;
        color: white;
    }

        .birthday-date-badge.today .month-short {
            color: rgba(255, 255, 255, 0.8);
        }

    .birthday-date-badge.upcoming {
        border-color: var(--info-color);
    }

/* Birthday Info */
.birthday-info {
    flex: 1;
    min-width: 0;
}

.birthday-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

    .birthday-name .member-number {
        font-weight: 400;
        font-size: 0.85rem;
    }

/* Age Badge */
.age-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Status Indicator */
.birthday-status {
    flex-shrink: 0;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

    .status-indicator.past {
        background: rgba(108, 117, 125, 0.2);
        color: #adb5bd;
    }

    .status-indicator.today {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        animation: pulse 2s infinite;
    }

    .status-indicator.upcoming {
        background: rgba(23, 162, 184, 0.2);
        color: #17a2b8;
    }

/* Birthday Action */
.birthday-action {
    color: var(--text-muted);
    transition: all 0.2s;
}

.birthday-entry:hover .birthday-action {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* Stat Card Active Indicator */
.stat-card-active-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--success-color);
    font-size: 1.25rem;
}

/* Stat Card Birthdays Specific */
.stat-card-birthdays,
.stat-card-board {
    position: relative;
    cursor: pointer;
}

    .stat-card-birthdays.active,
    .stat-card-board.active {
        border: 2px solid var(--primary-color);
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.3);
    }

/* ========================================
   QUALIFICATIONS REPORT - Modern Styles
   ======================================== */

/* Category Cards */
.category-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .category-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary-color);
        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2);
    }

    .category-card.active {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), var(--bg-dark-secondary));
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.3);
    }

.category-icon {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.category-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.category-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.category-card.active .category-count {
    color: #fff;
}

/* Qualification Grid */
.qualification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.qual-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .qual-card:hover {
        border-color: var(--info-color);
        transform: translateY(-2px);
    }

    .qual-card.active {
        border-color: var(--success-color);
        background: rgba(40, 167, 69, 0.1);
    }

.qual-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
}

.qual-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.5rem;
}

.qual-bar {
    height: 3px;
    background: var(--bg-dark-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.qual-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--info-color), #20c9e0);
    border-radius: 2px;
    transition: width 0.8s ease;
}

.qual-card.active .qual-bar-fill {
    background: linear-gradient(90deg, var(--success-color), #34ce57);
}

.qual-active-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--success-color);
    font-size: 0.875rem;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.stat-mini-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

    .stat-mini-card.primary {
        border-left: 4px solid var(--primary-color);
    }

    .stat-mini-card.success {
        border-left: 4px solid var(--success-color);
    }

.stat-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-dark-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.stat-mini-card.primary .stat-mini-icon {
    background: rgba(220, 53, 69, 0.2);
    color: var(--primary-color);
}

.stat-mini-card.success .stat-mini-icon {
    background: rgba(40, 167, 69, 0.2);
    color: var(--success-color);
}

.stat-mini-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-mini-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Qualification Matrix Table */
.qual-matrix-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.qual-matrix-table thead th {
    background: var(--bg-dark-tertiary);
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-dark);
    vertical-align: bottom;
}

.qual-header {
    min-width: 55px;
    max-width: 70px;
}

.qual-header-text {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qual-row {
    cursor: pointer;
    transition: background 0.2s;
}

    .qual-row:hover {
        background: var(--bg-dark-tertiary) !important;
    }

    .qual-row td {
        padding: 0.625rem 0.5rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-dark);
    }

.qual-check {
    color: var(--success-color);
    font-size: 1rem;
}

.qual-empty {
    color: var(--text-muted);
    opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
    .qualification-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .qual-header-text {
        font-size: 0.6rem;
    }
}

/* ========================================
   DRIVERS LICENSE REPORT - Modern Styles
   ======================================== */

/* License Cards */
.license-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .license-card:hover {
        transform: translateY(-5px);
        border-color: var(--info-color);
        box-shadow: 0 10px 30px rgba(23, 162, 184, 0.2);
    }

    .license-card.active {
        border-color: var(--success-color);
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), var(--bg-dark-secondary));
        box-shadow: 0 0 25px rgba(40, 167, 69, 0.3);
    }

    .license-card.firefighter {
        border-color: rgba(220, 53, 69, 0.5);
    }

        .license-card.firefighter:hover {
            border-color: var(--danger-color);
            box-shadow: 0 10px 30px rgba(220, 53, 69, 0.2);
        }

        .license-card.firefighter.active {
            border-color: var(--danger-color);
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), var(--bg-dark-secondary));
            box-shadow: 0 0 25px rgba(220, 53, 69, 0.3);
        }

.license-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.license-class {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.license-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.license-bar {
    height: 4px;
    background: var(--bg-dark-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.license-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--info-color), #20c9e0);
    border-radius: 2px;
    transition: width 0.8s ease;
}

    .license-bar-fill.danger {
        background: linear-gradient(90deg, var(--danger-color), #e4606d);
    }

.license-active-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--success-color);
    font-size: 1.25rem;
}

.license-card.firefighter .license-active-badge {
    color: var(--danger-color);
}

/* License Matrix Table */
.license-matrix-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.license-matrix-table thead th {
    background: var(--bg-dark-tertiary);
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    border-bottom: 2px solid var(--border-dark);
    vertical-align: middle;
}

.license-col {
    text-align: center;
    min-width: 80px;
}

    .license-col.firefighter {
        background: rgba(220, 53, 69, 0.1);
    }

.license-col-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.license-col-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.license-row {
    cursor: pointer;
    transition: background 0.2s;
}

    .license-row:hover {
        background: var(--bg-dark-tertiary) !important;
    }

    .license-row td {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-dark);
    }

.license-check {
    color: var(--success-color);
    font-size: 1.1rem;
}

    .license-check.firefighter {
        color: var(--danger-color);
    }

.license-empty {
    color: var(--text-muted);
    opacity: 0.3;
}

/* Stat Mini Card Danger Variant */
.stat-mini-card.danger {
    border-left: 4px solid var(--danger-color);
}

    .stat-mini-card.danger .stat-mini-icon {
        background: rgba(220, 53, 69, 0.2);
        color: var(--danger-color);
    }

/* ========================================
   HONORS PAGE - Modern Styles
   ======================================== */

/* Honor Stat Cards */
.honor-stat-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .honor-stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .honor-stat-card.active-duty:hover,
    .honor-stat-card.active-duty.active {
        border-color: var(--success-color);
    }

    .honor-stat-card.club-membership:hover,
    .honor-stat-card.club-membership.active {
        border-color: var(--info-color);
    }

    .honor-stat-card.active {
        background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), var(--bg-dark-secondary));
    }

    .honor-stat-card.active-duty.active {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), var(--bg-dark-secondary));
    }

    .honor-stat-card.club-membership.active {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.15), var(--bg-dark-secondary));
    }

    .honor-stat-card.total {
        border-color: var(--primary-color);
        cursor: default;
    }

.honor-stat-icon {
    font-size: 2.5rem;
}

.honor-stat-content {
    display: flex;
    flex-direction: column;
}

.honor-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.honor-stat-label {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.honor-active-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.25rem;
}

.honor-stat-card.active-duty .honor-active-badge {
    color: var(--success-color);
}

.honor-stat-card.club-membership .honor-active-badge {
    color: var(--info-color);
}

/* Honor List Card */
.honor-list-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

/* Honor Entries */
.honor-entries {
    padding: 0.5rem;
}

.honor-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
}

    .honor-entry:last-child {
        margin-bottom: 0;
    }

    .honor-entry:hover {
        background: var(--bg-dark-tertiary);
        border-color: var(--primary-color);
        transform: translateX(5px);
    }

/* Years Badge */
.honor-years-badge {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid;
}

    .honor-years-badge.diamond {
        background: linear-gradient(135deg, #b9f2ff, #e0f7fa);
        border-color: #00bcd4;
        color: #006064;
    }

    .honor-years-badge.gold {
        background: linear-gradient(135deg, #ffd700, #ffeb3b);
        border-color: #ffc107;
        color: #5d4037;
    }

    .honor-years-badge.silver {
        background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
        border-color: #9e9e9e;
        color: #424242;
    }

    .honor-years-badge.bronze {
        background: linear-gradient(135deg, #cd7f32, #daa520);
        border-color: #8d6e63;
        color: #3e2723;
    }

    .honor-years-badge .years-number {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .honor-years-badge .years-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Honor Info */
.honor-info {
    flex: 1;
    min-width: 0;
}

.honor-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

    .honor-name .member-number {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

.honor-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

    .honor-date i {
        margin-right: 0.5rem;
    }

/* Honor Medal */
.honor-medal {
    font-size: 2rem;
}

/* Honor Action */
.honor-action {
    color: var(--text-muted);
    transition: all 0.2s;
}

.honor-entry:hover .honor-action {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* ========================================
   CHANGE HISTORY - Modern Styles
   ======================================== */

/* Timeline */
.timeline {
    position: relative;
    padding-left: 30px;
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border-dark);
    }

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-marker {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
}

.timeline-content {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

    .timeline-content:hover {
        border-color: var(--primary-color);
    }

    .timeline-content.batch-group {
        background: linear-gradient(135deg, var(--bg-dark-secondary), var(--bg-dark-tertiary));
    }

.batch-header {
    cursor: pointer;
}

.batch-details {
    border-top: 1px solid var(--border-dark);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.change-detail-item {
    background: var(--bg-dark-tertiary);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

    .change-detail-item:last-child {
        margin-bottom: 0;
    }

.change-list {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.field-change {
    font-size: 0.9rem;
    background: var(--bg-dark);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

/* Change History Header */
.change-history-header {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-dark);
}

/* Filter Card */
.change-filter-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* ========================================
   BREATHING REPORT - Modern Styles
   ======================================== */

/* Breathing Stat Cards */
.breathing-stat-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .breathing-stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .breathing-stat-card.all:hover,
    .breathing-stat-card.all.active {
        border-color: var(--primary-color);
    }

    .breathing-stat-card.valid:hover,
    .breathing-stat-card.valid.active {
        border-color: var(--success-color);
    }

    .breathing-stat-card.expiring:hover,
    .breathing-stat-card.expiring.active {
        border-color: var(--warning-color);
    }

    .breathing-stat-card.expired:hover,
    .breathing-stat-card.expired.active {
        border-color: var(--danger-color);
    }

    .breathing-stat-card.active {
        background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), var(--bg-dark-secondary));
    }

    .breathing-stat-card.valid.active {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), var(--bg-dark-secondary));
    }

    .breathing-stat-card.expiring.active {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), var(--bg-dark-secondary));
    }

    .breathing-stat-card.expired.active {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), var(--bg-dark-secondary));
    }

.breathing-stat-icon {
    font-size: 2rem;
}

.breathing-stat-content {
    display: flex;
    flex-direction: column;
}

.breathing-stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.breathing-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breathing-active-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1rem;
}

.breathing-stat-card.all .breathing-active-badge {
    color: var(--primary-color);
}

.breathing-stat-card.valid .breathing-active-badge {
    color: var(--success-color);
}

.breathing-stat-card.expiring .breathing-active-badge {
    color: var(--warning-color);
}

.breathing-stat-card.expired .breathing-active-badge {
    color: var(--danger-color);
}

/* Breathing List */
.breathing-list-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.breathing-entries {
    padding: 0.5rem;
}

.breathing-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
}

    .breathing-entry:last-child {
        margin-bottom: 0;
    }

    .breathing-entry:hover {
        background: var(--bg-dark-tertiary);
        transform: translateX(5px);
    }

    .breathing-entry.valid:hover {
        border-color: var(--success-color);
    }

    .breathing-entry.expiring:hover {
        border-color: var(--warning-color);
    }

    .breathing-entry.expired:hover {
        border-color: var(--danger-color);
    }

/* Status Icon */
.breathing-status-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .breathing-status-icon.success {
        background: rgba(40, 167, 69, 0.2);
        color: var(--success-color);
    }

    .breathing-status-icon.warning {
        background: rgba(255, 193, 7, 0.2);
        color: var(--warning-color);
    }

    .breathing-status-icon.danger {
        background: rgba(220, 53, 69, 0.2);
        color: var(--danger-color);
    }

/* Breathing Info */
.breathing-info {
    flex: 1;
    min-width: 0;
}

.breathing-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

    .breathing-name .member-number {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

.breathing-dates {
    font-size: 0.9rem;
}

    .breathing-dates i {
        margin-right: 0.5rem;
    }

/* Breathing Badge */
.breathing-badge .status-badge {
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

    .breathing-badge .status-badge.success {
        background: rgba(40, 167, 69, 0.2);
        color: var(--success-color);
    }

    .breathing-badge .status-badge.warning {
        background: rgba(255, 193, 7, 0.2);
        color: var(--warning-color);
    }

    .breathing-badge .status-badge.danger {
        background: rgba(220, 53, 69, 0.2);
        color: var(--danger-color);
    }

/* Breathing Action */
.breathing-action {
    color: var(--text-muted);
    transition: all 0.2s;
}

.breathing-entry:hover .breathing-action {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* ========================================
   ACHIEVEMENTS PAGE - Modern Styles
   ======================================== */

/* Type Selector */
.achievement-type-selector {
    display: flex;
    gap: 1rem;
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 0.75rem;
    border: 1px solid var(--border-dark);
}

.type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-dark-tertiary);
    border: 2px solid transparent;
}

    .type-btn:hover {
        background: var(--bg-dark-tertiary);
        border-color: var(--primary-color);
    }

    .type-btn.active {
        background: linear-gradient(135deg, var(--primary-color), #a82834);
        border-color: var(--primary-color);
        color: white;
    }

.type-icon {
    font-size: 2rem;
}

.type-label {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Year Selector Compact */
.year-selector-card.compact {
    padding: 1rem;
}

    .year-selector-card.compact .year-value.small {
        font-size: 2rem;
    }

.year-nav-btn.small {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* Achievement Hero Card */
.achievement-hero-card {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border-radius: 20px;
    padding: 2rem;
    color: white;
    box-shadow: 0 10px 40px rgba(23, 162, 184, 0.3);
    position: relative;
    overflow: hidden;
}

    .achievement-hero-card .hero-icon {
        font-size: 5rem;
        opacity: 0.3;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
    }

/* Level Cards */
.level-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .level-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary-color);
        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2);
    }

    .level-card.active {
        border-color: var(--success-color);
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), var(--bg-dark-secondary));
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
    }

    .level-card.can-achieve {
        border-color: rgba(23, 162, 184, 0.5);
    }

        .level-card.can-achieve:hover,
        .level-card.can-achieve.active {
            border-color: var(--info-color);
        }

        .level-card.can-achieve.active {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.15), var(--bg-dark-secondary));
        }

.level-icon {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.level-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.level-name {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.level-active-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--success-color);
    font-size: 0.875rem;
}

.level-card.can-achieve .level-active-badge {
    color: var(--info-color);
}

/* Achievement List */
.achievement-list-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.achievement-entries {
    padding: 0.5rem;
}

.achievement-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
}

    .achievement-entry:last-child {
        margin-bottom: 0;
    }

    .achievement-entry:hover {
        background: var(--bg-dark-tertiary);
        border-color: var(--primary-color);
        transform: translateX(5px);
    }

/* Level Badge */
.achievement-level-badge {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-dark-tertiary);
    border: 2px solid var(--border-dark);
}

    .achievement-level-badge.level-1 {
        background: linear-gradient(135deg, #cd7f32, #daa520);
        border-color: #8d6e63;
    }

    .achievement-level-badge.level-2 {
        background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
        border-color: #9e9e9e;
    }

    .achievement-level-badge.level-3 {
        background: linear-gradient(135deg, #ffd700, #ffeb3b);
        border-color: #ffc107;
    }

    .achievement-level-badge.level-4 {
        background: linear-gradient(135deg, #2196f3, #64b5f6);
        border-color: #1976d2;
    }

    .achievement-level-badge.level-5 {
        background: linear-gradient(135deg, #4caf50, #81c784);
        border-color: #388e3c;
    }

    .achievement-level-badge.level-6 {
        background: linear-gradient(135deg, #f44336, #ef5350);
        border-color: #d32f2f;
    }

.level-badge-icon {
    font-size: 1.5rem;
}

/* Achievement Info */
.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

    .achievement-name .member-number {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

.achievement-details {
    font-size: 0.9rem;
}

    .achievement-details i {
        margin-right: 0.5rem;
    }

/* Achievement Meta */
.achievement-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.age-badge {
    background: var(--bg-dark-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Achievement Action */
.achievement-action {
    color: var(--text-muted);
    transition: all 0.2s;
}

.achievement-entry:hover .achievement-action {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* ========================================
   PROTOCOLS PAGE - Modern Styles
   ======================================== */

/* Protocol Stat Card Active State */
.protocol-stat-card {
    background: var(--bg-dark-secondary);
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .protocol-stat-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary-color);
        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2);
    }

    .protocol-stat-card.active {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), var(--bg-dark-secondary));
        box-shadow: 0 0 25px rgba(220, 53, 69, 0.3);
    }

.protocol-active-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--primary-color);
    font-size: 0.875rem;
}

.protocol-stat-icon {
    font-size: 1.75rem;
}

.protocol-stat-content {
    display: flex;
    flex-direction: column;
}

.protocol-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.protocol-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Protocol List */
.protocol-list-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.protocol-entries {
    padding: 0.5rem;
}

.protocol-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
}

    .protocol-entry:last-child {
        margin-bottom: 0;
    }

    .protocol-entry:hover {
        background: var(--bg-dark-tertiary);
        border-color: var(--primary-color);
        transform: translateX(5px);
    }

/* Protocol Date Badge */
.protocol-date-badge {
    width: 65px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark-tertiary);
    border: 2px solid var(--border-dark);
    flex-shrink: 0;
}

    .protocol-date-badge .day {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .protocol-date-badge .month {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .protocol-date-badge .year {
        font-size: 0.6rem;
        color: var(--text-muted);
    }

/* Protocol Info */
.protocol-info {
    flex: 1;
    min-width: 0;
}

.protocol-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.protocol-meta {
    font-size: 0.9rem;
}

/* Protocol Attachments */
.protocol-attachments {
    flex-shrink: 0;
}

.attachment-badge {
    background: rgba(23, 162, 184, 0.2);
    color: var(--info-color);
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.protocol-action {
    color: var(--text-muted);
    transition: all 0.2s;
}

.protocol-entry:hover .protocol-action {
    color: var(--primary-color);
    transform: translateX(3px);
}
/* Search Highlight */
.search-highlight {
    background: rgba(255, 193, 7, 0.4);
    color: var(--text-light);
    padding: 0 2px;
    border-radius: 2px;
}

/* Filter Card Improvements */
.filter-card .form-label {
    margin-bottom: 0.25rem;
}

.filter-card .form-select,
.filter-card .form-control {
    background-color: var(--bg-dark-tertiary);
    border-color: var(--border-dark);
}

    .filter-card .form-select:focus,
    .filter-card .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    }

/* ========================================
   MOBILE RESPONSIVE - Hamburger-Menü Design
   Fügen Sie diesen Block am ENDE der app.css ein
   ======================================== */

/* === BREAKPOINTS ===
   Mobile:           < 576px
   Tablet Portrait:  576px - 768px
   Tablet Landscape: 768px - 992px
   Desktop:          >= 992px
*/

/* ========================================
   LAYOUT - Hamburger-Button berücksichtigen
   ======================================== */

@media (max-width: 992px) {
    .main-content {
        padding-left: 60px;
        padding-right: 0.75rem;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding-left: 55px;
        padding-right: 0.5rem;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding-left: 50px;
        padding-right: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* ========================================
   DASHBOARD - Mobile
   ======================================== */

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

    .dashboard-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

        .dashboard-header .d-flex {
            flex-direction: column;
            width: 100%;
            gap: 0.75rem;
        }

    .dashboard-title {
        font-size: 1.5rem;
        justify-content: center;
    }

    .dashboard-subtitle {
        font-size: 0.9rem;
    }

    /* Hero Stat Card */
    .hero-stat-card {
        padding: 1.25rem;
    }

    .hero-stat-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .hero-stat-number {
        font-size: 2.5rem;
    }

    .hero-stat-label {
        font-size: 1rem;
    }

    .member-ring-chart {
        margin-top: 1rem;
    }

    /* Stat Cards */
    .stat-card {
        padding: 0.875rem;
    }

    .stat-card-number {
        font-size: 1.75rem;
    }

    .stat-card-label {
        font-size: 0.8rem;
    }

    .stat-card-icon {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }

    /* Feature Cards (Youth/Child) */
    .feature-card {
        padding: 1rem;
    }

    .feature-number {
        font-size: 2rem;
    }

    /* Readiness Cards */
    .readiness-card {
        padding: 1rem;
        gap: 1rem;
    }

    .readiness-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .readiness-number {
        font-size: 1.75rem;
    }

    /* Quick Actions - horizontal scrollbar */
    .quick-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin: 0 -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .quick-action-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   CARDS - Mobile
   ======================================== */

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
        border-radius: 10px;
    }

    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

        .card-header h5 {
            font-size: 1rem;
        }

        .card-header .btn-sm {
            padding: 0.375rem 0.5rem;
        }

    .card-body {
        padding: 1rem;
    }

    /* Filter Cards */
    .filter-card {
        margin-bottom: 1rem;
    }

        .filter-card .card-body {
            padding: 0.875rem;
        }

        .filter-card .row {
            gap: 0.75rem;
        }

    /* Hover Cards */
    .hover-card {
        transition: none;
    }

        .hover-card:hover {
            transform: none;
        }
}

/* ========================================
   TABELLEN - Mobile Responsive
   ======================================== */

@media (max-width: 768px) {
    .table-responsive {
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
        border-radius: 0;
    }

    .table {
        font-size: 0.8rem;
    }

        .table th,
        .table td {
            padding: 0.5rem 0.4rem;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table thead th {
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Verstecke weniger wichtige Spalten */
        .table .hide-mobile,
        .hide-mobile {
            display: none !important;
        }

        /* Kompakte Badges in Tabellen */
        .table .badge {
            font-size: 0.65rem;
            padding: 0.2rem 0.4rem;
        }

        /* Actions in Tabellen */
        .table .btn-group-sm > .btn {
            padding: 0.25rem 0.4rem;
        }
}

/* Card-Layout Alternative für Tabellen */
@media (max-width: 576px) {
    .table-as-cards {
        border: none;
    }

        .table-as-cards thead {
            display: none;
        }

        .table-as-cards tbody tr {
            display: block;
            margin-bottom: 0.75rem;
            border: 1px solid var(--border-dark);
            border-radius: 10px;
            padding: 0.75rem;
            background: var(--bg-dark-secondary);
        }

        .table-as-cards tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.35rem 0;
            border: none;
            background: transparent;
        }

            .table-as-cards tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-muted);
                font-size: 0.75rem;
            }
}

/* ========================================
   FORMULARE - Mobile (iOS Zoom Fix)
   ======================================== */

@media (max-width: 768px) {
    /* Verhindert Auto-Zoom auf iOS bei Focus */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .form-text {
        font-size: 0.75rem;
    }

    /* Input Groups */
    .input-group {
        flex-wrap: nowrap;
    }

        .input-group .btn {
            padding: 0.375rem 0.75rem;
        }

    /* Checkboxes & Radios */
    .form-check {
        padding-left: 1.75rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Buttons volle Breite */
    .btn-mobile-block {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   MODALS - Fullscreen auf Mobile
   ======================================== */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-radius: 0;
        padding: 1rem;
    }

        .modal-header .modal-title {
            font-size: 1.1rem;
        }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-dark-secondary);
        border-top: 1px solid var(--border-dark);
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

        .modal-footer .btn {
            flex: 1;
            padding: 0.75rem;
        }
}

/* Tablet: Modals zentriert aber nicht fullscreen */
@media (min-width: 577px) and (max-width: 768px) {
    .modal-dialog {
        margin: 1rem auto;
        max-width: calc(100% - 2rem);
    }
}

/* ========================================
   TABS - Horizontal Scroll auf Mobile
   ======================================== */

@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--border-dark);
        gap: 0.25rem;
        padding-bottom: 0;
        margin-bottom: 1rem;
    }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-item {
            flex: 0 0 auto;
        }

        .nav-tabs .nav-link {
            white-space: nowrap;
            padding: 0.6rem 0.875rem;
            font-size: 0.85rem;
        }

            .nav-tabs .nav-link i {
                margin-right: 0.35rem;
            }

    /* Pill-Style Tabs für bessere Touch-Targets */
    .nav-tabs-pills .nav-link {
        border-radius: 20px;
        border: 1px solid var(--border-dark);
        margin-right: 0.25rem;
    }

        .nav-tabs-pills .nav-link.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
}

/* ========================================
   MITGLIEDER-LISTE - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Such- und Filterleiste */
    .member-filter-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

        .member-filter-bar .input-group {
            width: 100%;
        }

        .member-filter-bar .btn-group {
            width: 100%;
            display: flex;
        }

            .member-filter-bar .btn-group .btn {
                flex: 1;
            }

    /* Member Rows */
    .member-row {
        padding: 0.75rem;
    }

        .member-row .member-name {
            font-size: 0.95rem;
        }

        .member-row .member-number {
            font-size: 0.8rem;
        }
}

/* ========================================
   MEMBER DETAIL - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Header */
    .member-detail-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

        .member-detail-header h1 {
            font-size: 1.35rem;
        }

        .member-detail-header .badge {
            font-size: 0.7rem;
        }

        /* Action Buttons */
        .member-detail-header .btn-group {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

            .member-detail-header .btn-group .btn {
                flex: 1;
                min-width: 45%;
            }

    /* Info Cards */
    .member-info-card {
        margin-bottom: 1rem;
    }

    /* Edit/Delete Buttons in Listen */
    .member-detail .btn-group-sm {
        gap: 0.25rem;
    }

        .member-detail .btn-group-sm > .btn {
            padding: 0.4rem 0.5rem;
        }

    /* Perioden-Tabellen */
    .period-table th,
    .period-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

/* ========================================
   BERICHTE (Reports) - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Report Header */
    .report-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

        .report-header h1 {
            font-size: 1.5rem;
        }

        .report-header .btn-group {
            width: 100%;
            display: flex;
        }

            .report-header .btn-group .btn {
                flex: 1;
            }

    /* Filter-Bereich */
    .report-filters {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

        .report-filters .form-select,
        .report-filters .form-control {
            width: 100%;
        }

    /* Statistik-Cards */
    .report-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .report-stat-card {
        padding: 0.875rem;
        text-align: center;
    }

    .report-stat-number {
        font-size: 1.5rem;
    }

    .report-stat-label {
        font-size: 0.75rem;
    }

    /* Jahr-Auswahl */
    .year-selector-card {
        padding: 1rem;
    }

    .year-selector-content {
        gap: 1rem;
    }

    .year-nav-btn {
        width: 44px;
        height: 44px;
    }

    .year-value {
        font-size: 2rem;
    }

    /* Birthday/Honor/Achievement Entries */
    .birthday-entry,
    .honor-entry,
    .achievement-entry,
    .breathing-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem;
    }

    .birthday-date-badge,
    .honor-years-badge {
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* Category/Level Cards */
    .category-card,
    .level-card,
    .license-card {
        padding: 0.875rem;
    }

    .category-icon,
    .license-icon {
        font-size: 1.5rem;
    }

    .category-count,
    .level-count,
    .license-count {
        font-size: 1.25rem;
    }

    /* Qualification Grid */
    .qualification-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .qual-card {
        padding: 0.625rem;
    }

    .qual-count {
        font-size: 1.25rem;
    }

    .qual-name {
        font-size: 0.65rem;
    }

    /* Stats Row */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-mini-card {
        padding: 0.875rem;
    }

    .stat-mini-value {
        font-size: 1.25rem;
    }
}

/* ========================================
   JHV-PAKET - Mobile
   ======================================== */

@media (max-width: 768px) {
    .jhv-action-card {
        padding: 1rem;
    }

        .jhv-action-card h5 {
            font-size: 0.95rem;
        }

    .jhv-stat-card {
        padding: 0.875rem;
    }

    .jhv-stat-number {
        font-size: 1.5rem;
    }
}

/* ========================================
   PROTOKOLLE & DOKUMENTE - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Protokoll-Liste */
    .protocol-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
        position: relative;
    }

    .protocol-date-badge {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: auto;
        height: auto;
        padding: 0.5rem 0.75rem;
    }

    .protocol-info {
        width: 100%;
    }

        .protocol-info h5 {
            font-size: 1rem;
        }

    .protocol-action {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    /* Dokument-Karten */
    .document-card {
        padding: 0.875rem;
    }

    /* Upload-Bereich */
    .upload-dropzone {
        padding: 1.5rem 1rem;
    }

        .upload-dropzone i {
            font-size: 2rem;
        }
}

/* ========================================
   ÜBUNGEN - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Exercise Cards */
    .exercise-card {
        padding: 0.875rem;
    }

        .exercise-card .stat-card-number.exercise-title {
            font-size: 1rem;
        }

    /* Teilnehmer-Liste */
    .participant-list {
        max-height: 350px;
        overflow-y: auto;
    }

    .participant-item {
        padding: 0.625rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

        .participant-item .form-check-input {
            width: 1.25rem;
            height: 1.25rem;
        }

    /* Exercise Stats */
    .exercise-stats-card {
        padding: 0.875rem;
    }

    /* Type Selector */
    .achievement-type-selector {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .type-btn {
        padding: 0.75rem 1rem;
    }

    .type-icon {
        font-size: 1.5rem;
    }

    .type-label {
        font-size: 1rem;
    }
}

/* ========================================
   FINANCE - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Finance Tabelle */
    .finance-table {
        font-size: 0.75rem;
    }

        .finance-table th,
        .finance-table td {
            padding: 0.4rem 0.35rem;
        }

    /* SEPA Export Form */
    .sepa-export-form .row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .sepa-export-form .col-md-6 {
        width: 100%;
    }

    /* Creditor Account Cards */
    .creditor-account-card {
        padding: 0.875rem;
    }

    /* Fee Rate Cards */
    .fee-rate-card {
        padding: 0.875rem;
    }
}

/* ========================================
   CHANGE HISTORY - Mobile
   ======================================== */

@media (max-width: 768px) {
    .timeline {
        padding-left: 20px;
    }

        .timeline::before {
            left: 5px;
        }

    .timeline-marker {
        left: -17px;
        width: 10px;
        height: 10px;
    }

    .timeline-content {
        padding: 0.875rem;
    }

    .change-detail-item {
        padding: 0.625rem;
    }

    .field-change {
        font-size: 0.8rem;
    }
}

/* ========================================
   DOKUMENTENSUCHE - Mobile
   ======================================== */

@media (max-width: 768px) {
    .search-result-card {
        padding: 0.875rem;
    }

    .search-result-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .search-result-title {
        font-size: 0.95rem;
    }

    .search-result-meta {
        font-size: 0.75rem;
    }
}

/* ========================================
   BUTTONS - Touch-Friendly
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Mindestgröße für Touch-Targets (44px Apple HIG) */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
        padding: 0.4rem 0.75rem;
    }

    .btn-group-sm > .btn {
        min-width: 42px;
        min-height: 42px;
        padding: 0.5rem;
    }

    /* Nav Links */
    .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Dropdown Items */
    .dropdown-item {
        padding: 0.75rem 1rem;
    }

    /* List Items */
    .list-group-item {
        padding: 0.875rem 1rem;
    }

        /* Active-State für Touch-Feedback */
        .btn:active,
        .nav-link:active,
        .card:active,
        .list-group-item:active {
            opacity: 0.85;
            transform: scale(0.98);
            transition: all 0.1s ease;
        }
}

/* ========================================
   PRINT - Drucken-Buttons bleiben IMMER sichtbar!
   .print-only wird NUR auf dem Bildschirm versteckt (nicht beim Drucken)
   ======================================== */

/* Print-only Inhalte auf Bildschirm verstecken (auf ALLEN Geräten) */
@media screen {
    .print-only {
        display: none !important;
    }
}

/* Beim Drucken: print-only zeigen, screen-only verstecken */
@media print {
    .screen-only,
    .hamburger-btn,
    .sidebar-overlay,
    .sidebar-backdrop,
    .btn-print,
    .print-btn,
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    body, html {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    @page {
        size: A4 portrait;
        margin: 5mm 8mm;
    }
}

/* ========================================
   TABLET (768px - 992px)
   ======================================== */

@media (min-width: 769px) and (max-width: 992px) {
    .main-content {
        padding-left: 60px;
    }

    /* 2-spaltige Layouts beibehalten */
    .row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Cards etwas kompakter */
    .stat-card {
        padding: 1rem;
    }

    .stat-card-number {
        font-size: 2rem;
    }

    /* Tabellen */
    .table {
        font-size: 0.85rem;
    }
}

/* ========================================
   LANDSCAPE MODE
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Modals nicht fullscreen im Landscape */
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: 90%;
        height: auto;
        max-height: 90vh;
    }

    .modal-content {
        height: auto;
        max-height: 85vh;
        border-radius: 10px;
    }

    /* Mehr Platz für Content */
    .dashboard-header {
        margin-bottom: 1rem;
    }

    .hero-stat-card {
        padding: 1rem;
    }

    .hero-stat-content {
        flex-direction: row;
    }
}

/* ========================================
   SAFE AREAS (iPhone Notch, etc.)
   ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .modal-footer {
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        }

        .sidebar-overlay {
            padding-bottom: env(safe-area-inset-bottom);
        }
        /* Sticky Footer in Listen */
        .sticky-bottom-bar {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   UTILITY KLASSEN FÜR MOBILE
   ======================================== */

/* Auf Mobile ausblenden */
@media (max-width: 768px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* Nur auf Mobile anzeigen */
@media (min-width: 769px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* Auf Tablet ausblenden */
@media (max-width: 992px) {
    .d-tablet-none {
        display: none !important;
    }
}

/* Text-Truncation für Mobile */
@media (max-width: 768px) {
    .text-truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
}

/* Scroll-Container für horizontale Listen */
.scroll-container-mobile {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

    .scroll-container-mobile::-webkit-scrollbar {
        height: 4px;
    }

    .scroll-container-mobile::-webkit-scrollbar-thumb {
        background: var(--border-dark);
        border-radius: 2px;
    }

/* Volle Breite Buttons auf Mobile */
@media (max-width: 576px) {
    .btn-block-mobile {
        display: block;
        width: 100%;
    }
}
/* ========================================
   FEE RATES PAGE - Modern Styles
   ======================================== */

/* Info Card */
.info-card {
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid var(--info-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.info-card-icon {
    font-size: 1.5rem;
    color: var(--info-color);
    flex-shrink: 0;
}

.info-card-content {
    flex: 1;
}

/* Fee Card */
.fee-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.fee-entries {
    padding: 0.5rem;
}

    .fee-entries.historical {
        opacity: 0.7;
    }

.fee-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: var(--bg-dark-secondary);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

    .fee-entry:last-child {
        margin-bottom: 0;
    }

    .fee-entry:hover {
        background: var(--bg-dark-tertiary);
    }

    .fee-entry.historical {
        opacity: 0.6;
    }

/* Fee Status Badge */
.fee-status-badge {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .fee-status-badge.success {
        background: rgba(40, 167, 69, 0.2);
    }

    .fee-status-badge.secondary {
        background: rgba(108, 117, 125, 0.2);
    }

    .fee-status-badge.danger {
        background: rgba(220, 53, 69, 0.2);
    }

    .fee-status-badge.info {
        background: rgba(23, 162, 184, 0.2);
    }

    .fee-status-badge.warning {
        background: rgba(255, 193, 7, 0.2);
    }

/* Fee Info */
.fee-info {
    flex: 1;
    min-width: 0;
}

.fee-status-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.fee-valid-from, .fee-description, .fee-date-range {
    font-size: 0.85rem;
}

    .fee-valid-from i {
        margin-right: 0.5rem;
    }

/* Fee Amount */
.fee-amount {
    text-align: right;
    flex-shrink: 0;
}

    .fee-amount .amount {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--success-color);
        display: block;
    }

    .fee-amount .period {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .fee-amount.historical .amount {
        color: var(--text-muted);
        font-size: 1.25rem;
    }

/* Fee Actions */
.fee-actions {
    display: flex;
    gap: 0.5rem;
}

/* ========================================
   YEAR CAROUSEL (Jahreskarussell)
   ======================================== */
.year-carousel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-dark-secondary, #1e1e1e);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, #333);
}

.year-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 1.25rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .year-nav-btn:hover {
        background: var(--primary-color, #0d6efd);
        color: white;
    }

.year-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.year-side {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

    .year-side:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
    }

.year-center {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    background: var(--primary-color, #0d6efd);
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* ========================================
   EXERCISE TYPE CARDS (Filter-Cards)
   ======================================== */
.exercise-type-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-dark-secondary, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .exercise-type-card:hover {
        border-color: var(--primary-color, #0d6efd);
        background: rgba(13, 110, 253, 0.1);
        transform: translateY(-2px);
    }

    .exercise-type-card.active {
        border-color: var(--primary-color, #0d6efd);
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.05));
        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
    }

    .exercise-type-card.filter-active-card {
        padding: 1.25rem 1.5rem;
    }

.exercise-type-icon {
    font-size: 1.75rem;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.exercise-type-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.exercise-type-name {
    font-weight: 600;
    font-size: 1rem;
    color: white;
}

.exercise-type-count {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
}

.exercise-type-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color, #0d6efd);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}

/* ========================================
   MEMBERS PAGE - Modern Styles
   ======================================== */

/* Mini Stat Cards */
.mini-stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mini-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2);
}

.mini-stat-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), var(--bg-dark-secondary));
}

.mini-stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.mini-stat-content {
    display: flex;
    flex-direction: column;
}

.mini-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.mini-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Card */
.filter-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
}

.search-input {
    background: var(--bg-dark-tertiary) !important;
    border-color: var(--border-dark) !important;
}

.search-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Member Table */
.member-table-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    overflow: hidden;
}

.member-table {
    margin: 0;
}

.member-table thead th {
    background: var(--bg-dark-tertiary);
    border-bottom: 2px solid var(--border-dark);
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.member-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-row:hover {
    background: var(--bg-dark-tertiary) !important;
}

.member-row td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-dark);
}

/* Member Name Cell with Avatar */
.member-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: white;
    text-transform: uppercase;
}

.member-avatar.success { background: linear-gradient(135deg, #28a745, #20c997); }
.member-avatar.info { background: linear-gradient(135deg, #17a2b8, #6610f2); }
.member-avatar.secondary { background: linear-gradient(135deg, #6c757d, #495057); }
.member-avatar.primary { background: linear-gradient(135deg, #0d6efd, #6610f2); }
.member-avatar.warning { background: linear-gradient(135deg, #ffc107, #fd7e14); }
.member-avatar.dark { background: linear-gradient(135deg, #343a40, #212529); }

.member-number {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-dark-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.status-active { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.status-badge.status-passive { background: rgba(108, 117, 125, 0.2); color: #adb5bd; }
.status-badge.status-supporting { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; }
.status-badge.status-youth { background: rgba(23, 162, 184, 0.2); color: #17a2b8; }
.status-badge.status-child { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.status-badge.status-former { background: rgba(52, 58, 64, 0.3); color: #adb5bd; }

/* Phone Link */
.phone-link {
    color: #28a745;
    text-decoration: none;
    transition: all 0.2s;
}

.phone-link:hover {
    color: #20c997;
}

.phone-link i {
    margin-right: 0.25rem;
}

/* Action Button */
.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.action-btn:hover {
    transform: scale(1.1);
}

/* Member Card View */
.member-card {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.member-card-header {
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.member-card-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.honorary-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffc107;
    font-size: 1.25rem;
}

.member-card-body {
    padding: 1rem 1.25rem;
}

.member-card-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

.member-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.member-card-number {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.member-card-details {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.member-card-details div {
    margin-bottom: 0.25rem;
}

.member-card-details i {
    width: 20px;
    margin-right: 0.5rem;
}

.member-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-dark);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-dark);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Modern Pagination */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pagination-modern .page-link {
    background: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    color: var(--text-light);
    padding: 0.5rem 0.875rem;
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.2s;
}

.pagination-modern .page-link:hover {
    background: var(--bg-dark-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-modern .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination-modern .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Pulse Glow Animation */
.pulse-glow {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(40, 167, 69, 0.2); }
}

/* Fade In Animation */
.fade-in {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========================================
   MOBILE PRINT SUPPORT - Am Ende der Datei hinzufügen
   ======================================== */

@media print {
    /* Sicherstellen, dass Print-View auf allen Geräten korrekt skaliert */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Mobile-spezifische Print-Fixes */
    .print-only {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        overflow: visible !important;
    }

    /* Verhindere Seitenumbrüche mitten in Elementen */
    .print-sheet,
    .print-table,
    tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* iOS Safari Print-Fix */
    body {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/* Gradient Backgrounds */
.bg-success-gradient { background: linear-gradient(135deg, #28a745, #20c997); }
.bg-info-gradient { background: linear-gradient(135deg, #17a2b8, #6f42c1); }
.bg-primary-gradient { background: linear-gradient(135deg, #dc3545, #fd7e14); }
.bg-secondary-gradient { background: linear-gradient(135deg, #6c757d, #495057); }
.bg-warning-gradient { background: linear-gradient(135deg, #ffc107, #fd7e14); }
.bg-dark-gradient { background: linear-gradient(135deg, #343a40, #212529); }