/* ======================================================================
   UI 8 — gespeicherte Farbschemata und modernisierte Anmeldeseite
   ====================================================================== */
.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.theme-choice {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 14px;
    cursor: pointer;
    border: 2px solid #e3e5df;
    border-radius: 15px;
    background: #fff;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.theme-choice:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow); }
.theme-choice:has(input:checked) { border-color: var(--pp-olive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-olive) 18%, transparent); }
.theme-choice input { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; accent-color: var(--pp-olive); }
.theme-choice strong { font-size: 15px; }
.theme-choice small { color: var(--pp-muted); font-size: 12px; }
.theme-preview { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 12px; width: 100%; height: 78px; margin-bottom: 5px; overflow: hidden; border-radius: 10px; }
.theme-preview i { grid-row: 1 / 3; }
.theme-preview b { margin: 10px 10px 4px; border-radius: 6px; }
.theme-preview em { margin: 0 10px 8px; border-radius: 4px; }
.theme-preview-blue .theme-preview { background: #edf3fb; }
.theme-preview-blue .theme-preview i { background: #07182c; }
.theme-preview-blue .theme-preview b { background: #2f73ed; }
.theme-preview-blue .theme-preview em { background: #fff; }
.theme-preview-green .theme-preview { background: #f7f7f4; }
.theme-preview-green .theme-preview i { background: #17272b; }
.theme-preview-green .theme-preview b { background: #8da932; }
.theme-preview-green .theme-preview em { background: #fff; }
.theme-preview-sand .theme-preview { background: #eee9df; }
.theme-preview-sand .theme-preview i { background: #414341; }
.theme-preview-sand .theme-preview b { background: #b39a6a; }
.theme-preview-sand .theme-preview em { background: #faf8f3; }

/* Grün ist der neue Standard — dieselbe ruhige Sprache wie im Dashboard. */
.login-body.login-v3.theme-green {
    color: #f4f7f3;
    background:
        radial-gradient(circle at 50% 18%, rgba(138, 167, 49, .16), transparent 34%),
        linear-gradient(145deg, #17272b 0%, #203337 48%, #132125 100%);
}
.login-v3.theme-green .login-shell {
    border-color: rgba(152, 180, 72, .25);
    background: linear-gradient(160deg, rgba(32, 52, 55, .9), rgba(18, 34, 37, .96));
    box-shadow: 0 32px 80px rgba(8, 18, 18, .38);
}
.login-v3.theme-green .login-brand-mark { border-color: rgba(154, 181, 68, .7); box-shadow: 0 0 30px rgba(130, 158, 45, .24); }
.login-v3.theme-green .login-greeting { color: #a2bc43; text-shadow: 0 0 22px rgba(132, 163, 45, .2); }
.login-v3.theme-green .login-input-wrap input { border-color: rgba(171, 188, 170, .34); background: rgba(12, 31, 33, .58); }
.login-v3.theme-green .login-input-wrap input:focus { border-color: #94b438; background: rgba(18, 42, 43, .82); box-shadow: 0 0 0 4px rgba(142, 174, 48, .17); }
.login-v3.theme-green .login-submit { background: linear-gradient(110deg, #789825, #9bb83b); box-shadow: 0 16px 34px rgba(78, 105, 24, .28); }
.login-v3.theme-green .login-weather { border-color: rgba(167, 184, 164, .28); background: rgba(14, 35, 37, .48); }

/* Klassisch Blau */
body.app-body.theme-blue {
    --pp-canvas: #eef3f9;
    --pp-line: #dce5f0;
    --pp-olive: #2f73ed;
    --pp-olive-dark: #245ebf;
}
body.app-body.theme-blue .sidebar { background: linear-gradient(155deg, #0b2038, #07182c 58%, #061321); }
body.app-body.theme-blue .sidebar nav a.active,
body.app-body.theme-blue button,
body.app-body.theme-blue .button-link,
body.app-body.theme-blue .logout,
body.app-body.theme-blue .tab.active,
body.app-body.theme-blue .settings-tabs a.active,
body.app-body.theme-blue .settings-subtabs a.active { border-color: #2f73ed; background: linear-gradient(110deg, #245fc5, #347cf2); }
body.app-body.theme-blue .brand-monogram,
body.app-body.theme-blue .user-avatar { background: linear-gradient(145deg, #3d83f3, #2259b6); }
body.app-body.theme-blue .stamp-clock-card { background: radial-gradient(circle at 84% 10%, rgba(48, 116, 226, .2), transparent 38%), linear-gradient(135deg, #0c2a4b, #071a30); }
body.app-body.theme-blue .stamp-clock-card .stamp-button,
body.app-body.theme-blue .stamp-clock-card .stamp-finish { background: linear-gradient(110deg, #286add, #347cf2); }
.login-body.login-v3.theme-blue { background: radial-gradient(circle at 50% 22%, rgba(40,105,210,.22), transparent 34%), linear-gradient(145deg, #071426, #0b1c33 48%, #06111f); }
.login-v3.theme-blue .login-submit { background: linear-gradient(135deg, #286add, #347cf2); }

/* Sand und Grau */
body.app-body.theme-sand {
    --pp-ink: #292b2a;
    --pp-muted: #74716b;
    --pp-canvas: #eee9df;
    --pp-line: #ded8cd;
    --pp-olive: #b39a6a;
    --pp-olive-dark: #735f3e;
    --pp-shadow: 0 8px 25px rgba(61, 54, 43, .08);
}
body.app-body.theme-sand .main { background: radial-gradient(circle at 84% 0%, rgba(194,177,140,.2), transparent 30%), #eee9df; }
body.app-body.theme-sand .sidebar { background: linear-gradient(155deg, #4d504e, #3d403f 58%, #333635); }
body.app-body.theme-sand .sidebar nav a.active,
body.app-body.theme-sand button,
body.app-body.theme-sand .button-link,
body.app-body.theme-sand .logout,
body.app-body.theme-sand .tab.active,
body.app-body.theme-sand .settings-tabs a.active,
body.app-body.theme-sand .settings-subtabs a.active { border-color: #a68c5e; background: linear-gradient(110deg, #9c8255, #b8a071); }
body.app-body.theme-sand .brand-monogram,
body.app-body.theme-sand .user-avatar { background: linear-gradient(145deg, #c0aa7d, #8e7448); }
body.app-body.theme-sand .stamp-clock-card { background: radial-gradient(circle at 84% 10%, rgba(193,169,120,.2), transparent 38%), linear-gradient(135deg, #555856, #393d3b); }
body.app-body.theme-sand .stamp-clock-card .stamp-button,
body.app-body.theme-sand .stamp-clock-card .stamp-finish { background: linear-gradient(110deg, #9d8457, #b9a270); }
.login-body.login-v3.theme-sand { color: #f8f5ee; background: radial-gradient(circle at 50% 18%, rgba(190,166,116,.2), transparent 35%), linear-gradient(145deg, #4b4d4b, #393c3a 50%, #2e312f); }
.login-v3.theme-sand .login-shell { border-color: rgba(214,197,164,.3); background: linear-gradient(160deg, rgba(76,78,75,.9), rgba(48,51,49,.96)); }
.login-v3.theme-sand .login-brand-mark { border-color: rgba(194,166,110,.72); box-shadow: 0 0 30px rgba(186,157,99,.22); }
.login-v3.theme-sand .login-greeting { color: #d0b57d; text-shadow: none; }
.login-v3.theme-sand .login-input-wrap input { border-color: rgba(222,211,190,.35); background: rgba(38,41,39,.6); }
.login-v3.theme-sand .login-input-wrap input:focus { border-color: #c3a66d; background: rgba(45,48,46,.85); box-shadow: 0 0 0 4px rgba(190,159,99,.18); }
.login-v3.theme-sand .login-submit { background: linear-gradient(110deg, #9b8154, #b69c6c); box-shadow: 0 16px 34px rgba(51,43,31,.3); }
.login-v3.theme-sand .login-weather { border-color: rgba(222,211,190,.28); background: rgba(43,46,44,.5); }

@media (max-width: 700px) {
    .theme-choice-grid { grid-template-columns: 1fr; }
    .theme-choice { grid-template-columns: 110px 1fr; align-items: center; }
    .theme-choice .theme-preview { grid-row: 1 / 3; height: 64px; margin: 0; }
    .theme-choice strong, .theme-choice small { grid-column: 2; }
    body.app-body.theme-sand,
    body.app-body.theme-sand .main { background: #eee9df; }
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f5f7;
    color: #1f2937;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.login-card {
    width: 380px;
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.login-card h1 {
    margin: 0 0 4px;
}

.version {
    color: #6b7280;
    margin-bottom: 28px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #cfd5df;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 16px;
    background: white;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    margin-right: 8px;
    border: 0;
}

button,
.logout,
.button-link {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    background: #243044;
    color: white;
    font-weight: 700;
    padding: 12px 18px;
    text-decoration: none;
    cursor: pointer;
}

button {
    width: 100%;
    font-size: 16px;
}

.button-link {
    margin-bottom: 20px;
}

.error {
    color: #b91c1c;
    font-weight: 700;
}

.app-body {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: #111827;
    color: white;
    padding: 24px;
}

.brand {
    margin-bottom: 36px;
}

.brand strong {
    display: block;
    font-size: 22px;
}

.brand span {
    color: #9ca3af;
    font-size: 14px;
}

.sidebar nav {
    display: grid;
    gap: 8px;
}

.sidebar a {
    color: #d1d5db;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
}

.sidebar a:hover,
.sidebar a.active {
    background: #243044;
    color: white;
}

.main {
    flex: 1;
    padding: 32px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.main-header h1 {
    margin: 0;
    font-size: 32px;
}

.main-header p {
    margin: 6px 0 0;
    color: #6b7280;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 14px 0 24px;
}

/* v1.5.3: Feste Arbeitstage - sieben schmale Checkboxen (Mo-So) in
   einer Reihe; auf schmalen Bildschirmen automatisch umbrechend. */
.check-grid.weekday-grid {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 8px;
    margin: 8px 0 4px;
}

.card {
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    padding: 24px;
}

.card h2 {
    margin-top: 0;
}

.mt {
    margin-top: 18px;
}

.form-card {
    max-width: 960px;
}

.wide-form h2 {
    margin-top: 28px;
    border-top: 1px solid #e5e7eb;
    padding-top: 22px;
}

.wide-form h2:first-child {
    border-top: 0;
    padding-top: 0;
}

/* v2.27.2 — "Neuer Mitarbeiter": kompakter, damit nicht jedes Feld so
   viel Höhe frisst. Nur innerhalb dieses Formulars, Rest der App bleibt
   unverändert. */
.wide-form.form-compact {
    padding: 18px 24px;
}

.wide-form.form-compact h2 {
    margin-top: 18px;
    padding-top: 14px;
    font-size: 16px;
}

.wide-form.form-compact h2:first-child {
    margin-top: 0;
}

.wide-form.form-compact label {
    margin-bottom: 4px;
    font-size: 13px;
}

.wide-form.form-compact input,
.wide-form.form-compact select,
.wide-form.form-compact textarea {
    padding: 9px 10px;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 8px;
}

.wide-form.form-compact .form-grid {
    gap: 12px;
}

.wide-form.form-compact .check-grid {
    gap: 8px;
    margin: 6px 0 16px;
}

.wide-form.form-compact small.muted {
    display: block;
    margin-top: -6px;
    margin-bottom: 10px;
    font-size: 12px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.table th {
    text-align: left;
    padding: 14px;
    background: #f2f4f7;
}

.table td {
    padding: 14px;
    border-top: 1px solid #e5e7eb;
    vertical-align: top;
}

.table tr:hover {
    background: #fafafa;
}

.details-table td:first-child {
    font-weight: 700;
    width: 220px;
}

.small-link {
    display: inline-block;
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
}

.small-link:hover {
    background: #d1d5db;
}

.small-link-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.small-link-danger:hover {
    background: #fecaca;
}

.mitarbeiter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-form {
    display: inline-block;
    margin: 0;
}

.inline-form button.small-link {
    width: auto;
    font-size: 13px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.back-link {
    display: inline-block;
    margin-top: 16px;
    margin-left: 12px;
    color: #243044;
    font-weight: 700;
}

.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tab {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
}

.tab.active {
    background: #243044;
    color: white;
}


.tab {
    border: 0;
    width: auto;
    margin: 0;
    cursor: pointer;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}


.calendar-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.calendar-form {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr 1fr;
    gap: 14px;
    align-items: end;
}

.calendar-form input,
.calendar-form select {
    margin-bottom: 0;
}

.calendar-form-action button {
    margin-bottom: 0;
}

.calendar-card {
    overflow: hidden;
}

.calendar-scroll {
    overflow-x: auto;
}

.calendar-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.calendar-table th,
.calendar-table td {
    border: 1px solid #eef0f3;
    padding: 3px;
    text-align: center;
    min-width: 30px;
    font-size: 13px;
}

.calendar-table th {
    background: #f2f4f7;
    position: sticky;
    top: 0;
    z-index: 2;
}

.calendar-table th small {
    display: block;
    color: #6b7280;
    font-size: 11px;
}

.employee-col {
    min-width: 150px !important;
    text-align: left !important;
    background: white;
    position: sticky;
    left: 0;
    z-index: 3;
    border-right: 2px solid #d8dde6 !important;
}

.employee-col span {
    display: block;
    color: #6b7280;
    font-size: 11px;
    margin-top: 1px;
}

.calendar-cell {
    height: 42px;
}

.weekend {
    background: #f9fafb;
}

.today {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.entry-badge,
.legend-item {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: white;
    font-weight: 800;
    font-size: 13px;
}

.legend {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.legend span:not(.legend-item) {
    margin-right: 12px;
    color: #4b5563;
}

.entry-work {
    background: #16a34a;
}

.entry-vacation {
    background: #2563eb;
}

.entry-free {
    background: #ca8a04;
}

.entry-sick {
    background: #dc2626;
}

.entry-training {
    background: #7c3aed;
}

.entry-business {
    background: #0891b2;
}

/* v2.6.0: Halber Urlaubstag - diagonal geteilte Kachel (blau/hell),
   damit der halbe Tag auf einen Blick vom vollen Urlaub unterscheidbar
   ist. Die Grundfarbe kommt weiterhin von .entry-vacation. */
.entry-half-day {
    background: linear-gradient(135deg, #2563eb 0%, #2563eb 50%, #93c5fd 50%, #93c5fd 100%);
    font-size: 11px;
    letter-spacing: -0.5px;
}

.entry-half-day-cell,
.entry-vacation.entry-half-day-cell {
    background: repeating-linear-gradient(135deg, #dbeafe, #dbeafe 6px, #eff6ff 6px, #eff6ff 12px);
}


.calendar-headline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.calendar-headline h2 {
    margin-bottom: 4px;
}

.calendar-headline p {
    margin: 0;
    color: #6b7280;
}

.button-compact {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.calendar-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.clickable-cell {
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.clickable-cell:hover {
    box-shadow: inset 0 0 0 2px #243044;
    transform: scale(1.02);
}

.empty-cell {
    opacity: 0;
    color: #6b7280;
    font-weight: 800;
}

.clickable-cell:hover .empty-cell {
    opacity: 1;
}

.has-entry {
    background: #eef2ff;
}

.entry-work-cell {
    background: #dcfce7;
}

.entry-vacation-cell {
    background: #dbeafe;
}

.entry-free-cell {
    background: #fef3c7;
}

.entry-sick-cell {
    background: #fee2e2;
}

.entry-training-cell {
    background: #ede9fe;
}

.entry-business-cell {
    background: #cffafe;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(17, 24, 39, 0.55);
    z-index: 50;
    padding: 20px;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal {
    width: min(620px, 100%);
    background: white;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0 0 4px;
}

.modal-header p {
    margin: 0;
    color: #6b7280;
}

.modal-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    font-size: 28px;
    line-height: 1;
}

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

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.modal-actions button {
    width: auto;
    flex: 1;
}

.danger-button {
    background: #b91c1c;
}


.year-filter {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.year-filter input,
.year-filter select {
    margin-bottom: 0;
}

.year-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 18px;
}

.year-month {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.year-month h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.year-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.year-weekday {
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    font-weight: 800;
    padding: 4px 0;
}

.year-day {
    min-height: 34px;
    border-radius: 8px;
    background: #f9fafb;
    display: grid;
    place-items: center;
    font-size: 12px;
    position: relative;
}

.year-day.empty {
    background: transparent;
}

.year-day strong {
    font-size: 11px;
    line-height: 1;
}

@media print {
    .sidebar,
    .logout,
    .calendar-toolbar,
    .year-filter,
    .button-link,
    .back-link {
        display: none !important;
    }

    .main {
        padding: 0;
    }

    .card {
        border: 0;
        padding: 0;
    }

    .year-overview {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}


.staffing-toggle-form,
.minimum-form {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: end;
}

.minimum-form {
    grid-template-columns: 1.5fr 1fr 1fr auto;
}

.staffing-toggle-form select,
.staffing-toggle-form input,
.minimum-form input {
    margin-bottom: 0;
}

.inline-check {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
    white-space: nowrap;
}

.help-text {
    color: #6b7280;
}

.staffing-count {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    border-radius: 999px;
    padding: 2px 4px;
}

.staffing-ok {
    background: #dcfce7 !important;
}

.staffing-warning {
    background: #fef3c7 !important;
}

.staffing-danger {
    background: #fee2e2 !important;
}

.staffing-legend {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
}

.employee-col em {
    display: block;
    color: #9ca3af;
    font-size: 11px;
    font-style: normal;
    margin-top: 2px;
}

.small-danger-button {
    width: auto;
    padding: 8px 12px;
    background: #b91c1c;
    font-size: 13px;
}


.dashboard-hero {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
}

.dashboard-today-card {
    background: #111827;
    color: white;
    border-radius: 18px;
    padding: 24px;
}

.dashboard-today-card h2 {
    margin: 0;
}

.dashboard-date {
    color: #d1d5db;
}

.today-big-number {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin: 24px 0 8px;
}

.today-big-number span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #d1d5db;
}

.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.status-card {
    border-radius: 18px;
    padding: 18px;
    background: white;
    border: 1px solid #d8dde6;
}

.status-card strong {
    display: block;
    font-size: 15px;
}

.status-card span {
    display: block;
    font-size: 36px;
    font-weight: 900;
    margin-top: 12px;
}

.status-work {
    background: #dcfce7;
}

.status-vacation {
    background: #dbeafe;
}

.status-free {
    background: #fef3c7;
}

.status-sick {
    background: #fee2e2;
}

.status-training {
    background: #ede9fe;
}

.status-business {
    background: #cffafe;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.warning-box {
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}

.warning-danger {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.warning-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.warning-box strong,
.warning-box span {
    display: block;
}

.compact-list {
    margin: 0;
    padding-left: 18px;
}

.compact-list li {
    margin-bottom: 6px;
}

.metric-big {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
}

.quick-actions {
    display: grid;
    gap: 10px;
}

.quick-actions a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
    font-weight: 800;
}

.quick-actions a:hover {
    background: #d1d5db;
}

.bar-list {
    display: grid;
    gap: 14px;
}

.bar-list > div {
    display: grid;
    grid-template-columns: 160px 50px 1fr;
    gap: 14px;
    align-items: center;
}

.bar {
    height: 14px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.bar span {
    display: block;
    height: 100%;
    max-width: 100%;
    background: #243044;
}


.settings-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.settings-form input {
    margin-bottom: 0;
}

.print-header {
    display: none;
}

.year-filter-pro {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.year-filter-pro input,
.year-filter-pro select {
    margin-bottom: 0;
}

.filter-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-pill {
    width: auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111827;
}

.filter-pill.active {
    background: #243044;
    color: white;
}

.year-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.year-summary div {
    background: #f3f4f6;
    border-radius: 14px;
    padding: 14px;
}

.year-summary strong,
.year-summary span {
    display: block;
}

.year-summary span {
    font-size: 28px;
    font-weight: 900;
}

.year-all-wrapper {
    display: grid;
    gap: 18px;
}

.employee-year-card {
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    padding: 18px;
    page-break-inside: avoid;
}

.employee-year-header {
    display: grid;
    grid-template-columns: 80px 1fr 180px;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.employee-year-header strong {
    font-size: 20px;
}

.employee-year-header em {
    color: #6b7280;
    font-style: normal;
    text-align: right;
}

.employee-year-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mini-month {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
}

.mini-month h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.mini-weekday {
    text-align: center;
    font-size: 10px;
    color: #6b7280;
    font-weight: 800;
}

.mini-day {
    min-height: 22px;
    border-radius: 5px;
    background: #f9fafb;
    display: grid;
    place-items: center;
    font-size: 10px;
}

.mini-day.empty {
    background: transparent;
}

.mini-day.weekend {
    background: #e5e7eb;
}

.entry-work-cell {
    background: #dcfce7 !important;
}

.entry-vacation-cell {
    background: #dbeafe !important;
}

.entry-free-cell {
    background: #fef3c7 !important;
}

.entry-sick-cell {
    background: #fee2e2 !important;
}

.entry-training-cell {
    background: #ede9fe !important;
}

.entry-business-cell {
    background: #cffafe !important;
}

@media print {
    body {
        background: white;
    }

    .app-body {
        display: block !important;
        min-height: 0 !important;
    }

    .sidebar,
    .print-hide,
    .logout,
    .calendar-toolbar,
    .back-link,
    .button-link {
        display: none !important;
    }

    .print-header {
        display: block;
        margin-bottom: 14px;
    }

    .print-header h1 {
        margin: 0;
        font-size: 22px;
    }

    .print-header h2 {
        margin: 2px 0;
        font-size: 16px;
    }

    .print-header p {
        margin: 0;
        font-size: 14px;
    }

    .main {
        padding: 0;
        min-height: 0 !important;
    }

    .card {
        border: 0;
        padding: 0;
        box-shadow: none;
    }

    .employee-year-card {
        border: 1px solid #999;
        border-radius: 0;
        padding: 8px;
    }

    .employee-year-months {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mini-month {
        padding: 5px;
    }

    .mini-day {
        min-height: 15px;
        font-size: 8px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* v1.9 Kalender-Neuaufbau: robuste Jahresübersicht */
.yearly-control-card .legend {
    margin-bottom: 16px;
}

.clean-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 12px;
}

.clean-summary div {
    background: #f3f4f6;
    border-radius: 14px;
    padding: 14px;
}

.clean-summary strong {
    display: block;
    color: #4b5563;
}

.clean-summary span {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: #111827;
}

.year-table-card {
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    overflow-x: auto;
    padding: 14px;
}

.year-table-header,
.year-employee-row {
    display: grid;
    /* v1.7.2: Jede Monatsspalte braucht Platz für 31 Balken à 4px
       plus Lücken - vorher quetschten sich die Balken auf ~2px und
       überlappten (der "3D-Effekt" mit den scheinbaren Farbringen).
       Die Jahresansicht scrollt dafür horizontal; die Namensspalte
       bleibt links stehen und beim Öffnen springt die Ansicht zum
       aktuellen Monat. */
    grid-template-columns: 230px repeat(12, minmax(158px, 1fr));
    gap: 8px;
    min-width: 2160px;
}

.year-table-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: white;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
}

.year-employee-row {
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #eef0f4;
    page-break-inside: avoid;
}

.year-employee-row:last-child {
    border-bottom: 0;
}

.year-employee-title,
.year-month-title {
    font-weight: 900;
    color: #111827;
    font-size: 13px;
}

.year-month-title {
    text-align: center;
}

.year-employee-info {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
        "code name"
        "code dept";
    align-items: center;
    gap: 0 10px;
}

.year-employee-info strong {
    grid-area: code;
    background: #243044;
    color: white;
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    font-size: 14px;
}

.year-employee-info span {
    grid-area: name;
    font-weight: 800;
    color: #111827;
}

.year-employee-info em {
    grid-area: dept;
    color: #6b7280;
    font-style: normal;
    font-size: 12px;
}

.month-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px; /* v1.7.2: 1px reicht und spart pro Monat 30px Breite */
    min-height: 26px;
    align-items: stretch;
}

.day-strip {
    min-width: 4px;
    min-height: 26px;
    border-radius: 3px;
    background: #f3f4f6;
    display: block;
}

.day-strip.weekend {
    background: #d1d5db;
}

.entry-work-cell {
    background: #22c55e !important;
}

.entry-vacation-cell {
    background: #2563eb !important;
}

.entry-free-cell {
    background: #d19100 !important;
}

.entry-sick-cell {
    background: #dc2626 !important;
}

.entry-training-cell {
    background: #7c3aed !important;
}

.entry-business-cell {
    background: #0891b2 !important;
}

.yearly-print-note {
    color: #4b5563;
}

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

    body {
        background: white !important;
    }

    .sidebar,
    .print-hide,
    .logout,
    .calendar-toolbar,
    .back-link,
    .button-link,
    .yearly-print-note {
        display: none !important;
    }

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

    .print-header {
        display: block !important;
        margin-bottom: 8px;
    }

    .print-header h1 {
        margin: 0;
        font-size: 18px;
    }

    .print-header h2 {
        margin: 1px 0;
        font-size: 14px;
    }

    .print-header p {
        margin: 0;
        font-size: 12px;
    }

    .card,
    .year-table-card {
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .year-table-card {
        overflow: visible !important;
    }

    .year-table-header,
    .year-employee-row {
        grid-template-columns: 165px repeat(12, 1fr);
        gap: 3px;
        min-width: 0;
    }

    .year-table-header {
        position: static;
    }

    .year-employee-row {
        padding: 4px 0;
    }

    .year-employee-info {
        grid-template-columns: 38px 1fr;
        gap: 0 5px;
    }

    .year-employee-info strong {
        font-size: 10px;
        padding: 4px 3px;
    }

    .year-employee-info span {
        font-size: 10px;
    }

    .year-employee-info em {
        font-size: 9px;
    }

    .year-month-title,
    .year-employee-title {
        font-size: 9px;
    }

    .month-strip {
        gap: 1px;
        min-height: 13px;
    }

    .day-strip {
        min-height: 13px;
        border-radius: 1px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .legend-item,
    .entry-work-cell,
    .entry-vacation-cell,
    .entry-free-cell,
    .entry-sick-cell,
    .entry-training-cell,
    .entry-business-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .clean-summary {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        margin-bottom: 6px;
    }

    .clean-summary div {
        padding: 4px;
    }

    .clean-summary strong {
        font-size: 8px;
    }

    .clean-summary span {
        font-size: 12px;
    }

    .print-legend {
        font-size: 9px;
        gap: 3px;
    }

    .print-legend .legend-item {
        width: 10px;
        height: 10px;
    }
}


/* v1.10 Jahresfilter-Feinschliff */
.hidden-control {
    display: none !important;
}

.yearly-filter-card {
    padding-bottom: 22px;
}

.year-filter-pro {
    grid-template-columns: 1.2fr 2fr 1fr auto;
}

.filter-headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 10px;
}

.filter-headline h2 {
    margin: 0;
}

.mini-button {
    width: auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: #e5e7eb;
    color: #111827;
}

.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    width: auto !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    min-width: 0 !important;
}

.filter-pill.active {
    background: #243044 !important;
    color: white !important;
}

.year-table-card {
    padding: 12px !important;
}

.year-table-header,
.year-employee-row {
    grid-template-columns: 245px repeat(12, minmax(64px, 1fr));
    gap: 6px;
}

.year-employee-row {
    padding: 7px 0;
}

.day-strip {
    min-height: 22px;
}

.month-strip {
    min-height: 22px;
}

.clean-summary {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
}

@media print {
    .year-table-header,
    .year-employee-row {
        grid-template-columns: 160px repeat(12, 1fr);
        gap: 2px;
    }

    .day-strip {
        min-height: 12px;
    }

    .month-strip {
        min-height: 12px;
    }
}


/* v2.4.1: Im Einzelperson-Modus der Jahresübersicht bleibt der Filter
   (Ansicht/Mitarbeiter/Jahr) beim Scrollen sichtbar, sobald er sonst über
   den oberen Rand hinaus scrollen würde - echtes sticky-Verhalten.
   Bewusst NICHT position:sticky: .main setzt overflow-x:hidden, wodurch
   der Browser overflow-y laut CSS-Spec zwangsweise auf "auto" setzt -
   .main wird damit selbst zum sticky-Bezugsrahmen statt des Fensters,
   scrollt aber nie, sodass position:sticky hier wirkungslos bliebe.
   Ersatz: ein Sentinel-Element davor plus IntersectionObserver schaltet
   die Klasse "is-pinned" erst dann, wenn die Karte wirklich den oberen
   Rand erreicht (siehe Script in jahresuebersicht.html) - bis dahin ist
   sie eine ganz normale Karte im Textfluss und verdeckt nichts darüber. */
.yearly-filter-card.sticky-filter-card.is-pinned {
    position: fixed;
    z-index: 35;
    margin: 0;
    border-radius: 0 0 16px 16px;
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
}

.sticky-filter-sentinel {
    height: 1px;
}

/* v1.11 saubere Jahresfilter */
.year-filter-clean {
    display: grid;
    grid-template-columns: 1.4fr 2fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.year-filter-clean input,
.year-filter-clean select {
    margin-bottom: 0;
}

.year-filter-clean > div:nth-child(2):last-of-type {
    grid-column: auto;
}

.department-filter-panel {
    margin-top: 18px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.department-checkboxes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.department-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e5e7eb;
    color: #111827;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.department-chip input {
    margin: 0;
    width: 16px;
    height: 16px;
}

.department-chip.active {
    background: #243044;
    color: white;
}

.year-table-card {
    padding: 10px !important;
}

.year-table-header,
.year-employee-row {
    grid-template-columns: 210px repeat(12, minmax(58px, 1fr)) !important;
    gap: 5px !important;
}

.year-employee-info {
    grid-template-columns: 48px 1fr !important;
    grid-template-areas:
        "code name" !important;
}

.year-employee-info em {
    display: none !important;
}

.year-employee-row {
    padding: 6px 0 !important;
}

.day-strip {
    min-height: 20px !important;
}

.month-strip {
    min-height: 20px !important;
}

.empty-year-message {
    padding: 24px;
    color: #6b7280;
    font-weight: 800;
}

@media print {
    .year-table-header,
    .year-employee-row {
        grid-template-columns: 145px repeat(12, 1fr) !important;
        gap: 2px !important;
    }

    .year-employee-info {
        grid-template-columns: 34px 1fr !important;
        gap: 0 4px !important;
    }

    .year-employee-info strong {
        font-size: 9px !important;
        padding: 3px 2px !important;
    }

    .year-employee-info span {
        font-size: 9px !important;
    }

    .day-strip,
    .month-strip {
        min-height: 10px !important;
    }
}


/* v1.12 getrennte Ansichten: Alle vs Einzelperson */
.kennzahlen-leiste {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.kz-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    flex: 1;
    min-width: 84px;
}

.kz-item strong {
    font-size: 22px;
    font-weight: 900;
    color: #111827;
    line-height: 1.1;
}

.kz-item span {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.kz-primary {
    background: #f4f5f7;
}

.kz-positive strong {
    color: #16a34a;
}

.kz-negative strong {
    color: #dc2626;
}

.kz-divider {
    width: 1px;
    background: #e5e7eb;
    align-self: stretch;
}

.kz-progress {
    height: 8px;
    margin: 8px 0 0;
}

@media (max-width: 720px) {
    .kz-item {
        min-width: 70px;
        padding: 8px 10px;
    }

    .kz-item strong {
        font-size: 18px;
    }

    .kz-divider {
        display: none;
    }
}

.vacation-progress {
    height: 14px;
    background: #d1d5db;
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0 6px;
}

.vacation-progress i {
    display: block;
    height: 100%;
    background: #2563eb;
}

.single-year-calendar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.single-month-card {
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    padding: 16px;
    page-break-inside: avoid;
}

.single-month-card h2 {
    margin: 0 0 12px;
}

.single-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.single-weekday {
    text-align: center;
    color: #6b7280;
    font-weight: 900;
    font-size: 12px;
}

.single-day {
    min-height: 42px;
    border-radius: 10px;
    background: #f3f4f6;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.single-day.empty {
    background: transparent;
}

.single-day.weekend {
    background: #d1d5db;
}

.single-day.holiday-cell {
    background: #fde4c8;
}

.single-day.school-holiday-cell {
    background: #dbeafe;
}

.single-day.pending-vacation {
    background: repeating-linear-gradient(
        135deg,
        #fff7e0,
        #fff7e0 4px,
        #ffedb8 4px,
        #ffedb8 8px
    );
    position: relative;
}

.single-day-pending {
    position: absolute;
    top: 1px;
    right: 2px;
    font-style: normal;
    font-size: 9px;
    font-weight: 900;
    color: #92400e;
}

/* --- Arbeitszeit-Modul --- */
.balance-positive {
    color: #16a34a;
    font-weight: 800;
}

.balance-negative {
    color: #dc2626;
    font-weight: 800;
}

/* --- Stempeluhr auf dem Dashboard --- */

.stamp-status {
    font-size: 15px;
    color: #374151;
    margin-bottom: 14px;
}

.stamp-button {
    width: auto;
    min-width: 220px;
    padding: 18px 32px;
    font-size: 18px;
    border-radius: 14px;
}

.stamp-in {
    background: #16a34a;
}

.stamp-in:hover {
    background: #15803d;
}

.stamp-out {
    background: #dc2626;
}

.stamp-out:hover {
    background: #b91c1c;
}

.open-requests-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.open-requests-split .metric-big {
    font-size: 28px;
}

.open-requests-split p {
    margin: 2px 0 8px;
    font-size: 13px;
    color: #6b7280;
}

@media print {
    .single-year-calendar {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .single-month-card {
        padding: 8px;
        border-radius: 0;
    }

    .single-month-card h2 {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .single-month-grid {
        gap: 2px;
    }

    .single-weekday {
        font-size: 8px;
    }

    .single-day {
        min-height: 18px;
        font-size: 8px;
        border-radius: 2px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kennzahlen-leiste {
        gap: 0;
    }

    .kz-item {
        padding: 6px 8px;
    }

    .kz-item strong {
        font-size: 16px;
    }
}


/* v1.13 Layout-Fix: Sidebar bleibt stabil, Kalender scrollt rechts */
html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.app-body {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    flex-shrink: 0 !important;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 280px);
    overflow-x: hidden;
}

.calendar-scroll,
.year-table-card {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
}

.calendar-table {
    min-width: max-content;
}

.calendar-table .employee-col,
.year-table-header .year-employee-title,
.year-employee-row .year-employee-info {
    position: sticky;
    left: 0;
    z-index: 5;
    background: white;
}

.calendar-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
}

.calendar-table thead th.employee-col {
    z-index: 8;
}

.year-table-header {
    position: sticky;
    top: 0;
    z-index: 6;
    background: white;
}

.year-table-header .year-employee-title {
    z-index: 8;
}

.year-employee-row .year-employee-info {
    z-index: 4;
}

@media (max-width: 900px) {
    .sidebar {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
        flex-basis: 230px !important;
    }

    .main {
        max-width: calc(100vw - 230px);
    }
}

/* Dashboard mobil: Inhalt ruhiger und schmaler fuehren. */
@media (max-width: 700px) {
    body.app-body .main {
        padding-inline: clamp(24px, 7vw, 42px);
    }

    body.app-body .main > .mobile-welcome,
    body.app-body .main > .stamp-dashboard-row,
    body.app-body .main > .dashboard-grid,
    body.app-body .main > .dashboard-hero,
    body.app-body .main > .card,
    body.app-body .main > section {
        width: 100% !important;
        max-width: 480px !important;
        margin-inline: auto !important;
    }

    body.app-body .main > .stamp-dashboard-row.has-dashboard-insights {
        max-width: 480px !important;
        margin-inline: auto !important;
    }

    body.app-body .mobile-app-header {
        padding-inline: clamp(20px, 6vw, 32px);
    }
}

@media (max-width: 390px) {
    body.app-body .main {
        padding-inline: 22px;
    }
}

/* v1.9.11: kontrollierte Aufbewahrung des Audit-Logs. */
.audit-retention-box {
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

/* v1.9.12: Warnung vor Jahresabschluss ohne Urlaubshistorie. */
.form-warning {
    padding: 14px 16px;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
}

.form-warning p:last-child {
    margin-bottom: 0;
}

.audit-retention-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    margin: 14px 0 8px;
}

.audit-retention-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.audit-retention-actions button {
    width: auto;
}

@media (max-width: 700px) {
    .audit-retention-actions,
    .audit-retention-actions form {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-retention-actions button {
        width: 100%;
    }
}

@media print {
    html,
    body,
    .app-body,
    .main {
        overflow: visible !important;
        max-width: none !important;
    }

    .calendar-scroll,
    .year-table-card {
        overflow: visible !important;
    }

    .calendar-table .employee-col,
    .year-table-header .year-employee-title,
    .year-employee-row .year-employee-info,
    .calendar-table thead th,
    .year-table-header {
        position: static !important;
    }
}


/* v2.0 Kalender Pro */
.calendar-pro-controls {
    padding: 20px;
}

.switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.switch-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.staffing-ampel-legend {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center;
    font-size: 14px;
}

.staffing-ampel-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    display: inline-block;
}

.dot.ok { background: #22c55e; }
.dot.warning { background: #facc15; }
.dot.danger { background: #dc2626; }

.calendar-pro-table th,
.calendar-pro-table td {
    min-width: 32px;
}

.calendar-pro-table .employee-col {
    min-width: 150px;
}

.calendar-pro-table .kw-row th {
    height: 16px;
    font-size: 10px;
    color: #6b7280;
    background: #f9fafb;
}

.calendar-pro-table thead th {
    height: 40px;
    font-size: 12px;
}

.calendar-pro-table th.weekend,
.calendar-pro-table td.weekend {
    background: #f1f3f6 !important;
}

/* v1.5.4/1.5.5: Fester freier Tag - die Schraffur selbst liegt als
   halbtransparentes Overlay ganz am Ende dieser Datei, damit sie sich
   über JEDE Grundfarbe legt (Wochenende, Ferien, Feiertag) statt von
   später definierten background-Regeln überschrieben zu werden. */
.calendar-pro-table td.fixed-off-cell .empty-cell {
    opacity: 0.35;
}

.calendar-pro-table th.school-holiday-header,
.calendar-pro-table td.school-holiday-cell {
    background: #e9f1fc !important;
}

.calendar-pro-table th.holiday-header,
.calendar-pro-table td.holiday-cell {
    background: #fde4c8 !important;
}

.calendar-pro-table th.today,
.calendar-pro-table td.today {
    box-shadow: inset 2px 0 0 0 #2563eb, inset -2px 0 0 0 #2563eb;
    background: #eef4ff !important;
}

.calendar-pro-table th.week-start,
.calendar-pro-table td.week-start {
    border-left: 2px solid #cbd5e1;
}

.staffing-chip {
    display: inline-block;
    margin-top: 4px;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 900;
}

.staffing-ok {
    background: #dcfce7 !important;
    color: #166534;
}

.staffing-warning {
    background: #fef3c7 !important;
    color: #92400e;
}

.staffing-danger {
    background: #fee2e2 !important;
    color: #991b1b;
}

.day-icons {
    display: flex;
    justify-content: center;
    gap: 2px;
    min-height: 16px;
    margin-top: 2px;
    font-size: 11px;
}

.calendar-pro-table .calendar-cell {
    height: 30px;
}

.calendar-pro-table .entry-badge {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.calendar-pro-table .empty-cell {
    opacity: 0;
}

.calendar-pro-table .calendar-cell:hover .empty-cell {
    opacity: 0.25;
}

.birthday-note {
    display: block;
    color: #b45309;
    font-weight: 800;
    margin-top: 4px;
}

.pro-legend {
    gap: 10px 14px;
}

.legend-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 13px;
}

.holiday-pill {
    background: #fde4c8;
    color: #9a4a0a;
}

.school-pill {
    background: #e9f1fc;
    color: #1e40af;
}

.birthday-pill {
    background: #fef3c7;
}

.calendar-hint {
    color: #6b7280;
    font-size: 13px;
    margin: 12px 0 0;
    text-align: right;
}

@media print {
    .calendar-pro-controls,
    .calendar-hint {
        display: none !important;
    }

    .calendar-pro-table th,
    .calendar-pro-table td {
        min-width: 34px !important;
    }

    .calendar-pro-table .employee-col {
        min-width: 140px !important;
    }

    .calendar-pro-table thead th {
        height: 42px !important;
    }

    .calendar-pro-table .calendar-cell {
        height: 32px !important;
    }

    .calendar-pro-table .entry-badge {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
        border-radius: 4px !important;
    }

    .staffing-chip,
    .day-icons {
        display: none !important;
    }
}


/* v2.1 Einstellungen Kalender */
.settings-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    white-space: nowrap;
    margin-bottom: 0;
}

.settings-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.settings-form {
    grid-template-columns: 1fr 1fr 1fr 1fr auto auto !important;
}

.staffing-auto-label {
    font-weight: 900;
    white-space: nowrap;
}

.staffing-auto-label span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
    margin-top: 2px;
}

.staffing-toggle-form {
    grid-template-columns: auto 280px auto 1fr !important;
}


/* v2.2 Einstellungen Pro */
.sidebar-logo {
    display: block;
    max-width: 150px;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 12px;
    background: white;
    border-radius: 12px;
    padding: 8px;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: white;
    border: 1px solid #d8dde6;
    border-radius: 18px;
    padding: 10px;
}

.settings-tabs a {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: #111827;
    font-weight: 800;
    background: #f3f4f6;
}

.settings-tabs a.active {
    background: #243044;
    color: white;
}

.settings-grid-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
}

.settings-grid-form input,
.settings-grid-form select,
.calendar-settings-form input,
.calendar-settings-form select {
    margin-bottom: 0;
}

.full-row {
    grid-column: 1 / -1;
}

.logo-preview {
    grid-column: span 2;
    min-height: 110px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f8fafc;
}

.logo-preview img {
    max-height: 90px;
    max-width: 280px;
    object-fit: contain;
}

.calendar-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
    align-items: center;
}

.muted {
    color: #6b7280;
}

.form-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.form-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.document-table td {
    vertical-align: middle;
}

.small-button {
    padding: 6px 12px;
    font-size: 0.85rem;
    width: auto;
    min-width: 0;
}

.form-actions button {
    width: auto;
    min-width: 160px;
}


/* v2.3 Personalakte Beschäftigung */

/* v2.4 Personalakte sauber */
.employee-edit-form select,
.employee-edit-form input,
.employee-edit-form textarea {
    font-size: 16px;
}

.employee-edit-form select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    background: white;
}

.hint-box {
    margin-top: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 700;
}


/* v2.5 Logo-System */
.sidebar-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px !important;
    max-height: 80px !important;
    object-fit: contain;
    margin: 0 0 12px;
    background: white;
    border-radius: 12px;
    padding: 8px;
}

.logo-preview {
    grid-column: span 2;
    min-height: 120px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    overflow: hidden;
}

.logo-preview img {
    max-width: 220px !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

.logo-placeholder {
    color: #6b7280;
    font-weight: 800;
}

.logo-remove-form {
    margin-top: 16px;
}

.logo-remove-form .danger-button {
    width: auto;
    min-width: 160px;
}

/* v2.6 Rollen */
.role-badge { display:inline-flex; border-radius:999px; padding:4px 10px; background:#e5e7eb; font-weight:800; font-size:12px; }


/* v2.7 DB-Freeze + PIN + Mindestbesetzung Chips */
.staffing-chip-card {
    padding: 22px 26px;
}

.staffing-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.staffing-card-head h2 {
    margin: 0;
}

.staffing-card-head p {
    margin: 4px 0 0;
    color: #6b7280;
    font-weight: 800;
}

.staffing-rule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.staffing-rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid #d1d5db;
}

.staffing-rule-chip.active {
    background: #243044;
    color: white;
    border-color: #243044;
}

.chip-check {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #2563eb;
    color: white;
    font-weight: 900;
}

.chip-badge {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #22c55e;
    color: white;
    font-weight: 900;
}

.employee-edit-form input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
}


/* v2.8 Stabilisierung */
.system-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}

.system-status-card {
    border-radius: 18px;
    padding: 16px;
    background: #f3f4f6;
    border: 1px solid #d8dde6;
}

.system-status-card strong,
.system-status-card span,
.system-status-card em {
    display: block;
}

.system-status-card strong {
    color: #4b5563;
}

.system-status-card span {
    font-size: 24px;
    font-weight: 900;
    margin: 8px 0;
}

.system-status-card em {
    color: #6b7280;
    font-style: normal;
    font-size: 13px;
}

.system-status-card.ok {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.system-status-card.warning {
    background: #fffbeb;
    border-color: #fde68a;
}

@media (max-width: 1000px) {
    .system-status-grid {
        grid-template-columns: 1fr;
    }
}


/* v2.9 Benutzerverwaltung */
.card-headline-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.user-table td {
    vertical-align: middle;
}

.role-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 13px;
}

.role-pill.admin {
    background: #fee2e2;
    color: #991b1b;
}

.role-pill.employee {
    background: #dcfce7;
    color: #166534;
}

.role-pill.manager {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-pill.ok {
    background: #dcfce7;
    color: #166534;
}

.status-pill.locked {
    background: #e5e7eb;
    color: #374151;
}


/* v2.10 Kalender-Rechte */
.modal-hint {
    margin: 2px 0 8px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}


/* v2.12 Mitarbeiter-Datenschutz Kalender */
.absent-private,
.entry-badge.absent-private,
.year-entry.absent-private,
.year-day.absent-private,
.calendar-entry.absent-private {
    background: #9ca3af !important;
    color: white !important;
    border-color: #6b7280 !important;
}

.privacy-note {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}


/* v2.12.1 Datenschutz Bugfix */
.entry-private,
.entry-private-cell,
.calendar-cell.entry-private-cell,
.day-strip.entry-private-cell,
.single-day.entry-private-cell {
    background: #9ca3af !important;
    color: white !important;
    border-color: #6b7280 !important;
}

.entry-badge.entry-private {
    background: #6b7280 !important;
    color: white !important;
}


/* v2.13 Geburtstage */
.birthday-card {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.birthday-card h2 {
    margin-bottom: 14px;
}

.birthday-today {
    border-radius: 16px;
    padding: 14px;
    background: #ffedd5;
    border: 1px solid #fed7aa;
    margin-bottom: 12px;
}

.birthday-today p,
.birthday-upcoming p {
    margin: 8px 0 0;
    font-weight: 800;
}

.birthday-upcoming {
    border-radius: 16px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.day-marker.birthday {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}


/* v2.14 Mitarbeiter-Identität */
.identity-badge { display:inline-flex; border-radius:999px; padding:4px 10px; background:#e0f2fe; color:#075985; font-weight:900; font-size:13px; }

/* v2.16 Mitarbeiter-Identität final */
input[readonly] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
}

/* ==========================================================
   v2.17.1 — Pending-Urlaub, Urlaub-Karten, Kompaktheit, Mobile
   Bewusst ans Dateiende gesetzt, damit diese Regeln gegen
   ältere/doppelte Definitionen weiter oben gewinnen.
   ========================================================== */

/* --- Pending-Urlaub im Kalender: klar erkennbar, nicht dezent --- */
td.calendar-cell.pending-vacation {
    background: repeating-linear-gradient(
        135deg,
        #fff7e0,
        #fff7e0 6px,
        #ffedb8 6px,
        #ffedb8 12px
    ) !important;
}

.entry-badge.pending-vacation-badge {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f59e0b !important;
    color: #78350f !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    border: 2px solid #b45309;
    display: inline-grid;
    place-items: center;
    animation: pending-pulse 1.8s ease-in-out infinite;
}

@keyframes pending-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .entry-badge.pending-vacation-badge {
        animation: none;
    }
}

.pending-vacation-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff7e0;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 13px;
    color: #78350f;
}

/* --- Urlaub-Seite: kompakte Karten statt breiter Balken --- */
.vacation-request-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.vacation-request-card {
    border: 1px solid #e5e7eb;
    border-left: 5px solid #9ca3af;
    border-radius: 12px;
    padding: 16px 18px;
    background: white;
}

.vacation-request-card.status-pending {
    border-left-color: #f59e0b;
    background: #fffdf6;
}

.vacation-request-card.status-approved {
    border-left-color: #16a34a;
}

.vacation-request-card.status-rejected {
    border-left-color: #dc2626;
    opacity: 0.85;
}

.vacation-request-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.vacation-request-main strong {
    font-size: 16px;
}

.vacation-request-main p {
    margin: 4px 0 0;
    font-size: 14px;
}

.request-comment {
    color: #4b5563;
    font-style: italic;
}

.admin-comment {
    color: #6b7280;
    font-size: 13px;
}

.vacation-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

.vacation-status.pending {
    background: #fff7e0;
    color: #92400e;
}

.vacation-status.approved {
    background: #dcfce7;
    color: #166534;
}

.vacation-status.rejected {
    background: #fee2e2;
    color: #991b1b;
}

.vacation-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

.vacation-actions form {
    display: flex;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 220px;
}

.vacation-actions input {
    margin-bottom: 0;
    padding: 10px 12px;
    font-size: 14px;
}

.vacation-actions button {
    width: auto;
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 14px;
}

.vacation-request-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.vacation-request-form .full-row {
    grid-column: 1 / -1;
}

/* --- Dashboard: einheitlicher Kartenlook --- */
.card,
.vacation-request-card,
.staffing-chip-card,
.calendar-card {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* --- Kalenderseite kompakter (weniger Weißraum, kleinere Legende) --- */
.calendar-pro-card {
    padding: 18px;
}

.calendar-pro-card .calendar-headline {
    margin-bottom: 10px;
}

.calendar-pro-card .calendar-headline h2 {
    font-size: 19px;
    margin-bottom: 2px;
}

.calendar-pro-card .calendar-headline p {
    font-size: 13px;
}

.pro-legend {
    margin-bottom: 12px;
}

.pro-legend .legend-item {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 6px;
}

.pro-legend > span:not(.legend-item):not(.legend-pill):not(.pending-vacation-legend) {
    margin-right: 8px;
    font-size: 13px;
}

/* --- Mobile: Sidebar wird schmale Kopfleiste, Inhalte volle Breite --- */
@media (max-width: 720px) {
    .app-body {
        display: block;
    }

    .sidebar {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: none !important;
        padding: 16px;
    }

    .sidebar nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .brand {
        margin-bottom: 12px;
    }

    .main {
        max-width: 100% !important;
        padding: 16px;
    }

    .grid {
        grid-template-columns: 1fr !important;
    }

    .vacation-request-form {
        grid-template-columns: 1fr;
    }

    .vacation-request-main {
        flex-direction: column;
    }

    .calendar-pro-table .calendar-cell {
        height: 40px;
    }

    .calendar-pro-table .entry-badge {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .calendar-pro-table .employee-col {
        min-width: 118px !important;
    }

    .calendar-pro-table th,
    .calendar-pro-table td {
        min-width: 34px;
    }

    .calendar-scroll {
        position: relative;
    }

    .calendar-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 18px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08));
        pointer-events: none;
    }
}

/* ==========================================================
   v2.19 — Dienstplan: geplante vs. bestätigte Anwesenheit
   ========================================================== */

/* Badge in der Zelle: schraffiertes Grün statt vollem Grün,
   solange die Anwesenheit nur geplant, aber nicht bestätigt ist. */
.entry-badge.entry-work-planned {
    background: repeating-linear-gradient(
        135deg,
        #16a34a,
        #16a34a 4px,
        #15803d 4px,
        #15803d 8px
    ) !important;
    border: 2px solid #166534;
}

/* Zellenhintergrund in der Pro-Tabelle passend schraffiert. */
.calendar-cell.entry-work-planned-cell,
.day-strip.entry-work-planned-cell,
.single-day.entry-work-planned-cell {
    background: repeating-linear-gradient(
        135deg,
        #dcfce7,
        #dcfce7 6px,
        #bbf7d0 6px,
        #bbf7d0 12px
    ) !important;
}

.legend-pill.planned-pill {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #16a34a;
}

.modal-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
    color: #4b5563;
    margin: 10px 0;
    cursor: pointer;
}

.modal-checkbox-label input {
    margin-top: 3px;
}

/* ==========================================================
   v2.23 — Arbeitsplan (druckfertige Wochenübersicht)
   ========================================================== */

.form-grid.three-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
}

.week-quicknav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.week-quicknav .button-link {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.print-title {
    display: none;
}

.arbeitsplan-table .employee-col span {
    display: block;
    font-size: 11px;
    color: #6b7280;
}

@media (max-width: 900px) {
    .form-grid.three-cols {
        grid-template-columns: 1fr;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    .print-title {
        display: block;
        margin-bottom: 12px;
    }

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

    .arbeitsplan-print-card {
        border: none;
        padding: 0;
        box-shadow: none;
    }

    .arbeitsplan-table {
        font-size: 11px;
    }

    .arbeitsplan-table .calendar-cell {
        height: auto;
    }

    .arbeitsplan-table .entry-badge {
        box-shadow: none !important;
        animation: none !important;
    }
}

/* --- Berichte --- */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.report-header h2 {
    margin: 0;
}

.report-totals-row td {
    font-weight: 800;
    border-top: 2px solid #243044;
}

@media print {
    .report-header .button-link {
        display: none;
    }
}

/* ==========================================================
   v2.25 — Mobile: "Meine Woche" auf dem Dashboard
   ========================================================== */

.my-week-strip {
    display: flex;
    gap: 6px;
    margin: 14px 0;
}

.my-week-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 10px;
    background: #f4f5f7;
    text-decoration: none;
    color: inherit;
    border: 2px solid transparent;
    min-width: 0;
}

.my-week-day.today {
    border-color: #2563eb;
    background: #eef4ff;
}

.my-week-weekday {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
}

.my-week-date {
    font-size: 11px;
    color: #6b7280;
}

.my-week-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
}

.my-week-badge.empty {
    background: #e5e7eb;
    color: #9ca3af;
}

/* Sehr schmale Handys: Wochentag-Kürzel etwas kleiner, damit nichts umbricht. */
@media (max-width: 380px) {
    .my-week-strip {
        gap: 3px;
    }

    .my-week-day {
        padding: 6px 1px;
    }

    .my-week-badge {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .my-week-weekday,
    .my-week-date {
        font-size: 9px;
    }
}

@media (max-width: 720px) {
    .stamp-button {
        width: 100%;
        min-width: 0;
    }

    .stamp-clock-card {
        padding: 18px;
    }

    .open-requests-split {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   v2.27 — Schichtplan-Ausdruck im Vorlagen-Stil
   ========================================================== */

.schichtplan-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}

.schichtplan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
}

.schichtplan-day {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.schichtplan-day-header {
    background: #fbe4ec;
    color: #9d174d;
    font-weight: 900;
    text-align: center;
    padding: 8px;
    border-bottom: 1px solid #cbd5e1;
}

.schichtplan-weekend .schichtplan-day-header {
    background: #e5e7eb;
    color: #374151;
}

.schichtplan-day-header span {
    font-weight: 600;
    color: #6b7280;
    margin-left: 6px;
}

.schichtplan-time-label {
    background: #f9fafb;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 10px;
    border-bottom: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

/* Abteilungen zusätzlich durch eine Leerzeile trennen: jede Abteilungs-
   Überschrift, die direkt auf eine Tabelle folgt (also ab der zweiten
   Abteilung eines Tages), bekommt Abstand nach oben - analog zur Leerzeile
   zwischen den Schichtblöcken innerhalb einer Abteilung. Die erste
   Abteilung folgt auf den Tages-Kopf und bleibt bündig.
   NUR am Bildschirm: im Ausdruck/Druck-PDF (window.print) ist das Layout eng
   auf eine Seite gerechnet - dort würde der zusätzliche Abstand die Seite
   sprengen, deshalb bleibt der Druck unverändert. */
@media screen {
    .schichtplan-table + .schichtplan-time-label {
        margin-top: 16px;
    }
}

.schichtplan-table {
    width: 100%;
    border-collapse: collapse;
}

.schichtplan-print-table {
    display: none;
}

.schichtplan-table tr {
    border-bottom: 1px solid #f0f1f3;
}

.schichtplan-name {
    padding: 5px 10px;
    font-weight: 700;
    width: 50%;
}

.schichtplan-dept {
    padding: 5px 10px;
    color: #c2410c;
    font-weight: 700;
    text-align: right;
}

.schichtplan-empty {
    padding: 10px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 900px) {
    .schichtplan-row {
        grid-template-columns: 1fr;
    }
}

@media print {
    @page shift-plan {
        size: A4 portrait;
        margin: 10mm;
    }

    body.shift-plan-page {
        page: shift-plan;
    }

    /* Schichtplan: vier gleich hohe Rasterreihen auf genau einer A4-Seite.
       In der letzten Reihe steht der Sonntag mittig. Für volle Tage liefert
       der Server vorverdichtete Druckzeilen; die Bildschirmansicht bleibt
       davon unberührt. */
    .schichtplan-grid {
        display: grid !important;
        grid-template-rows: repeat(4, 1fr) !important;
        gap: 3mm !important;
        margin-top: 2mm !important;
        height: 247mm !important;
        width: 100% !important;
    }

    .schichtplan-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3mm !important;
        min-height: 0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .schichtplan-row:last-child {
        display: flex !important;
        justify-content: center !important;
    }

    .schichtplan-row:last-child .schichtplan-day {
        flex: 0 0 calc((100% - 3mm) / 2) !important;
    }

    .schichtplan-day {
        height: 100% !important;
        min-height: 0 !important;
        border: 1px solid #475569 !important;
        border-radius: 2mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
        overflow: hidden !important;
    }

    .schichtplan-day-header {
        padding: 1.2mm 2mm !important;
        font-size: 9pt !important;
    }

    .schichtplan-time-label {
        padding: .7mm 2mm !important;
        font-size: 7.5pt !important;
    }

    .schichtplan-name,
    .schichtplan-dept {
        padding: .65mm 2mm !important;
        font-size: 7.5pt !important;
        line-height: 1.1 !important;
    }

    .schichtplan-spacer td {
        height: 1.5mm !important;
    }

    .schichtplan-empty {
        padding: 2mm !important;
        font-size: 7.5pt !important;
    }

    .schichtplan-screen-table {
        display: none !important;
    }

    .schichtplan-print-table {
        display: table !important;
    }

    .schichtplan-density-compact .schichtplan-time-label,
    .schichtplan-density-compact .schichtplan-name,
    .schichtplan-density-compact .schichtplan-dept {
        padding-top: .48mm !important;
        padding-bottom: .48mm !important;
        font-size: 7pt !important;
    }

    .schichtplan-density-dense .schichtplan-time-label,
    .schichtplan-density-dense .schichtplan-name,
    .schichtplan-density-dense .schichtplan-dept {
        padding-top: .32mm !important;
        padding-bottom: .32mm !important;
        font-size: 6.4pt !important;
    }

    .schichtplan-density-crowded .schichtplan-time-label,
    .schichtplan-density-crowded .schichtplan-name,
    .schichtplan-density-crowded .schichtplan-dept {
        padding-top: .25mm !important;
        padding-bottom: .25mm !important;
        font-size: 5.9pt !important;
    }

    .schichtplan-density-extreme .schichtplan-time-label,
    .schichtplan-density-extreme .schichtplan-name,
    .schichtplan-density-extreme .schichtplan-dept {
        padding-top: .18mm !important;
        padding-bottom: .18mm !important;
        font-size: 5.3pt !important;
    }

    .schichtplan-density-dense .schichtplan-spacer td,
    .schichtplan-density-crowded .schichtplan-spacer td,
    .schichtplan-density-extreme .schichtplan-spacer td {
        height: .6mm !important;
    }
}

/* v2.27.1 — Schichtplan: inline bearbeitbar */

.schichtplan-spacer td {
    height: 16px;
    border: none !important;
    background: transparent !important;
}

.schichtplan-delete {
    width: 28px;
    text-align: center;
    padding: 0 !important;
}

.schichtplan-delete-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
}

.schichtplan-delete-btn:hover {
    color: #dc2626;
}

.schichtplan-person,
.schichtplan-inline-delete {
    display: inline-flex;
    align-items: center;
}

.schichtplan-inline-delete {
    margin: 0 1px;
}

.schichtplan-inline-delete .schichtplan-delete-btn {
    padding: 0 2px;
    font-size: 13px;
}

.schichtplan-name-separator {
    color: #94a3b8;
    font-weight: 500;
}

.schichtplan-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

/* Personen-Auswahl und Zeit-Freitextfeld teilen sich die Zeile; auf schmalen
   Displays bricht die Zeile dank flex-wrap sauber um, statt die Felder auf
   0px zu quetschen. Die neuen <select> müssen das globale
   input/select { width:100%; margin-bottom:16px } explizit zurücksetzen. */
.schichtplan-add-form input[type="text"],
.schichtplan-add-form select {
    padding: 5px 8px;
    margin: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: white;
}

.schichtplan-add-form .schichtplan-add-employee {
    flex: 1 1 130px;
    min-width: 110px;
    width: auto;
}

.schichtplan-add-form .schichtplan-add-time {
    flex: 1 1 110px;
    min-width: 90px;
}

.schichtplan-add-form .schichtplan-time-pick {
    flex: 0 0 auto;
    width: auto;
}

.schichtplan-add-form button {
    flex: 0 0 auto;
    width: auto;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: #1f2937;
    color: white;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* Am Desktop folgt die bearbeitbare Ansicht demselben Kartenraster wie der
   Ausdruck: vier gleich hohe Reihen, Sonntag mittig und stufenweise
   Verdichtung. Übervoller Inhalt scrollt innerhalb der Karte, damit keine
   Eingabe- oder Löschfunktion abgeschnitten wird. */
@media screen and (min-width: 901px) {
    .schichtplan-grid {
        display: grid;
        grid-template-rows: repeat(4, 245px);
        gap: 12px;
        margin-top: 12px;
    }

    .schichtplan-row {
        height: 245px;
        gap: 12px;
        align-items: stretch;
    }

    .schichtplan-row:last-child {
        display: flex;
        justify-content: center;
    }

    .schichtplan-row:last-child .schichtplan-day {
        flex: 0 0 calc((100% - 12px) / 2);
    }

    .schichtplan-day {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 6px;
    }

    .schichtplan-day-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .schichtplan-add-form {
        flex: 0 0 auto;
    }

    .schichtplan-day-header {
        padding: 5px 8px;
        font-size: 13px;
        line-height: 1.15;
    }

    .schichtplan-time-label {
        padding: 3px 8px;
        font-size: 12px;
        line-height: 1.15;
    }

    .schichtplan-print-table + .schichtplan-time-label {
        margin-top: 8px;
    }

    .schichtplan-name,
    .schichtplan-dept {
        padding: 3px 8px;
        font-size: 12px;
        line-height: 1.2;
    }

    .schichtplan-spacer td {
        height: 8px;
    }

    .schichtplan-empty {
        min-height: 34px;
        margin: 0;
        padding: 9px;
        font-size: 12px;
    }

    .schichtplan-add-form {
        gap: 5px;
        padding: 6px;
    }

    .schichtplan-add-form input[type="text"],
    .schichtplan-add-form select {
        min-height: 30px;
        padding: 4px 7px;
        font-size: 12px;
    }

    .schichtplan-add-form button {
        min-height: 30px;
        padding: 4px 9px;
        font-size: 12px;
    }

    .schichtplan-density-compact .schichtplan-time-label,
    .schichtplan-density-compact .schichtplan-name,
    .schichtplan-density-compact .schichtplan-dept {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 11.5px;
    }

    .schichtplan-density-dense .schichtplan-time-label,
    .schichtplan-density-dense .schichtplan-name,
    .schichtplan-density-dense .schichtplan-dept {
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        font-size: 11px;
    }

    .schichtplan-density-crowded .schichtplan-time-label,
    .schichtplan-density-crowded .schichtplan-name,
    .schichtplan-density-crowded .schichtplan-dept {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 10.5px;
    }

    .schichtplan-density-extreme .schichtplan-time-label,
    .schichtplan-density-extreme .schichtplan-name,
    .schichtplan-density-extreme .schichtplan-dept {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 10px;
    }

    .schichtplan-density-crowded .schichtplan-spacer td,
    .schichtplan-density-extreme .schichtplan-spacer td {
        height: 4px;
    }
}

/* Arbeitsplan-Modal: Zeit-Freitextfeld + native Schnellauswahl nebeneinander.
   Beide Kinder setzen das globale input/select { width:100%; margin } zurück;
   der Zeilenabstand nach unten sitzt an der Zeile selbst. */
.modal-shift-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.modal-shift-row #modalShiftLabel {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.modal-shift-row #modalShiftPick {
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 0;
}

/* v2.27.5 — echte Mobilansicht statt Desktop-Layout im Schraubstock */
@media (max-width: 760px) {
    html,
    body {
        overflow-x: hidden;
    }

    .app-body {
        display: block;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .sidebar {
        position: static;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto;
        min-height: 0;
        flex: none !important;
        padding: 18px 16px 14px;
        overflow: hidden;
    }

    .brand {
        margin-bottom: 16px;
    }

    .brand strong {
        font-size: 20px;
        line-height: 1.15;
    }

    .brand span {
        display: inline;
        font-size: 13px;
    }

    .brand span + span::before {
        content: " · ";
    }

    .sidebar nav {
        display: flex;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .sidebar nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 15px;
        scroll-snap-align: start;
    }

    .main {
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
        padding: 18px 16px 32px;
        overflow-x: hidden;
    }

    .main-header {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .main-header h1 {
        font-size: 30px;
        line-height: 1.05;
    }

    .main-header p {
        font-size: 16px;
        line-height: 1.35;
    }

    .logout {
        flex: 0 0 auto;
        padding: 11px 14px;
    }

    .card {
        padding: 18px;
        border-radius: 16px;
    }

    .stamp-clock-card {
        width: 100%;
        margin-bottom: 18px;
    }

    .stamp-clock-card h2 {
        font-size: 26px;
    }

    .stamp-clock-card form {
        width: 100%;
    }

    .stamp-button {
        width: 100%;
        min-width: 0;
        padding: 17px 20px;
        font-size: 19px;
    }

    .stamp-clock-card .small-link {
        display: inline-block;
        margin-top: 12px;
        max-width: 100%;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-today-card {
        padding: 20px;
    }

    .dashboard-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .status-card {
        min-width: 0;
        padding: 14px;
    }

    .status-card strong {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .status-card span {
        font-size: 32px;
    }

    .dashboard-grid,
    .grid,
    .form-grid,
    .check-grid,
    .open-requests-split {
        grid-template-columns: 1fr;
    }

    .calendar-toolbar,
    .calendar-pro-controls {
        display: block !important;
    }

    .calendar-form,
    .calendar-pro-controls {
        grid-template-columns: 1fr !important;
    }

    .calendar-form > *,
    .calendar-pro-controls > * {
        width: 100%;
        margin-bottom: 8px;
    }

    .calendar-card {
        padding: 12px;
    }

    .calendar-scroll,
    .year-table-card {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-table .employee-col,
    .calendar-pro-table .employee-col {
        min-width: 135px;
        max-width: 135px;
    }

    .single-year-calendar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .main-header {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .dashboard-status-grid {
        grid-template-columns: 1fr;
    }
}

.login-logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto 20px;
}

.login-hotel-name {
    color: #6b7280;
    margin: 4px 0 8px;
}

.login-card form {
    margin-top: 28px;
}

.login-card form button {
    width: 100%;
}

.login-contact {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.login-contact a {
    color: #4b5563;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.login-display-settings {
    padding: 18px;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    background: #f8fafc;
}

.login-display-settings h3 {
    margin: 0 0 4px;
}

.login-display-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin-top: 14px;
}

.login-display-options .settings-check {
    margin: 0;
}

@media (max-width: 700px) {
    .login-display-options {
        grid-template-columns: 1fr;
    }
}

/* Login 3.0 */

.login-body.login-v3 {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2.5vw, 28px);
    color: #eef5ff;
    background:
        radial-gradient(circle at 50% 22%, rgba(40, 105, 210, 0.22), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(31, 80, 155, 0.12), transparent 30%),
        linear-gradient(145deg, #071426 0%, #0b1c33 48%, #06111f 100%);
    overflow-x: hidden;
}

.login-v3 .login-shell {
    position: relative;
    width: min(100%, 940px);
    min-height: min(96svh, 920px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vh, 54px) clamp(20px, 6vw, 88px) clamp(22px, 3vh, 38px);
    border: 1px solid rgba(112, 163, 230, 0.35);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(10, 29, 54, 0.78), rgba(4, 17, 32, 0.9)),
        radial-gradient(circle at 50% 0%, rgba(53, 125, 239, 0.12), transparent 42%);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-v3 .login-brand-mark {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 1px solid rgba(72, 145, 255, 0.72);
    background: linear-gradient(145deg, rgba(21, 66, 133, 0.88), rgba(4, 20, 42, 0.96));
    box-shadow: 0 0 38px rgba(41, 120, 255, 0.42);
    animation: login-float 5s ease-in-out infinite;
}

.login-v3 .login-brand-icon {
    font-size: 52px;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.32));
}

.login-v3 .login-logo {
    width: 82px;
    height: 82px;
    max-width: 82px;
    max-height: 82px;
    margin: 0;
    object-fit: contain;
    border-radius: 50%;
}

.login-v3 .login-clock {
    display: grid;
    justify-items: center;
}

.login-v3 .login-time {
    font-size: clamp(64px, 9vw, 116px);
    line-height: 0.96;
    font-weight: 300;
    letter-spacing: -0.055em;
    color: #f8fbff;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.login-v3 .login-date {
    margin-top: 14px;
    font-size: clamp(17px, 2.1vw, 26px);
    color: #bdc9d9;
    text-transform: capitalize;
}

.login-v3 .login-divider {
    width: min(100%, 520px);
    height: 1px;
    margin: 22px 0 18px;
    background: linear-gradient(90deg, transparent, rgba(150, 178, 216, 0.38), transparent);
}

.login-v3 .login-greeting {
    margin: 0 0 12px;
    color: #4b8dff;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 0 24px rgba(50, 122, 255, 0.32);
}

.login-v3 .login-heading {
    text-align: center;
}

.login-v3 .login-heading h1 {
    margin: 0;
    color: #f5f8fd;
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.login-v3 .login-hotel-name {
    margin: 10px 0 0;
    color: #c0cbda;
    font-size: clamp(17px, 2.2vw, 25px);
}

.login-v3 .version {
    margin: 8px 0 0;
    color: #7f91a8;
    font-size: 14px;
}

.login-v3 .login-form {
    width: min(100%, 590px);
    margin-top: 30px;
}

.login-v3 .login-form label {
    margin-bottom: 9px;
    color: #edf3fb;
    font-size: 17px;
}

.login-v3 .login-input-wrap {
    position: relative;
}

.login-v3 .login-input-wrap input {
    min-height: 70px;
    margin: 0;
    padding: 16px 58px 16px 20px;
    border: 1px solid rgba(128, 166, 218, 0.48);
    border-radius: 12px;
    background: rgba(7, 24, 45, 0.58);
    color: #f4f8ff;
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.login-v3 .login-input-wrap input::placeholder {
    color: #7f91a9;
}

.login-v3 .login-input-wrap input:focus {
    outline: none;
    border-color: #4d91ff;
    background: rgba(9, 31, 58, 0.82);
    box-shadow: 0 0 0 4px rgba(55, 126, 241, 0.18), 0 0 28px rgba(43, 112, 225, 0.18);
}

.login-v3 .login-key-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    pointer-events: none;
}

.login-v3 .login-submit {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #286add, #347cf2);
    color: white;
    font-size: 21px;
    box-shadow: 0 16px 34px rgba(31, 102, 224, 0.28);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.login-v3 .login-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 20px 44px rgba(31, 102, 224, 0.42);
}

.login-v3 .login-submit:active {
    transform: translateY(1px);
}

.login-v3 .login-error {
    width: min(100%, 590px);
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
    text-align: center;
}

.login-v3 .login-contact {
    width: min(100%, 590px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 18px;
    padding-top: 0;
    border: 0;
}

.login-v3 .login-contact a {
    color: #aebdd0;
}

.login-v3 .login-features {
    width: min(100%, 650px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 38px;
}

.login-v3 .login-features > div {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 18px;
    color: #d4deeb;
    text-align: center;
    font-size: 15px;
}

.login-v3 .login-features > div + div {
    border-left: 1px solid rgba(136, 164, 201, 0.28);
}

.login-v3 .login-features > div span:first-child {
    font-size: 28px;
    line-height: 1;
}

.login-v3 .login-copyright {
    margin: 26px 0 0;
    color: #72839a;
    font-size: 13px;
}

@keyframes login-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 700px) {
    .login-body.login-v3 {
        padding: 0;
    }

    .login-v3 .login-shell {
        width: 100%;
        min-height: 100svh;
        padding: max(24px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-v3 .login-brand-mark {
        width: 84px;
        height: 84px;
    }

    .login-v3 .login-brand-icon {
        font-size: 40px;
    }

    .login-v3 .login-logo {
        width: 62px;
        height: 62px;
    }

    .login-v3 .login-divider {
        margin: 18px 0 15px;
    }

    .login-v3 .login-form {
        margin-top: 24px;
    }

    .login-v3 .login-input-wrap input,
    .login-v3 .login-submit {
        min-height: 62px;
    }

    .login-v3 .login-features {
        margin-top: 30px;
    }

    .login-v3 .login-features > div {
        padding: 0 8px;
        font-size: 12px;
    }

    .login-v3 .login-features > div span:first-child {
        font-size: 23px;
    }
}

@media (max-height: 760px) and (min-width: 701px) {
    .login-v3 .login-shell {
        min-height: auto;
        padding-top: 28px;
        padding-bottom: 24px;
    }

    .login-v3 .login-brand-mark {
        width: 78px;
        height: 78px;
    }

    .login-v3 .login-brand-icon {
        font-size: 36px;
    }

    .login-v3 .login-time {
        font-size: 66px;
    }

    .login-v3 .login-date {
        margin-top: 8px;
        font-size: 18px;
    }

    .login-v3 .login-divider {
        margin: 14px 0 12px;
    }

    .login-v3 .login-greeting {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .login-v3 .login-heading h1 {
        font-size: 42px;
    }

    .login-v3 .login-form {
        margin-top: 20px;
    }

    .login-v3 .login-input-wrap input,
    .login-v3 .login-submit {
        min-height: 56px;
    }

    .login-v3 .login-features {
        margin-top: 26px;
    }

    .login-v3 .login-copyright {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-v3 .login-brand-mark {
        animation: none;
    }

    .login-v3 .login-submit {
        transition: none;
    }
}

/* Login 3.0.1: kompakter, Logo lesbarer, optionale Wetterzeile */
.login-v3 .login-shell {
    width: min(100%, 760px);
    min-height: auto;
    padding: clamp(22px, 3vh, 36px) clamp(22px, 5vw, 58px) clamp(20px, 3vh, 30px);
}

.login-v3 .login-brand-mark {
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
    padding: 10px;
    border-color: rgba(255, 205, 96, 0.72);
    background:
        radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.94) 62%, rgba(225,232,242,0.9) 100%);
    box-shadow: 0 0 30px rgba(255, 196, 72, 0.22), 0 12px 28px rgba(0,0,0,0.28);
}

.login-v3 .login-logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    filter: contrast(1.08) saturate(1.08);
}

.login-v3 .login-time {
    font-size: clamp(58px, 7.2vw, 92px);
}

.login-v3 .login-date {
    margin-top: 8px;
    font-size: clamp(16px, 1.8vw, 22px);
}

.login-v3 .login-weather {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 8px 16px;
    border: 1px solid rgba(128, 166, 218, 0.34);
    border-radius: 12px;
    background: rgba(8, 27, 50, 0.48);
    color: #d8e2ef;
    font-size: 15px;
    backdrop-filter: blur(10px);
}

.login-v3 .login-weather[hidden] { display: none; }
.login-v3 .login-weather-separator {
    width: 1px;
    height: 20px;
    background: rgba(142, 170, 207, 0.28);
}

.login-v3 .login-divider { margin: 16px 0 14px; }
.login-v3 .login-greeting { margin-bottom: 8px; font-size: clamp(20px, 2.4vw, 28px); }
.login-v3 .login-heading h1 { font-size: clamp(34px, 4.5vw, 52px); }
.login-v3 .login-hotel-name { margin-top: 7px; font-size: clamp(16px, 1.9vw, 21px); }
.login-v3 .login-form { width: min(100%, 530px); margin-top: 22px; }
.login-v3 .login-input-wrap input,
.login-v3 .login-submit { min-height: 60px; }
.login-v3 .login-input-wrap input { font-size: 18px; }
.login-v3 .login-submit { margin-top: 16px; font-size: 19px; }
.login-v3 .login-contact { width: min(100%, 530px); margin-top: 14px; }
.login-v3 .login-features { width: min(100%, 570px); margin-top: 26px; }
.login-v3 .login-copyright { margin-top: 18px; }

@media (max-width: 700px) {
    .login-v3 .login-shell { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
    .login-v3 .login-brand-mark { width: 78px; height: 78px; padding: 8px; }
    .login-v3 .login-time { font-size: clamp(54px, 18vw, 76px); }
    .login-v3 .login-weather { margin-top: 12px; padding: 7px 12px; font-size: 13px; }
    .login-v3 .login-features { margin-top: 24px; }
}