/* ============================================================
   IT-Services Neumann — Ticketsystem
   Design-Tokens
   ============================================================ */
:root {
  /* Markenfarben (aus dem Logo) */
  --color-graphite:        #4B4949;
  --color-graphite-dark:   #2E2D2D;
  --color-graphite-darker: #232222;
  --color-green:           #7FBA27;
  --color-green-deep:      #5C8F1C;
  --color-green-tint:      #EAF4DC;

  /* Neutrale Basis */
  --color-paper:      #F5F6F2;
  --color-surface:    #FFFFFF;
  --color-border:     #E3E1DB;
  --color-border-strong: #CFCDC5;
  --color-text:       #2B2A28;
  --color-text-muted: #6E6B66;
  --color-text-faint: #9A968F;

  /* Statusfarben — bewusst getrennt von den Markenfarben,
     damit Status auf einen Blick von "Marke" unterscheidbar bleibt */
  --color-amber:      #B9791A;
  --color-amber-tint: #FBF1DE;
  --color-blue:       #3D6FB4;
  --color-blue-tint:  #E7EFF9;
  --color-violet:     #7A5FB0;
  --color-violet-tint:#EFE9F7;
  --color-danger:     #C0463A;
  --color-danger-tint:#FBEAE7;

  /* Typografie */
  --font-display: 'Archivo', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Form */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(35,34,34,.06), 0 1px 0 rgba(35,34,34,.04);
  --shadow-panel: 0 12px 32px rgba(35,34,34,.14);
}

/* ============================================================
   Reset & Basis
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-graphite-dark);
  margin: 0 0 .5em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
a { color: var(--color-green-deep); }
a:hover { color: var(--color-graphite-dark); }
:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Markenleiste (feine Signal-Linie, referenziert das Cloud-Icon
   im Logo: ein "Signal", das durch das System läuft)
   ============================================================ */
.brand-rule {
  height: 3px;
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green) 18%, transparent 55%);
}

/* ============================================================
   Topbar (eingeloggter Bereich)
   ============================================================ */
header.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-graphite-dark);
  color: #fff;
  padding: 0 28px;
  height: 64px;
}
header.topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
header.topbar .brand img {
  height: 38px; width: auto; display: block;
}
header.topbar .brand-tagline {
  font-size: .72rem; color: #9C9A94; padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.15);
  text-transform: uppercase; letter-spacing: .04em;
}
header.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: .9rem;
}
header.topbar .topbar-right a {
  color: #E7E5E0;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
header.topbar .topbar-right a:hover { background: rgba(255,255,255,.08); color: #fff; }

main { max-width: 100%; margin: 0; padding: 32px 40px 64px; box-sizing: border-box; }

/* ============================================================
   Auth-Seiten: Split-Screen mit Markenpanel
   ============================================================ */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-panel {
  background:
    radial-gradient(circle at 15% 20%, rgba(127,186,39,.25), transparent 45%),
    linear-gradient(160deg, var(--color-graphite-darker), var(--color-graphite-dark));
  color: #fff;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-panel img.logo {
  height: 52px; width: auto; margin-bottom: 48px;
}
.auth-panel h2 {
  color: #fff;
  font-size: 1.7rem;
  max-width: 20ch;
  line-height: 1.25;
}
.auth-panel p { color: #C9C7C1; max-width: 34ch; }
.auth-panel ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.auth-panel li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .92rem; color: #E7E5E0;
}
.auth-panel li::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-green);
  flex: none;
  transform: translateY(-2px);
}
.auth-panel .foot { font-size: .78rem; color: #8B8983; }

.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.auth-box {
  width: 100%;
  max-width: 380px;
}
.auth-box .mobile-logo { display: none; }
.auth-box h1 { font-size: 1.5rem; }
.auth-box > p.lede { color: var(--color-text-muted); margin-top: -8px; margin-bottom: 24px; font-size: .92rem; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
  .auth-box .mobile-logo { display: block; height: 32px; margin: 0 auto 24px; }
}

/* Schlichte zentrierte Variante für sekundäre Auth-Seiten
   (Passwort vergessen, Reset, Verifizierung) */
.auth-centered {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-centered .auth-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 40px;
}
.auth-centered .auth-box img.logo { height: 32px; margin-bottom: 24px; }

/* ============================================================
   Formulare
   ============================================================ */
label { display: block; font-size: .85rem; font-weight: 600; color: var(--color-graphite); margin-bottom: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px var(--color-green-tint);
  outline: none;
}
textarea { resize: vertical; font-family: var(--font-body); }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; margin: 0 0 20px; }
legend { font-family: var(--font-display); font-weight: 700; font-size: .85rem; padding: 0 8px; color: var(--color-graphite); }

