/* support.css – Support-Center (nur support.html). Nutzt die Tokens aus makeover.css */
.support-page{max-width:1120px;margin:0 auto;padding:40px 20px 72px}
.sp-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding:8px 0 36px;border-bottom:1px solid var(--border)}
.sp-hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.1;margin:0 0 14px;letter-spacing:-.01em}
.sp-hero-text p{max-width:56ch;margin:0;color:var(--text-secondary);font-size:16px;line-height:1.65}
.sp-flow{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.sp-flow li{counter-increment:s;position:relative;display:grid;gap:2px;padding:12px 14px 12px 52px;background:var(--bg-white);border:1px solid var(--border);border-radius:10px}
.sp-flow li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--accent-light);color:var(--accent-hover);border:1px solid var(--accent-ring)}
.sp-flow span{color:var(--text-muted);font-size:14px}
.sp-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0}
.sp-path{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;align-content:start;padding:20px;background:var(--bg-white);border:1px solid var(--border);border-radius:12px;transition:border-color .15s,background .15s}
.sp-path:hover{border-color:var(--accent);background:var(--bg-hover)}
.sp-path:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}
.sp-path svg{color:var(--accent-hover);margin-bottom:6px}
.sp-path strong{font-size:17px}
.sp-path span{color:var(--text-muted);font-size:14px;line-height:1.5}
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.sp-workspace{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;padding:22px;min-width:0}
.support-login-hint{text-align:left;padding:8px 4px}
.support-login-hint h2{margin:0 0 8px;font-size:20px}
.support-login-hint p{margin:0 0 16px;color:var(--text-secondary);max-width:52ch}
.support-shell{display:grid;gap:18px}
.ticket-nav{display:flex;gap:8px;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:10px;width:max-content;max-width:100%}
.ticket-toolbar{display:flex;gap:10px;margin-bottom:12px}
.ticket-toolbar select{min-width:180px}
.ticket-list{display:grid;gap:10px}
.ticket-list:empty::before{content:"Noch keine Anfragen. Wähle oben ein Anliegen oder öffne „Neue Anfrage“.";display:block;padding:28px;text-align:center;color:var(--text-muted);border:1px dashed var(--border);border-radius:10px}
.ticket-type-row{display:flex;gap:10px;flex-wrap:wrap}
.ticket-type-opt{cursor:pointer}
.sp-aside{display:grid;gap:16px;position:sticky;top:84px}
.sp-note{padding:18px;background:var(--bg-white);border:1px solid var(--border);border-radius:12px}
.sp-note h2{margin:0 0 10px;font-size:16px}
.sp-note p{margin:0 0 14px;color:var(--text-secondary);font-size:14px;line-height:1.55}
.sp-note ul{margin:0;padding-left:18px;color:var(--text-secondary);font-size:14px;line-height:1.7}
.sp-faq{margin-top:48px;max-width:760px}
.sp-faq h2{font-size:24px;margin:0 0 16px}
.sp-faq details{border-bottom:1px solid var(--border)}
.sp-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--text-muted);transition:transform .15s}
.sp-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.sp-faq details p{margin:0 0 16px;color:var(--text-secondary);line-height:1.65}
.sp-faq a{color:var(--accent-hover)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.sp-hero,.sp-layout{grid-template-columns:1fr}.sp-aside{position:static}.sp-paths{grid-template-columns:1fr}}
@media (max-width:560px){.sp-workspace{padding:16px}.support-page{padding-top:24px}}

/* ---------- Größere Eingabefelder ---------- */
.support-page input[type="text"],.support-page input[type="search"],.support-page select{font-size:16px;padding:13px 14px;min-height:48px}
.support-page textarea{width:100%;box-sizing:border-box;font-size:16px;line-height:1.65;padding:14px 16px;min-height:240px;resize:vertical;border-radius:10px}
#ticketReply{min-height:200px}
.support-page .form-group label,.support-page .ticket-reply label{font-size:15px;font-weight:600;margin-bottom:8px;display:block}
.support-page .btn{min-height:46px;font-size:15px}
.support-page .btn-sm{min-height:36px;font-size:13px}

/* ---------- Ticketliste ---------- */
.ticket-toolbar{flex-wrap:wrap}
.ticket-toolbar input[type="search"]{flex:1 1 240px}
.ticket-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:10px;transition:border-color .15s,background .15s}
.ticket-row:hover{background:var(--bg-hover)}
.ticket-row.st-offen{border-left-color:#e0a82e}
.ticket-row.st-in-bearbeitung{border-left-color:var(--accent)}
.ticket-row.st-angenommen{border-left-color:#3fb950}
.ticket-row.st-abgelehnt,.ticket-row.st-geschlossen{border-left-color:#6b7280}
.ticket-row.is-done{opacity:.78}
.ticket-row-id{font-weight:700;color:var(--text-muted);font-size:14px;min-width:36px}
.ticket-row-main{cursor:pointer;min-width:0}
.ticket-row-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:16px}
.ticket-row-title strong{overflow-wrap:anywhere}
.ticket-row-meta{margin-top:4px;color:var(--text-muted);font-size:13px}
.ticket-row-side{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.ticket-row{grid-template-columns:1fr}.ticket-row-side{justify-content:flex-start}.ticket-row-id{display:none}}

/* ---------- Ticket-Detail ---------- */
.ticket-detail-head{display:grid;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ticket-detail-title{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ticket-detail-title h3{margin:0;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.ticket-detail-meta{display:flex;gap:6px 16px;flex-wrap:wrap;color:var(--text-muted);font-size:14px;align-items:center}
.ticket-post{display:flex;gap:12px;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:12px;margin-bottom:12px}
.ticket-post.opening{border-color:var(--accent-ring,var(--border))}
.ticket-post-body{min-width:0;flex:1}
.ticket-post-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:14px}
.ticket-post-time{margin-left:auto;color:var(--text-muted);font-size:12px}
.ticket-post-text{font-size:15.5px;line-height:1.65;overflow-wrap:anywhere}
.ticket-status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.ticket-reply{display:grid;gap:10px;margin-top:18px}
.ticket-danger-zone{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;padding:12px 14px;border:1px dashed rgba(239,68,68,.45);border-radius:10px;color:var(--text-muted);font-size:13px}
