:root {
    --background: #eef2f7;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;

    --primary: #1967d2;
    --primary-hover: #1258b8;
    --primary-soft: #eaf2ff;

    --text: #1f2937;
    --text-soft: #6b7280;
    --border: #dde3ea;

    --success: #18864b;
    --success-soft: #eaf8f0;

    --danger: #c63535;
    --danger-soft: #fdeeee;

    --warning: #b56a00;
    --warning-soft: #fff4dc;

    --purple: #7654d6;
    --purple-soft: #f1edff;

    --shadow: 0 10px 30px rgba(31, 41, 55, 0.08);
    --shadow-small: 0 4px 14px rgba(31, 41, 55, 0.07);

    --radius-large: 18px;
    --radius-medium: 12px;
    --radius-small: 9px;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

button,
input,
select {
    font: inherit;
}

button,
select,
input {
    outline: none;
}

.app-shell {
    width: min(1500px, calc(100% - 32px));
    height: calc(100vh - 32px);
    margin: 16px auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--surface);
    border: 1px solid rgba(221, 227, 234, 0.9);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 18px 26px;

    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-title {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;
}

.header-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary-soft);
    border: 1px solid #d8e6ff;
    border-radius: 14px;

    font-size: 25px;

    box-shadow: var(--shadow-small);
}

.header-text {
    min-width: 0;
}

.app-header h1 {
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);
    font-size: clamp(22px, 2.2vw, 31px);
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.header-subtitle {
    display: block;
    margin-top: 4px;

    color: var(--text-soft);
    font-size: 13px;
}

.header-account {
    min-width: 190px;

    padding: 10px 15px;

    text-align: right;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
}

.header-account-label {
    display: block;
    margin-bottom: 3px;

    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.header-account strong {
    color: var(--primary);
    font-size: 21px;
    line-height: 1.1;
}

.header-account strong.positive {
    color: var(--success);
}

.header-account strong.negative {
    color: var(--danger);
}

/* =========================================================
   MONATSAUSWAHL
   ========================================================= */

.toolbar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 13px 22px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fafcff 100%
    );

    border-bottom: 1px solid var(--border);
}

.month-button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--primary);
    background: var(--primary-soft);

    border: 1px solid #d5e4ff;
    border-radius: 11px;

    font-size: 31px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.month-button:hover {
    background: #dceaff;
    border-color: #bcd3fb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-small);
}

.month-button:active {
    transform: translateY(0);
}

.month-title {
    min-width: 230px;
    text-align: center;
}

.month-label {
    display: block;
    margin-bottom: 2px;

    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.month-title h2 {
    margin: 0;

    color: var(--text);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 750;
}

/* =========================================================
   TABELLENBEREICH
   ========================================================= */

.table-area {
    flex: 1 1 auto;
    min-height: 0;

    padding: 14px 18px;

    background: var(--surface-soft);
}

.table-scroll {
    width: 100%;
    height: 100%;

    overflow: auto;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

#workTable {
    width: 100%;
    min-width: 850px;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: fixed;
}

#workTable thead th {
    position: sticky;
    top: 0;
    z-index: 5;

    padding: 13px 14px;

    color: #455164;
    background: #f2f5f9;

    border-bottom: 1px solid var(--border);

    text-align: left;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#workTable thead th:first-child {
    border-top-left-radius: 13px;
}

#workTable thead th:last-child {
    border-top-right-radius: 13px;
}

#workTable tbody td {
    padding: 9px 14px;

    vertical-align: middle;

    background: var(--surface);
    border-bottom: 1px solid #edf0f4;

    font-size: 14px;
}

#workTable tbody tr:last-child td {
    border-bottom: none;
}

#workTable tbody tr {
    transition:
        background 0.16s ease,
        box-shadow 0.16s ease;
}

#workTable tbody tr:hover td {
    background: #f9fbfe;
}

.column-date {
    width: 19%;
}

.column-day {
    width: 14%;
}

