/* assets/css/style_v2.css - HYBRID (APP 2 Struktur + APP 1 Features) */

:root {
    /* --- 1. FARBPALETTE (Global) --- */
    --color-primary: #285694;      /* Dein Feuerwehr-Blau */
    --color-primary-light: rgba(40, 86, 148, 0.1);
    --color-accent: #47bcc2;
    --color-danger: #d93025;       /* Rot für Fehler/Abgesagt */
    --color-warning: #f1c40f;      /* Gelb für Warnung/Verschoben */
    --color-success: #2ecc71; 
    
    /* Spezifische APP 1 Farben */
    --color-countdown-today: #e60000;
    --color-countdown-orange: #e67e22;

    /* --- 2. THEME VARIABLEN (LIGHT MODE) --- */
    
    /* Hintergrund: Satteres Grau-Blau für Kontrast */
    --color-bg: #e3e8ee;           
    
    /* Header/Footer: WEISS */
    --color-bg-bars-light: #ffffff; 

    --color-bg-card: #ffffff;      
    --color-bg-input: #ffffff;     
    --color-bg-nav: #2d384e;       /* Sidebar dunkelblau */
    
    --color-text: #1a202c;         
    --color-text-secondary: #5a657d; 
    --color-border: #cbd5e1;       /* Kontur */

    /* --- 3. LAYOUT MAßE --- */
    --header-height: 60px;
    --mobile-nav-height: 70px;
    --sidebar-width: 260px;
    
    /* --- 4. STYLE UTILS --- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    /* Stärkerer Schatten für "Floating Effect" */
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius-md: 8px;
    --radius-lg: 12px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- DARK MODE DEFINITION --- */
html.dark {
    /* Hintergrundfarbe global */
    --color-bg: #2d384e;           
    
    /* Fallback Card */
    --color-bg-card: #2d384e;      
    --color-bg-input: #1e293b;     
    
    /* Navigation / Header Farbe (Dunkleres Blau) */
    --color-bg-nav: #1e293b;       
    
    /* Texte komplett weiß */
    --color-text: #ffffff;         
    --color-text-secondary: #d1d5db; 
    --color-border: #40587f;       
    
    --color-primary: #64b5f6;      
}

/* --- BASIS RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* --- ANTI GOOGLE OVERLAY (Tap-to-Search / Long-Press) --- */
html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Optional: nur für deine App-Fläche statt global */
.app-container, .app-main, .main-content-area {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}


body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 16px;
    line-height: 1.5;
    
    /* WASSERZEICHEN */
    background-image: url('../images/wasserzeichen.png');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: min(80vw, 500px); 
    background-blend-mode: overlay; 
}

/* Dark Mode Anpassung für Wasserzeichen */
html.dark body {
    background-blend-mode: soft-light; 
    background-color: var(--color-bg); 
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- APP LAYOUT STRUKTUR --- */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* SIDEBAR (Desktop) */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-bg-nav);
    color: white;
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    font-weight: bold;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: white;
}

.sidebar-nav { padding: 1rem; overflow-y: auto; flex: 1; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: rgba(255,255,255,0.7);
    border-radius: var(--radius-md);
    margin-bottom: 5px;
    transition: all 0.2s ease;
    font-weight: 500;
}
.sidebar-link:hover { background-color: rgba(255,255,255,0.1); color: white; }
.sidebar-link.active { background-color: var(--color-primary); color: white; box-shadow: var(--shadow-sm); }

/* MAIN CONTENT AREA */
.app-main {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Desktop Logic */
@media (min-width: 1025px) {
    .app-sidebar { display: flex; }
    .app-main { margin-left: var(--sidebar-width); }
    .app-mobile-nav { display: none !important; }
}

/* HEADER */
.app-header {
    height: var(--header-height);
    background-color: var(--color-bg-bars-light); 
    
    /* Schatten unter dem Header */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--color-border);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 90; 
}

/* Dark Mode Header Anpassung */
html.dark .app-header {
    background-color: var(--color-bg-nav); 
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: none; 
}

.header-left, .header-right { display: flex; align-items: center; gap: 0.5rem; }
.header-title { font-size: 1.1rem; font-weight: bold; color: var(--color-text); margin: 0; }

