:root{
    --dark:#2f3542;
    --dark-2:#1f2937;
    --dark-hover:#404b5a;
    --bg:#f0f2f5;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#e5e7eb;
    --white:rgba(255,255,255,0.94);
    --shadow:0 4px 14px rgba(0,0,0,0.12);
    --shadow-hover:0 10px 22px rgba(0,0,0,0.18);
    --radius:14px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    font-family:Arial, sans-serif;
    color:var(--text);
    position:relative;
    z-index:0;
}

body::before{
    content:"";
    position:fixed;
    top:50%;
    left:50%;
    width:700px;
    height:700px;
    background:url("/static/logo.jfif") no-repeat center;
    background-size:contain;
    opacity:0.10;
    transform:translate(-50%, -50%);
    z-index:-1;
    pointer-events:none;
}

/* Navigation */
.navbar{
    background:var(--dark);
    color:white;
    padding:16px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.title{
    font-size:24px;
    font-weight:bold;
}

.navlinks a{
    color:white;
    text-decoration:none;
    margin-left:20px;
    font-weight:bold;
}

/* Grundlayout */
.container{
    padding:30px;
}

.card,
.main-card,
.section-box,
.dashboard-box,
.backup-progress-card{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px;
    margin-bottom:25px;
}

.card{
    max-width:750px;
}

.main-card{
    border-radius:18px;
}

.hover-card,
.dashboard-card,
.dashboard-box,
.month-card,
.v-card,
.quickbutton{
    transition:0.25s ease;
}

.hover-card:hover,
.dashboard-card:hover,
.dashboard-box:hover,
.month-card:hover,
.v-card:hover,
.quickbutton:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

/* Buttons */
button,
.header-row a,
.header-row button,
.calendar-header a,
.calendar-header button,
.import-button{
    border:none;
    border-radius:8px;
    padding:12px 18px;
    font-size:16px;
    cursor:pointer;
    font-weight:bold;
    color:white;
    background:var(--dark);
    text-decoration:none;
}

button:hover,
.header-row a:hover,
.header-row button:hover,
.calendar-header a:hover,
.calendar-header button:hover{
    background:var(--dark-hover);
}

.save-button{
    background:var(--dark);
}

.delete-button{
    background:#e74c3c;
}

.overwrite-button{
    background:#d35400;
}

.import-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#3498db;
}

.delete-button:hover{
    background:#c0392b;
}

.overwrite-button:hover{
    background:#a84300;
}

.import-button:hover{
    background:#2980b9;
}

/* Formulare */
label{
    display:block;
    margin:15px 0 5px;
    font-weight:bold;
}

input,
select,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
}

textarea{
    height:100px;
    resize:vertical;
}

.button-row,
.header-row,
.calendar-header,
.date-form{
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}

.header-row,
.calendar-header{
    justify-content:space-between;
    margin-bottom:20px;
}

.date-form input,
.date-form select{
    width:auto;
    padding:10px;
    font-weight:bold;
}

/* Meldungen */
.success,
.warning,
.info,
.holiday-item{
    padding:14px;
    border-radius:8px;
    margin-bottom:20px;
    font-weight:bold;
    border-left:5px solid;
}

.success{
    background:#d4edda;
    color:#155724;
    border-color:#28a745;
}

.warning{
    background:#fff3cd;
    color:#856404;
    border-color:#ffc107;
}

.info{
    background:#f8f9fa;
    border-color:var(--dark);
    line-height:1.6;
}

.holiday-item{
    background:rgba(255,255,255,0.9);
    color:#c0392b;
    border-color:#c0392b;
}

/* Hero und Highlights */
.hero,
.highlight-box,
.points-highlight{
    background:linear-gradient(135deg,var(--dark),var(--dark-2));
    color:white;
    padding:35px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,0.22);
    margin-bottom:30px;
    text-align:center;
}

.hero{
    padding:40px;
    text-align:left;
}

.hero h1{
    font-size:42px;
    margin:0 0 12px;
}

.hero-date{
    font-size:24px;
    margin-bottom:18px;
}

.weather{
    display:inline-flex;
    gap:12px;
    align-items:center;
    background:rgba(255,255,255,0.15);
    padding:14px 20px;
    border-radius:14px;
    font-size:22px;
    font-weight:bold;
}

.highlight-number,
.points-number{
    font-size:58px;
    font-weight:bold;
    margin:12px 0;
}

/* Dashboard */
.dashboard-grid,
.quicklinks{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-bottom:30px;
}

.dashboard-top{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:25px;
    align-items:start;
}

.dashboard-card{
    background:white;
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    border-top:5px solid var(--dark);
}

.dashboard-box h2{
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:2px solid var(--line);
    font-size:22px;
}

