*{box-sizing:border-box}body{margin:0;background:#edf3f8;color:#153650;font-family:system-ui,-apple-system,sans-serif}.app{max-width:550px;margin:auto;min-height:100vh;background:#fff}header{display:flex;align-items:center;gap:15px;background:#07558f;color:white;padding:18px}header img{width:120px;height:76px;object-fit:contain;background:white;border-radius:9px;padding:5px}header strong{display:block;font-size:19px}header small{display:block;color:#d5e8f5;margin-top:5px}h1{font-size:25px;margin:0 0 8px}h2{font-size:17px;margin:0 0 12px}p{color:#607487}.panel{border:1px solid #dce7f0;border-radius:14px;margin:18px;padding:20px}label{display:block;font-weight:650;font-size:14px;margin-top:16px}label span{font-weight:400;color:#61798c}input{display:block;width:100%;border:1px solid #b6c8d6;border-radius:9px;font-size:17px;padding:12px;margin-top:6px}button{border:0;background:#086fae;color:white;padding:13px 16px;border-radius:10px;font-weight:700;cursor:pointer;margin-top:14px;width:100%;font-size:15px}.secondary{background:#e9f3fa;color:#07558f}.muted,footer{font-size:12px;color:#72869a;line-height:1.5}.welcome{padding:22px 18px 5px}.tiles{padding:12px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.tile{border:1px solid #d5e5f0;padding:16px 10px;border-radius:12px;min-height:96px}.tile b{display:block}.tile small{display:block;color:#6c8292;margin-top:9px}.project{padding:11px 0;border-bottom:1px solid #e1eaf1}.project strong{display:block}.project small{color:#5d768b}#message{margin:15px 18px;font-size:14px;color:#07558f}footer{text-align:center;padding:20px}
[hidden]{display:none!important}
select,textarea{display:block;width:100%;max-width:100%;min-width:0;border:1px solid #b6c8d6;border-radius:9px;font:inherit;font-size:17px;padding:12px;margin-top:6px}
input{min-width:0;max-width:100%}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin-right:8px;vertical-align:middle}
#dayConfirmationsPanel,#monthClosurePanel{margin-left:0;margin-right:0}
.tile{overflow-wrap:anywhere}
#offlineQueue{padding:10px 0}#offlineQueue small{display:block;line-height:1.5}
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.photo-gallery .project img{object-fit:contain}

/* Schritt 85 – Ampelfarben mit Text-/Symbolkennzeichnung, nicht nur Farbe */
.security-status-row{border-left:4px solid #8394a3;padding-left:12px;margin:8px 0}
.security-status-row[data-state="ok"]{border-left-color:#20804c}
.security-status-row[data-state="warning"]{border-left-color:#c78a00}
.security-status-row[data-state="critical"]{border-left-color:#b42318}
.security-status-row[data-state="unknown"],.security-status-row[data-state="disabled"]{border-left-color:#8394a3}

/* GBS workspace: original logo and blue/white palette, mobile first. */
:root{--gbs-navy:#123b59;--gbs-blue:#07558f;--gbs-accent:#0878b8;--gbs-line:#dbe5ec;--gbs-muted:#506879;--gbs-surface:#f2f6f9;--gbs-radius:18px;color-scheme:light;scroll-behavior:smooth}
body{font-size:16px;line-height:1.55;background:var(--gbs-surface);color:var(--gbs-navy)}
.app{max-width:1240px;margin:0 auto;background:transparent;padding-bottom:env(safe-area-inset-bottom)}
header{background:#fff;color:var(--gbs-navy);border-bottom:1px solid var(--gbs-line);padding:20px 32px;gap:20px}
header img{width:132px;height:74px;padding:0;border-radius:0}header strong{font-size:21px;letter-spacing:-.4px}header small{color:var(--gbs-muted);font-size:14px}
h1{font-size:clamp(26px,4vw,36px);line-height:1.2;letter-spacing:-.8px}h2{font-size:23px;line-height:1.3;letter-spacing:-.4px}h3{font-size:18px;margin:24px 0 12px}p{color:var(--gbs-muted);line-height:1.6;margin:10px 0}
.panel{background:#fff;border:1px solid var(--gbs-line);border-radius:var(--gbs-radius);padding:26px;margin:22px 32px;box-shadow:0 4px 18px #163d5805;min-width:0;scroll-margin-top:24px}
.welcome{margin:28px 32px 8px;padding:30px;background:var(--gbs-blue);color:#fff;border-radius:var(--gbs-radius);position:relative;overflow:hidden}
.welcome:after{content:'';position:absolute;width:180px;height:180px;right:-50px;top:-80px;border:32px solid #ffffff0c;border-radius:50%;pointer-events:none}.welcome p,.welcome #roleCaption{color:#e2edf5}.eyebrow{display:block;font-size:12px;letter-spacing:2px;font-weight:750;margin-bottom:10px;color:#d3eafa}
.workspace-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 32px 8px;padding:0;align-items:center}
.workspace-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;text-decoration:none;background:#fff;color:var(--gbs-blue);font-weight:650;font-size:14px;border:1px solid var(--gbs-line);border-radius:10px}
.workspace-nav a:hover{background:#e4f1fa;border-color:#9bbfd6}.workspace-nav a:first-child{background:var(--gbs-navy);color:#fff;border-color:var(--gbs-navy)}
.tiles{padding:12px 32px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
button.tile{border:1px solid var(--gbs-line);padding:22px 18px!important;border-radius:15px;min-height:134px;box-shadow:0 3px 12px #163d5805;position:relative}
.tile b{font-size:17px;line-height:1.35}.tile small{font-size:13px;color:var(--gbs-muted);line-height:1.45}.tile:hover{border-color:var(--gbs-accent);box-shadow:0 5px 18px #07558f12}
button{min-height:48px;padding:12px 18px;font:inherit;font-weight:700;font-size:15px;border:1px solid transparent;border-radius:10px;background:var(--gbs-blue);line-height:1.45;touch-action:manipulation}
button:hover{filter:brightness(.95)}button:disabled{opacity:.55;cursor:default;filter:none}.secondary{background:#edf4f9;color:var(--gbs-blue);border:1px solid #d4e3ed}
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #e8a622;outline-offset:3px}
label{font-size:15px;font-weight:650;margin-top:18px;color:var(--gbs-navy)}input,select,textarea{font-size:16px;font-family:inherit;line-height:1.4;padding:13px 12px;min-height:48px;background:#fff;color:#153650;border-color:#aebfcb}
input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px;accent-color:var(--gbs-blue)}label:has(input[type=checkbox]){display:flex;gap:8px;align-items:flex-start;font-weight:500}label:has(input[type=checkbox]) input{flex:none;margin-top:3px}
textarea{resize:vertical}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}.actions button{margin-top:10px}.export-actions{padding:14px;background:var(--gbs-surface);border-radius:12px}
.project{padding:18px 0;border-color:var(--gbs-line)}.project p{overflow-wrap:anywhere}details:not(.more-modules){margin-top:20px;border:1px solid var(--gbs-line);border-radius:12px;padding:0 16px 16px;background:#fbfdff}summary{cursor:pointer;min-height:48px;padding:13px 0;font-weight:700;color:var(--gbs-blue);line-height:1.5}
#login{max-width:540px;margin:38px auto;padding:32px}#login h1{font-size:30px}#login>p{margin-bottom:24px}
#message:empty,[role=status]:empty{display:none}#message,.action-feedback,#mfaStatus{background:#e9f3fa;color:#134e75;border-left:4px solid #0878b8;padding:12px 16px;border-radius:8px;font-size:15px;overflow-wrap:anywhere}
#message{margin:22px 32px}.action-feedback[data-state=error],#message[data-state=error]{background:#fff0ec;color:#922c16;border-color:#b53c23}
#dayConfirmationsPanel,#monthClosurePanel{margin:26px 0;border:1px solid #c9dce9;background:#fbfdff;box-shadow:none}#projectTimeActive,#timeState{padding:14px;background:#edf6fc;color:#164c70;border-radius:10px;font-weight:650}
#projectTimeReview,#absenceReviewPanel,#vacationManagement{margin-top:26px;padding:20px;border:1px solid #cfdee9;border-radius:12px;background:#f7fafc}
.muted,footer{font-size:13px;color:var(--gbs-muted)}.more-modules{margin:28px 32px;border-top:1px solid var(--gbs-line)}.more-modules>summary{color:var(--gbs-muted);font-size:14px}.more-modules>.panel{margin:20px 0}.back-to-top{display:block;margin:24px 32px;text-align:right;color:var(--gbs-blue);min-height:44px;padding:10px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:20;background:#fff;padding:12px;color:#07558f}.skip-link:focus{top:10px}canvas,table,pre{max-width:100%}pre{white-space:pre-wrap;overflow-wrap:anywhere}footer{padding:26px}
@media(min-width:1000px){#timePanel>.actions:not(.export-actions){grid-template-columns:repeat(4,minmax(0,1fr))}#absenceForm{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}#absenceForm>label:first-child,#absenceForm>p,#absenceForm>label:has(textarea),#absenceForm>button{grid-column:1/-1}#projectsPanel .project{display:inline-block;width:48%;vertical-align:top;margin-right:2%}#login button{min-height:50px}}
@media(max-width:760px){header{padding:15px 18px;gap:14px}header img{width:105px;height:60px}header strong{font-size:18px}header small{font-size:12px}.welcome{margin:18px 16px 10px;padding:24px}.panel{margin:18px 16px;padding:20px}.workspace-nav{margin:14px 16px 4px;gap:7px}.workspace-nav a{padding:9px 11px;font-size:13px}.tiles{padding:10px 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}button.tile{padding:18px 13px!important;min-height:138px}.tile b{font-size:16px}.tile small{font-size:13px}#login{margin:24px 16px;padding:24px}#message{margin:18px 16px}.more-modules{margin:24px 16px}.back-to-top{margin:20px 16px}h2{font-size:21px}#projectTimeReview,#absenceReviewPanel,#vacationManagement{padding:14px}#dayConfirmationsPanel,#monthClosurePanel{padding:16px}.actions{gap:8px}.actions button{padding:12px 8px;font-size:14px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{scroll-behavior:auto!important}}
@media print{header,.workspace-nav,.tiles,.back-to-top,.more-modules,button{display:none}.app{max-width:none}.panel{box-shadow:none;border:0}body{background:#fff}}

#ownPersonnelNumberPanel:not(:has(form)){padding:12px 20px;margin-top:6px;background:#eaf1f6;box-shadow:none}#ownPersonnelNumberPanel:not(:has(form)) h3{display:none}#ownPersonnelNumberPanel:not(:has(form)) p{margin:0;font-size:14px}
.skip-link{top:0;transform:translateY(-150%)}.skip-link:focus{top:0;transform:translateY(-150%)}.skip-link:focus-visible{top:10px;transform:none}
@media(min-width:1000px){#projectTimeControls{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}#projectTimeControls>p,#projectTimeControls>button{grid-column:1/-1}}

.personal-activation-code{display:block;font-family:ui-monospace,monospace;font-size:18px;font-weight:700;letter-spacing:1px;overflow-wrap:anywhere;padding:16px;background:#edf6fc;border-radius:10px;user-select:all}#staffActivationResult:empty{display:none}#staffActivationResult{margin-top:20px;padding:18px;border:2px solid #07558f;border-radius:12px}#activationStatus{overflow-wrap:anywhere}