:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#e8eef4;background:#10151d;color-scheme:dark}
*{box-sizing:border-box}body{max-width:1100px;margin:0 auto;padding:30px 22px}header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:26px}h1{font-size:40px;margin:3px 0}h2{margin:0 0 16px}p,small,footer{color:#a4b1c1}small{font-size:13px}.pill{border:1px solid #55687f;border-radius:99px;padding:7px 12px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.card,.panel{background:#1a2430;border:1px solid #324254;border-radius:14px;padding:20px}.panel{margin:18px 0;overflow-x:auto}.card strong{display:block;font-size:32px;margin-top:8px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:15px 0}label{display:flex;flex-direction:column;gap:6px;color:#b8c8d8;font-size:14px}input,select{background:#111922;color:#e8eef4;border:1px solid #607184;border-radius:8px;padding:10px;width:100%;max-width:100%}button{background:#397b67;color:white;border:0;padding:10px 15px;border-radius:8px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.15)}button:disabled{opacity:.5;cursor:wait}button.unbooked{background:#354252}button.booked{background:#285b45}.hint{font-size:13px}.notice,.alert{border-radius:8px;padding:12px;margin:10px 0}.notice{background:#214d40}.alert{background:#713837}table{width:100%;border-collapse:collapse;margin-top:18px;text-align:left}td,th{padding:12px;border-bottom:1px solid #344353}th{font-size:13px;color:#a4b1c1}footer{margin-top:24px;font-size:12px}@media(max-width:650px){.cards,.form-grid{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column}h1{font-size:30px}}

input.invalid{border:2px solid #f47c7c;background:#342128;outline:none} .field-error{color:#ffaaa9;font-size:12px;line-height:1.4} .danger-zone{border-top:1px solid #485162;margin-top:22px;padding-top:16px} .danger-zone h3{font-size:16px;margin:0 0 10px}.danger{background:#a23535}.secondary{background:#40536a}.delete-warning{color:#ffd4d4}.action-row{display:flex;gap:10px;flex-wrap:wrap}

a{color:#83c7fb}.nav-button{display:inline-block;background:#315b86;color:#fff;padding:11px 16px;border-radius:8px;text-decoration:none;font-weight:700}.flow-list{display:grid;gap:12px}.flow-card{border:1px solid #40566b;border-radius:12px;padding:15px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.flow-card-main{display:grid;gap:7px;min-width:220px;flex:1}.step-tag{font-size:12px;color:#8de1c0}.step-notes{margin:0;white-space:pre-wrap}textarea{width:100%;background:#111922;color:#e8eef4;border:1px solid #607184;border-radius:8px;padding:10px;resize:vertical}

/* Version 0.4: transitions between linearly ordered steps */
.flow-transition{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 0;text-align:center}
.flow-arrow{color:#83c7fb;font-size:24px;line-height:1}
.flow-condition,.flow-condition-simple{display:inline-block;border-radius:20px;padding:6px 13px;font-size:12px;max-width:95%}
.flow-condition{background:#4c3b1d;color:#ffe0a0;border:1px solid #b88738}
.flow-condition-simple{background:#223848;color:#c4d2dd;border:1px solid #44596c}

/* v0.4.1 matrix preview: scalable to 10+ simultaneous group columns */
.matrix-scroll{overflow-x:auto;max-width:100%}.cue-matrix{min-width:740px}.cue-matrix th:first-child{position:sticky;left:0;background:#1a2430;min-width:210px;z-index:1}.cue-matrix thead th{white-space:nowrap}.cue-matrix tbody th{font-size:13px}.cue-matrix tbody th small{display:block;font-weight:400;margin-top:4px}.matrix-future{text-align:center;color:#6f8195;min-width:110px}.cue-matrix td{border-left:1px solid #344353}
input.invalid{border:2px solid #f47c7c;background:#342128}

/* v0.5 live cue x group matrix */
.matrix-panel{overflow:visible}.live-matrix{min-width:max-content}.live-matrix th:first-child{width:260px;min-width:240px;max-width:300px}.live-matrix .group-column{min-width:174px;text-align:center;background:#202e40;position:sticky;top:0}.live-matrix .group-column small{display:block;margin-top:4px}.live-cell{text-align:center;min-width:174px;height:100px;vertical-align:middle;padding:8px}.live-cell button{font-size:12px;padding:7px 8px;margin:4px 0;max-width:165px;white-space:normal}.live-cell small{display:block;font-size:11px;line-height:1.3}.live-time{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.cell-green{background:#193f31;color:#a7f3c8}.cell-yellow{background:#4b3b16;color:#ffe69c}.cell-red{background:#4f2024;color:#ffd0d0}.cell-complete{background:#1c3031;color:#79caa8;font-size:22px}.cell-future{color:#65788a}.matrix-empty{color:#677889}.approve{background:#99671e}

/* v0.5.2: dreistufiger Status nur in der Veranstaltungsbearbeitung */
.booking-cycle{min-width:190px;color:#fff;font-weight:700;border:1px solid transparent}
.booking-gray{background:#505b68;border-color:#87919d}
.booking-yellow{background:#8c6814;border-color:#e7c05c;color:#fff6d2}
.booking-green{background:#216748;border-color:#54bd86;color:#e0ffed}
.live-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}

/* v0.5.6: Ampel der geplanten Startzeit bei noch nicht gestarteten Gruppen. */
.live-matrix .group-column .start-schedule{display:block;margin:6px auto 3px;padding:5px 8px;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.live-matrix .group-column .start-neutral{background:transparent;color:#b6c4d2}
.live-matrix .group-column .start-green{background:#1c633e;color:#d6ffe4}
.live-matrix .group-column .start-yellow{background:#806015;color:#fff2be}
.live-matrix .group-column .start-red{background:#8b2d37;color:#fff0f0}

/* v0.6: widescreen live matrix, compact group columns. Other pages retain 1100px. */
body:has(.live-page-marker){max-width:1920px;width:100%;padding:18px 20px;margin:0 auto}
body:has(.live-page-marker) .matrix-panel{padding:12px 10px;min-width:0}
body:has(.live-page-marker) .matrix-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
body:has(.live-page-marker) .live-matrix{width:max-content;min-width:100%;table-layout:fixed;margin-top:10px}
body:has(.live-page-marker) .live-matrix th:first-child{width:220px;min-width:220px;max-width:220px;position:sticky;left:0;z-index:3;background:#1a2430;box-shadow:2px 0 0 #344353;text-align:left}
body:has(.live-page-marker) .live-matrix .group-column{width:136px;min-width:136px;max-width:136px;padding:8px 5px;white-space:normal;overflow-wrap:anywhere;z-index:2}
body:has(.live-page-marker) .live-matrix td.live-cell{width:136px;min-width:136px;max-width:136px;height:86px;padding:6px 4px}
body:has(.live-page-marker) .live-cell button{max-width:126px;width:100%;font-size:11px;padding:6px 4px;margin:3px 0}
body:has(.live-page-marker) .live-time{font-size:20px}
body:has(.live-page-marker) .live-matrix tbody th{padding:8px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
body:has(.live-page-marker) .live-matrix .group-column .start-schedule{padding:4px 3px}
@media(max-width:800px){body:has(.live-page-marker){padding:12px 8px}body:has(.live-page-marker) .live-matrix th:first-child{width:170px;min-width:170px;max-width:170px}}

.user-nav { background:#162231;padding:10px 24px;display:flex;flex-wrap:wrap;gap:12px;color:#ddd }
.user-nav a {color:#e5effb}
.permission-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.permission-grid label {display:flex;align-items:center;gap:8px}

/* v0.7.1: responsive permission-based navigation */
.user-nav { display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem; }

/* v0.8 Bereichsansicht */
.area-page { max-width: 740px; margin: 2rem auto; }
.area-control { min-height: 330px; text-align: center; padding: 2rem; }
.area-timer { font-size: clamp(3rem, 12vw, 6rem); font-weight: 800; font-variant-numeric: tabular-nums; margin: 1.5rem 0; }
.area-timer.start-green { color: #27b473; } .area-timer.start-yellow { color: #e8b23b; } .area-timer.start-red { color: #eb5b5b; }
.area-action { width: 100%; min-height: 84px; font-size: 1.2rem; }

/* v0.8.3: Folgebereich nicht freigegeben – Warnfarbe statt Grün. */
.area-action-warning { background:#bd7617; color:#fff; }
.area-action-warning:hover { background:#d28a20; }

/* v0.8.6: eigenständiges, gut lesbares Layout für die Bereichssteuerung */
body:has(.area-page){max-width:none;width:100%;margin:0;padding:16px 24px}
body:has(.area-page) .user-nav{max-width:880px;margin:0 auto 18px;justify-content:flex-end;border-radius:12px}
.area-page{width:100%;max-width:880px;margin:0 auto;padding:0 8px}
.area-page > header{margin:10px 0 20px;display:block;text-align:center}
.area-page > header h1{font-size:clamp(32px,4vw,48px);line-height:1.12;margin:8px 0;font-weight:800;overflow-wrap:anywhere}
.area-page > header small{font-size:15px;font-weight:650;letter-spacing:.08em}
.area-control{min-height:380px;margin:0;border-radius:20px;padding:clamp(24px,4vw,48px);overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.area-control > p{font-size:18px;line-height:1.45;margin:0 0 8px}
.area-control .area-group{font-size:clamp(27px,4vw,40px);line-height:1.15;margin:4px 0 8px;color:#f2f7fc;font-weight:800}
.area-control .area-timer{font-size:clamp(64px,11vw,112px);line-height:1.05;margin:10px 0 26px;font-weight:850;letter-spacing:.015em}
.area-control > .area-action{width:min(100%,620px);min-height:92px;border-radius:14px;padding:18px 24px;font-size:clamp(20px,2.4vw,28px);line-height:1.2;font-weight:800;white-space:normal;box-shadow:0 4px 14px #0004}
.area-control > .area-action-warning{background:#bd7617;color:#fff}
.area-control > .area-action-warning:hover{background:#d28a20}
.area-control > .secondary{min-height:54px;font-size:18px;padding:12px 24px}
.area-candidate-picker{width:100%;max-width:660px;display:flex;flex-direction:column;align-items:center;gap:10px}
.area-candidate-picker > label{font-size:18px;font-weight:700}
.area-candidate-buttons{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.area-candidate-button{min-height:52px;padding:10px 18px;border-radius:12px;border:1px solid #4a6179;background:#223140;color:#eaf2fb;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px #0003}
.area-candidate-button:hover:enabled{background:#2b3d50}
.area-candidate-button.selected{background:#58bb9b;border-color:#58bb9b;color:#10211a}
.area-candidate-button:disabled{opacity:.65;cursor:not-allowed}
.area-control > .alert{font-size:17px;line-height:1.5;text-align:left;width:100%;max-width:660px}
.area-control > .alert p{color:#ffe5e3;font-size:17px}
.area-page > .notice,.area-page > .alert{font-size:16px}
@media(max-width:600px){body:has(.area-page){padding:10px 10px}.area-page{padding:0}.area-control{min-height:360px;padding:22px 16px}.area-control > .area-action{min-height:84px}}

/* v0.9.12: Einheitliches Login mit neutraler Fehlermeldung. */
body.login-body{max-width:none;min-height:100vh;margin:0;padding:24px;display:grid;place-items:center}
.login-container{width:100%;max-width:440px}
.login-card{background:#1a2430;border:1px solid #324254;border-radius:16px;padding:30px;box-shadow:0 16px 48px #0004}
.login-brand{color:#89d9b9;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.login-card h1{font-size:30px;margin:0 0 8px}
.login-intro{margin:0 0 24px;line-height:1.5}
.login-card form{display:grid;gap:10px}
.login-card form label{font-weight:600;margin-top:5px}
.login-card input{min-height:44px}
.login-submit{width:100%;min-height:45px;margin-top:12px;font-size:15px}
.login-alert{border:1px solid #c97c70;border-left:4px solid #f49a8f;background:#42282d;color:#ffe5e1;padding:14px 16px;margin:0 0 20px;border-radius:9px;line-height:1.5}
.login-alert strong{display:block;color:#fff;margin-bottom:5px}
.login-alert p{color:#ffe5e1;margin:0;font-size:14px}
.login-footnote{font-size:13px;line-height:1.5;margin:18px 0 0}
@media(max-width:480px){.login-card{padding:22px}}

/* Optional persistent browser login */
.login-card form .login-remember{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-weight:500;cursor:pointer}
.login-card form .login-remember input{min-height:auto;width:18px;height:18px;margin:0;flex:none;accent-color:#58bb9b}
.login-card form .login-remember span{line-height:1.4}

.planned-timing { display:flex; flex-direction:column; gap:.2rem; margin:.4rem 0; font-variant-numeric:tabular-nums; }
.planned-timing strong { font-size:1.35rem; }

/* v0.9.21.27: gleichbleibender Gruppenkopf unabhängig von Sam und Undo-Verfügbarkeit */
body:has(.live-page-marker) .live-matrix .group-column .group-sams{display:block;max-width:100%;height:1.45em;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;}
body:has(.live-page-marker) .live-matrix .group-column .group-undo{display:block;width:100%;max-width:126px;min-height:34px;margin:7px auto 0;padding:6px 3px;font-size:11px;white-space:nowrap;}
body:has(.live-page-marker) .live-matrix .group-column .group-undo:disabled{opacity:.45;cursor:not-allowed;}

/* v0.9.21.29.2: each incoming group has its own immediate action button. */
.area-control .area-arrival-grid{box-sizing:border-box;width:100%;max-width:660px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:14px;align-items:stretch}
.area-control .area-arrival-grid > .area-action{box-sizing:border-box;margin:0;width:100%;min-width:0;min-height:92px;border-radius:14px;padding:16px 12px;font-size:clamp(17px,2vw,23px);line-height:1.2;font-weight:800;white-space:normal;overflow-wrap:anywhere;box-shadow:0 4px 14px #0004}
.area-control .area-arrival-grid > .area-action-warning{background:#bd7617;color:#fff}
.area-control .area-arrival-grid > .area-action-warning:hover:enabled{background:#d28a20}
.area-control .area-arrival-grid > .area-action:only-child{grid-column:1/-1}