:root{
    --bg:#141414;
    --surface:#1d1d1d;
    --surface-2:#252525;
    --surface-3:#2f2f2f;
    --border:#3b3b3b;
    --border-soft:#2d2d2d;
    --text:#efefef;
    --muted:#b5b5b5;
    --accent:#ffdd00;
    --accent-2:#f1c400;
    --danger:#de6767;
    --success:#51b989;
    --warning:#d8a739;
    --radius:22px;
    --shadow:0 18px 45px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
body.login-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#2a2a2a 0%,#151515 38%,#121212 100%)}
.layout{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#1a1a1a,#111111);border-right:1px solid var(--border-soft);padding:26px;display:flex;flex-direction:column;gap:22px}
.brand-panel{padding:18px;border-radius:20px;background:linear-gradient(180deg,#252525,#1b1b1b);border:1px solid var(--border);display:grid;gap:16px;justify-items:start}
.main-logo{max-width:190px;max-height:58px;width:auto;height:auto;display:block}
.brand-copy{display:grid;gap:4px}
.brand-title{font-size:18px;font-weight:700}
.brand-sub{font-size:13px;color:var(--muted)}
.logo-fallback{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:18px;background:var(--accent);color:#111;font-weight:800;box-shadow:var(--shadow)}
.nav{display:grid;gap:10px}
.nav-link{padding:13px 16px;border-radius:15px;color:#d2d2d2;background:transparent;border:1px solid transparent;transition:.2s}
.nav-link:hover,.nav-link.active{background:#242424;border-color:#464646;color:var(--text)}
.sidebar-footer{margin-top:auto;display:grid;gap:14px}
.user-chip{padding:14px 16px;border-radius:16px;background:#1f1f1f;border:1px solid var(--border);display:grid;gap:4px}
.user-chip span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.brand-strip{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 4px 4px}
.brand-strip-logo{max-height:24px;width:auto;opacity:.92}
.content{padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}
.eyebrow{margin:0 0 8px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.topbar h1{margin:0 0 8px;font-size:34px}
.topbar-right{display:flex;gap:16px;align-items:center;justify-content:flex-end;min-height:44px}
.topbar-logo{max-height:28px;width:auto;opacity:.9}
.grid{display:grid;gap:20px}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.two-uneven{grid-template-columns:1.35fr .9fr}
.card,.login-card{background:linear-gradient(180deg,#212121,#191919);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:22px}
.login-shell{width:min(1020px,100%);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border-radius:28px;background:#171717;border:1px solid #323232;box-shadow:var(--shadow)}
.login-side{padding:38px;background:linear-gradient(180deg,#242424,#171717);display:grid;align-content:space-between;gap:28px}
.login-card{padding:34px;border:0;box-shadow:none;background:transparent}
.login-logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.login-logos img{max-height:32px;width:auto;opacity:.95}
.login-card h1{margin:0 0 8px;font-size:32px}
.login-card p{margin:0 0 20px;color:var(--muted)}
.metric{display:grid;gap:6px}
.metric-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.metric-value{font-size:42px;font-weight:800}
.metric-value.accent,.accent-text{color:var(--accent)}
.section-title{font-size:19px;font-weight:700;margin-bottom:14px}
.section-copy{color:var(--muted);margin:-6px 0 18px}
.list-row,.event-card{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.list-row:last-child,.event-card:last-child{border-bottom:none;padding-bottom:0}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px}
.pill.accent{background:rgba(255,221,0,.12);border-color:rgba(255,221,0,.25);color:#fff4a7}
.muted{color:var(--muted)}
.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:14px;border:1px solid transparent;background:var(--accent);color:#111;font-weight:700;cursor:pointer}
.button:hover{background:var(--accent-2)}
.button.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.button.ghost:hover{background:#292929;border-color:#515151}
.button.full{width:100%}
.button.tiny{padding:8px 12px;border-radius:12px;font-size:12px}
.button.danger{background:rgba(222,103,103,.12);color:#ffc5c5;border-color:rgba(222,103,103,.24)}
.stack{display:grid;gap:14px}
.stack-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
label{display:grid;gap:8px;color:var(--muted);font-size:14px}
input,select,textarea{width:100%;padding:12px 14px;background:#121212;color:var(--text);border:1px solid var(--border);border-radius:14px;font:inherit}
textarea{resize:vertical;min-height:110px}

input[type="date"]{
    color-scheme:dark;
    position:relative;
}
input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(1) brightness(2);
    opacity:1;
    cursor:pointer;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
    color:var(--text);
}

.flash{padding:13px 16px;border-radius:14px;margin-bottom:16px}
.flash.success{background:rgba(81,185,137,.1);border:1px solid rgba(81,185,137,.22)}
.flash.error{background:rgba(222,103,103,.1);border:1px solid rgba(222,103,103,.2)}
.panel{padding:16px;border-radius:18px;border:1px solid var(--border)}
.panel.subtle{background:rgba(255,255,255,.03)}
.panel.highlight{background:linear-gradient(180deg,rgba(255,221,0,.10),rgba(255,221,0,.03));border-color:rgba(255,221,0,.15)}
.table-wrap{overflow:auto}
table.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.subrow td{font-size:13px;color:var(--muted);padding-top:0}
.inline-form{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.status{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.status.beantragt{background:rgba(216,167,57,.12);color:#ffd67f}
.status.genehmigt{background:rgba(81,185,137,.12);color:#98f1c3}
.status.abgelehnt{background:rgba(222,103,103,.12);color:#ffc5c5}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stats-grid>div,.mini-stat{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.stats-grid span,.mini-stat span{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}
.stats-grid strong,.mini-stat strong{font-size:28px}
.top-gap{margin-top:24px}
.holiday-list{display:flex;flex-wrap:wrap;gap:10px}
.post-card,.post-teaser{padding:18px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.post-teaser,.post-card{display:grid;gap:10px}
.post-card h3,.post-teaser h3{margin:0}
.post-meta{color:var(--muted);font-size:13px}
.timeline{display:grid;gap:12px;margin-top:18px}
.timeline-item{padding:14px 16px;border-left:3px solid var(--accent);background:rgba(255,255,255,.025);border-radius:0 14px 14px 0}
.calendar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.month-card{padding:14px;border-radius:16px;background:#1b1b1b;border:1px solid var(--border-soft);display:grid;gap:8px;min-height:150px}
.month-card h4{margin:0;font-size:15px}
.calendar-item{padding:7px 9px;border-radius:10px;background:#262626;border:1px solid #363636;font-size:12px;line-height:1.35;display:grid;gap:2px}
.calendar-item strong{display:block;margin-bottom:1px}
.compact-calendar-item{gap:1px}
.calendar-item-range{color:var(--muted)}
.empty-state{color:#8f8f8f;font-size:13px}
.split-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.print-body{background:#ffffff;color:#111;margin:0}
.print-page{width:210mm;min-height:297mm;margin:0 auto;padding:11mm 12mm}
.print-copy{height:132mm;border:1px solid #2d2d2d;padding:8mm 9mm 7mm;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8mm}
.print-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.print-logo{max-width:62mm;max-height:18mm;width:auto;height:auto}
.print-title-box{text-align:right}
.print-title{font-size:22px;font-weight:700;margin:0}
.print-subtitle{font-size:11px;color:#444;margin-top:4px}
.print-row{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:5mm;align-items:end;font-size:14px}
.print-row.single{grid-template-columns:auto 1fr}
.print-line{border-bottom:1px solid #111;min-height:8mm;padding:0 0 1.5mm}
.print-note{border:1px solid #666;min-height:26mm;padding:4mm;font-size:13px}
.print-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:9mm;align-items:end}
.print-signatures .sign-line{height:16mm;border-bottom:1px solid #111}
.print-signatures small{display:block;margin-top:3mm;font-size:11px}
.cut-line{position:relative;margin:7mm 0;border-top:2px dashed #767676;text-align:center}
.cut-line span{position:relative;top:-10px;background:#fff;padding:0 10px;font-size:11px;color:#555}
@media (max-width:1180px){.layout{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5}.cards-4,.cards-3,.two,.two-uneven,.split-hero,.calendar-grid,.stats-grid,.stack-2,.login-shell{grid-template-columns:1fr}.content{padding:20px}.topbar{flex-direction:column}}
@media print{.cut-line{page-break-inside:avoid}}
.top-gap-sm{margin-top:14px}
.quick-access-wide{width:100%}
.section-actions{justify-content:flex-start;margin-top:14px}
.mini-list{display:grid;gap:10px}
.timeline-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.wrap-actions{flex-wrap:wrap}

.login-badge,.header-badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(255,221,0,.12);border:1px solid rgba(255,221,0,.22);color:#fff2a4;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.header-badge{margin-bottom:10px}
.app-footer{margin-top:28px;padding:16px 0 6px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}
@media (max-width:1180px){.app-footer{flex-direction:column}}
.profile-link{color:var(--accent);text-decoration:none;font-weight:600}
.profile-link:hover{text-decoration:underline}
.user-search-form input{max-width:340px}
.status-history summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none}
.status-history summary::-webkit-details-marker{display:none}
.status-history summary::before{content:'▸ ';display:inline-block;color:var(--accent)}
.status-history[open] summary::before{content:'▾ '}
.small-note{font-size:.75em;color:var(--muted)}
.profile-metrics .card{padding:18px}

/* --- leichte Modernisierung / Feinschliff --- */
.card,
.login-card,
.post-card,
.post-teaser,
.month-card,
.stats-grid>div,
.mini-stat,
.timeline-row,
.panel{
    backdrop-filter: blur(2px);
}

.card,
.login-card{
    border-color: rgba(255,255,255,.09);
}

.button{
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.20);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.button:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.button.ghost{
    background: rgba(255,255,255,.03);
}

.button.ghost:hover{
    background: rgba(255,255,255,.07);
}

input,
select,
textarea{
    background: linear-gradient(180deg,#111111,#171717);
    border-color: rgba(255,255,255,.11);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline: none;
    border-color: rgba(255,221,0,.45);
    box-shadow: 0 0 0 4px rgba(255,221,0,.10);
}

.table-wrap{
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
}

table.table{
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.table th{
    position: sticky;
    top: 0;
    background: #1c1c1c;
    z-index: 1;
}

.table th,
.table td{
    padding: 14px 12px;
}

.table tbody tr{
    transition: background .12s ease;
}

.table tbody tr:hover{
    background: rgba(255,255,255,.03);
}

.table tbody tr:last-child td{
    border-bottom: none;
}

.post-card,
.post-teaser,
.month-card,
.timeline-row{
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.profile-link,
.user-link,
a.profile-link,
a.user-link{
    color: #ffffff;
    font-weight: 600;
}

.profile-link:hover,
.user-link:hover,
a.profile-link:hover,
a.user-link:hover{
    color: #ffffff;
    text-decoration: underline;
}

.status-history summary{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.status-history summary:hover{
    color: #e2e2e2;
}

.flash,
.pill,
.status,
.nav-link,
.calendar-item,
.user-chip,
.panel,
.post-card,
.post-teaser,
.month-card,
.timeline-item,
.timeline-row{
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.login-shell.compact{
    max-width: 560px;
}

.login-actions{
    margin-top: 18px;
    text-align: center;
}

.login-actions a{
    color: #d9e6f7;
    font-weight: 600;
    text-decoration: none;
}

.login-actions a:hover{
    text-decoration: underline;
}

.auth-logo-wrap{
    margin: 0 0 18px;
}

.auth-logo{
    max-width: 180px;
    height: auto;
}

.button-row.wrap{
    flex-wrap: wrap;
}


.users-table-wrap{
    overflow-x:auto;
    overflow-y:visible;
}

.users-table{
    min-width: 760px;
}

.users-actions-col,
.users-actions-cell{
    width:1%;
    white-space:nowrap;
    text-align:right;
}

.user-actions{
    display:flex;
    justify-content:flex-end;
}

.user-actions-trigger{
    min-width: 96px;
}

.user-actions-portal{
    position:absolute;
    z-index:10000;
    min-width:210px;
    background:#1b1b1b;
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    padding:8px;
}

.user-actions-portal[hidden]{
    display:none;
}

.user-actions-item{
    display:flex;
    align-items:center;
    width:100%;
    padding:10px 12px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.user-actions-item:hover{
    background:rgba(255,255,255,.06);
}

.user-actions-item.danger{
    color:#ffc5c5;
}

.user-actions-item.danger:hover{
    background:rgba(222,103,103,.12);
}

.user-actions-form{
    margin:0;
}

@media (max-width: 900px){
    .users-table{
        min-width:680px;
    }
}


.event-list-card{
    display:grid;
    gap:0;
}
.event-section + .event-section{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.10);
}
.event-section .section-title{
    margin-bottom:18px;
}
.event-card{
    padding:18px 0;
}
.event-card:first-of-type{
    padding-top:6px;
}
.event-card-content{
    display:grid;
    gap:10px;
}
.event-card-content h3{
    margin:0;
}
.event-card-content p{
    margin:0;
}
.event-section-past .section-title{
    margin-bottom:20px;
}

/* Druckansicht Urlaubsantrag: kompakter Signaturbereich */
.print-copy{grid-template-rows:auto auto auto 1fr auto}
.print-signatures.compact{margin-top:2mm;align-items:start}
.print-signatures.compact > div{display:flex;flex-direction:column;justify-content:flex-start}
.print-signatures.compact .sign-line{height:10mm;border-bottom:1px solid #111}
.print-signatures.compact small{margin-top:2mm;min-height:4mm;line-height:1.2}


.dashboard-notifications {
    display: grid;
    gap: 12px;
}

.dashboard-notice {
    border-radius: 16px;
    padding: 14px 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    font-weight: 600;
}

.dashboard-notice.info {
    border-left: 4px solid #2563eb;
}

.dashboard-notice.success {
    border-left: 4px solid #16a34a;
}

.dashboard-notice.warning {
    border-left: 4px solid #f59e0b;
}

.dashboard-notice.accent {
    border-left: 4px solid #7c3aed;
}


.notification-bell{position:relative;display:flex;align-items:center}
.notification-bell-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.notification-bell-button:hover,.notification-bell.open .notification-bell-button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.notification-bell-icon{font-size:20px;line-height:1}
.notification-bell-dot{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:999px;background:#ff4d4f;box-shadow:0 0 0 3px #1d1d1d}
.notification-panel{position:absolute;top:56px;right:0;width:min(420px,calc(100vw - 32px));max-height:480px;overflow:auto;padding:0;border-radius:20px;background:linear-gradient(180deg,#232323,#181818);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 40px rgba(0,0,0,.4);z-index:2000}
.notification-panel-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:linear-gradient(180deg,#232323,#1e1e1e)}
.notification-panel-header strong{font-size:15px}
.notification-panel-header span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.notification-list{display:grid}
.notification-item{display:grid;grid-template-columns:10px 1fr;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.notification-item:last-child{border-bottom:none}
.notification-item.is-new{background:rgba(255,255,255,.03)}
.notification-type{width:10px;height:10px;border-radius:999px;margin-top:6px;background:rgba(255,255,255,.2)}
.notification-type.info{background:#8ab4ff}
.notification-type.success{background:#51b989}
.notification-type.warning{background:#d8a739}
.notification-type.accent{background:#ffdd00}
.notification-content{display:grid;gap:6px}
.notification-message{font-size:14px;line-height:1.45}
.notification-meta{font-size:12px;color:var(--muted)}
.notification-empty{padding:20px 18px;color:var(--muted);font-size:14px}
@media (max-width:1180px){.notification-panel{right:auto;left:0;width:min(420px,calc(100vw - 40px))}}
@media (max-width:640px){.topbar-right{width:100%;justify-content:space-between}.notification-panel{left:0;right:auto;width:min(100%,calc(100vw - 40px))}}

.form-card-toggle .form-toggle-panel{
    display:none;
}

.form-card-toggle.is-open .form-toggle-panel,
.form-toggle-panel.is-visible{
    display:block;
}

.form-toggle-button{
    align-self:flex-start;
}

.compact-checkline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-size:14px;
}

.compact-checkline input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--accent);
}

.split-actions{
    justify-content:space-between;
}

.request-tabs{
    gap:8px;
}

.calendar-section-header{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.calendar-switcher{
    justify-content:flex-end;
}

.calendar-switcher-wrap{display:grid;gap:10px;justify-items:end}
.calendar-picker-form{display:flex;gap:12px;align-items:end;justify-content:flex-end;flex-wrap:wrap}
.calendar-picker-fields{display:flex;gap:12px;align-items:end;flex-wrap:wrap;justify-content:flex-end}
.calendar-picker-field{display:grid;gap:6px;min-width:160px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.calendar-picker-field span{display:block}
.calendar-picker-select{min-width:160px;max-width:100%;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,221,0,.22);background:linear-gradient(180deg,rgba(44,44,44,.96),rgba(28,28,28,.96));color:var(--text);font:inherit;box-shadow:0 10px 24px rgba(0,0,0,.14);appearance:none}
.calendar-picker-select option{background:#1b1b1b;color:var(--text)}
.calendar-picker-select:focus{outline:none;border-color:rgba(255,221,0,.45);box-shadow:0 0 0 3px rgba(255,221,0,.12)}
.calendar-picker-submit{align-self:end;min-width:120px}

@media (max-width: 900px){
    .split-actions,
    .calendar-section-header{
        flex-direction:column;
        align-items:stretch;
    }

    .calendar-switcher{
        justify-content:flex-start;
    }
}


.page-wide-card{width:100%}
.form-page-card{max-width:960px;margin:0 auto}
.page-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.topbar-main{display:flex;align-items:flex-start;gap:14px}
.mobile-nav-toggle{display:none;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mobile-nav-toggle span{display:block;height:2px;border-radius:999px;background:var(--text)}
.mobile-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:80}
.users-table-wrap,.event-list-card,.page-wide-card{overflow:visible}

@media (max-width:1180px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(320px,84vw);transform:translateX(-100%);transition:transform .22s ease;z-index:90;border-radius:0 24px 24px 0;max-height:none;overflow:auto}
  .sidebar.is-open{transform:translateX(0)}
  .content{padding:20px}
  .topbar{flex-direction:column;gap:18px}
  .topbar-right{width:100%;justify-content:space-between;flex-wrap:wrap}
  .topbar-main{width:100%}
  .mobile-nav-toggle{display:inline-flex;flex:0 0 auto}
  body.mobile-nav-open{overflow:hidden}
  .cards-4,.cards-3,.two,.two-uneven,.split-hero,.calendar-grid,.stats-grid,.stack-2,.login-shell{grid-template-columns:1fr}
  .page-header-row{align-items:stretch}
}
@media (max-width:640px){
  .topbar-main{align-items:center}
  .page-header-row .button{width:100%}
  .notification-panel{left:0;right:auto;width:min(100%,calc(100vw - 40px))}
}


.notification-panel-close{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text);font-size:22px;line-height:1;cursor:pointer;flex:0 0 auto}
.notification-panel-close:hover{background:rgba(255,255,255,.08)}
.notification-panel-header div{display:grid;gap:2px}

@media (max-width:640px){
  .notification-bell{position:static}
  .notification-panel{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;width:100vw;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;z-index:2200;padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);background:linear-gradient(180deg,#191919,#111111)}
  .notification-panel-header{padding:18px 20px 14px;gap:12px}
  .notification-panel-header strong{font-size:18px}
  .notification-panel-close{display:inline-flex}
  .notification-list{padding-bottom:18px}
  .notification-item{padding:16px 20px}
  .notification-empty{padding:24px 20px}
  body.notification-panel-open{overflow:hidden}
}

/* Urlaubübersicht angepasst an Accent */
.vacation-overview-entry{
    background: rgba(255,221,0,.12);
    color: #fff4a7;
    border: 1px solid rgba(255,221,0,.25);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.vacation-overview-entry strong{
    color: #ffffff;
}

.vacation-overview-entry .calendar-item-range{
    color: #fff4a7;
}


/* --- Mobile Fix: Urlaubsanträge als vertikale Karten statt breite Tabelle --- */
@media (max-width: 760px){
  .table-wrap{
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
  }

  .table-wrap table.table{
    min-width: 0;
    width: 100%;
    border-spacing: 0;
  }

  .table-wrap table.table thead{
    display: none;
  }

  .table-wrap table.table,
  .table-wrap table.table tbody,
  .table-wrap table.table tr,
  .table-wrap table.table td{
    display: block;
    width: 100%;
  }

  .table-wrap table.table tbody{
    display: grid;
    gap: 14px;
  }

  .table-wrap table.table tr{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 14px;
  }

  .table-wrap table.table tr.subrow{
    margin-top: -8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 8px;
  }

  .table-wrap table.table td{
    border: 0;
    padding: 8px 0;
    min-width: 0;
    white-space: normal;
  }

  .table-wrap table.table tr:not(.subrow) td[data-label]::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .table-wrap .button-row.wrap-actions{
    justify-content: flex-start;
  }

  .table-wrap .button-row.wrap-actions .button{
    width: 100%;
  }

  .table-wrap table.table tr:hover{
    background: rgba(255,255,255,.03);
  }

  .subrow td{
    padding-top: 0;
  }
}


/* --- Personal: monatsbasierter Urlaubskalender --- */
.vacation-month-card{overflow:hidden}
.vacation-month-toolbar{align-items:center}
.vacation-month-stats .metric{min-height:auto}
.desktop-only-calendar{display:block}
.mobile-only-vacation-list{display:none}
.vacation-month-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;color:var(--muted)}
.legend-chip{display:inline-block;width:16px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle;background:rgba(255,221,0,.72);border:1px solid rgba(255,221,0,.28)}
.legend-chip.half-am{background:linear-gradient(90deg, rgba(255,221,0,.82) 50%, rgba(255,255,255,.06) 50%)}
.legend-chip.half-pm{background:linear-gradient(90deg, rgba(255,255,255,.06) 50%, rgba(255,221,0,.82) 50%)}
.vacation-planner-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:rgba(255,255,255,.02)}
.vacation-planner{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}
.vacation-planner th,.vacation-planner td{border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.vacation-planner thead th{position:sticky;top:0;z-index:2;background:#1b1b1b}
.vacation-planner .vacation-person-col{position:sticky;left:0;z-index:3;min-width:220px;max-width:220px;padding:12px 14px;text-align:left;background:#1b1b1b}
.vacation-planner tbody .vacation-person-col{background:#171717}
.vacation-planner .vacation-person-col strong{display:block}
.vacation-planner .vacation-person-col small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:500}
.vacation-day-head{width:36px;min-width:36px;padding:8px 4px;text-align:center}
.vacation-day-head span{display:block;font-size:12px;font-weight:700;color:#fff}
.vacation-day-head small{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.72)}
.vacation-day-cell{width:36px;min-width:36px;height:36px;background:rgba(255,255,255,.015)}
.vacation-day-cell.is-vacation{background:rgba(255,221,0,.72)}
.vacation-day-cell.state-half-am{background:linear-gradient(90deg, rgba(255,221,0,.82) 50%, rgba(255,255,255,.04) 50%)}
.vacation-day-cell.state-half-pm{background:linear-gradient(90deg, rgba(255,255,255,.04) 50%, rgba(255,221,0,.82) 50%)}
.vacation-month-list-grid{display:grid;gap:10px}
.vacation-list-entry{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.vacation-list-entry-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.vacation-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(255,221,0,.14);border:1px solid rgba(255,221,0,.24);color:#fff3a2;font-size:12px;font-weight:700}
.vacation-badge.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-title.small{font-size:15px}

@media (max-width: 760px){
  .desktop-only-calendar{display:none}
  .mobile-only-vacation-list{display:block}
  .vacation-month-toolbar{align-items:stretch}
  .calendar-switcher-wrap,.calendar-picker-form{justify-items:stretch}
  .calendar-picker-form{display:grid}
  .calendar-picker-fields{display:grid;grid-template-columns:1fr;justify-content:stretch}
  .calendar-picker-field,.calendar-picker-select,.calendar-picker-submit{min-width:0;width:100%}
  .vacation-month-toolbar .calendar-switcher .button{width:100%}
  .vacation-month-list-grid{gap:8px}
  .vacation-list-entry{display:grid;gap:8px;padding:12px 14px}
  .vacation-list-entry-meta{justify-content:flex-start}
}


/* vacation calendar refinements */
.vacation-month-toolbar{
    align-items:flex-start;
}
.calendar-switcher-wrap{
    display:grid;
    gap:10px;
    justify-items:start;
}
.calendar-picker-form{
    width:100%;
}
.calendar-picker-fields{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:end;
}
.calendar-picker-field{
    min-width:150px;
}
.calendar-picker-field span{
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.calendar-picker-select{
    min-width:150px;
    background:linear-gradient(180deg,#1a1a1a,#222222);
    color:var(--text);
    border:1px solid rgba(255,255,255,.12);
}
.calendar-picker-submit{
    margin-top:0;
}
.calendar-switcher{
    justify-content:flex-start;
}
.vacation-day-head,
.vacation-day-cell{
    position:relative;
}
.holiday-marker{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    border-radius:999px 999px 0 0;
    background:#4aa8ff;
    pointer-events:none;
}
.vacation-day-head .holiday-marker{
    top:0;
}
.vacation-day-cell .holiday-marker{
    top:0;
}
.legend-chip.holiday{
    background:#4aa8ff;
    border-color:#4aa8ff;
}
@media (max-width:1180px){
    .calendar-picker-fields{
        align-items:stretch;
    }
    .calendar-picker-field{
        min-width:unset;
        flex:1 1 160px;
    }
}


/* keep month/year picker left aligned */
.calendar-switcher-wrap{
    display:grid;
    gap:10px;
    justify-items:start !important;
}
.calendar-picker-form{
    width:100%;
    display:block !important;
    margin-left:0 !important;
}
.calendar-picker-fields{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:end;
    justify-content:flex-start !important;
}
.calendar-switcher{
    justify-content:flex-start !important;
}

/* weekday/date header styling */
.vacation-day-head span{
    display:block;
    font-size:11px;
    line-height:1.1;
}
.vacation-day-head strong{
    display:block;
    font-size:14px;
    line-height:1.1;
    margin-top:2px;
    font-weight:700;
}

/* ensure holiday marker only appears in the top header row */
.vacation-day-head .holiday-marker{
    display:block !important;
}
.vacation-day-cell .holiday-marker{
    display:none !important;
}


/* mobile header cleanup: only bell on the right, hide brand logos */
@media (max-width:1180px){
  .topbar-right{
    position:absolute;
    top:0;
    right:0;
    width:auto;
    justify-content:flex-end;
    flex-wrap:nowrap;
    min-height:46px;
  }
  .topbar-main{
    padding-right:64px;
  }
  .topbar-logo{
    display:none !important;
  }
}

@media (max-width:640px){
  .topbar-main{
    padding-right:64px;
    align-items:flex-start;
  }
  .topbar-right{
    position:absolute;
    top:0;
    right:0;
    width:auto;
  }
  .topbar-logo{
    display:none !important;
  }
}


/* --- FINAL FIX: Title below hamburger & bell --- */
@media (max-width:1180px){
  .topbar{
    position: relative;
  }

  .topbar-main{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    min-height:46px;
    padding-right:64px;
    gap:10px;
  }

  /* force title block to full width BELOW icons */
  .topbar-main > div{
    flex: 0 0 100%;
    order: 2;
  }

  .mobile-nav-toggle{
    order:1;
  }

  .topbar-right{
    position:absolute;
    top:0;
    right:0;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
}

@media (max-width:640px){
  .topbar-main{
    flex-wrap:wrap;
  }
}


/* Dashboard: neue Beiträge und Events */
.post-teaser.is-new,
.event-card.is-new{
    border:1px solid rgba(255,221,0,.45);
    border-radius:16px;
    padding:14px;
    margin-bottom:12px;
}

.post-teaser.is-new:last-child,
.event-card.is-new:last-child{
    margin-bottom:0;
}

.new-indicator{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:fit-content;
    margin:0 0 8px 0;
    font-size:12px;
    font-weight:700;
    color:#f5dd63;
    line-height:1;
}

.new-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#ffdd00;
    display:inline-block;
    box-shadow:0 0 0 0 rgba(255,221,0,.50);
    animation:newDotPulse 1.8s ease-in-out infinite;
}

@keyframes newDotPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,221,0,.45);
    }
    50%{
        transform:scale(1.18);
        box-shadow:0 0 0 6px rgba(255,221,0,0);
    }
}


.intranet-module-card{overflow:hidden}.module-frame-wrap{border:1px solid rgba(148,163,184,.16);border-radius:18px;overflow:hidden;background:#141414;padding:16px}.module-frame{width:100%;min-height:320px;border:0;display:block;background:#141414;border-radius:12px}.page-wide-card{width:100%}