:root{--navy:#071a31;--blue:#1568ba;--blue-dark:#0b559c;--sky:#eaf4ff;--ink:#12243a;--muted:#647184;--line:#dce3eb;--paper:#fff;--wash:#f5f7fa;--red:#b83e45;--amber:#9b6513;--green:#287255;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--wash);font-size:15px;line-height:1.55}a{color:var(--blue);text-decoration:none}h1,h2,p{overflow-wrap:anywhere}
header{height:82px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand{display:flex;gap:13px;align-items:center;color:var(--navy);font-weight:800}.brand small{display:block;color:#8993a0;font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}.brand-logo{--logo-size:58px;display:block;width:var(--logo-size);height:var(--logo-size);flex:0 0 var(--logo-size);overflow:hidden;position:relative;border-radius:22%;background:#062341}.brand-logo img{position:absolute;width:calc(var(--logo-size) * 1.503);height:auto;max-width:none;left:calc(var(--logo-size) * -.246);top:calc(var(--logo-size) * -.014)}.brand-logo-small{--logo-size:44px}.brand-logo-login{--logo-size:72px;margin-bottom:24px}nav{display:flex;align-items:center;gap:24px}nav a{color:var(--navy);font-weight:750}nav a:hover{color:var(--blue)}nav span{padding-left:20px;border-left:1px solid var(--line);color:var(--muted)}
.shell{max-width:1180px;margin:0 auto;padding:48px 24px 76px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;box-shadow:0 10px 32px rgba(20,48,82,.06)}h1{font-size:clamp(30px,4.2vw,54px);line-height:1.04;letter-spacing:-.045em;color:var(--navy);margin:5px 0 12px}h2{font-size:19px;color:var(--navy);margin:0 0 18px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-size:12px;font-weight:850;margin:0}.muted{color:var(--muted)}
form{display:grid;gap:18px;margin-top:25px}label{display:grid;gap:7px;color:#34465b;font-weight:700}input,select,textarea{width:100%;border:1px solid #cbd5df;border-radius:7px;padding:11px 12px;background:#fff;color:var(--ink);font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,104,186,.12)}textarea{resize:vertical}button,.button{display:inline-block;width:max-content;border:1px solid var(--blue);border-radius:7px;padding:11px 18px;background:var(--blue);color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(21,104,186,.15)}button:hover,.button:hover{background:var(--blue-dark);color:#fff}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.notice{padding:14px 16px;border-radius:8px;background:#eef2f6;margin:20px 0}.notice.success{background:#e5f4ed;color:var(--green)}.notice.error{background:#fbe8e9;color:var(--red)}.notice.warning{background:#fff4df;color:#735019;border:1px solid #efd7a7}.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}.page-title h1{margin-bottom:0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);padding:20px}.stat strong{display:block;font-size:31px;color:var(--navy)}.stat span{color:var(--muted)}
.table-card{padding:0;overflow:hidden}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.toolbar h2,.toolbar form{margin:0}.toolbar select{padding:8px 34px 8px 10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#f5f7f9}td:first-child{white-space:normal;min-width:280px}td a span{display:block;color:var(--ink);margin-top:2px}.empty{text-align:center!important;color:var(--muted);padding:42px}.badge{display:inline-flex;border-radius:4px;background:#edf1f5;padding:4px 8px;font-size:12px;font-weight:750}.badge.high{background:#fff0d7;color:var(--amber)}.badge.critical{background:#fbe2e2;color:var(--red)}.badge.low{background:#eaf3fb;color:#386981}
.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.message{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);padding:20px;margin-bottom:14px}.message.internal{background:#fff9ea;border-color:#e2c77f}.message-head{display:flex;justify-content:space-between;gap:20px}.message-head time{color:var(--muted);font-size:12px}.message p{margin:13px 0 0}.reply{margin-top:20px}.metadata{align-self:start;position:sticky;top:102px}.metadata dl{display:grid;grid-template-columns:90px 1fr;gap:9px;margin:0 0 24px}.metadata dt{color:var(--muted)}.metadata dd{margin:0;font-weight:700}.metadata form{padding-top:20px;border-top:1px solid var(--line)}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}.check input{width:auto}
.login,.setup{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(470px,100%);padding:42px}.auth-links{margin:18px 0 0;font-size:14px}.privacy{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:24px}.setup .card{width:min(820px,100%)}footer{text-align:center;color:var(--muted);font-size:12px;padding:25px}
.portal{background:linear-gradient(115deg,#fff 0 52%,#f0f7ff 52% 100%);background-attachment:fixed}.portal header{height:96px}.portal .shell{position:relative}.portal .shell:before{content:"";position:fixed;z-index:-1;width:4px;height:120vh;background:rgba(21,104,186,.25);transform:rotate(31deg);left:55%;top:-20%}.portal .page-title{padding:35px 0 28px;border-bottom:1px solid #dce9f5}.portal .page-title h1{max-width:760px;text-transform:uppercase;font-weight:900}.portal .page-title h1:after{content:".";color:var(--blue)}.portal .card{border-radius:18px;box-shadow:0 18px 48px rgba(24,68,111,.10)}.portal .stat{border:0;border-radius:12px;background:var(--sky)}.portal .table-card{background:rgba(255,255,255,.94)}
.portal.auth{background:linear-gradient(120deg,#fff 0 50%,#eaf4ff 50%)}.portal.auth .login:before{content:"SUPPORT.\A SCHNELL.\A ZUVERLÄSSIG.";white-space:pre;position:fixed;left:max(24px,calc((100vw - 1040px)/2));top:24%;font-size:clamp(34px,5vw,68px);line-height:1.05;letter-spacing:-.05em;font-weight:950;color:var(--navy)}.portal.auth .login:after{content:"MacNetSystem · IT, die einfach funktioniert.";position:fixed;left:max(24px,calc((100vw - 1040px)/2));top:57%;font-size:18px;font-weight:750;color:var(--blue)}.portal.auth .login{justify-items:end;width:min(1100px,100%);margin:auto}.portal.auth .login-card{position:relative;z-index:1;background:rgba(255,255,255,.96);box-shadow:0 28px 70px rgba(12,44,78,.18)}
.backend{background:#f3f4f6;color:#26313d;font-size:14px}.backend header{height:64px;padding:0 24px;background:#202b36;border:0}.backend .brand,.backend nav a{color:#fff}.backend .brand small,.backend nav span{color:#aeb8c2}.backend .brand-logo-small{--logo-size:34px}.backend .shell{max-width:none;padding:28px 30px 60px}.backend h1{font-size:30px;letter-spacing:-.02em;text-transform:none;color:#26313d}.backend .eyebrow{color:#6b7681}.backend .card,.backend .stat{border-radius:4px;box-shadow:none}.backend .stat{border-top:2px solid #697887;padding:15px 17px}.backend .stat strong{font-size:24px;color:#26313d}.backend button,.backend .button{border-radius:4px;background:#3a4957;border-color:#3a4957;box-shadow:none}.backend button:hover,.backend .button:hover{background:#25323e}.backend .message{border-left-color:#7c8995}.backend input,.backend select,.backend textarea{border-radius:3px}.backend .badge{border-radius:3px}
.settings-list{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 18px;margin:0}.settings-list dt{color:var(--muted)}.settings-list dd{margin:0;font-weight:700;overflow-wrap:anywhere}.settings-list code{font-size:13px}.settings-security{margin-top:20px}.settings-security p{margin-bottom:0}.field-help{margin:-8px 0 0;color:var(--muted);font-size:13px;font-weight:500}.field-help code{font-size:12px}button:disabled{cursor:not-allowed;opacity:.45}
.settings-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card{display:block;color:var(--ink);transition:border-color .15s,transform .15s}.settings-card:hover{border-color:#9eabb8;transform:translateY(-1px);color:var(--ink)}.settings-card h2{margin:8px 0}.settings-card p{margin:0;color:var(--muted)}.button.small,button.small{padding:7px 10px;font-size:12px}.button.secondary,button.secondary{background:#fff;border-color:#cbd5df;color:#34465b;box-shadow:none}.button.secondary:hover,button.secondary:hover{background:#f2f5f7;color:#243342}.backend button.danger{background:#fff;border-color:#d9a4a7;color:var(--red)}.backend button.danger:hover{background:#fbe8e9}.backend button.success-button{background:#287255;border-color:#287255}.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.one-time-secret{display:grid;gap:7px;margin-top:14px;padding:14px;background:#fff;border:1px solid currentColor;border-radius:6px}.one-time-secret span,.one-time-secret small{font-weight:700}.one-time-secret code{font-size:18px;word-break:break-all;user-select:all}.access-title{align-items:center}.access-editor{max-width:900px;margin:0 0 20px}.access-editor-head,.access-overview-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.access-editor-head h2{margin:3px 0 0}.access-editor-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.access-editor-form label:first-of-type,.access-invite,.access-editor-form .form-actions{grid-column:1/-1}.access-invite{justify-self:start}.access-overview{padding:0;overflow:hidden}.access-overview-head{padding:20px 22px;border-bottom:1px solid var(--line)}.access-overview-head h2,.access-overview-head p{margin:0}.access-overview-head p{color:var(--muted);font-size:13px}.access-list{display:grid}.access-account{display:grid;grid-template-columns:minmax(250px,1.25fr) minmax(170px,.8fr) minmax(150px,.6fr) auto;gap:20px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.access-account:last-child{border-bottom:0}.access-identity{display:flex;align-items:center;gap:12px;min-width:0}.access-identity div{display:grid;min-width:0}.access-identity a{overflow:hidden;text-overflow:ellipsis}.access-avatar{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#e7edf3;color:#34495d;font-weight:850}.access-customer{display:grid;min-width:0}.access-customer span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.access-customer strong,.access-customer small{overflow:hidden;text-overflow:ellipsis}.access-state{display:flex;gap:6px;flex-wrap:wrap}.account-actions{display:flex;justify-content:flex-end;gap:7px;align-items:center;flex-wrap:wrap}.account-actions form{display:block;margin:0}.access-empty{white-space:normal;padding:44px 22px}.access-empty p{margin:5px 0 18px}.access-help{margin-top:20px;padding:0}.access-help summary{cursor:pointer;padding:18px 22px;color:var(--navy);font-weight:800}.access-help>div{padding:0 22px 18px}.access-help p{margin:0}.access-help p+p{margin-top:8px}.customer-page-title{align-items:center}.sync-actions{display:flex;gap:10px;align-items:center;margin:0}.customer-overview{padding:0;overflow:hidden}.customer-overview-head{padding:18px 22px;border-bottom:1px solid var(--line)}.customer-overview-head h2,.customer-overview-head p{margin:0}.customer-overview-head p{color:var(--muted);font-size:13px}.customer-list{display:grid;gap:12px;padding:14px;background:#f4f6f8}.customer-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:4px}.customer-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px}.customer-card-title{display:grid;min-width:0}.customer-card-title strong{font-size:16px;color:var(--navy)}.customer-card-title span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.customer-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}.customer-fact{display:grid;align-content:start;gap:2px;min-width:0;padding:13px 18px;border-right:1px solid #edf0f3;overflow-wrap:anywhere}.customer-fact:nth-child(4n){border-right:0}.customer-fact>span:first-child{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.customer-fact strong{font-weight:700}.customer-fact small{color:var(--muted)}.customer-contact a{overflow-wrap:anywhere}.customer-product{grid-column:span 2}.customer-empty{white-space:normal;padding:42px 22px}.customer-empty p{margin:5px 0 0}.password-change-card{max-width:620px}.password-change-card form{margin-top:0}
@media(max-width:1180px){.access-account{grid-template-columns:minmax(240px,1fr) minmax(160px,.7fr) auto}.access-state{grid-column:2}.account-actions{grid-column:3;grid-row:1/3;max-width:300px}.customer-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.customer-fact:nth-child(4n){border-right:1px solid #edf0f3}.customer-fact:nth-child(3n){border-right:0}}
@media(max-width:820px){header{height:auto!important;padding:15px 18px;align-items:flex-start}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}nav span{display:none}.shell,.backend .shell{padding:28px 16px 60px}.grid.two,.stats,.ticket-layout,.settings-cards{grid-template-columns:1fr}.page-title{align-items:flex-start;flex-direction:column}.metadata{position:static}.portal.auth .login:before,.portal.auth .login:after{display:none}.portal.auth .login{justify-items:center}.portal.auth{background:#edf5fd}.login-card{padding:28px}.table-card{border-radius:5px}.settings-list{grid-template-columns:1fr}.settings-list dd{margin-bottom:8px}.access-editor-form{grid-template-columns:1fr}.access-editor-form label:first-of-type,.access-invite,.access-editor-form .form-actions{grid-column:auto}.access-account{grid-template-columns:1fr;gap:14px}.access-state,.account-actions{grid-column:auto;grid-row:auto}.account-actions{justify-content:flex-start;max-width:none;padding-top:3px}.access-overview-head{align-items:flex-start}.access-overview-head .button{display:none}.sync-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.sync-actions button{width:100%}.customer-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-fact:nth-child(3n){border-right:1px solid #edf0f3}.customer-fact:nth-child(2n){border-right:0}.customer-product{grid-column:span 2}}
@media(max-width:520px){.customer-card-head{align-items:flex-start;flex-direction:column}.customer-card-head .button{width:100%;text-align:center}.customer-facts{grid-template-columns:1fr}.customer-fact,.customer-fact:nth-child(2n),.customer-fact:nth-child(3n),.customer-fact:nth-child(4n){border-right:0;border-bottom:1px solid #edf0f3}.customer-fact:last-child{border-bottom:0}.customer-product{grid-column:auto}.sync-actions{grid-template-columns:1fr}}
.customer-overview-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px}.customer-search{display:grid;gap:4px;width:min(570px,58vw);margin:0}.customer-search label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.customer-search>div{display:flex;gap:7px;align-items:center}.customer-search input{min-width:0;padding:8px 10px}.customer-list{gap:7px;padding:8px}.customer-card-head{padding:10px 14px}.customer-card-title strong{font-size:15px}.customer-facts.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.customer-facts.compact .customer-fact{padding:9px 14px;line-height:1.4}.customer-facts.compact .customer-fact:nth-child(3n){border-right:1px solid #edf0f3}.customer-facts.compact .customer-fact:nth-child(4n){border-right:0}.customer-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.customer-pagination>div{display:flex;gap:7px}
@media(max-width:820px){.customer-overview-head{align-items:stretch;flex-direction:column}.customer-search{width:100%}.customer-facts.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-facts.compact .customer-fact:nth-child(3n){border-right:1px solid #edf0f3}.customer-facts.compact .customer-fact:nth-child(2n){border-right:0}.customer-pagination{align-items:flex-start}}
@media(max-width:520px){.customer-search>div{display:grid;grid-template-columns:1fr auto}.customer-search .secondary{grid-column:1/-1;width:100%;text-align:center}.customer-facts.compact{grid-template-columns:1fr}.customer-facts.compact .customer-fact,.customer-facts.compact .customer-fact:nth-child(2n),.customer-facts.compact .customer-fact:nth-child(3n),.customer-facts.compact .customer-fact:nth-child(4n){border-right:0}.customer-pagination{flex-direction:column}.customer-pagination>div{width:100%}.customer-pagination .button{flex:1;text-align:center}}
.magic-login-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.magic-login-actions button{width:100%;min-height:64px;text-align:center}.magic-login-form+.field-help{margin:14px 0 0;line-height:1.45}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.access-state small{flex-basis:100%;color:var(--muted);font-size:11px}
@media(max-width:520px){.magic-login-actions{grid-template-columns:1fr}}
.admin-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.staff-editor{max-width:760px}.staff-permission{grid-column:1/-1}.staff-overview{padding:0;overflow:hidden}.staff-list{display:grid}.staff-account{display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(320px,auto);gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.staff-account:last-child{border-bottom:0}.staff-actions{display:flex;justify-content:flex-end;gap:6px;align-items:center;flex-wrap:wrap}.staff-actions form{display:block;margin:0}.warning-badge{background:#fff4df;color:#735019}.staff-note{margin-top:18px}
@media(max-width:980px){.staff-account{grid-template-columns:minmax(220px,1fr) auto}.staff-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:620px){.admin-shortcuts{display:grid;grid-template-columns:1fr 1fr}.admin-shortcuts .button{width:100%;text-align:center}.staff-account{grid-template-columns:1fr;gap:11px}.staff-actions{grid-column:auto}.staff-actions .button,.staff-actions button{flex:1;text-align:center}.staff-actions form{display:flex;flex:1}.staff-actions form button{width:100%}}
