:root {
    --navy-950: #030a16;
    --navy-900: #071529;
    --navy-800: #0b2340;
    --navy-700: #12375d;
    --cyan-500: #24c5d9;
    --cyan-300: #67e8f9;
    --gold-500: #f3a126;
    --gold-600: #dc8615;
    --gold-soft: #fff4df;
    --bg: #f3f6fa;
    --card: #ffffff;
    --text: #122033;
    --muted: #66758a;
    --line: #dce4ee;
    --success: #087a55;
    --danger: #c52a25;
    --warning: #a45b08;
    --shadow: 0 16px 45px rgba(7, 21, 41, .09);
    --shadow-soft: 0 5px 18px rgba(7, 21, 41, .07);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 90% 8%, rgba(36,197,217,.10), transparent 24rem),
        linear-gradient(180deg, #eef4fa 0, var(--bg) 28rem);
    color: var(--text);
    font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: #0d6b9e; text-decoration: none; transition: .18s ease; }
a:hover { color: var(--gold-600); }
img { max-width: 100%; }
.wrap { width: min(1220px, calc(100% - 34px)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header {
    position: relative;
    z-index: 10;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(3,10,22,.97), rgba(7,30,56,.94)),
        linear-gradient(90deg, var(--navy-950), var(--navy-800));
    border-bottom: 3px solid var(--gold-500);
    box-shadow: 0 10px 30px rgba(2, 10, 22, .22);
}
.header-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 0%, rgba(36,197,217,.25), transparent 28%),
        linear-gradient(115deg, transparent 55%, rgba(255,255,255,.04));
}
.nav { position:relative; min-height: 88px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { min-width:0; display:flex; align-items:center; gap:17px; color:#fff; }
.brand:hover { color:#fff; transform:translateY(-1px); }
.brand img { width:230px; height:58px; object-fit:cover; object-position:center; border-radius:9px; box-shadow:0 7px 22px rgba(0,0,0,.3); }
.brand-copy { display:grid; line-height:1.1; border-left:1px solid rgba(255,255,255,.20); padding-left:17px; }
.brand-copy strong { font-size:17px; letter-spacing:.02em; }
.brand-copy small { margin-top:7px; color:var(--cyan-300); font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.main-nav { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.main-nav > a { color:#dfeaf7; font-weight:700; padding:10px 12px; border-radius:9px; }
.main-nav > a:hover { color:#fff; background:rgba(255,255,255,.08); }
.main-nav .logout-link { color:#17120b; background:var(--gold-500); margin-left:5px; }
.main-nav .logout-link:hover { color:#fff; background:var(--gold-600); }
.user-chip { display:flex; align-items:center; gap:8px; color:#fff; margin-left:8px; padding:5px 9px 5px 5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; }
.user-avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:#111827; background:linear-gradient(135deg,var(--gold-500),#ffd278); font-weight:900; }
.menu-toggle { display:none; width:45px; height:42px; padding:9px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
.menu-toggle span:not(.sr-only) { display:block; height:2px; margin:5px 0; background:#fff; }

.page-shell { padding:32px 0 56px; min-height:calc(100vh - 170px); }
.page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }
.eyebrow { display:block; color:var(--gold-600); font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:3px 0 0; color:var(--navy-900); font-size:clamp(27px,4vw,40px); line-height:1.15; letter-spacing:-.025em; }
h2 { color:var(--navy-800); font-size:20px; margin:26px 0 13px; }

.card, .message {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(209,220,233,.92);
    border-radius:var(--radius);
    padding:22px;
    margin-bottom:18px;
    box-shadow:var(--shadow-soft);
}
.card { transition:box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow:var(--shadow); }

.form { display:grid; gap:17px; }
.form.narrow { max-width:540px; }
.form label { display:grid; gap:7px; color:#27364a; font-size:14px; font-weight:750; }
.form small { color:var(--muted); font-weight:500; }
input, select, textarea, button, .button {
    min-height:44px;
    font:inherit;
    border-radius:10px;
    border:1px solid #bdcad9;
    padding:10px 13px;
    background:#fff;
    color:var(--text);
}
input:focus, select:focus, textarea:focus {
    outline:0;
    border-color:var(--cyan-500);
    box-shadow:0 0 0 4px rgba(36,197,217,.15);
}
textarea { resize:vertical; min-height:120px; }
button, .button {
    border-color:var(--gold-500);
    background:linear-gradient(135deg,var(--gold-500),#ffb43f);
    color:#181209;
    font-weight:850;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    box-shadow:0 7px 18px rgba(243,161,38,.23);
}
button:hover, .button:hover { color:#fff; border-color:var(--gold-600); background:var(--gold-600); transform:translateY(-1px); }
.button.secondary { color:var(--navy-800); border-color:#b9c8d9; background:#fff; box-shadow:none; }
.button.secondary:hover { color:#fff; border-color:var(--navy-700); background:var(--navy-700); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.check { display:flex!important; align-items:center; justify-content:flex-start; gap:9px!important; }
.check input { width:auto; min-height:0; accent-color:var(--gold-500); }

.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin:6px 0 24px; }
.stats div { position:relative; overflow:hidden; background:linear-gradient(145deg,#fff,#f7fbff); border:1px solid var(--line); border-radius:var(--radius); padding:21px; box-shadow:var(--shadow-soft); }
.stats div::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(var(--cyan-500),var(--gold-500)); }
.stats strong { display:block; color:var(--navy-800); font-size:34px; line-height:1; }
.stats span { display:block; margin-top:8px; color:var(--muted); font-weight:650; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:22px 0 16px; }
.filters { display:flex; gap:9px; flex-wrap:wrap; }

.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
table { width:100%; border-collapse:separate; border-spacing:0; }
th, td { text-align:left; padding:14px 16px; border-bottom:1px solid #e8edf3; white-space:nowrap; }
th { color:#38506c; background:#f5f8fb; font-size:12px; letter-spacing:.055em; text-transform:uppercase; }
tbody tr { transition:background .16s ease; }
tbody tr:hover { background:#f7fbfd; }
tbody tr:last-child td { border-bottom:0; }

.badge { display:inline-flex; align-items:center; min-height:27px; border-radius:999px; padding:4px 10px; color:#31506e; background:#eaf1f8; border:1px solid rgba(49,80,110,.1); font-size:12px; font-weight:800; }
.badge.neu { color:#075f75; background:#dff8fb; }
.badge.in-bearbeitung { color:#164c8c; background:#e3eeff; }
.badge.warten-auf-kunde { color:#8a4b06; background:#fff0cc; }
.badge.erledigt, .badge.aktiv { color:#08724f; background:#dcf8eb; }
.badge.geschlossen, .badge.deaktiviert { color:#566273; background:#e9edf2; }
.badge.kritisch { color:#a9211d; background:#ffe2df; }
.badge.hoch { color:#934a00; background:#ffebc3; }

.ticket-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:22px; }
.meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.message { position:relative; border-left:4px solid var(--cyan-500); }
.message header { display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:13px; }
.message header strong { color:var(--navy-800); }
.message.internal { border-left-color:var(--gold-500); background:linear-gradient(135deg,#fffaf0,#fff); }
.flash { position:relative; padding:14px 17px 14px 48px; border-radius:12px; margin-bottom:20px; color:#174969; background:#e4f4fb; border:1px solid #a9dcea; box-shadow:var(--shadow-soft); }
.flash::before { content:"i"; position:absolute; left:16px; top:12px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#fff; background:#1781a8; font-weight:900; }
.flash.ok { color:#075e42; background:#e3f8ee; border-color:#a6dfc8; }
.flash.ok::before { content:"✓"; background:var(--success); }
.flash.error { color:#8f211d; background:#ffebe9; border-color:#efb8b5; }
.flash.error::before { content:"!"; background:var(--danger); }

.login-page { background:radial-gradient(circle at 20% 5%,rgba(36,197,217,.18),transparent 30rem),linear-gradient(145deg,#071529,#0b2e50 55%,#f3f6fa 55%); }
.login-page .site-header { border-bottom-color:rgba(243,161,38,.85); }
.login-page .page-shell { display:grid; align-content:start; min-height:calc(100vh - 170px); }
.login-page .page-heading, .login-page .form.narrow { width:min(520px,100%); margin-inline:auto; }
.login-page .page-heading { margin-top:35px; }
.login-page .page-heading h1 { color:#fff; }
.login-page .eyebrow { color:#ffd17d; }
.login-page .form.narrow { padding:30px; box-shadow:0 25px 70px rgba(3,10,22,.28); }

.site-footer { color:#9db0c6; background:var(--navy-950); border-top:1px solid rgba(255,255,255,.08); }
.footer-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13px; }
.signature { margin-top:70px; }

@media (max-width: 980px) {
    .brand-copy { display:none; }
    .menu-toggle { display:block; }
    .main-nav { display:none; position:absolute; top:77px; left:0; right:0; padding:15px; flex-direction:column; align-items:stretch; background:rgba(3,10,22,.98); border:1px solid rgba(255,255,255,.14); border-radius:0 0 15px 15px; box-shadow:0 22px 40px rgba(0,0,0,.35); }
    .main-nav.is-open { display:flex; }
    .main-nav > a { text-align:center; }
    .user-chip { justify-content:center; margin:5px 0; }
    .ticket-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
    .wrap { width:min(100% - 22px,1220px); }
    .nav { min-height:75px; }
    .brand img { width:178px; height:45px; }
    .main-nav { top:68px; }
    .page-shell { padding-top:24px; }
    .grid, .stats { grid-template-columns:1fr; }
    .toolbar, .footer-inner { align-items:stretch; flex-direction:column; }
    .filters { width:100%; }
    .filters input, .filters select, .filters button { width:100%; }
    .button, button { max-width:100%; }
    .message header { flex-direction:column; gap:3px; }
    .card, .message { padding:17px; }
    .footer-inner { justify-content:center; padding:18px 0; text-align:center; }
}
@media print {
    .site-header, .site-footer, .no-print, .menu-toggle { display:none!important; }
    body { background:#fff; }
    .wrap { width:100%; }
    .page-shell { padding:0; }
    .card { box-shadow:none; }
    .report { border:0; }
    .report table { font-size:12px; }
}