:root{--ink:#17202d;--muted:#5d6b80;--line:#d7dfea;--paper:#f7f9fc;--white:#fff;--blue:#1600ab;--blue-soft:#ece9fb;--green:#2ba879;--orange:#e49335;--violet:#7659d4;--shadow:0 14px 38px rgba(31,49,86,.07)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}h1,h2,h3,p{margin:0}h1,h2,h3,strong{letter-spacing:-.025em}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{color:#8290a5;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.06em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--blue);color:white;font-size:11px;font-weight:800;font-style:normal;letter-spacing:-.02em;box-shadow:0 6px 14px #1600ab40}.brand-large{font-size:22px}.brand-logo{height:28px;width:auto;display:block}.brand-large .brand-logo{height:34px}.login-shell{display:grid;place-items:center;min-height:100vh;background:white}.login-panel{display:flex;flex-direction:column;width:100%;max-width:520px;padding:46px clamp(24px,6vw,48px)}.login-copy{margin:auto 0 42px;max-width:420px}.login-copy h1{font-size:54px;line-height:1.05;margin:14px 0}.login-copy em{font-style:normal;color:var(--blue)}.login-form{max-width:420px}.login-form label,.form-grid label,.comment-form label{display:flex;flex-direction:column;gap:7px;color:#445065;font-size:12px;font-weight:700}.login-form label+label{margin-top:18px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:12px 13px;outline:0;transition:.2s}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1600ab22}textarea{resize:vertical}.password-wrap{position:relative}.password-wrap input{padding-right:80px}.password-toggle{position:absolute;right:9px;top:9px;color:var(--blue);background:none;font-size:11px;font-weight:700}.login-hint{color:#9ba6b8;font-size:12px;margin-top:16px}.form-error{color:#d85454;min-height:22px;margin-top:10px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border-radius:9px;padding:11px 17px;font-weight:700;transition:.2s}.primary-button{background:var(--blue);color:#fff;box-shadow:0 5px 14px #1600ab33}.primary-button:hover{background:#12008c;transform:translateY(-1px)}.secondary-button{background:#eef1f6;color:#59667b}.full-width{width:100%;margin-top:24px}.login-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#1600ab,#5b3ee0);display:grid;place-items:center}.login-visual:after{content:"";position:absolute;inset:15%;border:1px solid #ffffff30;border-radius:50%;transform:scale(1.5)}.visual-card{z-index:1;display:flex;align-items:center;gap:14px;width:360px;padding:20px;border-radius:16px;background:#ffffffea;box-shadow:0 20px 45px #1600ab4d}.visual-card strong{display:block;font-size:15px}.visual-card p{color:#778397;font-size:12px;margin-top:4px}.status-dot{width:10px;height:10px;border-radius:50%;background:#37bb89}.visual-arrow{margin-left:auto;color:var(--blue);font-size:23px}.visual-orb{position:absolute;border-radius:50%;background:#ffffff14}.orb-one{width:460px;height:460px;top:-130px;right:-170px}.orb-two{width:280px;height:280px;bottom:-120px;left:-70px}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;display:flex;flex-direction:column;width:240px;height:100vh;padding:30px 18px 20px;border-right:1px solid var(--line);background:#fff}.main-nav{margin-top:56px}.nav-item{display:flex;width:100%;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;background:transparent;color:#7c8799;text-align:left;font-weight:600;margin:5px 0}.nav-item.active,.nav-item:hover{background:var(--blue-soft);color:var(--blue)}.nav-icon{font-size:19px;width:18px;text-align:center}.nav-count{margin-left:auto;border-radius:12px;background:#f0f3f8;padding:1px 8px;font-size:11px}.active .nav-count{background:#ded7fb;color:var(--blue)}.sidebar-bottom{margin-top:auto}.help-box{display:flex;align-items:center;gap:10px;margin-bottom:25px;padding:13px 10px;border-radius:10px;background:#f7f8fc;color:#7c8799}.help-box>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ece9fb;color:var(--blue);font-weight:700}.help-box strong,.help-box small,.user-mini strong,.user-mini small{display:block}.help-box strong{font-size:11px;color:#536075}.help-box small,.user-mini small{font-size:10px;color:#9ca6b5}.logout-button{display:flex;gap:12px;align-items:center;color:#8b96a8;background:none;padding:10px 12px;margin-bottom:20px}.user-mini{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding:18px 5px 0}.user-mini>span{margin-left:auto;color:#aab3c2}.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#ded7fb;color:var(--blue);font-size:11px;font-weight:800}.main-content{margin-left:240px;width:calc(100% - 240px);padding:0 48px 50px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.breadcrumb{display:flex;align-items:center;gap:12px;color:#a4adbc;font-size:12px}.breadcrumb strong{color:#5e6b80}.top-actions{display:flex;align-items:center;gap:22px}.icon-button{position:relative;background:none;color:#78869b;font-size:22px}.icon-button i{position:absolute;right:-1px;top:1px;width:6px;height:6px;border-radius:50%;background:#eb6c65}.page-view{max-width:1180px;margin:42px auto 0}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px}.page-heading h2{font-size:30px;margin:7px 0}.page-heading h2 span{color:#f0b54d;font-size:23px}.page-heading.compact{align-items:flex-start}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.stat-card{display:flex;gap:15px;padding:20px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.stat-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:21px}.blue{color:var(--blue);background:#ece9fb}.green{color:var(--green);background:#e9faf3}.violet{color:var(--violet);background:#f1edff}.orange{color:var(--orange);background:#fff5e7}.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{font-size:11px;color:#8490a3}.stat-card strong{font-size:27px;line-height:1.3}.stat-card small{font-size:10px;margin-top:3px}.positive{color:var(--green)}.warning{color:#d88935}.neutral{color:#a0aabd}.content-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.card-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line)}.card-heading h3{font-size:15px}.card-heading p{font-size:11px;margin-top:3px}.text-button{background:none;color:var(--blue);font-size:11px;font-weight:700}.ticket-row{display:flex;align-items:center;gap:12px;padding:15px 24px;border-bottom:1px solid var(--line)}.ticket-row:last-child{border-bottom:0}.ticket-id{color:#9ba6b8;font-size:10px;font-weight:700;width:62px}.ticket-main{min-width:0;flex:1}.ticket-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}.ticket-main small{color:#5d6b80;font-size:11.5px;line-height:1.5}.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}.pill:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.pill-open{color:var(--blue);background:#ece9fb}.pill-progress{color:#d78a2b;background:#fff4e2}.pill-done{color:#269a6d;background:#e9faf3}.priority-high{color:#d65757}.priority-medium{color:#cf8b30}.priority-low{color:#7190b7}.row-arrow{background:none;color:#a4afbd;font-size:18px}.department-stats{padding:20px 24px}.dept-line{margin-bottom:20px}.dept-line:last-child{margin-bottom:0}.dept-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px}.dept-label span:last-child{color:#8793a5;font-weight:700}.bar{height:7px;border-radius:10px;background:#eef1f5;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:var(--blue)}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;align-items:center}.search-box{display:flex;align-items:center;gap:7px;flex:1;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;color:#9aa5b5}.search-box input{border:0;padding:10px 0;box-shadow:none}.toolbar select{width:auto;min-width:148px;flex:0 1 auto} .toolbar .search-box{flex:1 1 200px;min-width:170px} .toolbar button{flex:0 0 auto;white-space:nowrap}.all-tickets-card{overflow:hidden}.all-ticket-list .ticket-row{padding:18px 24px}.all-ticket-list .ticket-row:hover{background:#fbfcff}.empty-state{text-align:center;color:#8d99aa;padding:45px 20px}.modal-backdrop{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:#17202d82;backdrop-filter:blur(3px)}.modal{width:min(680px,100%);max-height:92vh;overflow:auto;border-radius:15px;background:#fff;box-shadow:0 25px 80px #17202d45}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 28px 18px}.modal-header h2{font-size:24px;margin-top:5px}.close-button{background:#f1f3f7;color:#78859a;border-radius:50%;width:28px;height:28px;font-size:22px;line-height:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 28px 22px}.span-2{grid-column:span 2}.service-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:15px;border-radius:10px;background:#f5f7fb}.fieldset-title{grid-column:span 2;margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8290a5}.merge-hint{grid-column:span 2;font-size:11px;color:#8a96a7;line-height:1.5;margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--line)}.detail-modal{width:min(1100px,96vw);max-height:94vh}.detail-modal .modal-header{padding:30px 38px 23px}#detailContent{padding:0 38px 10px}.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.detail-meta span{display:block;color:#5d6b80;font-size:11px}.detail-meta strong{display:block;font-size:12px;margin-top:3px}.detail-meta .detail-edit{margin-top:4px;padding:6px 8px;font-size:12px;border-radius:7px}.detail-description{padding:24px 0;font-size:13px;color:#59667a;white-space:pre-wrap;word-break:break-word}.comments{border-top:1px solid var(--line);padding:23px 0}.comment{padding:13px 0;border-bottom:1px solid #f0f2f6}.comment:last-child{border-bottom:0}.comment small{color:#6b7688}.comment p{margin-top:5px;font-size:12px;color:#59667a}.comment-form{padding:24px 38px 30px;border-top:1px solid var(--line)}.comment-form .primary-button{margin-top:12px}.toast{position:fixed;right:25px;bottom:25px;z-index:20;padding:13px 18px;border-radius:9px;background:#17202d;color:#fff;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:none;opacity:1}.checkbox-label{display:flex!important;flex-direction:row!important;align-items:center;gap:7px!important;font-size:11px!important;font-weight:600!important;color:#7e8a9d!important;margin-top:3px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.timeline-heading span{color:#98a3b3;font-size:10px}.mail-comment{background:#f6f8ff;border-radius:8px;padding:10px 12px;margin:7px 0}.mail-comment small{color:var(--blue)}.checkbox-label input{width:auto}.comment-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.comment-actions .primary-button{margin:0}.mail-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}.mail-status{display:flex;align-items:center;gap:6px;color:#8a96a7;font-size:10px}.mail-status i{width:7px;height:7px;border-radius:50%;background:#e9a43e}.mail-inbox{padding:4px 0}.mail-row{display:flex;align-items:center;gap:12px;width:100%;padding:17px 24px;border-bottom:1px solid #f0f2f6;background:#fff;text-align:left}.mail-row:hover{background:#fbfcff}.mail-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#edf2ff;color:var(--blue);font-size:19px}.mail-main{flex:1;min-width:0}.mail-main strong,.mail-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-main strong{font-size:12px}.mail-main small,.mail-date{color:#919dad;font-size:10px}.mail-date{white-space:nowrap}.setup-content{text-align:center;padding:30px 28px 35px}.setup-content h3{margin:12px 0 7px;font-size:15px}.setup-content p{font-size:12px;margin-bottom:20px}.setup-icon{display:grid;place-items:center;margin:auto;width:50px;height:50px;border-radius:14px;background:#edf2ff;color:var(--blue);font-size:25px}@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh}.main-content{padding:0 22px 40px}.sidebar{width:190px}.main-content{margin-left:190px;width:calc(100% - 190px)}}@media(max-width:650px){.sidebar{position:static;width:100%;height:auto;padding:18px}.app-shell{display:block}.main-content{margin:0;width:100%;padding:0 16px 30px}.main-nav{display:flex;margin-top:18px}.nav-item{justify-content:center}.nav-item span:not(.nav-icon){display:none}.sidebar-bottom{display:none}.topbar{height:70px}.top-actions .icon-button{display:none}.page-heading{display:block}.page-heading .primary-button{margin-top:18px}.stat-grid{gap:10px}.stat-card{padding:14px 10px;gap:8px}.stat-card strong{font-size:22px}.stat-icon{width:32px;height:32px;font-size:16px}.toolbar{flex-wrap:wrap}.search-box{flex-basis:100%}.toolbar select{flex:1;width:auto}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.service-fields{grid-template-columns:1fr}.detail-meta{grid-template-columns:1fr 1fr}.ticket-row{padding:14px 12px}.ticket-id{width:45px}.ticket-row .pill{display:none}} .comment-event{background:#f5f7fb;border-radius:8px;padding:10px 12px;margin:7px 0;border-bottom:0!important}.comment-event small{color:var(--violet);font-weight:700}.comment-event p{color:#59667a} .danger-button{background:#fdecec;color:#d24b4b}.danger-button:hover{background:#f7dada}.primary-button.danger-button{background:#d24b4b;color:#fff;box-shadow:0 5px 14px #d24b4b33}.primary-button.danger-button:hover{background:#bd3d3d}.trash-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.trash-actions .secondary-button{padding:8px 12px;font-size:12px}.trash-row .ticket-main small{color:#a2748a}.user-row{gap:12px}.user-row .avatar{flex:none}.checkbox-row{display:flex;gap:20px;margin-top:8px}.modal-sm{width:min(440px,100%)}.modal-sm .modal-header{padding-bottom:8px}#confirmMessage{padding:0 28px}.modal-sm .modal-actions{margin-top:6px} .help-box{width:100%;border:0;text-align:left;font:inherit}.help-box:hover{background:#efeafd;color:var(--blue)}.help-box:hover>span{background:var(--blue);color:#fff}.help-modal{width:min(600px,100%)}.help-content{padding:4px 28px 8px}.help-intro{font-size:13px;line-height:1.6;margin-bottom:20px}.help-step{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid #f0f2f6}.help-step:last-of-type{border-bottom:0}.help-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:800}.help-step strong{font-size:13px}.help-step p{margin-top:4px;font-size:12px;line-height:1.6;color:#59667a}.help-step ul{margin:6px 0 0;padding-left:18px}.help-step li{font-size:12px;line-height:1.6;color:#59667a;margin-top:3px}.help-step b{color:var(--ink);font-weight:700}.help-tip{margin-top:18px;padding:13px 15px;border-radius:10px;background:#f5f7fb;font-size:12px;line-height:1.6;color:#536075} /* "Neu / unbearbeitet"-Kennzeichnung */ .pill-new{color:#c2410c;background:#ffedd5}.pill-new:before{background:#ea7317} .ticket-row-new{background:#fffaf3}.ticket-row-new:hover{background:#fff4e6} .ticket-row-new .ticket-id{color:#c2410c} .review-banner{margin:18px 0 4px;padding:12px 15px;border-radius:10px;background:#fff6ec;border:1px solid #f6d8b4;color:#9a5312;font-size:12px;line-height:1.55} .review-banner strong{color:#7c400c} /* E-Mail-Eintrag in der Aktivität */ .mail-entry{margin:10px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .mail-entry.mail-in{border-left:3px solid var(--blue)} .mail-entry.mail-out{border-left:3px solid var(--green)} .mail-entry-head{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;background:#f6f8ff} .mail-entry.mail-out .mail-entry-head{background:#eefaf4} .mail-dir{font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--blue)} .mail-entry.mail-out .mail-dir{color:var(--green)} .mail-entry-date{font-size:10px;color:#8a96a7} .mail-entry-head-right{display:flex;align-items:center;gap:10px} .quote-btn{background:#eef1f6;color:#59667b;font-size:10px;font-weight:700;border-radius:6px;padding:3px 8px;line-height:1.4} .quote-btn:hover{background:#e0e5ee;color:var(--blue)} .comment .quote-btn{float:right;margin-top:-2px} .inline-reply{border-top:2px solid var(--line);margin-top:8px;padding-top:18px} .inline-reply .form-grid{padding:14px 0 0} .inline-reply-actions{display:flex;justify-content:flex-end;padding:6px 0 4px} .mail-entry-meta{display:flex;gap:7px;align-items:baseline;padding:9px 13px 2px} .mail-entry-meta span{font-size:10px;color:#94a0b0} .mail-entry-meta strong{font-size:12px;color:var(--ink)} .mail-entry-subject{padding:2px 13px 0;font-size:12px;font-weight:700;color:#3a4759} .mail-entry-body{padding:8px 13px 13px;font-size:12px;line-height:1.6;color:#59667a;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto} .settings-card{grid-column:1/-1} .settings-body{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px} .setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;font-weight:600;color:var(--ink)} .setting-row span{display:flex;flex-direction:column;gap:2px} .setting-row small{font-size:10px;font-weight:400;color:var(--muted)} .setting-row select,.setting-row input{width:auto;min-width:150px;flex:0 0 auto} .settings-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:4px} .sig-toggle{display:block;margin-top:10px;background:none;color:#6b7688;font-size:11px;font-weight:600;padding:2px 0;text-align:left} .sig-toggle:hover{color:var(--blue)} .sig-body{display:block;margin-top:6px;padding-left:10px;border-left:2px solid var(--line);color:#6b7688} /* Das Detailfenster ist deutlich breiter als frueher. Ab mittlerer Breite passen vier Spalten in die Kopfdaten, sonst wirkt die Flaeche leer. */ @media(min-width:900px){ .detail-modal .detail-meta{grid-template-columns:repeat(4,1fr)} .detail-modal .mail-entry-body{max-height:none} } #refreshButton{font-size:20px}#refreshButton:hover{color:var(--blue)}#refreshButton.is-refreshing{animation:dgpt-spin .8s linear infinite;color:var(--blue)}@keyframes dgpt-spin{to{transform:rotate(360deg)}} /* Berichte */ .report-section{margin-bottom:38px} .report-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px} .report-section-head h3{font-size:18px} .report-section-head span{font-size:12px;color:var(--muted)} .report-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px} .report-cols.report-cols-3{grid-template-columns:1fr 1fr 1fr} .breakdown-row{gap:12px} .breakdown-label{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .breakdown-nums{flex:0 0 auto;text-align:right;white-space:nowrap;font-size:12px;color:#8290a5} .breakdown-nums b{font-size:14px} .report-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px 22px} .report-card>h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8290a5;margin-bottom:6px} .report-card>h4+.report-sub{margin-top:-2px} .report-sub{font-size:11px;color:var(--muted);margin-bottom:14px} .report-big{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:2px 0 4px} .report-big small{font-size:12px;font-weight:600;color:var(--muted)} .kpi-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #f0f2f6;font-size:13px;color:#59667a} .kpi-row:last-child{border-bottom:0} .kpi-row b{font-size:15px;color:var(--ink)} .kpi-split{display:flex;gap:10px;margin-top:14px} .kpi-chip{flex:1;text-align:center;padding:11px 8px;border-radius:10px;background:#f5f7fb} .kpi-chip span{display:block;font-size:10px;color:#8290a5;margin-bottom:3px} .kpi-chip strong{font-size:18px} .trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px} .trend-up{color:#c2410c;background:#ffedd5} .trend-down{color:#269a6d;background:#e9faf3} .trend-flat{color:#7c8799;background:#eef1f6} .report-timeline{display:flex;align-items:flex-end;gap:9px;height:210px;padding:20px 4px 0} .tl-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;min-width:0} .tl-bar-wrap{width:100%;display:flex;justify-content:center;align-items:flex-end;flex:1} .tl-bar{width:100%;max-width:44px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#5b3ee0,var(--blue));min-height:3px;transition:.2s} .tl-col:hover .tl-bar{filter:brightness(1.12)} .tl-count{font-size:12px;font-weight:700;color:#5e6b80} .tl-label{font-size:10px;color:#94a0b0;white-space:nowrap} .report-empty{color:#8d99aa;padding:30px 4px} @media(max-width:760px){.report-cols,.report-cols.report-cols-3{grid-template-columns:1fr}.tl-label{transform:rotate(-45deg)}} /* Alle Tickets – Baumstruktur + Liste */ .tickets-layout{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start} .tickets-main{min-width:0} .tickets-tree{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 10px;position:sticky;top:12px} .tree-head{display:flex;align-items:center;justify-content:space-between;padding:4px 10px 10px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8290a5} .tree-head small{background:#eef1f6;color:#59667a;border-radius:20px;padding:1px 9px;font-weight:700} .causer-tree{display:flex;flex-direction:column;gap:2px} .tree-item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;font-size:13px;color:#4a5568} .tree-item:hover{background:#f4f6fb} .tree-item.active{background:var(--blue-soft);color:var(--blue);font-weight:700} .tree-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tree-count{font-size:11px;font-weight:700;color:#8290a5;background:#eef1f6;border-radius:20px;padding:1px 8px;min-width:20px;text-align:center} .tree-item.active .tree-count{background:#fff;color:var(--blue)} .tree-root{font-weight:700;color:var(--ink)} .tree-cat{font-weight:600;color:var(--ink)} .ticket-section{display:flex;align-items:center;gap:10px;padding:12px 6px 6px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#5d6b80} .ticket-section:first-child{padding-top:2px} .ticket-section em{font-style:normal;background:#eef1f6;color:#59667a;border-radius:20px;padding:1px 8px;font-size:11px} /* Die Ansichten-Leiste braucht rund 250px. Blieb sie bis 820px stehen, war die Ticketliste daneben so schmal, dass die Zeilen umbrachen. Sie rueckt jetzt frueher nach oben. Zusaetzlich duerfen die Kennzeichen umbrechen, damit der Betreff auch in schmalen Fenstern lesbar bleibt. */ @media(max-width:1100px){.tickets-layout{grid-template-columns:1fr}.tickets-tree{position:static}} @media(max-width:700px){ .ticket-row{flex-wrap:wrap;row-gap:6px} .ticket-main{flex:1 1 100%;order:1} .ticket-id{order:0} } /* Status "Warten auf Rückmeldung" + 14-Tage-Untätigkeitshinweis */ .pill-waiting{color:#6b4bc0;background:#ece9fb}.pill-waiting:before{background:#7659d4} .pill-stale{color:#b42318;background:#fde3e0}.pill-stale:before{background:#e04a3c} .ticket-row-stale{background:#fff7f6}.ticket-row-stale:hover{background:#ffeeec} .ticket-row-stale .ticket-id{color:#b42318} .pill-reply{color:#0369a1;background:#e0f2fe}.pill-reply:before{background:#0ea5e9}.ticket-row-reply{background:#f4fbff}.ticket-row-reply:hover{background:#e8f6ff}.ticket-row-reply .ticket-id{color:#0369a1} .stale-banner{background:#fff1f0;border-color:#f3c3bd;color:#9a2f27}.stale-banner strong{color:#7a231c} /* F9 VIP + F11 Alter */ .pill-vip{color:#7a4f06;background:#fde9a9;font-weight:700}.pill-vip:before{background:#d97706} .pill-age{color:#7c4a03;background:#ffedd5}.pill-age:before{background:#ea7317} /* VIP: ruhiger Hintergrund plus deutlicher Randstreifen – der Streifen traegt die Kennzeichnung, damit die Zeile nicht als Warnung missverstanden wird. */ .ticket-row-vip{background:#fffdf4;box-shadow:inset 4px 0 0 #d97706} .ticket-row-vip:hover{background:#fff9e8} .ticket-row-vip .ticket-id{color:#7a4f06;font-weight:700} .ticket-row-vip .ticket-main strong{color:#4a3407} /* VIP und Alterswarnung koennen zusammentreffen: beide Streifen nebeneinander. */ .ticket-row-vip.ticket-row-aging{box-shadow:inset 4px 0 0 #d97706, inset 7px 0 0 #f59e0b} .ticket-row-aging{box-shadow:inset 3px 0 0 #f59e0b} .vip-select{font-weight:600} .customer-row .avatar{margin-right:10px} .cust-hist-row{cursor:pointer} /* Konfiguration: pflegbare Auswahllisten */ .config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .option-card .card-heading{padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .option-count{flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:#eef1f6;color:#5b6a80;font-size:12px;font-weight:600;display:grid;place-items:center} .option-body{padding:14px 20px 18px;display:flex;flex-direction:column;gap:16px} .option-label{display:block;font-size:12px;font-weight:600;color:#5b6a80;margin-bottom:6px} .option-label .muted{font-weight:400} .option-add{display:flex;gap:8px;padding:0 0 4px;border-top:0} .option-add input{flex:1} .option-add .secondary-button{flex:none;white-space:nowrap} .option-picker-row{display:flex;gap:8px} .option-select{flex:1;min-width:0} .option-remove-btn{flex:none;white-space:nowrap;border:1px solid var(--line);background:#fff;color:#b42318;border-radius:8px;padding:0 14px;cursor:pointer} .option-remove-btn:hover:not(:disabled){background:#fdecec;border-color:#f3c3bd} .option-remove-btn:disabled{color:#aab3c0;cursor:not-allowed} .option-import{border-top:1px solid var(--line);padding-top:14px} .option-import-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .option-csv{flex:1;min-width:0;font-size:12px} .option-import-btn{flex:none;white-space:nowrap} .option-replace{display:flex;align-items:center;gap:6px;font-size:12px;color:#5b6a80;margin-top:10px} .option-replace input{width:auto;margin:0} .option-import-hint{font-size:11px;margin:6px 0 0} @media(max-width:900px){.config-grid{grid-template-columns:1fr}} /* Modal-Header bleibt beim Scrollen sichtbar (Schließen jederzeit erreichbar) */ .modal-header{position:sticky;top:0;z-index:3;background:#fff;border-radius:15px 15px 0 0} .comment-actions .close-bottom{margin-right:auto} /* Klickbare Dashboard-Kacheln (P9) */ .stat-clickable{cursor:pointer;transition:.15s;text-align:left} .stat-clickable:hover{border-color:var(--blue);box-shadow:0 16px 40px rgba(22,0,171,.12);transform:translateY(-2px)} .stat-clickable:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* Datei-Anhänge (F4) */ .att-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 13px 13px} .att-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 11px;border:1px solid var(--line);border-radius:20px;background:#f6f8ff;color:var(--blue);font-size:11px;font-weight:600} .att-chip:hover{background:var(--blue-soft);border-color:var(--blue)} .att-chip .att-size{color:#94a0b0;font-weight:500} /* Textlink-Button (z. B. Passwort vergessen) */ .link-button{display:block;width:100%;margin-top:14px;background:none;color:var(--blue);font-size:12px;font-weight:700;text-align:center} .link-button:hover{text-decoration:underline} /* Benutzermenü unten links (B1) */ .user-menu{position:relative} .user-mini{width:100%;text-align:left;background:none;border-top:1px solid var(--line);cursor:pointer;transition:.15s} .user-mini:hover{background:#f7f8fc} .user-mini-text{min-width:0} .user-mini-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-mini-dots{margin-left:auto;color:#aab3c2;font-size:18px;line-height:1;letter-spacing:1px} .user-menu-popup{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(23,32,45,.16);padding:6px;z-index:5;display:flex;flex-direction:column;gap:2px} .user-menu-popup button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;border-radius:8px;color:#59667b;background:none;font-weight:600} .user-menu-popup button:hover{background:var(--blue-soft);color:var(--blue)} /* Ticket-Anhänge im Detail + Formular-Hinweis (F4b) */ .ticket-attachments{margin:2px 0 6px} .ticket-attachments .att-heading{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;color:#8290a5;padding:0 13px} .ticket-attachments .att-list{padding-top:6px} .field-hint{font-weight:500;color:#9ca6b5;font-size:10px;margin-top:3px} /* P7: Pflichtfelder klar kennzeichnen – farbliche Markierung direkt am Feld (funktioniert unabhaengig davon, dass das