.column-status {
    width: 18%;
}

.column-hours {
    width: 13%;
}

.column-note {
    width: 36%;
}

/* =========================================================
   WOCHENENDE UND FEIERTAGE
   ========================================================= */

#workTable tbody tr.weekend td {
    color: #526071;
    font-weight: 600;
    border-bottom-color: #d9e2ec;
}

/* Samstag: deutlich, aber ruhig in Blau */
#workTable tbody tr.saturday td {
    background: linear-gradient(90deg, #eaf3ff 0%, #f7fbff 100%);
}

#workTable tbody tr.saturday td:first-child {
    box-shadow: inset 5px 0 0 #3b82f6;
}

#workTable tbody tr.saturday:hover td {
    background: linear-gradient(90deg, #dcecff 0%, #eef7ff 100%);
}

/* Sonntag: etwas wärmer in Rot/Rosa */
#workTable tbody tr.sunday td {
    background: linear-gradient(90deg, #fff0f1 0%, #fff9f9 100%);
}

#workTable tbody tr.sunday td:first-child {
    box-shadow: inset 5px 0 0 #e25563;
}

#workTable tbody tr.sunday:hover td {
    background: linear-gradient(90deg, #ffe2e5 0%, #fff3f4 100%);
}

.weekend-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 7px;
    color: #245ea8;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#workTable tbody tr.sunday .weekend-badge {
    color: #a73743;
    border-color: rgba(226, 85, 99, 0.28);
}

/* Feiertage übersteuern die Wochenendfarbe bewusst */
#workTable tbody tr.holiday td {
    background: linear-gradient(90deg, #fff2c9 0%, #fffaf0 100%);
}

#workTable tbody tr.holiday td:first-child {
    box-shadow: inset 5px 0 0 #e2a000;
}

#workTable tbody tr.holiday:hover td {
    background: linear-gradient(90deg, #ffe9aa 0%, #fff5dd 100%);
}

.holiday-name {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 7px;

    color: var(--warning);
    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(181, 106, 0, 0.2);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

/* =========================================================
   EINGABEFELDER
   ========================================================= */

.status,
.hours,
.note {
    width: 100%;

    color: var(--text);
    background: #ffffff;

    border: 1px solid #d7dde5;
    border-radius: var(--radius-small);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.status {
    min-height: 38px;
    padding: 7px 34px 7px 10px;

    cursor: pointer;
}

.hours {
    min-height: 38px;
    padding: 7px 9px;
    text-align: center;
}

.note {
    min-height: 38px;
    padding: 7px 10px;
}

.status:hover,
.hours:hover,
.note:hover {
    border-color: #b8c2cf;
}

.status:focus,
.hours:focus,
.note:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.13);
}

.save-status {
    display: block;
    min-height: 14px;
    margin-top: 3px;

    color: var(--text-soft);
    font-size: 10px;
}

/* =========================================================
   STATUSFARBEN
   ========================================================= */

.status option[value="arbeit"] {
    color: var(--success);
}

.status option[value="homeoffice"] {
    color: var(--purple);
}

.status option[value="urlaub"] {
    color: var(--primary);
}

.status option[value="krank"] {
    color: var(--danger);
}

.status option[value="frei"] {
    color: var(--text-soft);
}

/* =========================================================
   LADEZEILE
   ========================================================= */

.loading-row td {
    padding: 28px !important;
    color: var(--text-soft);
    text-align: center;
}

/* =========================================================
   ZUSAMMENFASSUNG
   ========================================================= */

.summary {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    padding: 14px 18px 17px;

    background: var(--surface);
    border-top: 1px solid var(--border);
}

.summary-card {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 15px;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.summary-card:hover {
    transform: translateY(-1px);
    border-color: #cbd4df;
    box-shadow: var(--shadow-small);
}

.summary-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--primary);
    background: var(--primary-soft);

    border-radius: 11px;

    font-size: 18px;
    font-weight: 700;
}