.btn, button {
  font-family: var(--font-body);
  font-weight: 600;
  background: var(--color-green);
  color: #1E2A0E;
  border: none;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: .92rem;
  transition: background .15s, transform .1s;
}
.btn:hover, button:hover { background: var(--color-green-deep); color: #fff; }
.btn:active, button:active { transform: translateY(1px); }

.error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border: 1px solid #EFC9C3;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  margin-bottom: 16px;
}

/* ============================================================
   Ticket-Übersicht
   ============================================================ */
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.page-header h1 { margin-bottom: 2px; }

.ticket-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}
.ticket-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-faint);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: #FAFAF8;
}
.ticket-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: .9rem;
  vertical-align: middle;
}
.ticket-table tr:last-child td { border-bottom: none; }
.ticket-table tr:hover td { background: var(--color-green-tint); }

/* "Geräte-Label"-Signatur: Ticket-Nummern wie eine Seriennummer/
   Geräte-Kennzeichnung dargestellt — passend zum Mac/iPhone-Fachgebiet */
.ticket-id {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  background: var(--color-paper);
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--color-graphite);
  white-space: nowrap;
}

/* ============================================================
   Status- & Prioritäts-Chips
   ============================================================ */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }

.status-open             { background: var(--color-amber-tint);  color: var(--color-amber); }
.status-open::before     { background: var(--color-amber); }
.status-in_progress      { background: var(--color-blue-tint);   color: var(--color-blue); }
.status-in_progress::before { background: var(--color-blue); }
.status-waiting_customer { background: var(--color-violet-tint); color: var(--color-violet); }
.status-waiting_customer::before { background: var(--color-violet); }
.status-waiting_parts    { background: #EFEDE8; color: var(--color-text-muted); }
.status-waiting_parts::before { background: var(--color-text-faint); }
.status-resolved         { background: var(--color-green-tint);  color: var(--color-green-deep); }
.status-resolved::before { background: var(--color-green); }
.status-closed           { background: #EFEDE8; color: var(--color-text-faint); }
.status-closed::before   { background: var(--color-border-strong); }

/* ============================================================
   Ticket-Verlauf (Chat-artiger Thread)
   ============================================================ */
.thread { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.message {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.msg-customer { background: var(--color-surface); border-left: 3px solid var(--color-border-strong); }
.msg-staff    { background: var(--color-green-tint); border-left: 3px solid var(--color-green); }
.msg-internal { background: var(--color-amber-tint); border-left: 3px solid var(--color-amber); border-style: dashed; }
.msg-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--color-text-faint);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.msg-meta strong { font-family: var(--font-body); color: var(--color-graphite); font-weight: 600; }
.msg-body { font-size: .92rem; color: var(--color-text); overflow-wrap: break-word; }
.msg-body p { margin: 0 0 .8em; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { margin: .4em 0 .8em; padding-left: 1.4em; }
.msg-body a { color: var(--color-green-deep); }
.msg-body blockquote {
  margin: .6em 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted);
}
.msg-body table { border-collapse: collapse; max-width: 100%; }
.msg-body td, .msg-body th { border: 1px solid var(--color-border); padding: 4px 8px; }
.msg-body pre, .msg-body code {
  font-family: var(--font-mono); background: var(--color-paper);
  border-radius: 4px; padding: 2px 5px; font-size: .88em;
}

/* ============================================================
   Einklappbare Geräte-Karten (Kunden- und Backend-Geräteverwaltung)
   ============================================================ */
.device-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 0;
}
.device-item summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .9rem;
}
.device-item summary::-webkit-details-marker { display: none; }
.device-item summary::before {
  content: '▸'; color: var(--color-text-faint); font-size: .8em;
  transition: transform .15s;
}
.device-item[open] summary::before { transform: rotate(90deg); }
.device-item summary:hover { background: var(--color-green-tint); border-radius: var(--radius-md); }
.device-item-body { padding: 0 16px 16px; border-top: 1px solid var(--color-border); }
.device-item-body .reply-form { box-shadow: none; border: none; padding: 16px 0 0; margin-bottom: 8px !important; }

/* ============================================================
   "Mehr lesen" bei langen Nachrichten + Verlauf ein-/ausklappen
   ============================================================ */
.msg-body-clamped { position: relative; mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); }
.msg-body-expanded { mask-image: none; -webkit-mask-image: none; }
.msg-readmore {
  display: inline-block; margin-top: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-green-deep); font-size: .82rem; font-weight: 600;
}
.msg-readmore:hover { color: var(--color-graphite-dark); background: none; }
.thread-collapse-toggle {
  display: block; width: 100%; text-align: center;
  background: var(--color-paper); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md); padding: 10px; margin: -2px 0;
  color: var(--color-text-muted); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.thread-collapse-toggle:hover { background: var(--color-green-tint); color: var(--color-green-deep); border-color: var(--color-green); }