.icon-button {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--color-text-secondary);
    background: transparent; border: none; cursor: pointer;
    font-size: 1.2rem;
}
.icon-button:hover { background-color: var(--color-bg); color: var(--color-primary); }
html.dark .icon-button { color: #ffffff; } 

/* --- THEME TOGGLE LOGIK --- */
#theme-toggle .ffweb-sun { display: none; } 
#theme-toggle .ffweb-moon { display: inline-block; }
html.dark #theme-toggle .ffweb-sun { display: inline-block; }
html.dark #theme-toggle .ffweb-moon { display: none; }

/* MOBILE NAVIGATION */
.app-mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mobile-nav-height);
    
    background-color: var(--color-bg-bars-light); 
    
    /* Schatten nach oben */
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* Rand in Icon-Farbe */
    border-top: 2px solid #5a657d;
    
    display: flex;
    justify-content: space-around;
    align-items: center; 
    z-index: 95;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    padding-top: 5px;
}
/* Mobile Nav im Dark Mode */
html.dark .app-mobile-nav {
    background-color: var(--color-bg-nav); /* #1e293b */
    border-top: 2px solid #007afc;         /* Der hellblaue Strich */
    box-shadow: none;
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    width: 20%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: color 0.2s, opacity 0.2s;
}

.mobile-icon-wrapper {
    position: relative;
    width: 50px; 
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px; 
}

.mobile-icon-wrapper i {
    font-size: 1.4rem; 
    position: relative;
    z-index: 2; 
    transition: color 0.2s;
}

/* --- FIX FÜR WEISSE ICONS IM DARK MODE --- */
html.dark .mobile-nav-link { 
    color: #ffffff !important; 
    opacity: 1 !important;             
}
html.dark .mobile-nav-link.active,
html.dark .mobile-nav-link.active i,
html.dark .mobile-nav-link.active span { 
    color: var(--color-primary) !important; 
    opacity: 1 !important;
}

/* Aktiv Status im Dark Mode */
html.dark .mobile-nav-link.active { 
    opacity: 1; 
    font-weight: bold;
}

.overlay-icon {
    position: absolute;
    top: -12px;  
    left: -5px;  
    width: 55px; 
    height: auto;
    pointer-events: none; 
    z-index: 5; 
    opacity: 0.9;
}

/* Light Mode Active Color */
.mobile-nav-link.active { color: var(--color-primary); font-weight: bold; }

/* --- MAIN CONTENT & GRID --- */
.main-content-area {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: calc(var(--mobile-nav-height) + 20px); 
}

@media (min-width: 1025px) {
    .main-content-area { padding-bottom: 40px; }
}

.content-row.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.grid-view-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
}

/* --- CONTENT CARDS --- */
.content-card-link { text-decoration: none; display: block; }