.quickbutton{
    background:var(--dark);
    color:white;
    text-align:center;
    text-decoration:none;
    padding:28px;
    border-radius:16px;
    font-size:22px;
    font-weight:bold;
}

/* Kachel-Zeilen */
.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-weight:bold;
}

.info-row:last-child{
    border-bottom:none;
}

.info-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    color:#374151;
}

.info-left span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.info-value{
    min-width:90px;
    text-align:right;
    font-weight:bold;
    color:#0056d6;
}

.icon{
    width:24px;
    min-width:24px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
}

/* Texte und Farben */
.card-title,
.month-label{
    color:#555;
    font-weight:bold;
}

.card-main,
.month-name,
.v-name{
    color:var(--dark);
    font-weight:bold;
}

.card-main{
    font-size:30px;
}

.card-sub{
    color:#777;
    font-weight:bold;
}

.value-blue,
.month-hours,
.v-count{
    color:#0056d6;
}

.value-pink{
    color:#d63384;
}

.value-orange{
    color:#f39c12;
}

.value-green,
.month-points-positive{
    color:#1e8449;
}

.value-purple{
    color:#8e44ad;
}

.value-red,
.month-points-negative,
.month-sick{
    color:#c0392b;
}

.value-gray,
.month-df{
    color:#7f8c8d;
}

.month-vacation{
    color:#b8860b;
}

/* Tabellen */
table,
.table,
.points-table,
.calendar-table{
    width:100%;
    border-collapse:collapse;
}

th,
.table th{
    background:var(--dark);
    color:white;
    padding:12px;
}

td,
.table td,
.points-table td,
.points-table th{
    border:1px solid #ddd;
    padding:14px;
    text-align:center;
    font-weight:bold;
}

.points-table,
.small-table{
    width:fit-content;
    min-width:unset;
    max-width:900px;
    margin:20px auto;
}

.points-table th{
    background:#eeeeee;
    color:#111827;
}

.points-table tr.f-row td,
.f-row{
    background:#c2187a;
    color:white;
}

.points-table tr.t-row td,
.t-row{
    background:#c28f00;
    color:white;
}

.points-table tr.s-row td,
.s-row{
    background:#bcd2ff;
    color:#1f2937;
}

.points-table tr.n-row td,
.n-row{
    background:#0647d9;
    color:white;
}

/* Kalender */
.calendar-wrapper{
    width:100%;
    max-width:none;
    margin:0;
}

.calendar-card{
    width:100%;
    padding:25px;
    border-radius:18px;
    background:
        linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)),
        url("/static/logo.jfif") no-repeat center center;
    background-size:700px;
    box-shadow:0 0 14px rgba(0,0,0,0.12);
}

.calendar-title,
.month-title,
.year-title{
    font-size:32px;
    font-weight:bold;
}

.month-title{
    text-align:center;
    margin:30px 0 20px;
}

.calendar-table{
    table-layout:fixed;
}

.calendar-table td{
    width:14.28%;
    height:170px;
    vertical-align:top;
    background:rgba(255,255,255,0.55);
}

.other-month{
    background:rgba(245,245,245,0.85);
    color:#aaa;
}

.today{
    border:3px solid red;
}

.feiertag-cell{
    background:#eaf3ff;
}

.day-number{
    font-weight:bold;
    font-size:18px;
    margin-bottom:8px;
}

.feiertag{
    font-size:12px;
    font-weight:bold;
    color:#c0392b;
    border-bottom:1px solid #c0392b;
    padding-bottom:4px;
    margin-bottom:6px;
}

/* Kalenderwochen */
.calendar-table .kw-header,
.calendar-table .kw-cell{
    width:70px;
    min-width:70px;
    max-width:70px;
    display:table-cell;
}

.calendar-table .kw-header{
    background:var(--dark);
    color:white;
    text-align:center;
    font-weight:bold;
}

.calendar-table .kw-cell{
    background:var(--dark);
    color:white;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
    border:1px solid #ddd;
}

/* Schichten */
.schicht,
.sonstiges,
.sonstiges-card{
    display:block;
    margin-top:5px;
    padding:6px 8px;
    border-radius:8px;
    font-size:13px;
    color:white;
    text-decoration:none;
}

.schicht:hover{
    filter:brightness(0.92);
    cursor:pointer;
}

.frueh{
    background:#f1c40f;
    color:black;
}

.spaet{
    background:#3498db;
}

.nacht{
    background:#2f3542;
}

.urlaub{
    background:#2ecc71;
}

.df{
    background:#95a5a6;
}

.krank{
    background:#e74c3c;
}

.gleitzeit{
    background:#8e44ad;
    color:white;
}

.lehrgang{
    background:#16a085;
    color:white;
}

.t1{
    background:#8e44ad;
}

.t2{
    background:#16a085;
}

.t3{
    background:#d35400;
}