.msg-attachments { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.msg-attachments a {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--color-graphite);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: 5px 10px;
  border-radius: 5px;
}
.msg-attachments a:hover { border-color: var(--color-green); color: var(--color-green-deep); }

.reply-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   Admin: zweispaltiges Ticket-Layout
   ============================================================ */
.admin-ticket-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
.meta-column {
  background: var(--color-surface);
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 24px;
}
.meta-column h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint); font-weight: 700; margin: 0 0 8px;
}
.meta-column ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: .87rem; }

@media (max-width: 860px) {
  .admin-ticket-layout { grid-template-columns: 1fr; }
  .meta-column { position: static; }
}

.filters { display: flex; gap: 4px; margin: 4px 0 20px; flex-wrap: wrap; }
.filters a {
  text-decoration: none;
  font-size: .82rem;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.filters a:hover { border-color: var(--color-green); color: var(--color-green-deep); }

/* ============================================================
   Geräte-Suche/-Auswahl (statt langer Dropdown-Liste)
   ============================================================ */
.device-picker-search { margin-bottom: 8px; }
.device-picker-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.device-picker-option {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; border-bottom: 1px solid var(--color-border);
  cursor: pointer; font-size: .85rem;
}
.device-picker-option:last-child { border-bottom: none; }
.device-picker-option:hover { background: var(--color-green-tint); }
.device-picker-option input[type=radio] { margin-top: 3px; flex: none; }
.device-picker-hint, .device-picker-empty {
  font-size: .8rem; color: var(--color-text-faint); margin-top: 8px;
}

/* ============================================================
   Navigations-Untermenüs (Dropdowns in der Topbar)
   ============================================================ */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown > .nav-dropdown-toggle {
  cursor: pointer; background: none; border: none;
  color: #E7E5E0; padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: .9rem; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown > .nav-dropdown-toggle::after { content: '▾'; font-size: .7em; opacity: .7; }
.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle { background: rgba(255,255,255,.1); color: #fff; }
.nav-dropdown .dropdown-panel {
  display: none;
  position: absolute; top: 100%; right: 0; margin-top: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-panel);
  min-width: 200px; padding: 6px; z-index: 80;
}
/* Kleine unsichtbare Brücke, damit die Maus vom Toggle zum Panel wandern kann,
   ohne dass das Menü dazwischen zuklappt */
.nav-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown.open .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel { display: block; }
header.topbar .topbar-right .nav-dropdown .dropdown-panel a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; font-size: .87rem;
}
header.topbar .topbar-right .nav-dropdown .dropdown-panel a:hover { background: var(--color-green-tint); color: var(--color-green-deep); }

/* ============================================================
   Kachel-Übersicht (Admin-Startseite)
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0 36px; }
.stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px 20px; box-shadow: var(--shadow-card);
}
.stat-card .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--color-graphite-dark); }
.stat-card .stat-label { font-size: .82rem; color: var(--color-text-muted); margin-top: 2px; }
.stat-card.stat-warn .stat-value { color: var(--color-danger); }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.quick-links a {
  display: block; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 18px; text-decoration: none; color: var(--color-text);
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-card);
}
.quick-links a:hover { border-color: var(--color-green); color: var(--color-green-deep); }

/* ============================================================
   SLA-Badge
   ============================================================ */
.sla-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
}
.sla-ontrack { background: var(--color-green-tint); color: var(--color-green-deep); }
.sla-atrisk  { background: var(--color-amber-tint); color: var(--color-amber); }
.sla-overdue { background: var(--color-danger-tint); color: var(--color-danger); }
.sla-done    { background: #EFEDE8; color: var(--color-text-faint); }

/* ============================================================
   Tags
   ============================================================ */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  font-family: var(--font-body);
  font-size: .78rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border-strong);
  color: var(--color-graphite);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.tag-chip:hover { background: var(--color-danger-tint); color: var(--color-danger); border-color: #EFC9C3; }

/* ============================================================
   Burgermenü (Hamburger) für Topbar
   ============================================================ */
.topbar-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
}
.hamburger-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px; height: 38px;
  background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; flex: none;
}
.hamburger-toggle span {
  display: block; width: 20px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .2s, opacity .2s;
}
.hamburger-toggle:hover { background: rgba(255,255,255,.08); }
.hamburger-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-toggle.open span:nth-child(2) { opacity: 0; }
.hamburger-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar-user { white-space: nowrap; }