/* --- LIGHT MODE CARD DESIGN --- */
.content-card {
    background-color: #ffffff;
    /* Feiner Verlauf */
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    /* Rand */
    border: 1px solid #cbd5e1; 
    /* WICHTIG: Linken Rand reservieren für Farbe */
    border-left: 5px solid transparent; 
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    
    /* Satterer Schatten */
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    
    color: var(--color-text);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

/* --- DARK MODE CARD STYLING --- */
html.dark .content-card {
    background: linear-gradient(145deg, #2d384e, #40587f);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    border: none; 
    
    /* WICHTIG: Damit der Rand nicht verschwindet, setzen wir hier die Basis */
    border-left: 5px solid transparent; 
    
    border-radius: 10px;
    color: white;
}

/* Hover Effekt */
.content-card:active { transform: scale(0.98); }
.content-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --- CARD HEADER STRUKTUR --- */
.card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}
html.dark .card-header { border-bottom-color: rgba(255,255,255,0.1); }

/* Header Titel mit Icon */
.card-title { 
    font-weight: 700; 
    font-size: 1.1rem; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: var(--color-text); 
	margin-bottom: 10px;
}
/* Speziell für "Meine Termine" – Datum und Kategorie untereinander */
.termin-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;                    /* Abstand zwischen Datum und Kategorie */
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

html.dark .termin-card-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

/* Optional: Etwas mehr Abstand nach unten zur Titel */
.termin-card-header + .card-title {
    margin-top: 4px;
}
/* --- FARB-KLASSEN (LIGHT & DARK MODE FIX) --- */
/* WICHTIG: Wir definieren für html.dark die Farbe explizit, damit sie die Transparenz überschreibt */

/* BLAU */
.content-card.card-blue { border-left-color: #3498db; }
.content-card.card-blue .card-title { color: #2980b9; } 
html.dark .content-card.card-blue { border-left-color: #3498db; } /* Rand */
html.dark .content-card.card-blue .card-title { color: #90caf9 !important; } /* Text */

/* ROT */
.content-card.card-red { border-left-color: #e74c3c; }
.content-card.card-red .card-title { color: #c0392b; } 
html.dark .content-card.card-red { border-left-color: #e74c3c; } /* Rand */
html.dark .content-card.card-red .card-title { color: #ef9a9a !important; } /* Text */

/* GRÜN */
.content-card.card-green { border-left-color: #2ecc71; }
.content-card.card-green .card-title { color: #27ae60; } 
html.dark .content-card.card-green { border-left-color: #2ecc71; } /* Rand */
html.dark .content-card.card-green .card-title { color: #a5d6a7 !important; } /* Text */

/* ORANGE */
.content-card.card-orange { border-left-color: #f39c12; }
.content-card.card-orange .card-title { color: #d35400; } 
html.dark .content-card.card-orange { border-left-color: #f39c12; } /* Rand */
html.dark .content-card.card-orange .card-title { color: #ffcc80 !important; } /* Text */

/* GRAU */
.content-card.card-grey { border-left-color: #95a5a6; }
.content-card.card-grey .card-title { color: #7f8c8d; } 
html.dark .content-card.card-grey { border-left-color: #95a5a6; } /* Rand */
html.dark .content-card.card-grey .card-title { color: #b0bec5 !important; } /* Text */


/* --- TEXT INHALTE --- */
.card-subtitle{
    display:block !important;      /* wichtig wenn es ein span/inline ist */
    font-weight:600;
    color:var(--color-text);
    margin:0 !important;
    padding-bottom:10px !important; /* echter Abstand */
}




.card-text { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.card-date { font-size: 0.85rem; color: var(--color-text-secondary); opacity: 0.8; margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px;}

/* --- ICONS (Global Fix) --- */

/* 1. LIGHT MODE: Standardfarbe Dunkelgrau */
.content-card i,
.content-card [class*="ffweb-"] {
    color: #2d3748;
    font-size: 1.5rem; 
    transition: color 0.3s ease;
}

/* 2. DARK MODE: ZWINGEND WEISS */
html.dark .content-card i,
html.dark .content-card [class*="ffweb-"] {
    color: #ffffff !important; 
}

/* --- STATUS (Verschoben / Abgesagt) --- */
.content-card.verschoben { 
    border-left-color: var(--color-warning) !important; 
    background-color: rgba(241, 196, 15, 0.05); 
}
html.dark .content-card.verschoben { 
    background: linear-gradient(145deg, #3d3414, #292411);
}

.content-card.abgesagt { 
    border-left-color: var(--color-danger) !important; 
    background-color: rgba(217, 48, 37, 0.05); 
    opacity: 0.9; 
}
html.dark .content-card.abgesagt { 
    background: linear-gradient(145deg, #3d1a1a, #291111);
}

.content-card.abgesagt .card-title,
.content-card.abgesagt .card-subtitle,
.content-card.abgesagt .card-text { text-decoration: line-through; opacity: 0.7; }

.content-card.abgesagt::before {
    content: 'ABGESAGT';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-danger);
    opacity: 0.15;
    pointer-events: none;
    border: 4px solid var(--color-danger);
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 10;
    text-decoration: none !important;
}

/* --- COUNTDOWNS & BADGES --- */
.countdown-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px; 
    background-color: rgba(0,0,0,0.05); 
    color: var(--color-text-secondary);
    white-space: nowrap;
    margin-left: 10px;
}
html.dark .countdown-badge { background-color: rgba(255,255,255,0.1); color: #ccc; }

.countdown-badge.today { background-color: #e74c3c; color: white; }
.countdown-badge.orange { background-color: #f39c12; color: white; }

/* Badge am Navigation Icon */
.nav-badge {
    background-color: var(--color-danger);
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    top: -5px; right: -5px;
    z-index: 10;
    padding: 0 4px;
}

/* MOBILE ANPASSUNGEN */
@media (max-width: 1024px) {
    .main-content-area { padding: 10px; padding-bottom: 90px; }
    
    .app-header { padding: 0 1rem; }
}
/* ==========================================================================
   ZUSATZ: UI COMPONENTS (Buttons & Forms)
   ========================================================================== */

/* --- 1. MODERN BUTTONS --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    gap: 8px; /* Abstand zwischen Icon und Text */
    text-decoration: none;
    line-height: 1.2;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* Button Varianten */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-secondary {
    background-color: #e2e8f0; /* Helles Grau im Light Mode */
    color: #475569;
}

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

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

/* Transparenter Button (z.B. für "Abgemeldete anzeigen") */
.btn-link {
    background: transparent;
    color: var(--color-text-secondary);
    padding-left: 0;
    justify-content: flex-start;
}
.btn-link:hover { color: var(--color-primary); }

/* Kleine Buttons (z.B. "Details") */
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* --- DARK MODE BUTTONS FIX --- */
html.dark .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
html.dark .btn-outline-danger {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;                    /* Weißes Icon */
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .btn-outline-danger:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* --- 2. FORMULAR ELEMENTE (Select / Input) --- */

/* SELECT */
select,
.form-select{
    appearance: none;
    -webkit-appearance: none;

    background-color: var(--color-bg-input);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 2.5rem 0.6rem 1rem; /* Platz für Pfeil */
    font-size: 16px;                   /* iPhone-Fix */
    font-family: inherit;
    width: 100%;
    cursor: pointer;

    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* INPUT / TEXTAREA */
.form-control{
    -webkit-appearance: auto;  /* wichtig für iOS (v.a. date/time) */
    appearance: auto;

    background-color: var(--color-bg-input);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;      /* kein Select-Pfeil-Padding */
    font-size: 16px;           /* verhindert iOS-Zoom */
    font-family: inherit;
    width: 100%;
    cursor: text;
    line-height: 1.2;
    min-height: 44px;          /* iPhone Tap-Size */
}

textarea.form-control{
    min-height: 120px;
    resize: vertical;
}

select:focus,
.form-select:focus,
.form-control:focus{
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-control::placeholder{
    color: var(--color-text-secondary);
    opacity: 0.85;
}

/* Dark Mode */
html.dark select,
html.dark .form-select,
html.dark .form-control{
    background-color: var(--color-bg-input);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark .form-control::placeholder{
    color: rgba(255, 255, 255, 0.65);
}



/* --- 3. SPEZIFISCHE UI HELPERS --- */

/* Badge Styles (Teilnehmer Liste) */
.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}
.bg-secondary { background-color: #6c757d; color: white; }
.bg-danger { background-color: var(--color-danger); color: white; }

/* Flex Utility für Header (damit Select & Button nebeneinander passen) */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: 0.5rem !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: 0.5rem !important; }

/* Status Nachricht unten in der Karte */
.status-msg {
    font-size: 0.85rem;
    font-weight: 600;
}
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
html.dark .text-danger {
    color: #ff8a80 !important; /* Ein helleres Rot für bessere Lesbarkeit auf Dunkelblau */
}

/* Optional: Deckkraft im Dark Mode erhöhen, damit es deutlicher wird */
html.dark .card-date {
    opacity: 1; 
}
/* ==========================================================================
   ZUSATZ: KOMPAKTE LISTEN & NEUE FARBEN (Übungen Update)
   ========================================================================== */

/* 1. Neue Farbe: Mint-Grün (#68d391) für Übungen */
.content-card.card-mint { border-left-color: #68d391; }
.content-card.card-mint .card-title { color: #276749; } /* Dunkleres Grün für Text */

html.dark .content-card.card-mint { border-left-color: #68d391; }
html.dark .content-card.card-mint .card-title { color: #68d391 !important; }

/* 2. Kompakte Filter-Leiste (ersetzt die dicke graue Box) */
.filter-bar-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1.5rem;
    padding: 0 5px;
}
.filter-group { display: flex; gap: 8px; flex-grow: 1; }
/* Damit Selects auf Handy nicht winzig sind */
.filter-bar-compact .form-select { max-width: 100%; width: auto; flex-grow: 1; }
@media (min-width: 1025px) {
    .filter-bar-compact .form-select { max-width: 200px; }
    .filter-group { flex-grow: 0; }
}

/* 3. Optimierte Karten-Header (Überschrift bricht um) */
.card-header-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.card-headline-wrap {
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.15rem;
    line-height: 1.3;
    padding-right: 10px;
}

/* 4. Highlight Box für Countdown */
.countdown-box {
    display: inline-block;
    background-color: #ebf8ff;
    color: #2b6cb0;
    border: 1px solid #bee3f8;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-top: 5px;
    align-self: flex-start;
}
html.dark .countdown-box {
    background-color: rgba(66, 153, 225, 0.2);
    border-color: rgba(66, 153, 225, 0.4);
    color: #90cdf4;
}
.countdown-box.urgent { background-color: #fff5f5; color: #c53030; border-color: #fed7d7; }
html.dark .countdown-box.urgent { background-color: rgba(245, 101, 101, 0.2); color: #fc8181; border-color: rgba(245, 101, 101, 0.4); }

/* 5. Klapp-Bereiche (Accordion Style) */
.toggle-trigger {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(0,0,0,0.03);
    border-radius: 6px;
    margin-bottom: 5px;
    transition: background 0.2s;
    font-weight: 600;
    color: var(--color-text);
}
.toggle-trigger:hover { background-color: rgba(0,0,0,0.06); }
html.dark .toggle-trigger { background-color: rgba(255,255,255,0.05); }
html.dark .toggle-trigger:hover { background-color: rgba(255,255,255,0.1); }

.toggle-content {
    display: none; /* Standardmäßig zu */
    padding: 10px;
    padding-top: 0;
    border-left: 2px solid rgba(0,0,0,0.1);
    margin-left: 10px;
    margin-bottom: 10px;
}
.toggle-content.show { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Hilfsklassen für Buttons im Footer */
.action-buttons-row {
    display: flex;
    gap: 10px;
    width: 100%;
}
.action-buttons-row .btn { flex: 1; } /* Buttons gleich breit */
/* ==========================================================================
   UPDATE: ÜBUNGEN DASHBOARD (Datum & Dual-Toggle)
   ========================================================================== */

/* 1. Hervorhebung Datum & Zeit */
.date-time-row {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dt-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    flex: 1; /* Nimmt verfügbaren Platz */
    min-width: 140px;
}
html.dark .dt-badge {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.dt-badge i { font-size: 1.1rem; opacity: 0.8; }
.dt-badge span { display: block; line-height: 1.1; }
.dt-badge small { display: block; font-size: 0.75rem; font-weight: normal; opacity: 0.7; margin-top: 2px; }


/* 2. Dual-Toggle für Teilnehmer (Nebeneinander) */
.stats-toggle-row {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.stat-trigger {
    flex: 1; /* 50% Breite */
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert */
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
    text-align: center;
}

/* Styles für "Dabei" */
.stat-trigger.dabei {
    background-color: rgba(46, 204, 113, 0.1);
    color: #27ae60;
    border-color: rgba(46, 204, 113, 0.2);
}
.stat-trigger.dabei.active {
    background-color: #2ecc71;
    color: white;
}
.stat-trigger.dabei:hover:not(.active) { background-color: rgba(46, 204, 113, 0.2); }

/* Styles für "Abgesagt" */
.stat-trigger.abgesagt {
    background-color: rgba(231, 76, 60, 0.1);
    color: #c0392b;
    border-color: rgba(231, 76, 60, 0.2);
}
.stat-trigger.abgesagt.active {
    background-color: #e74c3c;
    color: white;
}
.stat-trigger.abgesagt:hover:not(.active) { background-color: rgba(231, 76, 60, 0.2); }

/* Dark Mode Anpassungen */
html.dark .stat-trigger.dabei { background-color: rgba(46, 204, 113, 0.15); color: #69f0ae; border-color: transparent;}
html.dark .stat-trigger.dabei.active { background-color: #00e676; color: black; }

html.dark .stat-trigger.abgesagt { background-color: rgba(231, 76, 60, 0.15); color: #ff8a80; border-color: transparent;}
html.dark .stat-trigger.abgesagt.active { background-color: #ff5252; color: white; }

/* Content Container für die Listen */
.stat-content-wrapper {
    background-color: rgba(0,0,0,0.02);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Für Animation */
}

.stat-list-content {
    display: none;
    padding: 15px;
    border-top: 2px solid rgba(0,0,0,0.05);
    animation: slideDown 0.2s ease-out;
}
.stat-list-content.show { display: block; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ========================================================================== */
/* --- MODAL & FORM FIXES (Finaler & Korrigierter Block) --- */
/* ========================================================================== */

/* 1. KORREKTUR: MODAL-HINTERGRUND & INPUT-FARBEN */

/* Erzwingt eine opake Dunkelfarbe für den Modal-Inhalt (löst das Durchscheinen im Dark Mode) */
html.dark .modal-content.bg-dark {
    background-color: var(--color-bg-nav) !important; 
    border-color: var(--color-border) !important;
}

/* Erzwingt die korrekte, opake Input-Farbe für Formulare im Modal */
html.dark .modal-body .form-control {
    background-color: var(--color-bg-input) !important;
}

/* iOS/Safari: Date/Time/Text im Input nicht mittig */
input.form-control[type="date"],
input.form-control[type="time"],
input.form-control[type="datetime-local"]{
    text-align: left;
}

/* Der eigentliche Wert-Container in iOS */
input.form-control[type="date"]::-webkit-date-and-time-value,
input.form-control[type="time"]::-webkit-date-and-time-value,
input.form-control[type="datetime-local"]::-webkit-date-and-time-value{
    text-align: left;
}

/* Optional: Picker-Icon rechts lassen, ohne dass es den Text "zentriert" */
input.form-control[type="date"],
input.form-control[type="time"],
input.form-control[type="datetime-local"]{
    padding-right: 44px; /* Platz fürs Kalender/Uhr-Icon */
}

/* 2. KORREKTUR: LAYOUT UND AUSRICHTUNG (Header, Body, Footer) */

/* FIX FÜR KLEBENDEN MODAL-HEADER & SCHLIESSEN-BUTTON */
.modal-header {
    /* Setzt das korrekte Padding und löst das Kleben des Titels */
    padding: 1rem 1.5rem !important; 
    /* Fügt Flexbox für die korrekte Ausrichtung von Titel und Button hinzu */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* FIX FÜR KLEBENDEN MODAL-BODY (Gesamter Inhalt) */
.modal-body {
    padding: 1.5rem !important; 
}

/* FIX FÜR BUTTON IM FOOTER (Übernehmen) */
.modal-footer {
    padding: 1rem 1.5rem !important;
    /* Richtet den Button nach rechts aus */
    display: flex !important;
    justify-content: flex-end !important; 
}


/* 3. KORREKTUR: INHALT IM BODY (ABSTÄNDE & CHECKBOX-POSITION FÜR MOBILTAUGLICHKEIT) */

/* Fügt vertikalen Abstand zwischen Hinzufügen-Gruppe und Checkbox-Liste hinzu */
#feuerwehrCheckboxList {
    margin-top: 1rem; 
    padding-top: 0 !important; 
}

/* KORRIGIERT MOBILTAUGLICHKEIT: Erweitert die Klickfläche des Checkbox-Eintrags */
.modal-body .form-check {
    /* Setzt den Eintrag auf Flex, um die Inhalte vertikal zu zentrieren */
    display: flex;
    align-items: center; 
    /* Erweitert die Höhe für eine größere Tippfläche */
    padding-top: 10px !important; 
    padding-bottom: 10px !important;
    /* Erlaubt Platz für das Kästchen an der linken Kante */
    padding-left: 1.5em !important; 
    margin-bottom: 0 !important; 
}

/* KORRIGIERT MOBILTAUGLICHKEIT: Vergrößert das Kästchen und richtet es korrekt aus */
.modal-body .form-check-input {
    width: 1.5em !important; 
    height: 1.5em !important; 
    /* Verschiebt das Kästchen in den erstellten Platz */
    margin-left: -1.5em !important; 
    margin-right: 12px;
}

/* 4. KORREKTUR: "AUSWÄHLEN"-BUTTON (LIGHT & DARK MODE SICHTBARKEIT) */

/* FIX LIGHT MODE: Der Button braucht mehr Kontrast zur Card-Farbe. */
.btn-secondary {
    /* Nutzt die Konturfarbe für den Hintergrund, die dunkler ist als die Card-Farbe */
    background-color: var(--color-border) !important; 
    color: var(--color-text) !important;
}

/* FIX DARK MODE: Transparenz - Erzwingt den sichtbaren, dunklen Hintergrund */
html.dark .btn-secondary {
    /* Erzwingt den sichtbaren, dunklen Hintergrund im Dark Mode */
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
html.dark .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}


/* ========================================================================== */
/* --- NEUE SEKTION: MODAL-DESIGN FIX (Für beide Designs) --- */
/* Dies überschreibt die problematische Vererbung für das Feuerwehr-Modal */
/* ========================================================================== */

/* 1. UNIVERSAL-FIX FÜR LIGHT MODE (Überschreibt alle dunklen Vererbungen mit Weiß) */
.modal-content {
    /* Standardmäßig sind Modal-Elemente und deren Kinder farblos */
    background-color: var(--color-bg-card); /* Nutzt Light Mode Standard */
    color: var(--color-text);
    border-color: var(--color-border);
}
.modal-content .text-white {
    color: var(--color-text) !important;
}

/* 2. UNIVERSAL-FIX FÜR DARK MODE (Erzwingt dunkle Farben, da var(--color-bg-card) dunkel ist) */
html.dark .modal-content {
    background-color: var(--color-bg-card) !important; /* #2d384e */
    color: var(--color-text) !important; /* Weiß */
    border-color: var(--color-border) !important;
}
html.dark .modal-content .text-white {
    color: white !important; /* Soll Weiß bleiben */
}

/* 3. CHECKBOX LABELS FIX */
.modal-body .form-check-label {
    color: var(--color-text); /* Standardmäßig dunkel */
}
html.dark .modal-body .form-check-label {
    color: white; /* Im Dark Mode weiß */
}

/* 4. INPUT LABELS FIX (Für den Input im Modal-Body) */
.modal-body input.form-control {
    background-color: var(--color-bg-input);
    color: var(--color-text);
}
html.dark .modal-body input.form-control {
    background-color: var(--color-bg-input); /* #1e293b */
    color: white;
}
/* ========================================================================== */
/* BENACHRICHTIGUNGS-MODAL – Vollständig kompatibel mit Light/Dark Mode       */
/* ========================================================================== */

/* Badge auf der Glocke */
.notification-bell {
    position: relative;
}
.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff3b30;                  /* Klassisches Rot – bleibt in beiden Modes gleich */
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--color-bg-bars-light); /* Passt sich Header an (weiß im Light, dunkel im Dark) */
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Modal Container */
.notification-modal {
    position: fixed;
    top: 70px;
    right: 16px;
    width: 380px;
    max-height: 70vh;
    background: var(--color-bg-card);     /* → Weiß im Light, dunkel im Dark */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

/* Overlay (Hintergrund abdunkeln) */
.notification-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
}

/* Header des Modals */
.notification-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-card);
}
.notification-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text);
    font-weight: 600;
}

/* Liste der Benachrichtigungen */
.notification-list {
    overflow-y: auto;
    flex: 1;
}

/* Einzelne Benachrichtigung */
.notification-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.2s;
}
.notification-item:hover {
    background: rgba(255, 255, 255, 0.05); /* Light: leicht hell, Dark: leicht aufhellend */
}
html.dark .notification-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.notification-item.unread {
    background: var(--color-primary-light); /* Hellblau-Touch im Light Mode */
}
html.dark .notification-item.unread {
    background: rgba(100, 181, 246, 0.15); /* Etwas stärker im Dark Mode */
}

/* Icon links */
.notification-icon {
    margin-right: 12px;
    color: var(--color-primary);
    font-size: 20px;
    flex-shrink: 0;
}

/* Textbereich */
.notification-content {
    flex: 1;
    min-width: 0;
}
.notification-title {
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}
.notification-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-time {
    font-size: 12px;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

/* Leere Zustand */
.notification-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-secondary);
}
.notification-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
    color: var(--color-text-secondary);
}

/* Footer */
.notification-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    background: var(--color-bg-card);
}
.notification-all-link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}
.notification-all-link:hover {
    text-decoration: underline;
}
/* Profilbild in Benachrichtigung */
.notification-profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    background: var(--color-bg-card);
}

/* Falls Bild nicht lädt – Fallback-Icon zeigen */
.notification-profile-img:not([src]),
.notification-profile-img[src=""] {
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-profile-img:not([src])::after,
.notification-profile-img[src=""]::after {
    content: "\f007"; /* FontAwesome user icon – oder dein ffweb-user */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--color-primary);
    font-size: 18px;
}

/* Alternative: Wenn du deine Icons nutzen willst */
.notification-icon {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-icon i.ffweb-bell {
    display: none; /* Wir zeigen jetzt das Profilbild */
}
/* ==========================================================================
   MODAL / POPUP FIX (Zentriert & Über allem)
   ========================================================================== */
.wb-modal-overlay {
    position: fixed;       /* Zwingend: Fixiert am Bildschirmfenster */
    top: 0;
    left: 0;
    width: 100vw;          /* Volle Breite */
    height: 100vh;         /* Volle Höhe */
    background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
    z-index: 10000;        /* Extrem hoher Z-Index, damit es über allem liegt */
    display: none;         /* Standardmäßig ausgeblendet */
    align-items: center;   /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    backdrop-filter: blur(3px); /* Schöner Weichzeichner-Effekt im Hintergrund */
}

/* Inhalt des Modals */
.wb-modal-card {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0; /* Padding wird durch Header/Body geregelt */
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: modalPopIn 0.2s ease-out;
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}



/* ==========================================================================
   DRUCK-OPTIMIERUNG (A5/A4 Perfektion - Mit Design)
   ========================================================================== */

@media print {
    /* 1. Browser-Standardelemente entfernen */
    @page {
        margin: 0; 
        size: auto; 
    }

    /* 2. Seite neu aufbauen */
    body, html {
        background-color: white !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact; /* Wichtig für Schatten/Farben */
        print-color-adjust: exact;
    }

    .app-main, .main-content-area {
        margin: 0 !important;
        padding: 10mm 10mm 10mm 15mm !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* 3. Ausblenden */
    .app-sidebar, 
    .app-header, 
    .app-mobile-nav, 
    .action-buttons-row, 
    .btn, 
    .filter-bar-compact, /* Das blendet die Filterleiste/Überschrift-Box aus, wenn sie die Klasse hat */
    .alert,
    .no-print, /* Unsere Hilfsklasse */
    .nav-badge,
    #theme-toggle,
    .sidebar-overlay {
        display: none !important;
    }

    /* 4. PRINT HEADER */
    .print-header-container {
        display: flex !important;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        border-bottom: 3px solid #000;
        padding-bottom: 5px;
        margin-bottom: 10mm;
    }

    .print-logo-wrapper {
        width: 30%;
        max-width: 30%;
    }
    .print-logo-wrapper img {
        max-width: 100%;
        max-height: 250px;
        object-fit: contain;
    }

    .print-title-wrapper {
        flex: 1;
        width: 65%;
        padding-left: 20px;
        text-align: right;
        overflow: hidden;
    }

    .print-title-wrapper h1 {
        font-family: sans-serif;
        font-size: 24pt;
        font-weight: 800;
        color: #000 !important;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        text-transform: uppercase;
    }

    /* 5. CONTENT BOXEN (Design wiederhergestellt) */
    .content-card, .admin-list-item {
        /* Design beibehalten */
        background: white !important;
        border: 1px solid #ccc !important;
        border-radius: 10px !important; /* Rundungen zurück */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Schatten zurück */
        
        color: black !important;
        margin-bottom: 5mm !important;
        padding: 5mm !important;
        break-inside: avoid;
        display: block !important;
    }

    /* Status Farben Rand links */
    .content-card.abgesagt { border-left: 5px solid #d93025 !important; }
    .content-card.verschoben { border-left: 5px solid #f1c40f !important; }
    .content-card.card-blue { border-left: 5px solid #285694 !important; }

    /* Textfarben und Icons */
    h3, h4, .card-title {
        color: #000 !important;
        font-size: 14pt !important;
        margin-bottom: 5px !important;
    }
    
    .card-body, div, span, p {
        color: #000 !important;
    }

    i, [class^="ffweb-"] {
        color: #000 !important; /* Icons Schwarz für Kontrast */
    }
}

/* Screen: Header ausblenden */
.print-header-container { display: none; }



/* Styling für das Datei-Auswahl-Feld (File Input) */
.form-control[type="file"] {
    padding: 6px 12px;
    cursor: pointer;
    background-color: var(--color-bg-input); /*  */
    color: var(--color-text-secondary); /*  */
}

/* Gestaltet den eigentlichen Button innerhalb des Input-Feldes */
.form-control::file-selector-button {
    margin-right: 15px;
    border: none;
    background: var(--color-primary); /*  */
    padding: 6px 12px;
    border-radius: 6px; /*  */
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease-in-out;
}

/* Hover-Effekt für den Auswahl-Button */
.form-control::file-selector-button:hover {
    filter: brightness(1.1);
}

/* Dark-Mode Anpassung für den Text im Input */
html.dark .form-control[type="file"] {
    color: var(--color-text); /*  */
}