.v1{ background:#0066cc; }
.v2{ background:#0077b6; }
.v3{ background:#0096c7; }
.v4{ background:#00a896; }
.v5{ background:#43aa8b; }
.v6{ background:#90be6d; color:black; }
.v7{ background:#f9c74f; color:black; }
.v8{ background:#f8961e; }
.v9{ background:#f3722c; }
.v10{ background:#f94144; }

/* Monats- und Verteilungskarten */
.month-card-grid,
.v-grid{
    display:grid;
    gap:18px;
}

.month-card-grid{
    grid-template-columns:repeat(6,1fr);
}

.v-grid{
    grid-template-columns:repeat(5,1fr);
    margin-top:18px;
}

.month-card,
.v-card{
    background:rgba(255,255,255,0.96);
    border-radius:14px;
    padding:16px;
    box-shadow:var(--shadow);
    border-top:5px solid #4d8dff;
    text-align:center;
}

.month-name{
    font-size:20px;
    text-align:center;
    margin-bottom:12px;
}

.month-divider{
    border-top:2px solid #4d8dff;
    margin-bottom:14px;
}

.month-value{
    display:flex;
    justify-content:space-between;
    margin:9px 0;
    font-weight:bold;
}

.v-name{
    font-size:18px;
    margin-bottom:10px;
}

.v-count{
    font-size:28px;
    font-weight:bold;
}

.v-card.frueh{
    border-top-color:#c2187a;
}

.v-card.frueh .v-count{
    color:#c2187a;
}

.v-card.tschicht{
    border-top-color:#c28f00;
}

.v-card.tschicht .v-count{
    color:#c28f00;
}

.v-card.spaet{
    border-top-color:#7ea6ff;
}

.v-card.spaet .v-count{
    color:#2563eb;
}

.v-card.nacht{
    border-top-color:#0647d9;
}

.v-card.nacht .v-count{
    color:#0647d9;
}

/* Dienstplan */
.dienstplan-card{
    max-width:1200px;
    margin:0 auto;
}

.dienstplan-layout{
    display:flex;
    gap:40px;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:nowrap;
}

.dienstplan-formular{
    flex:1;
    max-width:700px;
}

.dienstplan-info{
    width:330px;
    flex-shrink:0;
}

.dienstplan-info .info{
    margin-top:70px;
}

/* Sonstiges */
.sonstiges-wrapper{
    margin-top:6px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.sonstiges{
    background:#6c757d;
    border-left:5px solid #ffc107;
}

.sonstiges-card{
    position:relative;
    background:#34495e;
    box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

.sonstiges-title{
    font-weight:bold;
    font-size:12px;
    color:#ffe082;
    margin-bottom:3px;
}

.sonstiges-text{
    font-size:13px;
    line-height:1.3;
}

.sonstiges-delete-form{
    position:absolute;
    top:4px;
    right:5px;
    margin:0;
}

.sonstiges-delete-button{
    position:absolute;
    top:6px;
    right:6px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#e74c3c;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    box-shadow:0 2px 5px rgba(0,0,0,0.25);
    cursor:pointer;
}

/* Backup Fortschritt */
.backup-progress-card{
    text-align:center;
    border-radius:16px;
    padding:28px;
    margin:25px 0;
}

.backup-progress-card h2{
    margin-top:0;
    margin-bottom:25px;
    font-size:28px;
}

.backup-progress-bar{
    width:92%;
    height:70px;
    margin:0 auto;
    border:4px solid #6abd22;
    border-radius:40px;
    overflow:hidden;
    background:
        repeating-linear-gradient(
            90deg,
            #ffffff 0,
            #ffffff 48px,
            #dfe6ee 49px,
            #dfe6ee 51px
        );
}

.backup-progress-fill{
    height:100%;
    background:linear-gradient(90deg,#7acb25,#59aa12);
    color:white;
    font-size:26px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:35px 0 0 35px;
}

.backup-progress-text{
    margin-top:25px;
    font-size:22px;
    font-weight:bold;
    color:#4b5563;
}

.empty{
    text-align:center;
    font-weight:bold;
    color:#7f8c8d;
    padding:18px;
}

/* Responsive */
@media(max-width:1400px){
    .dashboard-top{
        grid-template-columns:1fr;
    }

    .month-card-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:1100px){
    .dashboard-grid,
    .quicklinks{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:1000px){
    .dienstplan-layout{
        flex-wrap:wrap;
    }

    .dienstplan-info{
        width:100%;
    }

    .dienstplan-info .info{
        margin-top:20px;
    }
}

@media(max-width:800px){
    .month-card-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .dashboard-grid,
    .quicklinks,
    .month-card-grid,
    .v-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:32px;
    }

    .info-row{
        gap:12px;
    }

    .info-value{
        min-width:70px;
    }
}

/* Druckversion wie Kalender, aber ohne Navbar */
.print-title{
    display:none;
}

@media print{
    .navbar,
    .navlinks,
    .calendar-header a,
    .calendar-header button,
    .date-form,
    .no-print{
        display:none !important;
    }

    body{
        background:#f0f2f5 !important;
        color:#1f2937 !important;
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }

    body::before{
        display:none !important;
    }

    .container{
        padding:10px !important;
    }

    .calendar-card{
        width:100% !important;
        padding:20px !important;
        border-radius:18px !important;
        background:
            linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)),
            url("/static/logo.jfif") no-repeat center center !important;
        background-size:700px !important;
        box-shadow:0 0 14px rgba(0,0,0,0.12) !important;
        box-sizing:border-box !important;
        zoom:90%;
    }

    .calendar-header{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        margin-bottom:18px !important;
    }

    .calendar-title{
        display:block !important;
        text-align:center !important;
        font-size:32px !important;
        font-weight:bold !important;
        color:#1f2937 !important;
        margin:0 !important;
    }

    .print-title{
        display:none !important;
    }

    .calendar-table{
        width:100% !important;
        table-layout:fixed !important;
        border-collapse:collapse !important;
        font-size:12px !important;
    }

    .calendar-table th{
        background:#2f3542 !important;
        color:white !important;
        padding:10px !important;
        border:1px solid #ddd !important;
        text-align:center !important;
        font-weight:bold !important;
    }

    .calendar-table td{
        width:14.28% !important;
        height:120px !important;
        vertical-align:top !important;
        border:1px solid #ddd !important;
        padding:7px !important;
        background:rgba(255,255,255,0.55) !important;
        color:#1f2937 !important;
    }

    .calendar-table .kw-header,
    .calendar-table .kw-cell{
        width:55px !important;
        min-width:55px !important;
        max-width:55px !important;
        background:#2f3542 !important;
        color:white !important;
        text-align:center !important;
        font-weight:bold !important;
        display:table-cell !important;
    }

    .calendar-table .kw-cell{
        vertical-align:middle !important;
        font-size:16px !important;
    }

    .other-month{
        background:rgba(245,245,245,0.85) !important;
        color:#aaa !important;
    }

    .today{
        border:3px solid red !important;
    }

    .feiertag-cell{
        background:#eaf3ff !important;
    }

    .day-number{
        font-weight:bold !important;
        font-size:16px !important;
        margin-bottom:6px !important;
    }

    .feiertag{
        font-size:11px !important;
        font-weight:bold !important;
        color:#c0392b !important;
        margin-bottom:5px !important;
        border-bottom:1px solid #c0392b !important;
        padding-bottom:3px !important;
    }

    .schicht,
    .sonstiges,
    .sonstiges-card{
        display:block !important;
        margin-top:4px !important;
        padding:5px !important;
        border-radius:7px !important;
        font-size:11px !important;
        color:white !important;
        text-decoration:none !important;
    }

    .frueh{
        background:#f1c40f !important;
        color:black !important;
    }

    .spaet{
        background:#3498db !important;
        color:white !important;
    }

    .nacht{
        background:#2f3542 !important;
        color:white !important;
    }

    .urlaub{
        background:#2ecc71 !important;
        color:white !important;
    }

    .df{
        background:#95a5a6 !important;
        color:white !important;
    }

    .krank{
        background:#e74c3c !important;
        color:white !important;
    }

    .gleitzeit{
        background:#8e44ad !important;
        color:white !important;
    }

    .lehrgang{
        background:#16a085 !important;
        color:white !important;
    }

    .t1{
        background:#8e44ad !important;
        color:white !important;
    }

    .t2{
        background:#16a085 !important;
        color:white !important;
    }

    .t3{
        background:#d35400 !important;
        color:white !important;
    }

    .v1{ background:#0066cc !important; color:white !important; }
    .v2{ background:#0077b6 !important; color:white !important; }
    .v3{ background:#0096c7 !important; color:white !important; }
    .v4{ background:#00a896 !important; color:white !important; }
    .v5{ background:#43aa8b !important; color:white !important; }
    .v6{ background:#90be6d !important; color:black !important; }
    .v7{ background:#f9c74f !important; color:black !important; }
    .v8{ background:#f8961e !important; color:white !important; }
    .v9{ background:#f3722c !important; color:white !important; }
    .v10{ background:#f94144 !important; color:white !important; }

    @page{
        size:A4 landscape;
        margin:10mm;
    }
}


.logout-row{
    margin-top:28px;
    display:flex;
    justify-content:center;
}

.logout-button{
    background:#e74c3c;
    color:white;
    text-decoration:none;
    padding:14px 34px;
    border-radius:8px;
    font-size:18px;
    font-weight:bold;
    box-shadow:var(--shadow);
}

.logout-button:hover{
    background:#c0392b;
}