.summary-content {
    min-width: 0;
}

.summary-label {
    display: block;
    margin-bottom: 3px;

    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
}

.summary-content strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);
    font-size: 19px;
    line-height: 1.15;
}

#overtimeValue {
    color: var(--primary);
}

#overtimeValue.positive {
    color: var(--success);
}

#overtimeValue.negative {
    color: var(--danger);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #bdc7d4 transparent;
}

.table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: #bdc7d4;
    border: 2px solid #ffffff;
    border-radius: 999px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #9eabba;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
    .app-shell {
        width: calc(100% - 20px);
        height: calc(100vh - 20px);
        margin: 10px auto;
    }

    .app-header {
        padding: 15px 18px;
    }

    .header-account {
        min-width: 160px;
    }

    .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   HANDY
   ========================================================= */

@media (max-width: 620px) {
    html,
    body {
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    .app-shell {
        width: 100%;
        height: 100dvh;
        margin: 0;

        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Header kompakter */

    .app-header {
        gap: 8px;
        padding: 10px 12px;
    }

    .header-title {
        gap: 9px;
        min-width: 0;
    }

    .header-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;

        border-radius: 10px;
        font-size: 19px;
    }

    .app-header h1 {
        max-width: 165px;

        font-size: 18px;
        line-height: 1.1;
    }

    .header-subtitle {
        display: none;
    }

    .header-account {
        min-width: 108px;
        padding: 7px 8px;

        border-radius: 9px;
    }

    .header-account-label {
        margin-bottom: 2px;
        font-size: 9px;
    }

    .header-account strong {
        font-size: 15px;
    }

    /* Monatsauswahl */

    .toolbar {
        gap: 9px;
        padding: 8px 10px;
    }

    .month-button {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        border-radius: 9px;
        font-size: 26px;
    }

    .month-title {
        min-width: 0;
        flex: 1;
    }

    .month-label {
        display: none;
    }

    .month-title h2 {
        font-size: 17px;
        white-space: nowrap;
    }

    /* Tabellenbereich */

    .table-area {
        min-height: 0;
        padding: 6px;
    }

    .table-scroll {
        border-radius: 10px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #workTable {
        min-width: 720px;
    }

    #workTable thead th {
        padding: 10px 8px;
        font-size: 10px;
    }

    #workTable tbody td {
        padding: 6px 8px;
        font-size: 12px;
    }

    .column-date {
        width: 20%;
    }

    .column-day {
        width: 14%;
    }

    .column-status {
        width: 20%;
    }

    .column-hours {
        width: 14%;
    }

    .column-note {
        width: 32%;
    }

    .status,
    .hours,
    .note {
        min-height: 34px;
        border-radius: 7px;
        font-size: 12px;
    }

    .status {
        padding: 5px 28px 5px 7px;
    }

    .hours {
        padding: 5px 6px;
    }

    .note {
        min-width: 150px;
        padding: 5px 7px;
    }

    .weekend-badge,
    .holiday-name {
        display: block;
        width: fit-content;
        margin: 3px 0 0;

        font-size: 9px;
    }

    .save-status {
        min-height: 11px;
        margin-top: 2px;
        font-size: 8px;
    }

    /* Zusammenfassung unten */

    .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;

        padding: 7px;
    }

    .summary-card {
        gap: 7px;
        min-height: 52px;
        padding: 7px 8px;

        border-radius: 9px;
    }

    .summary-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;

        border-radius: 8px;
        font-size: 13px;
    }

    .summary-label {
        margin-bottom: 2px;
        font-size: 9px;
    }

    .summary-content strong {
        font-size: 14px;
    }
}
/* Version 2: Login, Benutzerkopf und Zeitfelder */
.header-actions{display:flex;align-items:center;gap:10px}.logout-button{padding:10px 13px;color:var(--text-soft);text-decoration:none;background:var(--surface-soft);border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:650}.logout-button:hover{color:var(--danger);border-color:#efcaca}.column-time{width:10%}.column-break{width:10%}.column-hours{width:11%}.column-date{width:13%}.column-day{width:10%}.column-status{width:14%}.column-note{width:22%}.start-time,.end-time,.break-minutes{width:100%;min-height:38px;padding:7px 8px;color:var(--text);background:#fff;border:1px solid #d7dde5;border-radius:var(--radius-small)}.break-wrap{display:flex;align-items:center;gap:5px}.break-wrap span{font-size:11px;color:var(--text-soft)}.calculated-hours{font-variant-numeric:tabular-nums}.start-time:disabled,.end-time:disabled,.break-minutes:disabled{opacity:.5;background:#f0f2f5}.login-page{min-height:100dvh;overflow:auto;display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow)}.login-icon{font-size:34px}.login-card h1{margin:10px 0 4px}.login-card p{color:var(--text-soft)}.login-card form{display:grid;gap:17px;margin-top:22px}.login-card label{display:grid;gap:7px;font-weight:650;font-size:13px}.login-card input{min-height:46px;padding:10px 12px;border:1px solid var(--border);border-radius:10px}.primary-button{min-height:46px;padding:10px 16px;color:#fff;background:var(--primary);border:0;border-radius:10px;font-weight:750;cursor:pointer}.link-button{display:inline-flex;align-items:center;text-decoration:none}.login-error,.install-success{padding:11px 13px;border-radius:9px;margin-top:15px}.login-error{color:var(--danger);background:var(--danger-soft)}.install-success{color:var(--success);background:var(--success-soft)}

@media(max-width:620px){
  body{overflow:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible}.app-header{position:sticky;top:0;z-index:20}.header-actions{gap:5px}.header-account{min-width:92px}.logout-button{padding:8px;font-size:0}.logout-button::after{content:'↪';font-size:18px}.table-area{padding:8px;background:var(--background)}.table-scroll{height:auto;overflow:visible;border:0;background:transparent}.table-scroll #workTable{min-width:0;display:block}.table-scroll thead{display:none}.table-scroll tbody{display:grid;gap:10px}.table-scroll tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-small)}.table-scroll tbody tr.loading-row{display:block}.table-scroll tbody tr.loading-row td{display:block}.table-scroll tbody td{display:block!important;padding:0!important;border:0!important;background:transparent!important;font-size:13px}.table-scroll tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--text-soft);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}.table-scroll tbody td:first-child{grid-column:1/-1;padding-bottom:8px!important;border-bottom:1px solid var(--border)!important}.table-scroll tbody td:nth-child(2){display:none!important}.table-scroll tbody td:nth-child(3),.table-scroll tbody td:last-child{grid-column:1/-1}.table-scroll tbody td:nth-child(7){align-self:end;padding-bottom:8px!important}.mobile-date{font-size:16px}.status,.start-time,.end-time,.break-minutes,.note{min-height:44px;font-size:16px}.note{min-width:0}.summary{position:sticky;bottom:0;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}.summary-card{min-height:48px}.summary-icon{display:none}.summary-content strong{font-size:13px}.summary-label{font-size:9px}}

/* Version 2.1: Tages-Reset und versteckter Wartungsbereich */
.maintenance-trigger{appearance:none;padding:0;cursor:pointer;color:inherit}.column-reset{width:7%}.row-reset-button{min-height:38px;padding:7px 9px;color:var(--text-soft);background:var(--surface-soft);border:1px solid var(--border);border-radius:9px;cursor:pointer;font-weight:700;white-space:nowrap}.row-reset-button:hover{color:var(--danger);background:var(--danger-soft);border-color:#efcaca}.row-reset-button:disabled{opacity:.55;cursor:wait}.row-reset-button span{display:none}.maintenance-overlay[hidden]{display:none}.maintenance-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.55);backdrop-filter:blur(5px)}.maintenance-panel{position:relative;width:min(480px,100%);padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 25px 70px rgba(15,23,42,.3)}.maintenance-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-soft);font-size:25px;cursor:pointer}.maintenance-icon{font-size:34px}.maintenance-panel h2{margin:10px 0 8px}.maintenance-panel p{color:var(--text-soft);line-height:1.5}.confirm-label{display:grid;gap:8px;margin-top:20px;font-size:13px}.confirm-label input{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font:inherit}.danger-button{width:100%;min-height:46px;margin-top:14px;padding:10px 14px;color:#fff;background:var(--danger);border:0;border-radius:10px;font-weight:750;cursor:pointer}.danger-button:disabled{opacity:.6;cursor:wait}.maintenance-status{display:block;min-height:20px;margin-top:10px;color:var(--text-soft);font-size:13px}
@media(max-width:620px){.table-scroll tbody td:nth-child(9){grid-column:1/-1}.row-reset-button{width:100%;min-height:42px}.row-reset-button span{display:inline}.maintenance-panel{padding:24px 18px}}

/* Version 2.2: Persönliche Begrüßung und täglicher Spruch */
.welcome-card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 13px 18px 0;
    padding: 15px 18px;
    background: linear-gradient(135deg, var(--primary-soft), #ffffff 68%);
    border: 1px solid #d8e6ff;
    border-radius: 14px;
    box-shadow: var(--shadow-small);
}
.welcome-symbol {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(25,103,210,.14);
    border-radius: 14px;
    font-size: 24px;
}
.welcome-content { min-width: 0; }
.welcome-content h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}
.welcome-content p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: 13px;
}
.welcome-content blockquote {
    margin: 7px 0 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 650;
    font-style: italic;
}
@media(max-width:620px) {
    .welcome-card {
        margin: 8px 8px 0;
        padding: 11px 12px;
        gap: 10px;
        border-radius: 12px;
    }
    .welcome-symbol {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 10px;
        font-size: 20px;
    }
    .welcome-content h2 { font-size: 15px; }
    .welcome-content p { font-size: 11px; }
    .welcome-content blockquote {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.3;
    }
}


/* ===== Version 2.4.0: Navigation und Jahresübersicht ===== */
.header-actions{display:flex;align-items:center;gap:12px}.main-nav{display:flex;align-items:center;gap:5px;padding:4px;background:var(--surface-soft);border:1px solid var(--border);border-radius:11px}.nav-link{padding:8px 12px;color:var(--text-soft);text-decoration:none;border-radius:8px;font-size:13px;font-weight:700;white-space:nowrap}.nav-link:hover{color:var(--primary);background:var(--primary-soft)}.nav-link.active{color:#fff;background:var(--primary)}.nav-link.disabled{opacity:.45;cursor:not-allowed}.logout-button{display:inline-flex;align-items:center;padding:9px 12px;color:var(--danger);text-decoration:none;background:var(--danger-soft);border:1px solid #f3cccc;border-radius:10px;font-size:13px;font-weight:700}
.year-shell{overflow:hidden}.year-toolbar{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 22px;border-bottom:1px solid var(--border)}.year-content{flex:1;min-height:0;overflow:auto;padding:18px;background:var(--surface-soft)}.year-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.year-table-card{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px}.year-table{width:100%;border-collapse:collapse;min-width:780px}.year-table th,.year-table td{padding:13px 15px;text-align:right;border-bottom:1px solid #edf0f4}.year-table th{position:sticky;top:0;background:#f4f7fb;color:#455164;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.year-table th:first-child,.year-table td:first-child{text-align:left}.year-table tbody tr:hover{background:#f9fbfe}.month-link{color:var(--primary);font-weight:750;text-decoration:none}.month-link:hover{text-decoration:underline}.positive{color:var(--success)!important}.negative{color:var(--danger)!important}.version-footer{padding:10px 18px;text-align:center;color:var(--text-soft);border-top:1px solid var(--border);font-size:12px}
@media(max-width:900px){.main-nav{order:2;width:100%;justify-content:center}.app-header{flex-wrap:wrap}.header-actions{flex-wrap:wrap;justify-content:flex-end}.year-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.header-actions{gap:6px}.main-nav{width:auto;max-width:100%;overflow:auto}.nav-link{padding:7px 9px;font-size:11px}.logout-button{padding:7px 9px;font-size:11px}.year-content{padding:8px}.year-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.year-summary .summary-card{padding:10px}.year-table th,.year-table td{padding:10px 11px;font-size:12px}}

/* ===== Version 2.4.1: Monatsbericht / PDF-Druckansicht ===== */
.pdf-page{min-height:100vh;overflow:auto;margin:0;padding:24px;background:#eef2f7;color:#172033;font-family:Arial,Helvetica,sans-serif}.pdf-actions{width:min(1120px,100%);margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.pdf-back,.pdf-print-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none}.pdf-back{color:#344054;background:#fff;border:1px solid #d8dee8}.pdf-print-button{cursor:pointer;color:#fff;background:#1967d2;border:0}.pdf-sheet{box-sizing:border-box;width:min(1120px,100%);min-height:794px;margin:0 auto;padding:25px 28px 18px;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.13)}.pdf-header{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:14px;border-bottom:2px solid #1967d2}.pdf-kicker{color:#1967d2;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.pdf-header h1{margin:4px 0 1px;font-size:25px}.pdf-header p{margin:0;color:#667085;font-size:14px}.pdf-person{text-align:right}.pdf-person span,.pdf-person small{display:block;color:#667085;font-size:10px}.pdf-person strong{display:block;margin:3px 0 5px;font-size:15px}.pdf-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0}.pdf-summary-grid>div{padding:9px 11px;background:#f5f8fc;border:1px solid #e1e7ef;border-radius:7px}.pdf-summary-grid span{display:block;margin-bottom:3px;color:#667085;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.pdf-summary-grid strong{font-size:14px}.pdf-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:9px}.pdf-table th{padding:6px 5px;color:#344054;background:#eaf1fb;border:1px solid #ccd8e8;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:.03em}.pdf-table td{height:17px;padding:3px 5px;border:1px solid #dfe4eb;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdf-table th:nth-child(1){width:9%}.pdf-table th:nth-child(2){width:10%}.pdf-table th:nth-child(3){width:12%}.pdf-table th:nth-child(4),.pdf-table th:nth-child(5){width:7%}.pdf-table th:nth-child(6){width:8%}.pdf-table th:nth-child(7){width:8%}.pdf-table th:nth-child(8){width:39%}.pdf-table td small{display:block;color:#8a6200;font-size:6.8px}.pdf-saturday td{background:#edf6ff}.pdf-sunday td{background:#fff0f0}.pdf-holiday td{background:#fff7d6}.pdf-footer{display:flex;justify-content:space-between;margin-top:9px;padding-top:7px;color:#667085;border-top:1px solid #dfe4eb;font-size:8px}
@page{size:A4 landscape;margin:8mm}
@media print{html,body.pdf-page{width:100%;min-height:0;margin:0;padding:0;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}.no-print{display:none!important}.pdf-sheet{width:100%;min-height:0;margin:0;padding:0;box-shadow:none}.pdf-header{padding-bottom:3mm}.pdf-summary-grid{margin:3mm 0}.pdf-table{font-size:7.4pt}.pdf-table th{padding:1.25mm 1mm;font-size:6.3pt}.pdf-table td{height:4.15mm;padding:.65mm 1mm}.pdf-table td small{font-size:5.2pt}.pdf-footer{margin-top:2mm;padding-top:1.5mm}}
@media(max-width:700px){.pdf-page{padding:8px}.pdf-actions{align-items:stretch;flex-direction:column}.pdf-sheet{padding:18px 14px;overflow:auto}.pdf-header{flex-direction:column;gap:10px}.pdf-person{text-align:left}.pdf-summary-grid{grid-template-columns:repeat(2,1fr)}.pdf-table{min-width:850px}}

/* ===== Version 2.5.0: Dashboard, Branding und PWA ===== */
.brand-link{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand-logo{width:45px;height:45px;border-radius:13px;box-shadow:0 7px 18px rgba(25,103,210,.25)}.header-text span{display:block;margin-top:2px;color:var(--text-soft);font-size:11px}.dashboard-shell{min-height:100vh}.dashboard-content{flex:1;overflow:auto;padding:22px;background:linear-gradient(180deg,#f7faff,#eef3f9)}.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:1180px;margin:0 auto 18px;padding:30px 34px;color:#fff;background:linear-gradient(135deg,#164eaa,#2786ec 65%,#58b2ff);border-radius:24px;box-shadow:0 18px 50px rgba(25,103,210,.22)}.dashboard-eyebrow{font-size:14px;font-weight:750;opacity:.9}.dashboard-hero h2{margin:7px 0;font-size:clamp(26px,4vw,42px);letter-spacing:-.03em}.dashboard-hero p{margin:0;opacity:.82}.hero-logo{width:118px;height:118px;filter:drop-shadow(0 15px 25px rgba(0,0,0,.18))}.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:1180px;margin:0 auto 18px}.dashboard-stat{display:flex;align-items:center;gap:13px;padding:18px;background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow-small)}.stat-icon{width:43px;height:43px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft);border-radius:13px;font-size:20px;font-weight:800}.dashboard-stat small{display:block;margin-bottom:5px;color:var(--text-soft);font-size:11px;font-weight:700}.dashboard-stat strong{font-size:19px}.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:1180px;margin:0 auto}.quick-card{appearance:none;width:100%;display:flex;align-items:center;gap:15px;padding:20px;color:var(--text);text-align:left;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-small);cursor:pointer;font:inherit;transition:.18s ease}.quick-card:hover{transform:translateY(-2px);border-color:#b8d2f5;box-shadow:0 12px 25px rgba(15,23,42,.09)}.quick-card>span{width:50px;height:50px;display:grid;place-items:center;background:var(--surface-soft);border-radius:14px;font-size:24px}.quick-card div{flex:1}.quick-card h3{margin:0 0 4px;font-size:16px}.quick-card p{margin:0;color:var(--text-soft);font-size:12px}.quick-card b{color:var(--primary);font-size:22px}.quick-primary{color:#fff;background:linear-gradient(135deg,#1967d2,#3389ed);border-color:transparent}.quick-primary p,.quick-primary b{color:rgba(255,255,255,.82)}.quick-primary>span{background:rgba(255,255,255,.17)}.dashboard-note{max-width:1180px;margin:15px auto 0;padding:12px 16px;color:#275b45;background:#e9f8f0;border:1px solid #c7ead7;border-radius:13px;font-size:12px}.dashboard-note strong{margin-right:8px}.backup-page{min-height:100vh;padding:24px;background:#eef3f9}.backup-card{max-width:760px;margin:auto;padding:28px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.backup-logo{width:64px;height:64px;display:block;margin:20px 0 10px}.backup-card h1{margin:0}.backup-card>p{color:var(--text-soft)}.backup-success{margin:15px 0;padding:12px;color:#176b43;background:#e9f8f0;border-radius:10px}.backup-list{display:grid;gap:8px;margin:12px 0 22px}.backup-list>div{display:flex;justify-content:space-between;gap:15px;padding:11px 13px;background:var(--surface-soft);border-radius:9px}.backup-list small{color:var(--text-soft)}.backup-help{padding:16px;background:#f7f9fc;border:1px solid var(--border);border-radius:13px}.backup-help code{display:block;overflow:auto;padding:11px;color:#fff;background:#172033;border-radius:8px}.backup-help p{color:var(--text-soft);font-size:12px;line-height:1.55}
@media(max-width:850px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}.dashboard-hero{padding:24px}.hero-logo{width:86px;height:86px}}@media(max-width:620px){.dashboard-content{padding:9px}.dashboard-hero{padding:21px 18px;border-radius:17px}.hero-logo{display:none}.dashboard-stats{gap:8px}.dashboard-stat{padding:12px;gap:9px}.stat-icon{width:37px;height:37px}.dashboard-stat strong{font-size:15px}.quick-grid{grid-template-columns:1fr;gap:8px}.quick-card{padding:14px}.dashboard-note{margin-top:9px}.brand-logo{width:38px;height:38px}.backup-page{padding:8px}.backup-card{padding:18px}.backup-list>div{align-items:flex-start;flex-direction:column;gap:3px}}

.header-icon img{width:100%;height:100%;border-radius:inherit}.login-brand-logo{width:76px;height:76px;display:block;margin:0 auto 12px;border-radius:20px;box-shadow:0 10px 25px rgba(25,103,210,.25)}


/* ===== Version 2.5.1: Dark Mode, Splash und Benachrichtigungen ===== */
:root[data-theme="dark"]{--background:#0b1220;--surface:#111827;--surface-soft:#182235;--text:#f2f5f9;--text-soft:#9eabc0;--border:#263247;--primary-soft:#172d4e;--shadow:0 14px 35px rgba(0,0,0,.35);color-scheme:dark}
:root[data-theme="dark"] body,:root[data-theme="dark"] .dashboard-content{background:#0b1220;color:var(--text)}
:root[data-theme="dark"] .dashboard-content{background:linear-gradient(180deg,#0d1728,#09101c)}
:root[data-theme="dark"] .dashboard-stat,:root[data-theme="dark"] .quick-card,:root[data-theme="dark"] .setting-card,:root[data-theme="dark"] .year-table-card,:root[data-theme="dark"] .login-card,:root[data-theme="dark"] .backup-card,:root[data-theme="dark"] .maintenance-panel{background:#111827;border-color:#263247;color:#f2f5f9}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .start-time,:root[data-theme="dark"] .end-time,:root[data-theme="dark"] .break-minutes{color:#f2f5f9;background:#172033;border-color:#344158}
:root[data-theme="dark"] .year-table th{background:#182235;color:#c8d2e1}:root[data-theme="dark"] .year-table td{border-color:#263247}:root[data-theme="dark"] .year-table tbody tr:hover{background:#162033}
:root[data-theme="dark"] .table-scroll tbody tr{background:#111827!important}:root[data-theme="dark"] .summary{background:rgba(17,24,39,.96)}
.app-splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f4f8fd;transition:opacity .32s ease,visibility .32s ease}.app-splash img{width:112px;height:112px;border-radius:27px;box-shadow:0 18px 45px rgba(25,103,210,.28)}.app-splash strong{margin-top:10px;font-size:25px}.app-splash span{color:#69768a;font-size:13px}.app-splash.hide{opacity:0;visibility:hidden;pointer-events:none}:root[data-theme="dark"] .app-splash{background:#0b1220;color:#f2f5f9}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:1180px;margin:15px auto 0}.setting-card{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-small)}.setting-card>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px}.setting-card h3{margin:0}.setting-card p{grid-column:2;margin:4px 0 0;color:var(--text-soft);font-size:12px}.setting-button{min-height:39px;padding:8px 12px;color:var(--primary);background:var(--primary-soft);border:1px solid transparent;border-radius:10px;font-weight:750;cursor:pointer}.notification-controls{display:flex!important;align-items:center;gap:7px}.notification-controls input{min-height:39px;padding:6px 8px;border:1px solid var(--border);border-radius:9px}.setting-status{display:block;margin-top:8px;color:var(--text-soft);font-size:11px}
@media(max-width:720px){.settings-grid{grid-template-columns:1fr;gap:8px}.setting-card{align-items:flex-start;flex-direction:column}.notification-controls{width:100%}.notification-controls input,.notification-controls button{flex:1}}