/* ============================================================
   Responsive: Topbar / Navigation
   ============================================================ */
@media (max-width: 860px) {
  header.topbar { flex-wrap: wrap; height: auto; min-height: 60px; padding: 10px 18px; }
  .hamburger-toggle { display: flex; }

  header.topbar .topbar-right {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  header.topbar .topbar-right.open { display: flex; }
  header.topbar .topbar-right a,
  header.topbar .topbar-right .topbar-user {
    padding: 11px 6px;
    width: 100%;
  }
  header.topbar .topbar-right a:hover { background: rgba(255,255,255,.08); border-radius: var(--radius-sm); }

  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 11px 6px !important; }
  header.topbar .topbar-right .nav-dropdown .dropdown-panel {
    position: static; display: none; margin-top: 0;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 4px 14px; min-width: 0;
  }
  header.topbar .topbar-right .nav-dropdown.open .dropdown-panel { display: block; }
  header.topbar .topbar-right .nav-dropdown .dropdown-panel a { color: #E7E5E0; padding: 9px 6px; }
  header.topbar .topbar-right .nav-dropdown .dropdown-panel a:hover { background: rgba(255,255,255,.08); color: #fff; }
}

/* ============================================================
   Responsive: allgemein
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 14px; }
  main { padding: 20px 16px 48px; }
  h1 { font-size: 1.3rem; }
  .page-header { align-items: flex-start; }

  /* Alle ad-hoc "display:flex"-Zeilen (überall im System als Inline-Style
     für nebeneinanderstehende Formularfelder verwendet) sollen auf schmalen
     Bildschirmen umbrechen und ihre Felder auf volle Breite stapeln, statt
     das Layout zu sprengen. Wirkt über alle Seiten hinweg, ohne dass jede
     einzelne Datei angepasst werden muss. */
  main [style*="display:flex"],
  .meta-column [style*="display:flex"],
  .device-item-body [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  main [style*="display:flex"] > label,
  main [style*="display:flex"] > input,
  main [style*="display:flex"] > select,
  main [style*="display:flex"] > div,
  .meta-column [style*="display:flex"] > label,
  .meta-column [style*="display:flex"] > input,
  .device-item-body [style*="display:flex"] > label {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Tabellen auf dem Handy: jede Zeile wird zu einer eigenen Karte mit
     Beschriftung:Wert-Paaren untereinander gestapelt - alles auf einen
     Blick sichtbar, kein Wischen nötig. Die Beschriftungen kommen aus
     data-label-Attributen, die responsive-table.js automatisch aus den
     Spaltenüberschriften jeder Tabelle einträgt. */
  .ticket-table thead { display: none; }
  .ticket-table, .ticket-table tbody { display: block; width: 100%; }
  .ticket-table { border-radius: 0; box-shadow: none; border: none; background: transparent; }
  .ticket-table tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .ticket-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
    text-align: right;
  }
  .ticket-table td:last-child { border-bottom: none; }
  .ticket-table td::before {
    content: attr(data-label);
    flex: none;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-faint);
  }
  /* Zeilen ohne Spaltenbezug (z.B. "Keine Tickets vorhanden") normal anzeigen */
  .ticket-table td[colspan] {
    display: block;
    text-align: center;
    color: var(--color-text-faint);
  }
  .ticket-table td[colspan]::before { content: none; }

  .admin-ticket-layout { gap: 20px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-links a { flex: 1 1 100%; text-align: center; }

  .auth-box { max-width: 100%; }
  .auth-form-side { padding: 24px 16px; }

  .device-picker-list { max-height: 220px; }
}