/* FTW Helpdesk – Corporate-Design v0.2.2. Kein Legacy-CSS, ein festes Farbschema. */
:root {
  color-scheme: dark;
  --background: #22262c;
  --header: #1c2026;
  --panel: #2b3038;
  --panel-strong: #252a31;
  --field: #20252c;
  --border: #434b56;
  --text: #f3f5f7;
  --secondary: #c0c7d0;
  --subtle: #a8b2bd;
  --red: #d62834;
  --red-hover: #b9202b;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  background: var(--background);
  color: var(--text);
}
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior:smooth;}
body {margin:0; min-height:100vh; background:var(--background); color:var(--text);font-family:Calibri,"Segoe UI",Arial,sans-serif;}
button,input,textarea,select {font:inherit;}
button {cursor:pointer;}
a {color:inherit; text-decoration:none;}
[hidden] {display:none !important;}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,.upload-area:focus-within {outline:2px solid #f17780; outline-offset:2px;}
/* Header */
.site-header {background:var(--header);border-bottom:1px solid var(--border);}
.header-inner {width:min(1160px,calc(100% - 48px)); min-height:96px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;}
.brand {display:inline-flex;align-items:center;gap:17px;min-width:0;flex-shrink:0;}
.brand-logo {display:block;width:70px!important;height:57px!important;max-width:70px!important;min-width:70px;object-fit:contain;flex:0 0 70px;}
.brand-stack {display:flex;flex-direction:column;gap:3px;min-width:0;}
.brand-title {font-size:25px;font-weight:700;line-height:1.1;letter-spacing:0;white-space:nowrap;}
.brand-subtitle {font-size:17px;color:var(--secondary);font-weight:400;line-height:1.15;}
.header-controls {display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end;}
.section-label {font-size:17px;font-weight:700;line-height:1.2;}
.header-link {display:inline-flex;min-height:38px;align-items:center;padding:5px 0;font-size:15px;color:var(--secondary);border-bottom:1px solid transparent;}
.header-link:hover {border-color:var(--red);color:#fff;}
/* Page / intro */
.page-shell {width:min(930px,calc(100% - 40px));margin:0 auto;}
.intro {padding:48px 0 30px;}
h1,h2,h3,h4,p {overflow-wrap:anywhere;}
h1 {margin:0 0 10px;font-size:clamp(30px,4vw,38px);font-weight:700;line-height:1.15;letter-spacing:0;}
.intro p,.dashboard-top p,.login-card p {margin:0;max-width:780px;color:var(--secondary);font-size:16px;line-height:1.5;}
/* Form */
.form-card,.login-card {background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.card-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel-strong);padding:21px 27px;border-bottom:1px solid var(--border);}
.card-heading>div {display:flex;align-items:center;gap:12px;}
.card-heading h2 {margin:0;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:0;}
.soft-pill {color:var(--secondary);font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;white-space:nowrap;}
#ticket-form {padding:30px 28px 27px;}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:0;}
.field {display:flex;flex-direction:column;gap:8px;margin-bottom:23px;min-width:0;}
.field label,.field>span {font-size:15px;font-weight:700;color:var(--text);line-height:1.3;}
.field input,.field select,.field textarea,.filter-row input,.filter-row select {display:block;width:100%;min-height:47px;padding:11px 13px;background:var(--field);border:1px solid #505967;border-radius:7px;color:var(--text);font-size:16px;outline:0;transition:border-color .15s ease;}
.field input:hover,.field select:hover,.field textarea:hover {border-color:#687380;}
.field input:focus,.field select:focus,.field textarea:focus,.filter-row input:focus,.filter-row select:focus {border-color:#e16c76;outline:2px solid #e16c7644;outline-offset:0;}
.field input::placeholder,.field textarea::placeholder,.filter-row input::placeholder {color:#a8b1bd;opacity:1;}
.field textarea {resize:vertical;min-height:145px;line-height:1.45;}
.field small,.optional {font-size:13px!important;font-weight:400!important;color:var(--subtle)!important;}
.required {color:#fa727f;}
.upload-area {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:132px;background:var(--field);border:1px dashed #687380;border-radius:7px;padding:16px;text-align:center;cursor:pointer;}
.upload-area:hover {border-color:#ed6672;}
.upload-icon {font-size:28px;font-weight:400;line-height:1;color:#ed707a;}
.upload-area strong {font-size:16px;font-weight:700;}
.upload-area span:last-child {font-size:13px;color:var(--subtle);}
.field input.visually-hidden {position:absolute;width:1px!important;height:1px!important;min-height:1px!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
.form-footer {border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.form-footer p {max-width:500px;margin:0;color:var(--subtle);font-size:13px;line-height:1.5;}
.primary-button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:10px 19px;border-radius:7px;background:var(--red);border:1px solid var(--red);font-size:15px;font-weight:700;color:white;white-space:nowrap;}
.primary-button:hover {background:var(--red-hover);border-color:var(--red-hover);}
.primary-button:disabled {opacity:.55;cursor:wait;}
.secondary-button {min-height:41px;display:inline-flex;justify-content:center;align-items:center;background:#343b45;border:1px solid var(--border);border-radius:7px;color:var(--text);padding:9px 13px;font-size:14px;font-weight:700;}
.secondary-button:hover {background:#404954;}
.full {width:100%;}
.feedback {margin-top:16px;padding:12px 15px;border-radius:7px;border:1px solid var(--border);background:var(--panel-strong);font-size:14px;line-height:1.5;}
.feedback.success {background:#1f382d;border-color:#3a6952;color:#b9ebd0;}
.feedback.error {background:#41272e;border-color:#8f4850;color:#ffd0d3;}
.below-card {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0 45px;color:var(--subtle);font-size:13px;}
.below-card strong {color:#eceff3;}
.site-footer {border-top:1px solid var(--border);background:var(--header);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px max(24px,calc((100% - 1160px)/2));color:var(--subtle);font-size:13px;}
.site-footer a:hover {color:#fff;text-decoration:underline;}
.footer-identity {display:flex;align-items:center;gap:10px;}
.footer-identity img {display:block;width:28px;height:25px;object-fit:contain;}
/* Admin */
.admin-body {background:var(--background);}
.login-wrap {min-height:calc(100vh - 97px);display:grid;place-items:center;padding:32px 20px;}
.login-card {width:min(450px,100%);padding:32px;}
.login-card h1 {font-size:30px;margin-bottom:10px;}
.login-card p {margin-bottom:28px;}
.login-card .field {margin-bottom:22px;}
.dashboard {width:min(1240px,calc(100% - 48px));margin:0 auto;padding:42px 0 70px;}
.dashboard-top {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px;}
.dashboard-top h1 {margin:0 0 7px;font-size:34px;}
.dashboard-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.stats-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px;}
.stat-card {min-width:0;min-height:115px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:18px 20px;}
.stat-card span {color:var(--secondary);font-size:14px;}
.stat-card strong {font-size:31px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.workspace {display:grid;grid-template-columns:minmax(280px,365px) minmax(0,1fr);min-height:550px;background:var(--panel);border:1px solid var(--border);border-radius:9px;overflow:hidden;}
.ticket-list {border-right:1px solid var(--border);background:var(--panel-strong);min-width:0;}
.list-toolbar {display:flex;align-items:center;gap:11px;padding:20px 18px 15px;}
.list-toolbar h2 {font-size:20px;margin:0;}
.counter {border:1px solid var(--border);border-radius:6px;padding:2px 8px;color:var(--secondary);font-size:12px;}
.filter-row {padding:0 15px 16px;display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:8px;}
.filter-row input,.filter-row select {min-height:39px;font-size:13px;padding:8px 10px;}
.ticket-items {max-height:650px;overflow-y:auto;}
.ticket-row {width:100%;display:flex;flex-direction:column;gap:8px;text-align:left;padding:17px;border:0;border-top:1px solid var(--border);color:var(--text);background:transparent;}
.ticket-row:hover {background:#333b46;}
.ticket-row.active {background:#3d3035;box-shadow:inset 3px 0 var(--red);}
.ticket-row-top,.detail-top {display:flex;justify-content:space-between;gap:12px;align-items:center;}
.ticket-number {color:#f08089;font-size:13px;font-weight:700;}
.ticket-subject {font-size:16px;font-weight:700;line-height:1.3;}
.ticket-meta {color:var(--subtle);font-size:13px;}
.status-pill {padding:4px 8px;background:#3b4450;border:1px solid #535c68;border-radius:6px;font-size:12px;color:#e4e9ee;white-space:nowrap;}
.status-Neu {background:#243957;color:#b9d0ff;border-color:#34567c;}
.status-In-Arbeit {background:#4a3924;color:#ffe2ac;border-color:#655133;}
.status-Behoben,.status-Erledigt {background:#234234;color:#b2ecd0;border-color:#376a52;}
.ticket-detail {padding:27px 30px;min-width:0;}
.detail-placeholder {min-height:370px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:9px;color:var(--subtle);}
.detail-placeholder strong {font-size:18px;color:var(--text);}
.empty-icon {font-size:30px;}
.empty-state {padding:18px;color:var(--secondary);font-size:14px;}
.detail-date {color:var(--subtle);font-size:13px;white-space:nowrap;}
.detail-title {font-size:26px;line-height:1.2;margin:18px 0 20px;font-weight:700;}
.detail-meta {padding:13px 18px;border-radius:7px;background:var(--panel-strong);border:1px solid var(--border);}
.detail-meta-row {display:flex;justify-content:space-between;gap:22px;padding:7px 0;font-size:15px;}
.detail-meta-row span {color:var(--secondary);}
.detail-meta-row strong {font-weight:700;text-align:right;overflow-wrap:anywhere;}
.detail-section-title {font-size:17px;margin:26px 0 11px;font-weight:700;}
.detail-description {white-space:pre-wrap;line-height:1.55;color:var(--secondary);font-size:15px;overflow-wrap:anywhere;}
.edit-ticket {border-top:1px solid var(--border);margin-top:26px;padding-top:6px;}
.edit-ticket .form-grid {gap:16px;}
.edit-ticket .primary-button {margin-top:3px;}
/* Upload previews / lightbox */
.upload-previews,.attachment-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-top:13px;}
.upload-card,.attachment-card {min-width:0;display:flex;flex-direction:column;gap:8px;padding:9px;background:var(--panel-strong);border:1px solid var(--border);border-radius:7px;}
.upload-thumb,.attachment-thumb {width:100%;height:116px;object-fit:contain;background:var(--field);border-radius:5px;display:block;}
.attachment-thumb-button {padding:0;border:0;display:block;width:100%;border-radius:5px;background:transparent;cursor:zoom-in;overflow:hidden;}
.file-fallback {display:grid;place-items:center;height:116px;background:var(--field);font-size:19px;color:#d1d6dc;border-radius:5px;}
.upload-card-name,.attachment-card-name {font-size:13px;line-height:1.3;overflow-wrap:anywhere;}
.upload-card-meta,.attachment-card-meta {font-size:12px;color:var(--subtle);}
.attachment-actions {display:flex;gap:9px;flex-wrap:wrap;}
.attachment-actions a {color:#f38c95;font-size:13px;}
.attachment-actions a:hover {text-decoration:underline;}
.preview-open {overflow:hidden;}
.preview-overlay {position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px;background:#080a0ded;}
.preview-dialog {width:min(1100px,100%);max-height:95vh;min-height:150px;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;}
.preview-bar {display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 16px;border-bottom:1px solid var(--border);}
.preview-bar strong {font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-close {display:grid;place-items:center;min-width:36px;min-height:36px;background:var(--field);border:1px solid var(--border);color:var(--text);border-radius:5px;}
.preview-image {display:block;width:100%;max-height:calc(95vh - 70px);min-height:150px;object-fit:contain;}
.preview-pdf {width:100%;height:min(78vh,820px);border:0;background:#fff;}
@media (max-width:850px) {
  .workspace {grid-template-columns:1fr;}
  .ticket-list {border-right:0;border-bottom:1px solid var(--border);}
  .ticket-items {max-height:300px;}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px) {
  .header-inner {width:calc(100% - 28px);min-height:82px;gap:10px;}
  .brand {gap:9px;}
  .brand-logo {width:48px!important;height:42px!important;max-width:48px!important;min-width:48px;flex-basis:48px;}
  .brand-title {font-size:17px;white-space:normal;}
  .brand-subtitle {font-size:14px;}
  .header-controls {gap:12px;}
  .section-label {display:none;}
  .header-link {font-size:13px;}
  .page-shell {width:calc(100% - 24px);}
  .intro {padding:28px 0 22px;}
  h1 {font-size:29px;}
  .form-grid {grid-template-columns:1fr;}
  #ticket-form {padding:21px 18px;}
  .card-heading {padding:16px 18px;}
  .card-heading h2 {font-size:19px;}
  .soft-pill {font-size:11px;}
  .form-footer {flex-direction:column;align-items:stretch;gap:14px;}
  .form-footer .primary-button {width:100%;}
  .below-card {flex-direction:column;align-items:flex-start;}
  .site-footer {padding:20px 14px;flex-wrap:wrap;}
  .login-card {padding:22px;}
  .dashboard {width:calc(100% - 24px);padding:28px 0 50px;}
  .dashboard-top {flex-direction:column;align-items:flex-start;}
  .dashboard-top h1 {font-size:30px;}
  .stat-card {padding:14px;min-height:95px;}
  .stat-card strong {font-size:26px;}
  .filter-row {grid-template-columns:1fr;}
  .ticket-detail {padding:21px 18px;}
  .detail-meta-row {font-size:14px;}
  .upload-previews,.attachment-list {grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Version 0.3 – neue Funktionen im bestehenden freigegebenen Corporate Design */
.my-shell{padding-bottom:55px}.mine-card{margin-bottom:22px}.mine-items,.public-detail-content,.access-form{padding:24px}.mine-row{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:14px 16px;cursor:pointer;font:inherit}.mine-row:hover,.mine-row:focus-visible{background:#343a44}.mine-row strong{font-size:17px}.muted,.help-note{color:#bdc5cf;font-size:14px}.help-note{line-height:1.6}.access-form>p{margin:0 0 20px;color:#c3cbd6}.access-success{margin-top:20px;padding:20px;border:1px solid #657a6f;border-radius:10px;background:#23382e;line-height:1.6}.access-success h3{margin:0 0 10px}.access-success p{margin:0 0 12px}.access-code-line{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#1b2823;border-radius:6px;padding:13px;margin:10px 0 18px}.access-code-line code{font-size:13px;overflow-wrap:anywhere;user-select:all;color:#fff}.button-group{display:flex;gap:10px;flex-wrap:wrap}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none}.form-grid .field{min-width:0}.filter-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row}.filter-row #search{grid-column:span 2}.filter-row #archive-filter{grid-column:span 1}.filter-row #product-filter{grid-column:span 1}.filter-row #priority-filter{grid-column:span 1}.admin-note-section,.admin-action-section{border-top:1px solid var(--line);margin-top:22px;padding-top:8px}.note-input{display:block;width:100%;min-height:95px;background:#20252c;color:#fff;border:1px solid #505968;border-radius:8px;padding:12px 14px;resize:vertical;font:inherit;margin-bottom:12px}.admin-action-section{display:flex;flex-wrap:wrap;gap:10px}.admin-action-section h3{flex-basis:100%}.danger-button{color:#ffb6bd!important;border-color:#88444f!important}.danger-button:hover{background:#5d2934!important}.timeline{margin:12px 0 16px;border-left:2px solid #5a646f;padding-left:16px}.timeline-entry{padding:12px 0;border-bottom:1px solid #434b56;font-size:14px;line-height:1.5}.timeline-entry small{font-size:12px;color:#b8c1cb}.timeline-entry p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}.private-tag{font-size:12px;color:#ffbec5}.public-detail-content .detail-title{margin-top:0}.my-shell .form-card .card-heading{gap:12px}.access-form .form-grid{align-items:start}.public-detail-content .attachment-list{margin:14px 0}.mine-items .empty-state{padding:0}
@media(max-width:950px){.filter-row{grid-template-columns:1fr 1fr!important}.filter-row #search{grid-column:span 2}.filter-row #archive-filter{grid-column:span 1}}@media(max-width:600px){.filter-row{grid-template-columns:1fr!important}.filter-row #search,.filter-row #archive-filter{grid-column:span 1}.mine-items,.public-detail-content,.access-form{padding:16px}.my-shell .card-heading{flex-wrap:wrap}.access-code-line{display:block}.access-code-line code{display:block;margin-top:10px}.header-controls{flex-wrap:wrap;justify-content:flex-end}.header-link{font-size:13px}}