body {
            background-color: #000;
            color: #c9d1d9;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 12px;
        }

.Year {margin-top :4px; font-size :40px; font-weight:700;}

		
        .strom_container {
            max-width: 1450px;
            margin: 0 auto;
        }
        .notification_box {
            background-color: #1f6feb33;
            border: 1px solid #1f6feb;
            color: #58a6ff;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        .top_bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
.tab_navigation {
    display: flex;
    gap: 10px;
    /* border-bottom: 1px solid #30363d; */
    padding-bottom: 0px;
    margin-top: -14px;
}
        .tab_button {
    background-color: #370d00;
    color: #c9d1d9;
    border: 1px solid #d51b1b;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    transition: background-color 0.2s;
}
.tab_button:hover, .tab_button.active {
    background-color: #042900;
    color: #58ff9c;
    border-color: #149705;
    outline: none;
}
.mode_toggle_btn {
    background-color: #00183b;
    color: #c9d1d9;
    border: 1px solid #0061d1;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
        .mode_toggle_btn.delete_mode_active {
            background-color: #da3633;
            color: #ffffff;
            border-color: #f85149;
        }
        .tab_content {
            display: none;
        }
        .tab_content.active {
            display: block;
        }
        .quick_form {
    background-color: #0e1029;
    border: 1px solid #0a5fc3;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}
        .quick_form label {
            font-weight: bold;
        }
        .quick_form input {
            background-color: #0d1117;
            color: #c9d1d9;
            border: 1px solid #30363d;
            border-radius: 4px;
            padding: 6px 10px;
            outline: none;
        }
        .quick_form button {
            background-color: #003ca9;
            color: #ffffff;
            border: none;
            padding: 7px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            outline: none;
        }
        .quick_form button:hover {
            background-color: #443a95;
        }
        .matrix_wrapper {
    overflow-x: auto;
    background-color: #000000;
    border: 1px solid #637500;
    border-radius: 8px;
    /* padding: 15px; */
}
        .matrix_table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
            white-space: nowrap;
        }
		
        .matrix_table th {
            /* border: 1px solid #2c3b00; */
            padding: 6px 8px;
            text-align: center;
        }
		
        .matrix_table td {
    /* border: 1px solid #232d04; */
    padding: 2px 4px;
    text-align: center;
}
		
        .matrix_table th {
			background-color: #00122b;
			color: #58a6ff;
		}
        .matrix_input {
    background-color: #000000;
    color: #77ff00;
    border: 2px solid #000000;
    border-radius: 7px;
    width: 75px;
    padding: 4px;
    text-align: center;
    outline: none;
}
        .matrix_input:focus {
            border-color: #58a6ff;
        }
        .matrix_cell_delete {
            cursor: pointer;
            background-color: #21262d;
            color: #f85149;
            border-radius: 4px;
            padding: 4px 8px;
            border: 1px dashed #f85149;
            display: inline-block;
            font-size: 0.8rem;
        }
        .matrix_cell_delete:hover {
            background-color: #da363333;
        }
        .summary_row {
            background-color: #00122b;
            font-weight: bold;
        }
        .stats_grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .stat_card {
    background-color: #050f1c;
    border: 1px solid #1475d9;
    border-radius: 8px;
    padding: 20px;
}
        .stat_card h3 {
            margin-top: 0;
            color: #58a6ff;
            font-size: 1.2rem;
            border-bottom: 1px solid #30363d;
            padding-bottom: 8px;
        }
        .stat_value {
            font-size: 1.6rem;
            font-weight: bold;
            color: #ffb300;
            margin: 15px 0 5px 0;
        }
        .stat_sub {
            color: #e1ff00;
            font-size: 0.9rem;
        }
        /* Custom Dark Mode Modal Overlay */
        .modal_overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .modal_box {
            background-color: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 25px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            text-align: center;
        }
        .modal_box h3 {
            margin-top: 0;
            color: #f85149;
            font-size: 1.2rem;
        }
        .modal_box p {
            color: #c9d1d9;
            margin: 15px 0 25px 0;
            font-size: 1rem;
        }
        .modal_buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .modal_btn_cancel {
            background-color: #21262d;
            color: #c9d1d9;
            border: 1px solid #30363d;
            padding: 8px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }
        .modal_btn_cancel:hover {
            background-color: #30363d;
        }
        .modal_btn_delete {
            background-color: #da3633;
            color: #ffffff;
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }
        .modal_btn_delete:hover {
            background-color: #b62324;
        }
		
		.Label_kWh {color :#ffca00;}
		
		.Label_Euro {color :#ffa700;}
		
		.matrix_Tag {color :#ffa700 !important;}
		
		.matrix_Tag_Zahl {
    color: #bbdf00;
    border: none;
    border-bottom: 1px solid #2c3b00;
    display: block;
    width: 100%;
    line-height: 1.7;
}
		
		
		
		/* Pfeile bei Nummerfeldern (Spinbuttons) komplett entfernen */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield; /* Für Firefox */
}




/* ==========================================
   TABLET RESPONSIVE ANPASSUNGEN (max. 1024px)
   ================================---------- */
@media screen and (max-width: 1024px) {
    body {
        padding: 10px;
    }

    .strom_container {
        max-width: 100%;
    }

    h1 {
        font-size: 1.4rem;
    }

    .quick_form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .quick_form div {
        display: flex;
        flex-direction: column;
    }

    .quick_form input {
        width: 100%;
        box-sizing: border-box;
    }

    .top_bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tab_navigation {
        justify-content: center;
        flex-wrap: wrap;
    }

    .matrix_wrapper {
        padding: 8px;
    }

    .matrix_table {
        font-size: 0.75rem;
    }

    .matrix_table th, .matrix_table td {
        padding: 4px 5px;
    }

    .matrix_input {
        width: 60px;
        font-size: 0.75rem;
    }

    .stats_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stat_card {
        padding: 15px;
    }

    .stat_value {
        font-size: 1.3rem;
    }
}



/* ==========================================================================
   STROM-TRACKER ERWEITERUNGEN: Sticky Header, Monats-Farbklassen & Tooltip
   ========================================================================== */

/* Sticky Header für die Matrix */
.matrix_wrapper {
    max-height: 76vh;
    overflow-y: auto;
    position: relative;
}

.matrix_table thead th.col_sticky_tag,
.matrix_table thead th.col_sticky_month {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #000;
}

/* Individuelle Monats-Header und Wert-Farben (Klassen mit Unterstrich, Deklarationen mit Bindestrich) */
th.col_januar { color: #ffb703; }
td.val_januar input { color: #ffd166; border-color: rgba(255, 183, 3, 0.38); }

th.col_februar { color: #fb8500; }
td.val_februar input { color: #ffa240; border-color: rgba(251, 133, 0, 0.43); }

th.col_maerz { color: #219ebc; }
td.val_maerz input { color: #8ecae6; border-color: rgba(33, 158, 188, 0.43); }

th.col_april { color: #8ecae6; }
td.val_april input { color: #b9e2f5; border-color: rgba(5, 176, 255, 0.37); }

th.col_mai { color: #52b788; }
td.val_mai input { color: #74c69d; border-color: rgba(130, 249, 0, 0.28); }

th.col_juni { color: #95d5b2; }
td.val_juni input { color: #b7e4c7; border-color: rgba(0, 255, 43, 0.23); }

th.col_juli { color: #e0a96d; }
td.val_juli input { color: #f4c29c; border-color: rgba(224, 169, 109, 0.35); }

th.col_august { color: #f77f00; }
td.val_august input { color: #f9a03f; border-color: rgba(247, 127, 0, 0.38); }

th.col_september { color: #ff7043; }
td.val_september input { color: #ffab91; border-color: rgba(255, 83, 29, 0.43); }

th.col_oktober { color: #e53935; }
td.val_oktober input { color: #ef5350; border-color: rgba(255, 6, 0, 0.45); }

th.col_november { color: #ab47bc; }
td.val_november input { color: #ba68c8; border-color: rgba(171, 71, 188, 0.53); }

th.col_dezember { color: #7e57c2; }
td.val_dezember input { color: #9575cd; border-color: rgba(126, 87, 194, 0.59); }

/* Matrix Hover Tooltip Styling mit gelber Schrift */
.matrix_tooltip_box {
    display: none;
    position: absolute;
    background-color: #0d1b2a;
    color: #ffd166;
    border: 1px solid #ffb703;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Gleitende 31-Tage Tabelle Styling */

.31_Tage {
	font-size: 20px;
}

.rolling_31_container h3 {
    color: #ffd166;
    margin-bottom: 0px;
}

.rolling_table_wrapper {
    max-height: 455px;
    overflow-y: auto;
    border-radius: 0px;
    border: 1px solid #5c6d00;
}

.rolling_table {
    width: 100%;
    border-collapse: collapse;
    background-color: #0b090a;
}

.rolling_table th {
    background-color: #000812;
    /* color: #ffd166; */
    padding: 10px 15px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 2px solid #5c6d00;
}

.rolling_table td {
    padding: 8px 15px;
    border-bottom: 1px solid #4f1e2e;
    /* color: #e5e5e5; */
}

.rolling_table tr:hover td {
    background-color: rgba(255, 183, 3, 0.05);
}

/* Eigene Class */

.Gleitende_Datum {
	color: #f77f00;
}

.Gleitende_Tag {
	color: #ff7043;
}

.Gleitende_Euro {
	color: #e34c49;
}


.Gleitende_Datum_Wert {
	color: #ffa13d;
	font-weight:700;
}

.Gleitende_Tag_Wert {
	color: #ff8660;
	font-weight:700;
}

.Gleitende_Euro_Wert {
	color: #ff7876;
	font-weight:700;
}



/* Zusätzliches Styling für den verbesserten Löschmodus */
.matrix_table.delete_active .matrix_input.input_normal {
    display: inline-block !important;
    color: #ff0055 !important;
}

.matrix_table.delete_active .matrix_cell_delete {
    display: none !important;
}














/* Standardmäßig ist das Lösch-Div unsichtbar */
.matrix_table .delete_display_value {
    display: none;
}

/* Im Löschmodus: Normales Input verstecken, rotes Lösch-Div anzeigen */
.matrix_table.delete_active .matrix_input {
    display: none !important;
}



/* ALT */
/* .matrix_table.delete_active .delete_display_value {
    display: inline-block !important;
    color: #ff0055 !important;
    font-weight: bold;
    cursor: pointer;
    width: 75px;
    text-align: center;
    box-sizing: border-box;
    padding: 4px;
    background-color: #000000;
    border: 2px solid #ff0055;
    border-radius: 7px;
} */




/* Angepasst */
.matrix_table.delete_active .delete_display_value {
    display: inline-block !important;
    color: #ff0055 !important;
    font-weight: bold;
    cursor: pointer;
    width: 87px;
    text-align: center;
    box-sizing: border-box;
    padding: 2px;
    background-color: #000000;
    border: 2px solid #ff0055;
    border-radius: 7px;
    margin-left: -91px;
    line-height: 1.2;
}




/* NEU */

/* .matrix_table .delete_display_value {
    display: none;
}

.matrix_table.delete_active .matrix_input {
    display: none !important;
} */










.success_alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #001401;
    color: #ffe200;
    border: 1px solid #00ff5e;
    padding: 10px 15px;
    font-size: 14px;
    font-family: monospace;
    margin-bottom: 15px;
    transition: opacity 0.5s ease;
}



/* Rolling Durchschittswerte */

.rolling_header_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.rolling_title {
    margin: 0;
}

.rolling_schnitt_container {
    font-size: 20px;
}

.schnitt_symbol {
    color: #8dbd2b; /* Olive Drab */
}

.schnitt_label {
    color: #8fbc8f; /* Dark Sea Green */
}

.schnitt_wert_kwh {
    color: #bdb76b; /* Dark Khaki */
}

.schnitt_einheit_kwh {
    color: #7fa341; /* Dark Olive Green */
}

.schnitt_slash {
    color: #9acd32; /* Yellow Green */
}

.schnitt_tag {
    color: #f0e68c; /* Khaki */
}

.schnitt_klammer_auf {
    color: #73d7b3; /* Olive Drab */
}

.schnitt_tilde {
    color: #70ff70; /* Dark Sea Green */
}

.schnitt_wert_euro {
    color: #eee8aa; /* Pale Goldenrod */
}

.schnitt_einheit_euro {
    color: #aad959; /* Dark Olive Green */
}

.schnitt_klammer_zu {
    color: #73d7b3; /* Olive Drab */
}





/* ------------------------------------------------------------------ */
/* --- LAUFLEISTE (SCROLLBAR) STYLING --- */
/* ------------------------------------------------------------------ */

/* --- WEB KIT (Chrome, Safari, Edge) --- */

/* Scrollbar-Schiene */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Hintergrund der Schiene */
::-webkit-scrollbar-track {
    background: #000000;
}

/* Scrollbar-Griff */
::-webkit-scrollbar-thumb {
    background-color: #660000;
    border: 2px solid #000000;
    border-radius: 5px;
}

/* Echter Hover-Zustand */
::-webkit-scrollbar-thumb:hover {
    background-color: #ff0000 !important;
}

/* Beim Anklicken/Schieben */
::-webkit-scrollbar-thumb:active {
    background-color: #ffff00 !important;
}