/* Copyright by SyncroOPS GbR, Marcus Hinz */
:root{--brown:#24170f;--brown2:#4a3021;--cream:#f4efe8;--paper:#fffdf9;--orange:#f2942f;--red:#cf3f35;--green:#2f9e62;--blue:#2878b8;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:#17120f}button,input,select,textarea{font:inherit;min-height:48px}.app-header{padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;background:linear-gradient(135deg,#18100b,var(--brown2));position:sticky;top:0;z-index:10}.brand,.header-actions,.topline,.actions,.modal-actions{display:flex;align-items:center;gap:12px}.brand h1,.section-header h2{margin:0}.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:900;opacity:.7}.club-logo{width:70px;height:70px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 4px 8px #0005)}.chip,.alarm-status{padding:12px 15px;border-radius:999px;font-weight:900}.chip{background:#ffffff18}.dashboard{display:grid;grid-template-rows:minmax(320px,1fr) minmax(320px,1fr);min-height:calc(100vh - 92px)}.task-section{padding:22px;overflow:auto}.sent{background:#eee6dc;border-bottom:4px solid var(--brown)}.received{background:var(--paper)}.section-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}.task-card{position:relative;padding:18px;border-radius:18px;background:#fff;border:2px solid #24170f20;box-shadow:0 10px 26px #24170f16;overflow:hidden}.task-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--orange)}.priority-high:before,.priority-urgent:before{background:var(--red)}.status-acknowledged:before,.status-in_progress:before{background:var(--blue)}.status-completed{background:#e5f6ec}.status-completed:before{background:var(--green)}.status-cancelled{opacity:.65}.is-new{animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px #f2942f30}}.topline{justify-content:space-between}.badge{padding:7px 10px;border-radius:999px;background:#eee;font-size:.75rem;font-weight:900}.task-card h3{font-size:1.25rem}.meta{display:grid;gap:4px;color:#746a63;font-size:.86rem}.actions{flex-wrap:wrap;margin-top:16px}.button{border:0;border-radius:12px;padding:10px 16px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.large{min-height:54px}.primary{background:var(--brown);color:#fff}.secondary{background:#ffffff20;color:#fff}.ghost{background:#00000010}.app-header .ghost{color:#fff}.info{background:var(--blue);color:#fff}.success{background:var(--green);color:#fff}.danger{background:var(--red);color:#fff}.alarm-status{background:#e8eee9}.alarm-status.active{background:var(--red);color:#fff}.empty{padding:60px;text-align:center;border:2px dashed #24170f30;border-radius:18px;color:#746a63}.login-page,.no-matchday{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#18100b,var(--brown2))}.login-card,.no-matchday>div{width:min(560px,100%);padding:34px;border-radius:24px;background:var(--paper)}.form-stack,.modal-card,.form-grid{display:grid;gap:18px}.login-card label,.modal-card label,.form-grid label{display:grid;gap:7px;font-weight:900}input,select,textarea{width:100%;padding:12px;border:2px solid #24170f25;border-radius:12px;background:#fff}.hint,.return-reason{padding:12px;border-radius:10px;background:#fff4df}.modal{width:min(700px,calc(100vw - 24px));border:0;border-radius:20px;padding:0}.modal::backdrop{background:#18100bc0}.modal-card{padding:24px}.modal-header{display:flex;justify-content:space-between}.modal-header button{width:48px;border:0;border-radius:50%;font-size:2rem}.modal-actions{justify-content:flex-end}.toast{position:fixed;right:18px;bottom:18px;z-index:100;padding:14px 18px;background:var(--brown);color:#fff;border-radius:12px;opacity:0;transform:translateY(20px);transition:.2s}.toast.show{opacity:1;transform:none}.admin-page{padding:24px;display:grid;gap:20px}.admin-card{background:#fff;padding:22px;border-radius:18px;box-shadow:0 10px 26px #24170f12}.form-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #ddd}.link-button{color:#fff}.no-matchday{color:#fff;text-align:center}@media(max-width:850px){.app-header,.section-header{align-items:flex-start;flex-direction:column}.dashboard{min-height:auto}.task-grid{grid-template-columns:1fr}.header-actions{flex-wrap:wrap}}
/* Version 3: markanter Alarm */
.alarm-status.active{
    background:#b3131b;
    color:#fff;
    border:3px solid #fff;
    box-shadow:0 0 0 5px #b3131b55,0 0 28px #d71920aa;
    animation:alarmBadge 1s ease-in-out infinite;
}
@keyframes alarmBadge{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.045)}
}
.task-card.is-new{
    border-color:#cf1f2b;
    background:linear-gradient(135deg,#fff,#ffe4e5);
    animation:newTaskAlarm 1.15s ease-in-out infinite;
}
@keyframes newTaskAlarm{
    0%,100%{box-shadow:0 0 0 0 #d7192055,0 10px 26px #24170f16;transform:translateY(0)}
    50%{box-shadow:0 0 0 9px #d7192038,0 18px 34px #8d101f35;transform:translateY(-2px)}
}
body.alarm-active .received{
    box-shadow:inset 0 0 0 5px #cf1f2b;
}
body.alarm-active .app-header{
    background:linear-gradient(135deg,#18100b,#6b161b);
}

.version-label{font-size:.55em;opacity:.7;vertical-align:middle}

/* Version 4 – Leitstellen-Dashboard */
.matchday-bar{
    display:grid;
    grid-template-columns:repeat(5,minmax(140px,1fr));
    gap:12px;
    padding:14px 22px;
    background:#1d130d;
    color:#fff;
    border-top:1px solid #ffffff18;
}
.matchday-bar>div{
    padding:12px 14px;
    border-radius:12px;
    background:#ffffff0d;
    border:1px solid #ffffff12;
}
.matchday-label{
    display:block;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.65;
    margin-bottom:4px;
}
.system-ok{color:#61dd94}
.stats-board{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    padding:18px 22px;
    background:#d8cec2;
}
.stat-card{
    min-height:104px;
    border:0;
    border-radius:18px;
    padding:16px 18px;
    text-align:left;
    cursor:pointer;
    box-shadow:0 8px 18px #24170f18;
    transition:.18s ease;
}
.stat-card span{display:block;font-weight:800;opacity:.78}
.stat-card strong{display:block;font-size:2.5rem;margin-top:6px}
.stat-card.active{transform:translateY(-3px);box-shadow:0 12px 26px #24170f2b}
.stat-new{background:#ffe0e0}
.stat-progress{background:#e4efff}
.stat-completed{background:#def3e7}
.stat-all{background:#fff}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.priority-badge{
    padding:7px 10px;border-radius:999px;font-size:.72rem;font-weight:900;text-transform:uppercase
}
.priority-normal{background:#f0e5d8;color:#553b28}
.priority-high{background:#ffe2d2;color:#8b3e0b}
.priority-urgent{background:#ffd5d5;color:#8f1717}
.priority-immediate{background:#a60f18;color:#fff}
.location-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    margin:0 0 10px;
    border-radius:10px;
    background:#f3eee8;
    font-weight:800;
}
.open-timer{
    margin:12px 0;
    padding:10px 12px;
    border-radius:10px;
    background:#fff3d6;
    border:1px solid #efc46f;
}
.escalation-banner{
    margin:10px 0;
    padding:10px 12px;
    border-radius:10px;
    background:#b3131b;
    color:#fff;
    font-weight:900;
}
.escalation-2{border-color:#c04a1d}
.escalation-3{
    border-color:#a60000;
    box-shadow:0 0 0 5px #a6000022,0 18px 36px #8b101f35
}
.comment-list{
    display:grid;
    gap:8px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #ddd;
}
.comment-item{
    padding:10px 12px;
    border-radius:10px;
    background:#f6f4f1;
}
.comment-item span{display:block;color:#746a63;font-size:.78rem;margin-top:2px}
.comment-item p{margin:7px 0 0}
.version-label{font-size:.5em;padding:3px 6px;border-radius:6px;background:#ffffff18}
@media(max-width:1100px){
    .matchday-bar{grid-template-columns:repeat(2,1fr)}
    .stats-board{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
    .matchday-bar,.stats-board{grid-template-columns:1fr}
}

/* Version 4.1 */
.dashboard{grid-template-rows:minmax(340px,1fr) minmax(300px,1fr)}
.received{order:1;border-bottom:4px solid var(--brown)}
.sent{order:2;border-bottom:0}

/* Version 4.3 – kompaktere Leitstellenansicht */
.stats-board{
    gap:10px;
    padding:10px 18px;
}
.stat-card{
    min-height:66px;
    padding:9px 14px;
    border-radius:14px;
}
.stat-card span{
    font-size:.82rem;
    line-height:1.1;
}
.stat-card strong{
    font-size:1.75rem;
    line-height:1;
    margin-top:4px;
}
.stat-card.active{
    transform:translateY(-1px);
}

.task-section{
    padding:14px 18px;
}
.section-header{
    margin-bottom:10px;
}
.section-header h2{
    font-size:1.45rem;
}
.task-grid{
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:11px;
}
.task-card{
    padding:13px 14px;
    border-radius:15px;
}
.task-card h3{
    margin:11px 0 7px;
    font-size:1.08rem;
    line-height:1.2;
}
.task-card p{
    margin:7px 0;
    font-size:.9rem;
    line-height:1.35;
}
.topline{
    gap:8px;
    font-size:.82rem;
}
.badge-row{
    gap:5px;
}
.badge,
.priority-badge{
    padding:5px 8px;
    font-size:.65rem;
}
.location-chip{
    padding:6px 8px;
    margin-bottom:7px;
    font-size:.82rem;
}
.open-timer,
.escalation-banner,
.return-reason{
    margin:7px 0;
    padding:7px 9px;
    font-size:.82rem;
}
.meta{
    gap:2px;
    font-size:.76rem;
}
.actions{
    gap:6px;
    margin-top:10px;
}
.actions .button{
    min-height:40px;
    padding:7px 11px;
    font-size:.78rem;
}
.comment-list{
    gap:6px;
    margin-top:9px;
    padding-top:8px;
}
.comment-item{
    padding:7px 9px;
    font-size:.82rem;
}
.button.alarm-disabled{
    opacity:.72;
    background:#ffffff0d;
}

/* Version 5 */
.stats-board{grid-template-columns:repeat(5,1fr)}
.stat-critical{background:#ffd9bf}
.attachment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.attachment-grid img{width:100%;height:86px;object-fit:cover;border-radius:9px;border:1px solid #ddd}
.command-page{padding:20px;display:grid;grid-template-columns:2fr 1fr;gap:20px}
.command-clock{font-size:1.8rem;font-weight:900}
.department-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.department-tile{background:#fff;border-radius:18px;padding:16px;border-left:10px solid var(--dept);box-shadow:0 10px 24px #0001}
.department-tile h3{margin-top:0}
.department-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.department-metrics div{background:#f3eee8;padding:9px;border-radius:9px;text-align:center}
.department-metrics span{display:block;font-size:.68rem}.department-metrics strong{font-size:1.5rem}
.critical-panel{background:#fff5f3;padding:16px;border-radius:18px}
.critical-list{display:grid;gap:10px}.critical-card{background:#fff;padding:13px;border-radius:12px;border-left:7px solid #c21d27}.critical-card span{display:block;color:#777;font-size:.78rem}
.check-page{padding:22px;display:grid;gap:18px}.progress-card{background:#fff;padding:20px;border-radius:18px}.progress-card strong{display:block;font-size:2.2rem}.progress-track{height:18px;background:#e5ddd5;border-radius:999px;overflow:hidden}.progress-track div{height:100%;background:#2f9e62}
.checklist-items{display:grid;gap:10px}.check-item{display:flex;align-items:center;gap:14px;background:#fff;padding:16px;border-radius:14px;font-weight:800}.check-item input{width:26px;height:26px}.check-item small{display:block;color:#777;margin-top:3px}.check-item.done{background:#e4f5eb;text-decoration:none}
@media(max-width:1100px){.stats-board{grid-template-columns:repeat(2,1fr)}.command-page{grid-template-columns:1fr}}

/* Version 5.6 – 80%-Darstellung und echte geteilte Aufgabenansicht */

/*
   Browser-Zoom kann aus Sicherheitsgründen nicht zuverlässig per Webseite
   gesetzt werden. CSS zoom erzeugt hier das gleiche optische Ergebnis.
*/
html{
    zoom:.8;
}

/* Durch die 80%-Skalierung wird die nutzbare Layoutbreite ausgeglichen. */
body{
    width:125%;
    min-height:125vh;
}

/*
   Dashboard nutzt die verbleibende sichtbare Fensterhöhe.
   Eingang und Ausgang bleiben gleichzeitig sichtbar und scrollen getrennt.
*/
.dashboard{
    height:calc(125vh - 300px);
    min-height:620px;
    display:grid;
    grid-template-rows:minmax(260px,1fr) minmax(240px,1fr);
    overflow:hidden;
}

.task-section{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
}

.received{
    border-bottom:4px solid var(--brown);
}

.sent{
    border-bottom:0;
}

.task-section .section-header{
    position:sticky;
    top:0;
    z-index:5;
    margin:-14px -18px 10px;
    padding:12px 18px 9px;
    background:inherit;
    box-shadow:0 5px 12px rgba(36,23,15,.08);
}

/* Kompaktere Karten, damit in beiden Hälften mehr Inhalt sichtbar ist. */
.task-grid{
    grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
    align-content:start;
}

.task-card{
    min-height:auto;
}

@media(max-width:1100px){
    html{zoom:.85}
    body{width:117.647%;min-height:117.647vh}
    .dashboard{
        height:auto;
        min-height:0;
        grid-template-rows:minmax(340px,55vh) minmax(300px,45vh);
        overflow:visible;
    }
}

@media(max-width:700px){
    html{zoom:1}
    body{width:100%;min-height:100vh}
    .dashboard{
        grid-template-rows:auto auto;
    }
    .task-section{
        max-height:none;
        overflow:visible;
    }
}

/* Version 5.7 – optimierte Aufteilung und korrigierte Kopfzeile */

/* Die 80%-Skalierung bleibt erhalten, ohne die Seite künstlich zu verbreitern. */
body{
    width:auto !important;
    min-height:125vh;
    overflow-x:hidden;
}

/* Menü bleibt innerhalb der sichtbaren Breite. */
.app-header{
    flex-wrap:wrap;
    width:100%;
}
.app-header .brand{
    min-width:280px;
    flex:1 1 420px;
}
.header-actions{
    flex:1 1 520px;
    justify-content:flex-end;
    max-width:100%;
}
.header-actions .button,
.header-actions .chip{
    flex:0 0 auto;
}

/* Eingang erhält klar den größeren Bildschirmanteil. */
.dashboard{
    height:calc(125vh - 300px);
    min-height:650px;
    grid-template-rows:minmax(390px,72fr) minmax(180px,28fr);
}

/* Empfangene Aufgaben stehen im Mittelpunkt. */
.received{
    min-height:0;
}
.sent{
    min-height:0;
}

/* Ausgang etwas kompakter, aber weiterhin sichtbar und scrollbar. */
.sent .task-grid{
    grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
}
.sent .task-card{
    padding-top:11px;
    padding-bottom:11px;
}

/* Bei schmaleren Desktopfenstern umbrechen statt nach rechts herauszulaufen. */
@media(max-width:1450px){
    .header-actions{
        justify-content:flex-start;
    }
}

@media(max-width:1100px){
    body{
        width:auto !important;
        min-height:117.647vh;
    }
    .dashboard{
        height:auto;
        grid-template-rows:minmax(420px,65vh) minmax(260px,35vh);
    }
}

/* Version 0.9 Beta */
.profile-page{width:min(980px,calc(100% - 36px));margin:24px auto;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);gap:20px}
.profile-card{background:#fff;padding:24px;border-radius:18px;box-shadow:0 10px 28px rgba(36,23,15,.12)}
.profile-summary{display:flex;gap:18px;align-items:center}.profile-avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--brown);color:#fff;font-size:2.2rem;font-weight:900}
.profile-summary h2{margin:2px 0 6px}.profile-summary p{margin:4px 0}.muted{color:#746a63}
.password-help{margin:0;padding:10px 12px;border-radius:10px;background:#f5efe8;color:#5f544c;font-size:.86rem}
.login-card .hint{display:none}@media(max-width:850px){.profile-page{grid-template-columns:1fr}}

/* Version 0.9.1 Beta – Menüzeile bleibt vollständig sichtbar */
.app-header{
    display:grid !important;
    grid-template-columns:minmax(360px,1fr) minmax(0,auto);
    align-items:center;
    gap:14px 22px;
    width:100%;
    max-width:100%;
    overflow:visible;
}

.app-header .brand{
    min-width:0;
    max-width:100%;
}

.app-header .brand > div:last-child{
    min-width:0;
}

.app-header .brand h1{
    white-space:normal;
    overflow-wrap:anywhere;
}

.header-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    min-width:0;
    max-width:100%;
    padding-right:10px;
}

.header-actions .button,
.header-actions .chip{
    flex:0 0 auto;
    white-space:nowrap;
}

#logout{
    margin-right:0;
}

@media(max-width:1500px){
    .app-header{
        grid-template-columns:1fr;
    }

    .header-actions{
        width:100%;
        justify-content:flex-start;
        padding-right:0;
    }
}

@media(max-width:900px){
    .app-header{
        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
    }

    .header-actions{
        justify-content:flex-start;
    }
}

/* 1.0 RC1 */
.user-identity{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:14px;background:#ffffff18;border:1px solid #ffffff20;min-width:0}
.user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brown);font-weight:900;flex:0 0 auto}
.user-identity strong,.user-identity span{display:block;line-height:1.1}.user-identity span{margin-top:3px;font-size:.72rem;opacity:.72}
.command-layout{min-height:calc(125vh - 90px);padding:18px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(360px,.8fr);gap:18px;background:#e9e1d8}
.command-main{min-width:0}.command-heading{margin-bottom:12px}
.department-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px}
.department-tile{width:100%;min-height:150px;border:0;border-left:10px solid var(--dept);border-radius:18px;padding:14px;text-align:left;background:#fff;cursor:pointer;box-shadow:0 8px 22px #24170f1a;transition:.16s ease}
.department-tile:hover,.department-tile.selected{transform:translateY(-2px);box-shadow:0 13px 28px #24170f2d}.department-tile.selected{outline:4px solid #24170f29}
.department-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.department-title-row h3{margin:0}
.workstation-status{padding:6px 8px;border-radius:999px;font-size:.68rem;font-weight:900;white-space:nowrap}.workstation-status.online{color:#176d41;background:#ddf5e7}.workstation-status.offline{color:#91251f;background:#ffe0dd}
.department-tile small{display:block;margin-top:10px;color:#71675f}
.department-detail{min-width:0;max-height:calc(125vh - 125px);overflow:auto;background:#fffdf9;border-radius:20px;box-shadow:0 10px 28px #24170f1f;padding:16px}
.detail-header{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 2px 14px;background:#fffdf9;border-bottom:1px solid #e0d8d0}.detail-header h2{margin:0}
.detail-placeholder{min-height:280px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:#746a63}
.department-task-list{display:grid;gap:10px;margin-top:12px}.detail-task{padding:13px;border-radius:14px;background:#fff;border:1px solid #ded6ce;border-left:7px solid var(--orange)}
.detail-task.priority-immediate,.detail-task.priority-urgent{border-left-color:var(--red)}.detail-task.status-completed{background:#e8f6ee;border-left-color:var(--green)}
.detail-task-top{display:flex;justify-content:space-between;gap:8px}.detail-task h3{margin:10px 0 7px}.critical-panel{margin-top:16px}
@media(max-width:1350px){.command-layout{grid-template-columns:1fr}.department-detail{max-height:none}}

/* 1.0 RC2 – gleichmäßige Bereiche und gemeinsames Seitenscrolling */
.dashboard{
    height:auto !important;
    min-height:0 !important;
    display:grid;
    grid-template-rows:minmax(420px,auto) minmax(420px,auto) !important;
    overflow:visible !important;
}

.task-section{
    min-height:420px !important;
    max-height:none !important;
    overflow:visible !important;
}

.received,
.sent{
    min-height:420px !important;
    overflow:visible !important;
}

.task-section .section-header{
    position:static !important;
    top:auto !important;
}

.sent .task-grid,
.received .task-grid{
    align-content:start;
}

/* Nur die gesamte Browserseite scrollt. */
html,
body{
    overflow-x:hidden;
    overflow-y:auto;
}

@media(max-width:1100px){
    .dashboard{
        grid-template-rows:minmax(360px,auto) minmax(360px,auto) !important;
    }
    .task-section,
    .received,
    .sent{
        min-height:360px !important;
    }
}

/* 1.0 RC5 – Archiv */
.archive-page{padding:18px;display:grid;gap:16px}
.archive-filter-card{background:#fff;padding:16px;border-radius:18px;box-shadow:0 8px 22px #24170f16}
.archive-filters{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;align-items:end}
.archive-filter-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px}
.archive-export{background:var(--brown);color:#fff}
.archive-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.archive-stats>div{background:#fff;padding:13px;border-radius:14px;box-shadow:0 6px 18px #24170f12}
.archive-stats span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#756a62}
.archive-stats strong{display:block;font-size:1.55rem;margin-top:4px}
.archive-results{display:grid;gap:13px}
.archive-task{background:#fff;padding:16px;border-radius:18px;border-left:8px solid var(--brown);box-shadow:0 8px 22px #24170f12;break-inside:avoid}
.archive-task-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.archive-task-head h2{margin:0;font-size:1.2rem}
.archive-route{display:flex;align-items:center;gap:10px;margin:10px 0;color:#5f554e}
.archive-description{white-space:pre-wrap}
.archive-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:7px;margin-top:12px;padding:11px;border-radius:12px;background:#f5f1ec;font-size:.8rem}
.archive-comments{margin-top:12px;padding-top:10px;border-top:1px solid #ddd}
.archive-comments>div{padding:8px 10px;margin-top:7px;border-radius:9px;background:#f6f4f1}
.archive-comments span{font-size:.72rem;color:#776c64}.archive-comments p{margin:4px 0 0}
@media(max-width:1000px){.archive-filters{grid-template-columns:repeat(2,1fr)}.archive-stats{grid-template-columns:repeat(2,1fr)}.archive-meta-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.archive-filters,.archive-stats,.archive-meta-grid{grid-template-columns:1fr}}
@media print{
 .app-header,.archive-filter-card,.toast{display:none!important}
 html{zoom:1!important}
 body{width:100%!important;min-height:auto!important;background:#fff}
 .archive-page{padding:0}.archive-task{box-shadow:none;border:1px solid #bbb;margin-bottom:10px}
 .archive-stats{grid-template-columns:repeat(5,1fr)}
}

/* SyncroOps 1.0 Final Candidate */
:root{--syncroops-red:#e21b23;--syncroops-red-dark:#b9131a;--syncroops-ink:#17191d;--syncroops-charcoal:#25282d;--syncroops-paper:#f7f7f6;--syncroops-line:#e1e2e4}
body{background:linear-gradient(135deg,#fafafa 0%,#f4f4f2 75%,#ececea 100%)}.app-header.syncroops-header,.app-header{background:#fff!important;color:var(--syncroops-ink)!important;border-bottom:1px solid var(--syncroops-line);box-shadow:0 5px 22px rgba(18,20,23,.08)}.club-logo{width:62px;height:62px;filter:drop-shadow(0 4px 8px #0002)}.syncroops-wordmark{display:flex!important;align-items:baseline;gap:0!important;margin:0!important;font-style:italic;letter-spacing:-.045em;font-weight:900}.syncroops-wordmark>span{color:var(--syncroops-ink)}.syncroops-wordmark>strong{color:var(--syncroops-red);font-weight:900}.syncroops-wordmark .version-label{font-style:normal;letter-spacing:0;margin-left:12px;background:#ededed;color:#555}.app-header .eyebrow{color:#65676b}.header-actions .button{border:1px solid #e0e1e3;background:#fff;color:#202226}.header-actions .button.primary{background:var(--syncroops-red);color:#fff;border-color:var(--syncroops-red)}.header-actions .button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #00000014}.user-identity{background:#f3f3f3!important;border-color:#e2e2e2!important;color:#1b1d20!important}.user-avatar{background:var(--syncroops-red)!important;color:#fff!important}.matchday-bar{background:#fff;color:#202226;border-top:0;border-bottom:1px solid #e2e2e2}.matchday-bar>div{background:#fafafa;border:1px solid #e7e7e7}.system-ok{color:#2d9a51}.stats-board{background:#f0f0ee}.stat-card{border:1px solid #e0e1e3;box-shadow:0 7px 20px #0000000b}.stat-card.active{outline:2px solid var(--syncroops-red);outline-offset:-2px}.button.primary{background:var(--syncroops-red);border-color:var(--syncroops-red)}.button.primary:hover{background:var(--syncroops-red-dark)}.task-card,.admin-card,.profile-card,.archive-task,.system-card,.archive-filter-card{border:1px solid #e1e2e3;box-shadow:0 9px 25px rgba(21,23,26,.08)}.task-card{border-left-width:7px}.command-layout{background:#f2f2f0}.department-tile{border:1px solid #e1e2e4;border-left:7px solid var(--dept);box-shadow:0 8px 22px #0000000c}.department-tile.selected{outline:3px solid var(--syncroops-red)}.command-body .app-header{position:sticky;top:0;z-index:20}.login-shell{background:linear-gradient(145deg,#f8f8f7 0%,#fff 55%,#eeeeeb 100%)}.login-card{position:relative;border:1px solid #dedede;box-shadow:0 24px 70px #15171a22}.login-card::after{content:"";display:block;height:7px;background:linear-gradient(90deg,var(--syncroops-red) 0 44%,#aeb0b3 44% 49%,transparent 49%);position:absolute;left:0;right:0;bottom:0}.system-page{padding:20px;display:grid;gap:17px}.system-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px;border-radius:19px;background:linear-gradient(120deg,#1d2024,#30343a);color:#fff}.system-hero h2{margin:2px 0 5px;font-size:2rem}.system-hero p{margin:0;color:#d5d7da}.system-overall{padding:11px 14px;border-radius:999px;font-weight:900;background:#ffffff18}.system-overall.ok{color:#76e39b}.system-overall.bad{color:#ff817b}.diagnostics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}.diagnostic-card{background:#fff;border-radius:15px;padding:14px;border:1px solid #e0e1e3}.diagnostic-card span{display:block;color:#6e7176;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.diagnostic-card strong{display:block;margin-top:6px;font-size:1.05rem}.diagnostic-card.ok{border-left:5px solid #42a963}.diagnostic-card.bad{border-left:5px solid var(--syncroops-red)}.system-card{background:#fff;border-radius:18px;padding:17px}.system-note{color:#666b70;margin-top:-4px}.update-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.update-form input{flex:1;min-width:260px}.update-ready{margin-top:12px;padding:12px;border-radius:12px;background:#eef8f1;border:1px solid #b8dec4;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.update-ready span{color:#5f6661}.update-ready .button{margin-left:auto}.system-logs{max-height:350px;overflow:auto;background:#191b1f;color:#d8dbdf;padding:14px;border-radius:12px;font:12px/1.55 Consolas,monospace;white-space:pre-wrap}@media(max-width:800px){.system-hero{align-items:flex-start;flex-direction:column}.syncroops-wordmark{font-size:1.55rem!important}}

.event-form{display:grid;gap:14px}.event-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}.event-type-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:15px;border:2px solid #dedfe1;border-radius:16px;background:#fff;cursor:pointer}.event-type-card input{position:absolute;opacity:0}.event-type-card:has(input:checked){border-color:var(--syncroops-red);box-shadow:0 0 0 4px #e21b2318}.event-type-icon{grid-row:1/3;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#f1f1f1;font-size:1.35rem}.event-type-card small{color:#70747a}.conditional-fields{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px}.conditional-fields[hidden]{display:none!important}.matchday-bar{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}@media(max-width:750px){.event-type-picker,.conditional-fields{grid-template-columns:1fr}}

/*
 * Hauptkopfzeile:
 * Der Arbeitsplatz-Header wird ausschließlich in assets/header.css gepflegt.
 * Historische .app-header-Regeln gelten nur noch für Nebenansichten.
 */

/* SyncroOps 2.0 – Wortmarke für Login und Nebenansichten */
.syncroops-wordmark{
    display:flex!important;
    align-items:baseline;
    margin:0!important;
    white-space:nowrap;
    font-family:Arial Narrow, Bahnschrift SemiCondensed, Segoe UI, Arial, sans-serif;
    font-size:2rem;
    font-style:italic;
    font-weight:900;
    letter-spacing:.045em;
    line-height:1;
    transform:skewX(-6deg);
}

.syncroops-syncro,
.syncroops-ops{
    position:relative;
    display:inline-block;
}

.syncroops-syncro{
    color:#17191d;
}

.syncroops-ops{
    margin-left:.08em;
    color:#e21b23;
}

.syncroops-syncro::after,
.syncroops-ops::after{
    content:"";
    position:absolute;
    left:.04em;
    right:.04em;
    top:48%;
    height:2px;
    background:rgba(255,255,255,.92);
    transform:translateY(-50%);
    pointer-events:none;
}

.syncroops-wordmark .version-label{
    margin-left:12px;
    padding:5px 7px;
    border-radius:7px;
    background:#ededed;
    color:#62656a;
    font-size:.7rem;
    font-style:normal;
    font-weight:800;
    letter-spacing:0;
    transform:skewX(6deg);
}

.login-card .syncroops-wordmark{
    font-size:2.35rem;
}

@media(max-width:760px){
    .syncroops-wordmark{
        font-size:1.65rem;
    }
}

/* SyncroOps 2.0.1 – Login- und Nebenbranding */
.login-shell{
    background:#090d12;
}

.login-card{
    position:relative;
    overflow:hidden;
    background:#fff;
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0 50% 0 0;
    z-index:0;
    background:
        linear-gradient(135deg,rgba(7,10,15,.76),rgba(8,11,15,.48)),
        url("syncroops-login-bg.jpg") center/cover no-repeat;
}

.login-card>*{
    position:relative;
    z-index:1;
}

.login-card .brand,
.login-card .login-syncroops-brand{
    color:#fff;
}

.login-syncroops-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:12px 0 28px;
}

.login-syncroops-wordmark{
    display:flex;
    align-items:baseline;
    color:#fff;
    font-family:Arial Narrow,Bahnschrift SemiCondensed,Segoe UI,Arial,sans-serif;
    font-size:2.75rem;
    font-style:italic;
    font-weight:900;
    letter-spacing:.055em;
    line-height:1;
    transform:skewX(-5deg);
}

.login-syncroops-wordmark strong{
    margin-left:.08em;
    color:#ef2b32;
}

.login-syncroops-brand>small{
    margin-top:10px;
    color:#fff;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.16em;
}

.login-version{
    margin-top:20px;
    color:#d8dade;
    font-size:.8rem;
}

.syncroops-wordmark{
    font-size:2.35rem;
}

.syncroops-syncro{
    color:#fff;
}

@media(max-width:900px){
    .login-card::before{
        inset:0 0 54% 0;
    }
}

@media(max-width:650px){
    .login-syncroops-wordmark{
        font-size:2rem;
    }
}

/* SyncroOps 2.0.2 – bereinigtes Login-Branding */
.login-brand-panel{
    display:flex;
    align-items:center;
    gap:24px;
    margin:0 0 28px;
    color:#fff;
}

.login-club-logo{
    width:118px;
    height:118px;
    flex:0 0 118px;
    object-fit:contain;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.35));
}

.login-brand-divider{
    width:1px;
    height:118px;
    background:rgba(255,255,255,.45);
}

.login-brand-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.login-brand-copy .login-syncroops-wordmark{
    font-size:3rem;
}

.login-brand-copy>small{
    margin-top:11px;
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.16em;
}

.login-brand-copy .login-version{
    margin-top:22px;
    color:#d8dade;
    font-size:.82rem;
}

@media(max-width:760px){
    .login-brand-panel{
        gap:14px;
    }
    .login-club-logo{
        width:82px;
        height:82px;
        flex-basis:82px;
    }
    .login-brand-divider{
        height:82px;
    }
    .login-brand-copy .login-syncroops-wordmark{
        font-size:2rem;
    }
}

/* SyncroOPS 2.0.3 – vollständiger Login-Neustart */
.sops-login-page{
 min-height:100vh;display:grid;place-items:center;padding:28px;background:#2c1c14
}
.sops-login-card{
 width:min(1180px,96vw);min-height:700px;
 display:grid;grid-template-columns:46% 54%;
 overflow:hidden;border:1px solid rgba(255,255,255,.35);
 border-radius:34px;background:#fff;
 box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.sops-login-visual{
 position:relative;display:flex;flex-direction:column;justify-content:space-between;
 min-width:0;padding:54px 48px 48px;color:#fff;
 background:
 linear-gradient(135deg,rgba(5,8,12,.74),rgba(7,10,15,.42)),
 url("syncroops-login-bg.jpg") center/cover no-repeat
}
.sops-login-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24))}
.sops-login-brand,.sops-login-claim{position:relative;z-index:1}
.sops-login-brand{display:grid;grid-template-columns:132px 1px minmax(0,1fr);align-items:center;gap:28px}
.sops-login-logo{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 7px 16px rgba(0,0,0,.42))}
.sops-login-brand-divider{width:1px;height:132px;background:rgba(255,255,255,.55)}
.sops-login-brand-copy{min-width:0}
.sops-login-wordmark{font-size:3.35rem}
.sops-login-tagline{margin-top:12px;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.16em;white-space:nowrap}
.sops-login-version{margin-top:26px;color:#d8dade;font-size:.84rem}
.sops-login-claim{display:flex;flex-direction:column;gap:8px}
.sops-login-claim strong{font-size:1.25rem}
.sops-login-claim span{color:#e3e5e8;font-size:1rem}

.sops-login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:70px 72px;background:#fff}
.sops-login-form-head h1{margin:0;color:#17191d;font-size:2rem}
.sops-login-form-head h1 span{color:#e52a31}
.sops-login-form-head p{margin:10px 0 34px;color:#6d7075}
.sops-login-form{display:grid;gap:12px}
.sops-login-form label{color:#202226;font-weight:850}
.sops-login-form input{width:100%;min-height:58px;padding:12px 16px;border:1px solid #dcdde0;border-radius:13px;background:#fff;color:#17191d;font-size:1rem}
.sops-login-form input:focus{border-color:#e52a31;outline:3px solid rgba(229,42,49,.12)}
.sops-login-submit{width:100%;min-height:58px;margin-top:12px;font-size:1.05rem}

@media(max-width:980px){
 .sops-login-card{grid-template-columns:1fr}
 .sops-login-visual{min-height:420px}
 .sops-login-form-panel{padding:48px}
}
@media(max-width:620px){
 .sops-login-page{padding:12px}
 .sops-login-card{width:100%;border-radius:22px}
 .sops-login-visual{padding:34px 24px}
 .sops-login-brand{grid-template-columns:88px 1px minmax(0,1fr);gap:16px}
 .sops-login-logo{width:88px;height:88px}
 .sops-login-brand-divider{height:88px}
 .sops-login-wordmark{font-size:2rem}
 .sops-login-tagline{white-space:normal}
 .sops-login-form-panel{padding:34px 24px}
}

/* SyncroOPS 2.0.4 – finale bildbasierte Login-Maske */
.sops-login-page{
 min-height:100vh;
 display:grid;
 place-items:center;
 padding:28px;
 background:#2c1c14
}
.sops-login-card{
 width:min(1320px,96vw);
 min-height:760px;
 display:grid;
 grid-template-columns:58% 42%;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.35);
 border-radius:34px;
 background:#fff;
 box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.sops-login-visual{
 position:relative;
 min-width:0;
 overflow:hidden;
 background:#06090d
}
.sops-login-art{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 display:block
}
.sops-login-form-panel{
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:70px 64px;
 background:#fff
}
.sops-login-form-head h1{
 margin:0;
 color:#17191d;
 font-size:2rem
}
.sops-login-form-head h1 span{color:#e52a31}
.sops-login-form-head p{
 margin:10px 0 34px;
 color:#6d7075
}
.sops-login-form{
 display:grid;
 gap:12px
}
.sops-login-form label{
 color:#202226;
 font-weight:850
}
.sops-login-form input{
 width:100%;
 min-height:58px;
 padding:12px 16px;
 border:1px solid #dcdde0;
 border-radius:13px;
 background:#fff;
 color:#17191d;
 font-size:1rem
}
.sops-login-form input:focus{
 border-color:#e52a31;
 outline:3px solid rgba(229,42,49,.12)
}
.sops-login-submit{
 width:100%;
 min-height:58px;
 margin-top:12px;
 font-size:1.05rem
}
@media(max-width:980px){
 .sops-login-card{grid-template-columns:1fr}
 .sops-login-visual{min-height:520px}
 .sops-login-form-panel{padding:48px}
}
@media(max-width:620px){
 .sops-login-page{padding:12px}
 .sops-login-card{width:100%;border-radius:22px}
 .sops-login-visual{min-height:390px}
 .sops-login-form-panel{padding:34px 24px}
}

/* SyncroOPS 2.0.5 – Login-Artwork vollständig anzeigen */
.sops-login-card{
    grid-template-columns:52% 48%;
}

.sops-login-visual{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:#05080c;
}

.sops-login-art{
    position:static;
    inset:auto;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left center;
    background:#05080c;
}

@media(max-width:980px){
    .sops-login-card{
        grid-template-columns:1fr;
    }

    .sops-login-visual{
        min-height:520px;
        justify-content:center;
    }

    .sops-login-art{
        object-position:center;
    }
}

/* SyncroOPS 2.0.6 – gemeinsamer Header für alle Unterseiten */
.sops-secondary-header,
.sops-secondary-header *{box-sizing:border-box}

.sops-secondary-header{
    display:grid;
    grid-template-columns:auto 1px minmax(0,1fr) auto;
    align-items:center;
    gap:15px;
    min-height:104px;
    padding:14px 18px;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(4,7,11,.97),rgba(5,8,13,.91) 58%,rgba(4,7,11,.97)),
        url("syncroops-header-bg.jpg") center 64%/cover no-repeat;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 28px rgba(0,0,0,.28)
}

.sops-secondary-brand{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:420px
}

.sops-secondary-logo{
    width:72px;
    height:72px;
    flex:0 0 72px;
    object-fit:contain;
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.35))
}

.sops-secondary-brand-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0
}

.sops-secondary-wordmark{
    display:block;
    width:278px;
    max-width:29vw;
    height:auto
}

.sops-secondary-version{
    margin-top:7px;
    color:#d9dce0;
    font-size:.72rem;
    font-weight:700;
    line-height:1
}

.sops-secondary-divider{
    width:1px;
    height:58px;
    background:rgba(255,255,255,.28)
}

.sops-secondary-nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    min-width:0
}

.sops-secondary-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:10px;
    color:#fff;
    background:transparent;
    font-size:.92rem;
    font-weight:850;
    text-decoration:none;
    white-space:nowrap
}

.sops-secondary-link:hover,
.sops-secondary-link:focus-visible{
    border-color:rgba(255,255,255,.16);
    outline:none;
    background:rgba(255,255,255,.09)
}

.sops-secondary-link.is-active{
    border-color:rgba(239,43,50,.58);
    background:rgba(226,27,35,.20);
    box-shadow:inset 0 -2px 0 #ef2b32
}

.sops-secondary-user{
    display:flex;
    align-items:center;
    gap:9px;
    max-width:240px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:13px;
    background:rgba(255,255,255,.08);
    color:#fff
}

.sops-secondary-avatar{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:50%;
    background:#e52a31;
    color:#fff;
    font-weight:900
}

.sops-secondary-user strong,
.sops-secondary-user small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.sops-secondary-user small{
    max-width:160px;
    margin-top:2px;
    color:#cfd2d6;
    font-size:.67rem
}

@media(max-width:1500px){
    .sops-secondary-header{
        grid-template-columns:auto 1px minmax(0,1fr);
        grid-template-areas:"brand divider user" "nav nav nav";
        row-gap:8px
    }
    .sops-secondary-brand{grid-area:brand}
    .sops-secondary-divider{grid-area:divider}
    .sops-secondary-nav{grid-area:nav}
    .sops-secondary-user{grid-area:user;justify-self:end}
}

@media(max-width:760px){
    .sops-secondary-header{
        grid-template-columns:1fr;
        grid-template-areas:"brand" "nav" "user"
    }
    .sops-secondary-divider{display:none}
    .sops-secondary-brand{min-width:0}
    .sops-secondary-wordmark{width:220px;max-width:58vw}
    .sops-secondary-link{flex:1 1 135px}
    .sops-secondary-user{justify-self:stretch;max-width:none}
}

/* SyncroOPS 2.0.7 – einzeiliger Unterseiten-Header */
.sops-secondary-header{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap;
    gap:14px;
    min-height:108px;
    padding:14px 18px;
}

.sops-secondary-brand{
    flex:0 0 auto;
    min-width:390px;
}

.sops-secondary-divider{
    flex:0 0 1px;
    height:50px;
}

.sops-secondary-nav{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    flex-wrap:nowrap;
    gap:6px;
    min-width:0;
}

.sops-secondary-link{
    min-height:42px;
    padding:9px 10px;
    font-size:.89rem;
}

.sops-secondary-user{
    flex:0 0 auto;
    margin-left:auto;
}

@media(max-width:1650px){
    .sops-secondary-brand{
        min-width:345px;
    }

    .sops-secondary-wordmark{
        width:235px;
    }

    .sops-secondary-nav{
        gap:3px;
    }

    .sops-secondary-link{
        padding-inline:7px;
        font-size:.83rem;
    }

    .sops-secondary-user small{
        display:none;
    }
}

@media(max-width:1250px){
    .sops-secondary-header{
        display:grid !important;
        grid-template-columns:auto 1px minmax(0,1fr);
        grid-template-areas:
            "brand divider user"
            "nav nav nav";
        row-gap:8px;
    }

    .sops-secondary-brand{grid-area:brand}
    .sops-secondary-divider{grid-area:divider}
    .sops-secondary-nav{
        grid-area:nav;
        flex-wrap:wrap;
    }
    .sops-secondary-user{
        grid-area:user;
        justify-self:end;
    }
}

@media(max-width:760px){
    .sops-secondary-header{
        grid-template-columns:1fr;
        grid-template-areas:
            "brand"
            "nav"
            "user";
    }

    .sops-secondary-brand{
        min-width:0;
    }

    .sops-secondary-divider{
        display:none;
    }

    .sops-secondary-link{
        flex:1 1 135px;
    }

    .sops-secondary-user{
        justify-self:stretch;
        max-width:none;
    }
}

/* SyncroOPS 2.1.1 – Abteilungsverwaltung */
.department-create-form{margin:16px 0 20px}
.department-color-dot{display:inline-block;width:22px;height:22px;border-radius:7px;border:1px solid #d6d6d6;vertical-align:middle}

/* SyncroOPS 2.1.2 – parallele Veranstaltungen */
.active-events-panel{
    padding:14px 18px 12px;
    background:#ececea;
    border-bottom:1px solid #d9d8d6;
}
.active-events-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:10px;
}
.active-events-heading h2{margin:2px 0 0;font-size:1.05rem}
.active-events-heading>span{color:#6d7075;font-size:.78rem}
.active-events-list{
    display:flex;
    gap:9px;
    overflow-x:auto;
    padding-bottom:3px;
}
.active-event-card{
    position:relative;
    flex:1 1 240px;
    min-width:220px;
    max-width:370px;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:11px 13px;
    border:1px solid #d9d9d7;
    border-radius:12px;
    background:#fff;
    color:#24262a;
    text-decoration:none;
}
.active-event-card:hover{border-color:#bcbdbc;box-shadow:0 5px 14px #0000000d}
.active-event-card.is-current{
    border-color:#e52a31;
    box-shadow:inset 0 0 0 1px #e52a31;
}
.active-event-type{
    color:#76797d;
    font-size:.64rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.active-event-card strong{font-size:.91rem}
.active-event-card small{color:#707378;font-size:.7rem}
.active-event-card b{
    position:absolute;
    top:8px;
    right:9px;
    padding:3px 6px;
    border-radius:999px;
    background:#e52a31;
    color:#fff;
    font-size:.58rem;
}
.command-event-switcher{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:9px 16px;
    background:#e9e9e7;
    border-bottom:1px solid #d8d8d6;
}
.command-event-switcher a{
    flex:0 0 auto;
    padding:8px 11px;
    border-radius:9px;
    background:#fff;
    border:1px solid #d8d8d8;
    color:#24262a;
    font-size:.78rem;
    font-weight:800;
    text-decoration:none;
}
.command-event-switcher a.is-active{
    color:#fff;
    background:#e52a31;
    border-color:#e52a31;
}
@media(max-width:700px){
    .active-events-panel{padding:10px}
    .active-events-heading{align-items:flex-start;flex-direction:column;gap:4px}
    .active-event-card{min-width:78vw}
}

/* SyncroOPS 2.1.4 – Admin Live-Datenstand */
.admin-data-status{
    margin:0 0 12px;
    padding:9px 12px;
    border:1px solid #d9d9d7;
    border-radius:9px;
    background:#f7f7f5;
    color:#666a70;
    font-size:.75rem;
    font-weight:750;
}

/* SyncroOPS 2.1.5 – bereinigte Administration */
.admin-data-status.is-loading{
    opacity:.72;
}
.admin-data-status.is-error{
    border-color:#d94242;
    background:#fff0f0;
    color:#9c2020;
}
.admin-actions{
    white-space:nowrap;
}
.admin-actions .button{
    margin:2px 2px 2px 0;
}
.empty-state{
    margin:10px 0;
    padding:14px;
    border:1px dashed #d2d0cd;
    border-radius:9px;
    color:#74777b;
    background:#faf9f7;
}

/* SyncroOPS 2.1.6 – Event Participation */
.event-department-fieldset{
    margin:14px 0 8px;
    padding:15px;
    border:1px solid #d9d8d5;
    border-radius:12px;
    background:#faf9f7;
}
.event-department-fieldset legend{
    padding:0 7px;
    font-weight:850;
}
.event-department-fieldset legend span{
    color:#e52a31;
}
.event-department-picker{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:8px;
    margin-top:11px;
}
.event-department-option{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:45px;
    padding:9px 11px;
    border:1px solid #deddda;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
}
.event-department-option:has(input:checked){
    border-color:#e52a31;
    box-shadow:inset 0 0 0 1px #e52a31;
    background:#fff6f6;
}
.event-department-option input{
    width:18px;
    height:18px;
    flex:0 0 18px;
    accent-color:#e52a31;
}
.event-department-option strong{
    font-size:.82rem;
}
.event-department-dialog-card{
    width:min(720px,calc(100vw - 28px));
}
@media(max-width:650px){
    .event-department-picker{
        grid-template-columns:1fr;
    }
}

/* SyncroOPS 2.1.7 – Alarm & Escalation Control */
.alarm-settings-form{
    display:grid;
    gap:16px;
    margin-top:16px;
}
.alarm-standard-box{
    padding:16px;
    border:1px solid #d8d7d4;
    border-radius:12px;
    background:#f8f8f6;
}
.alarm-standard-box h3,
.escalation-setting h3{
    margin:0 0 7px;
}
.alarm-standard-box p{
    margin:0 0 13px;
    color:#6d7074;
    font-size:.84rem;
}
.number-with-unit{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:5px;
}
.number-with-unit input{
    width:105px;
}
.number-with-unit b{
    color:#666b70;
    font-size:.8rem;
}
.escalation-settings-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.escalation-setting{
    display:grid;
    gap:10px;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
}
.escalation-setting.level-1{
    border-top:4px solid #efb12a;
}
.escalation-setting.level-2{
    border-top:4px solid #ef762a;
}
.escalation-setting.level-3{
    border-top:4px solid #d92a32;
}
.escalation-setting small{
    color:#70747a;
    font-weight:700;
}
.alarm-flow-note{
    padding:13px 15px;
    border-radius:10px;
    background:#11151b;
    color:#fff;
    font-size:.82rem;
    line-height:1.5;
}
body[data-escalation-level="1"] #alarm-status.active{
    background:#efb12a;
}
body[data-escalation-level="2"] #alarm-status.active{
    background:#ef762a;
}
body[data-escalation-level="3"] #alarm-status.active{
    background:#d92a32;
}
@media(max-width:850px){
    .escalation-settings-grid{
        grid-template-columns:1fr;
    }
}

/* SyncroOPS 2.1.8 – strukturierte Administration */
.admin-subnav{
    position:sticky;
    top:0;
    z-index:35;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:9px 16px;
    background:#e9e9e7;
    border-bottom:1px solid #d4d4d1;
}
.admin-subnav a{
    flex:0 0 auto;
    padding:9px 12px;
    border:1px solid transparent;
    border-radius:9px;
    color:#33363a;
    text-decoration:none;
    font-size:.8rem;
    font-weight:850;
}
.admin-subnav a:hover{
    background:#fff;
}
.admin-subnav a.is-active{
    background:#15191f;
    color:#fff;
}
.admin-overview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
    margin:16px 0 22px;
}
.admin-overview-stat{
    padding:16px;
    border:1px solid #deddd9;
    border-radius:12px;
    background:#f8f8f6;
}
.admin-overview-stat strong{
    display:block;
    font-size:1.75rem;
}
.admin-overview-stat span{
    color:#6e7278;
    font-size:.78rem;
    font-weight:750;
}
.admin-module-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
}
.admin-module-card{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:11px;
    row-gap:3px;
    align-items:center;
    padding:16px;
    border:1px solid #dddcd9;
    border-radius:13px;
    background:#fff;
    color:#25282d;
    text-decoration:none;
}
.admin-module-card:hover{
    border-color:#b9b9b5;
    box-shadow:0 7px 18px #0000000d;
}
.admin-module-card>span{
    grid-row:1/3;
    font-size:1.55rem;
}
.admin-module-card strong{
    font-size:.95rem;
}
.admin-module-card small{
    color:#73767b;
    line-height:1.35;
}
.priority-escalation-table-wrap{
    overflow-x:auto;
    border:1px solid #dbdad7;
    border-radius:12px;
}
.priority-escalation-table{
    width:100%;
    min-width:850px;
    border-collapse:collapse;
    background:#fff;
}
.priority-escalation-table th,
.priority-escalation-table td{
    padding:10px 8px;
    border-bottom:1px solid #e4e3e0;
    text-align:center;
}
.priority-escalation-table thead th{
    background:#f3f3f1;
    color:#55595e;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.priority-escalation-table tbody th{
    text-align:left;
}
.priority-escalation-table input{
    width:82px;
    min-height:40px;
    text-align:center;
}
@media(max-width:700px){
    .admin-subnav{
        padding-inline:9px;
    }
}

/* SyncroOPS 2.1.9 – globaler Event-Alarm */
.active-event-card{
    position:relative;
}
.active-event-card.has-new-task{
    animation:eventTaskPulse 1.25s ease-in-out infinite;
}
.active-event-card.has-escalation{
    animation:eventEscalationPulse .82s ease-in-out infinite;
}
.global-event-count{
    position:absolute;
    top:7px;
    left:8px;
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    background:#e52a31;
    color:#fff;
    font-size:.67rem;
    font-weight:900;
    box-shadow:0 0 0 3px rgba(229,42,49,.15);
}
.global-event-alarm{
    position:fixed;
    z-index:90;
    top:50%;
    right:18px;
    width:min(330px,calc(100vw - 36px));
    transform:translateY(-50%);
    display:grid;
    gap:5px;
    padding:15px 17px;
    border:1px solid rgba(255,255,255,.18);
    border-left:5px solid #e52a31;
    border-radius:12px 0 0 12px;
    background:rgba(15,18,23,.96);
    color:#fff;
    box-shadow:0 14px 38px rgba(0,0,0,.32);
    cursor:pointer;
    animation:globalAlarmSlide .28s ease-out,
              globalAlarmPulse 1.25s ease-in-out infinite;
}
.global-event-alarm[hidden]{
    display:none !important;
}
.global-event-alarm strong{
    font-size:.9rem;
}
.global-event-alarm span{
    color:#d7dade;
    font-size:.78rem;
    line-height:1.35;
}
.global-event-alarm.is-escalated{
    border-left-color:#ff8a24;
    animation:globalAlarmSlide .28s ease-out,
              globalEscalationPulse .82s ease-in-out infinite;
}
@keyframes eventTaskPulse{
    50%{
        border-color:#e52a31;
        box-shadow:0 0 0 3px rgba(229,42,49,.18),
                   0 8px 18px rgba(0,0,0,.08);
    }
}
@keyframes eventEscalationPulse{
    50%{
        border-color:#ff8a24;
        box-shadow:0 0 0 4px rgba(255,138,36,.24),
                   0 9px 22px rgba(0,0,0,.10);
    }
}
@keyframes globalAlarmSlide{
    from{
        opacity:0;
        transform:translate(30px,-50%);
    }
    to{
        opacity:1;
        transform:translate(0,-50%);
    }
}
@keyframes globalAlarmPulse{
    50%{
        box-shadow:0 14px 38px rgba(0,0,0,.32),
                   0 0 0 4px rgba(229,42,49,.18);
    }
}
@keyframes globalEscalationPulse{
    50%{
        box-shadow:0 14px 38px rgba(0,0,0,.32),
                   0 0 0 5px rgba(255,138,36,.24);
    }
}
@media(max-width:700px){
    .global-event-alarm{
        top:auto;
        right:10px;
        bottom:88px;
        width:calc(100vw - 20px);
        transform:none;
        border-radius:12px;
    }
    @keyframes globalAlarmSlide{
        from{opacity:0;transform:translateY(24px)}
        to{opacity:1;transform:translateY(0)}
    }
}


/* SyncroOPS 2.1.11 – Lesbarkeit Priorität SOFORT */
.task-card.priority-immediate{
    background:#a92325;
    color:#fff;
    border-color:#8f1d20;
}
.task-card.priority-immediate::before{
    background:#f2942f;
}
.task-card.priority-immediate .topline,
.task-card.priority-immediate h3,
.task-card.priority-immediate p{
    color:#fff;
}
.task-card.priority-immediate .meta{
    color:#e8d9d9;
}
.task-card.priority-immediate .priority-badge{
    background:#fff;
    color:#a60f18;
}
.task-card.priority-immediate .badge{
    background:#f4eeee;
    color:#a60f18;
}
.task-card.priority-immediate .location-chip{
    background:#fff8;
    color:#fff;
}
.task-card.priority-immediate .open-timer{
    background:#fff3d6;
    color:#7a260d;
}
.task-card.priority-immediate .escalation-banner{
    background:#bd2528;
    color:#fff;
}
.task-card.priority-immediate .button.ghost{
    background:#ffffffd9;
    color:#17120f;
}
