/* ============================================================================
   IPSUM IT Support — Farbwelt und Schriften der Hauptseite
   ----------------------------------------------------------------------------
   Die Werte stammen aus shared/tokens.css des Hauptprojekts. Bewusst als
   Kopie und nicht als Import: das Support-System soll fuer sich allein
   hochladbar bleiben. Wer die Marke aendert, aendert beide Stellen — die
   Namen sind deshalb identisch gehalten.

   Schriften werden selbst ausgeliefert. Vorher stand hier ein @import von
   Google Fonts; das widerspricht der Datenschutzerklaerung der Hauptseite,
   in der ausdruecklich steht, dass keine fremden Schriftserver angefragt
   werden.
   ============================================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Grundflaechen — dieselbe Staffelung wie auf der Hauptseite */
  --bg:         #0A0F11;
  --card:       #121A1D;
  --card2:      #182326;
  --card3:      #1E2B2F;

  /* Marke: brand-500 ist exakt das Teal aus dem Logo. Fuer Text auf
     dunklem Grund die helleren Stufen, sonst reicht der Kontrast nicht. */
  --accent:     #1FC8B6;
  --accent-h:   #5FE6D2;
  --accent-2:   #00A99D;

  --text:       #E4EDED;
  --text-2:     #93A3A4;
  --muted:      #66787A;
  --border:     #263337;
  --border-2:   #314247;

  --danger:     #FF8B7D;
  --success:    #5FE6D2;
  --warning:    #F0C674;
  --orange:     #F0A868;

  --sidebar-w:  234px;
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 18px 50px -20px rgba(0,0,0,.8);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.35);
  --glow:       0 0 0 3px rgba(31,200,182,.22);

  /* Heller Verlauf fuer Flaechen mit dunkler Schrift darauf: der
     Aurora-Verlauf der Hauptseite beginnt bei #0a6c74 und verfehlt dort
     die AA-Schwelle. */
  --grad-btn:   linear-gradient(118deg, #00A99D 0%, #2FD4C0 58%, #5FE6D2 100%);
  --on-accent:  #03191C;
  --grad-card:  linear-gradient(180deg, #16211F 0%, #121A1D 100%);

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

html, body {
  height: 100%;
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-h); }

/* ── Layout ─────────────────────────────────────────────────── */
.app-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #121A1D 0%, #0A0F11 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-logo {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo img {
  /* Deutlich groesser als vorher — die Marke soll sichtbar sein, nicht in
     der Ecke kleben. Gleiche Entscheidung wie auf der Hauptseite. */
  width: 176px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,169,157,.22));
}

.sidebar-logo span { display: none; }

.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
}

.nav-section {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: all .18s ease;
  margin-bottom: 3px;
  cursor: pointer;
  position: relative;
}

.nav-item:hover {
  background: var(--card2);
  color: var(--text);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(31,200,182,.18) 0%, rgba(99,102,241,.08) 100%);
  color: #fff;
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--grad-btn);
  border-radius: 0 3px 3px 0;
}

.nav-item svg { flex-shrink: 0; opacity: .8; }
.nav-item.active svg { opacity: 1; }

.sidebar-user {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(31,200,182,.35);
}

.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--muted); text-transform: capitalize; margin-top: 1px; }

.logout-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all .15s;
  display: flex;
  align-items: center;
}
.logout-btn:hover { color: var(--danger); background: rgba(244,63,94,.1); }

/* ── Main content ─────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-header {
  padding: 28px 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 3px; }

.page-body { padding: 24px 30px; flex: 1; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title { font-size: 15px; font-weight: 700; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--border);
}

.stat-card.accent::after { background: var(--grad-btn); }
.stat-card.danger::after  { background: linear-gradient(90deg, var(--danger), var(--orange)); }
.stat-card.warn::after    { background: linear-gradient(90deg, var(--warning), var(--orange)); }
.stat-card.success::after { background: linear-gradient(90deg, var(--success), #34D399); }

.stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.stat-value { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.stat-card.accent  .stat-value { color: var(--accent); }
.stat-card.danger  .stat-value { color: var(--danger); }
.stat-card.warn    .stat-value { color: var(--warning); }
.stat-card.success .stat-value { color: var(--success); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  white-space: nowrap;
  font-family: inherit;
}

.btn-primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 2px 12px rgba(31,200,182,.35);
}
.btn-primary:hover {
  background: var(--grad-btn);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(31,200,182,.45);
  color: #fff;
}

.btn-secondary {
  background: var(--card2);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.btn-secondary:hover { background: var(--card3); color: var(--text); border-color: var(--accent); }

.btn-danger { background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; }
.btn-danger:hover { opacity: .88; transform: translateY(-1px); }

.btn-success { background: linear-gradient(135deg, #10B981, #059669); color: #fff; }

.btn-sm  { padding: 6px 12px; font-size: 12px; }
.btn-xs  { padding: 3px 9px; font-size: 11px; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.badge-low      { background: rgba(71,85,105,.35);  color: #94A3B8; border: 1px solid rgba(71,85,105,.4); }
.badge-medium   { background: rgba(245,158,11,.12); color: #FCD34D; border: 1px solid rgba(245,158,11,.3); }
.badge-high     { background: rgba(251,146,60,.12); color: #FDBA74; border: 1px solid rgba(251,146,60,.3); }
.badge-urgent   { background: rgba(244,63,94,.15);  color: #FDA4AF; border: 1px solid rgba(244,63,94,.4); animation: pulse 1.5s infinite; }

.badge-open       { background: rgba(31,200,182,.12); color: var(--accent-h); border: 1px solid rgba(31,200,182,.3); }
.badge-inprogress { background: rgba(16,185,129,.12); color: #6EE7B7; border: 1px solid rgba(16,185,129,.3); }
.badge-resolved   { background: rgba(52,211,153,.1);  color: #6EE7B7; border: 1px solid rgba(52,211,153,.25); }
.badge-closed     { background: rgba(71,85,105,.2);   color: #64748B; border: 1px solid rgba(71,85,105,.3); }

@keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(244,63,94,.4); } 50% { opacity:.8; box-shadow: 0 0 0 4px rgba(244,63,94,0); } }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text-2); }

.form-control {
  width: 100%;
  padding: 10px 13px;
  background: rgba(7,16,30,.7);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: var(--glow); }
.form-control::placeholder { color: var(--muted); }
.form-control:hover:not(:focus) { border-color: var(--border-2); }

textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { appearance: none; cursor: pointer; }

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Postleitzahl und Ort gehoeren in eine Zeile, aber nicht zu gleichen
   Teilen: vier Ziffern brauchen keine halbe Formularbreite. */
.form-row-plz { grid-template-columns: 120px 1fr; }

/* Zwischenueberschrift im Formular. Das Registrierungsformular hat mit den
   Stammdaten eine Laenge erreicht, bei der ohne Gliederung niemand mehr
   weiss, wo er ist. */
.form-abschnitt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-abschnitt:first-child { margin-top: 0; }

/* Anmelden braucht zwei Felder, Registrieren zwoelf. Die Karte waechst
   deshalb mit dem Schritt (die Klasse setzt goToStep), statt fuer beides
   gleich breit zu sein. */
.login-card--breit {
  max-width: 420px;
  transition: max-width .38s cubic-bezier(.4, 0, .2, 1);
}
.login-card--weit { max-width: 560px; }

/* Kennzeichnet freiwillige Angaben. Zurueckhaltend gesetzt — die Angabe
   soll erkennbar sein, ohne dass das Formular nach Kleingedrucktem aussieht. */
.form-optional {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.form-hint  { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(24,46,72,.5);
  font-size: 13px;
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: rgba(255,255,255,.025); }

.td-title { font-weight: 500; max-width: 280px; }
.td-title a { color: var(--text); }
.td-title a:hover { color: var(--accent); }

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  align-items: center;
}

.filter-btn {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}

.filter-btn.active, .filter-btn:hover {
  background: var(--grad-btn);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(31,200,182,.3);
}

/* ── Ticket detail ─────────────────────────────────────────── */
.ticket-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.meta-key { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.meta-val { font-size: 13px; font-weight: 600; }

.messages-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.msg-bubble {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  transition: background .15s;
}

.msg-bubble.is-agent {
  background: linear-gradient(135deg, rgba(31,200,182,.08) 0%, rgba(99,102,241,.05) 100%);
  border-left: 3px solid var(--accent);
}

.msg-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

.msg-author { font-weight: 700; font-size: 13px; }
.msg-time   { font-size: 11px; color: var(--muted); }
.msg-body   { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.attach-thumb {
  width: 84px; height: 64px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.attach-thumb:hover { opacity: .85; transform: scale(1.04); }

.attach-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--card3);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  font-size: 12px;
  color: var(--accent);
  transition: background .15s;
}
.attach-file:hover { background: var(--card2); color: var(--accent); }

/* ── Reply form ─────────────────────────────────────────────── */
.reply-form {
  background: linear-gradient(135deg, rgba(31,200,182,.06) 0%, rgba(99,102,241,.04) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 20px;
}
.reply-form-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }

.attach-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attach-preview-item { position: relative; display: inline-block; }
.attach-preview-item img { width: 66px; height: 50px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.remove-attach {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px;
  background: var(--danger); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; cursor: pointer; color: #fff; line-height: 1;
}

/* ── Login / Register ────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 0%, rgba(31,200,182,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 0% 80%, rgba(99,102,241,.06) 0%, transparent 50%),
              var(--bg);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 390px;
  background: var(--grad-card);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 38px 34px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(31,200,182,.05);
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 30px;
}

.login-logo img {
  width: 220px;
  height: auto;
  object-fit: contain;
  /* Kein weisser Kasten mehr: die dunkle Logovariante traegt helle Schrift
     und wuerde darauf verschwinden. Sie sitzt jetzt direkt auf der Flaeche. */
  filter: drop-shadow(0 2px 12px rgba(0,169,157,.25));
}
.login-logo span { display: none; }

.login-title { font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.login-sub   { font-size: 13px; color: var(--muted); margin-bottom: 26px; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.alert-error   { background: rgba(244,63,94,.1);   border: 1px solid rgba(244,63,94,.35); color: #FCA5A5; }
.alert-success { background: rgba(16,185,129,.1);  border: 1px solid rgba(16,185,129,.35); color: #6EE7B7; }
.alert-info    { background: rgba(31,200,182,.1);  border: 1px solid rgba(31,200,182,.35); color: var(--accent-h); }
.alert-warn    { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.35); color: #FCD34D; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 30px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 22px; }

/* ── Ticket actions bar ────────────────────────────────────── */
.ticket-actions-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 13px 18px;
  background: linear-gradient(90deg, var(--card2), var(--card));
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}

.select-inline {
  padding: 7px 11px;
  background: rgba(7,16,30,.7);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.select-inline:focus { border-color: var(--accent); box-shadow: var(--glow); }

/* ── Screenshot ─────────────────────────────────────────────── */
.screenshot-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.screenshot-preview { max-width: 100%; max-height: 120px; border-radius: 7px; border: 1px solid var(--border-2); display: none; margin-top: 10px; }

/* ── Unread badge ─────────────────────────────────────────── */
.unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 0 5px; margin-left: 6px;
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; cursor: pointer;
}
.lightbox.hidden { display: none; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: var(--shadow); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Live session ─────────────────────────────────────────── */
.live-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger);
  display: inline-block;
  animation: pulse 1.5s infinite;
}
.live-status-dot.connected { background: var(--success); animation: none; box-shadow: 0 0 6px var(--success); }

/* ── Tabs (admin) ─────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
}

.tab-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.tab-btn.active { background: var(--grad-btn); color: #fff; box-shadow: 0 2px 8px rgba(31,200,182,.3); }
.tab-btn:hover:not(.active) { background: var(--card3); color: var(--text); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Category pill list ─────────────────────────────────────── */
.cat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: var(--card2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.cat-pill button {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 13px; line-height: 1;
  padding: 0; transition: color .15s;
}
.cat-pill button:hover { color: var(--danger); }

/* ── Interne Notiz ──────────────────────────────────────────── */
.msg-bubble.is-internal {
  background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(251,146,60,.05) 100%);
  border-left: 3px solid var(--warning);
  border-color: rgba(245,158,11,.3);
}
.internal-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(245,158,11,.15); color: var(--warning);
  border: 1px solid rgba(245,158,11,.3);
}

/* ── Reply-Mode-Toggle ──────────────────────────────────────── */
.reply-mode-toggle {
  display: flex; gap: 4px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
  margin-bottom: 14px;
}
.mode-btn {
  padding: 6px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.mode-btn.active { background: var(--card3); color: var(--text); }
.mode-btn.active.internal { background: rgba(245,158,11,.2); color: var(--warning); }

/* ── CSAT Sternebewertung ────────────────────────────────────── */
.csat-widget {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(52,211,153,.04));
  border: 1px solid rgba(16,185,129,.3);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.csat-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.csat-sub   { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.star-group { display: flex; gap: 8px; margin-bottom: 14px; }
.star-btn {
  font-size: 28px; background: none; border: none;
  cursor: pointer; transition: transform .15s;
  opacity: .35; line-height: 1;
  padding: 0;
}
.star-btn:hover, .star-btn.active { opacity: 1; transform: scale(1.2); }

/* ── Audit-Log / Verlauf ────────────────────────────────────── */
.audit-log {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 4px;
}
.audit-entry {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(24,46,72,.4);
  font-size: 12px;
}
.audit-entry:last-child { border-bottom: none; }
.audit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
.audit-dot.status  { background: var(--accent); }
.audit-dot.message { background: var(--success); }
.audit-dot.note    { background: var(--warning); }
.audit-dot.assign  { background: var(--orange); }
.audit-dot.created { background: var(--muted); }
.audit-dot.csat    { background: #FBBF24; }
.audit-text { flex: 1; color: var(--text-2); }
.audit-time { color: var(--muted); white-space: nowrap; }

/* ── Ticket-Suche ───────────────────────────────────────────── */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--card2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  margin-bottom: 16px;
}
.search-bar svg { color: var(--muted); flex-shrink: 0; }
.search-bar input {
  flex: 1; background: none; border: none;
  color: var(--text); font-size: 13px;
  padding: 10px 0; outline: none; font-family: inherit;
}
.search-bar input::placeholder { color: var(--muted); }

/* ── Bulk-Aktionen ──────────────────────────────────────────── */
.bulk-bar {
  display: none; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(31,200,182,.12), rgba(99,102,241,.06));
  border: 1px solid rgba(31,200,182,.3);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bulk-bar.visible { display: flex; }
.bulk-count { font-size: 13px; font-weight: 700; color: var(--accent); }

.cb-cell { width: 36px; }
input[type=checkbox] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Schnellantworten ───────────────────────────────────────── */
.canned-picker {
  position: relative; display: inline-block;
}
.canned-dropdown {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 280px; max-height: 240px; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 200;
  display: none;
}
.canned-dropdown.open { display: block; }
.canned-item {
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.canned-item:last-child { border-bottom: none; }
.canned-item:hover { background: var(--card2); }
.canned-item-title { font-size: 13px; font-weight: 600; }
.canned-item-preview { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── E-Mail-Settings Toggle ─────────────────────────────────── */
.toggle-switch {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.toggle-label { flex: 1; font-size: 13px; font-weight: 500; }
.toggle-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
input[type=checkbox].toggle {
  width: 38px; height: 22px;
  appearance: none; background: var(--border-2);
  border-radius: 999px; cursor: pointer;
  position: relative; transition: background .2s;
}
input[type=checkbox].toggle:checked { background: var(--accent); }
input[type=checkbox].toggle::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
input[type=checkbox].toggle:checked::after { transform: translateX(16px); }

/* ── Dashboard Chart ─────────────────────────────────────────── */
.chart-wrap {
  position: relative; height: 200px;
}

/* ── Login Schritt-Wechsel ───────────────────────────────────── */
.login-steps {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.login-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.login-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}

.login-step.exit {
  opacity: 0;
  transform: translateX(-40px);
  pointer-events: none;
}

.choice-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--card2);
  color: var(--text);
  font-family: inherit;
  transition: all .2s ease;
  text-align: left;
  gap: 12px;
  margin-bottom: 10px;
}

.choice-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.choice-btn.primary {
  background: var(--grad-btn);
  border-color: transparent;
  box-shadow: 0 3px 14px rgba(31,200,182,.3);
}

.choice-btn.primary:hover {
  background: var(--grad-btn);
  box-shadow: 0 6px 20px rgba(31,200,182,.4);
}

.choice-btn .choice-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}

.choice-btn .choice-text { flex: 1; }
.choice-btn .choice-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.choice-btn .choice-sub   { font-size: 11px; opacity: .7; font-weight: 400; }
.choice-btn .choice-arrow { font-size: 18px; opacity: .6; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  margin-bottom: 20px;
  transition: color .15s;
}
.back-btn:hover { color: var(--text); }

/* ── Setup ─────────────────────────────────────────────────── */
.setup-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.setup-card {
  width: 100%; max-width: 470px;
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 38px 34px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.setup-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.setup-sub   { font-size: 13px; color: var(--muted); margin-bottom: 28px; }

/* ── Misc helpers ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-icon  { font-size: 42px; margin-bottom: 14px; }

.divider { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-2       { color: var(--text-2); }
.fw-700 { font-weight: 700; }
.mt-16  { margin-top: 16px; }
.mb-16  { margin-bottom: 16px; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 11px; font-weight: 600;
  background: var(--card3);
  color: var(--muted);
  border: 1px solid var(--border-2);
}

.role-admin    { color: var(--danger); }
.role-agent    { color: var(--accent); }
.role-customer { color: var(--text-2); }

/* ── Voice Call Panel ────────────────────────────────────────── */
.call-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 262px;
  background: linear-gradient(160deg, #16211F 0%, #0E1518 100%);
  border: 1px solid rgba(31,200,182,.25);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(31,200,182,.08);
  z-index: 800;
  overflow: hidden;
  user-select: none;
  transition: box-shadow .2s;
}
.call-panel.hidden { display: none; }

.call-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: rgba(31,200,182,.08);
  border-bottom: 1px solid rgba(31,200,182,.15);
  cursor: move;
  font-size: 12px; font-weight: 700;
  color: var(--text-2); letter-spacing: .03em;
}
.call-panel-header button {
  background: none; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 2px 4px;
  border-radius: 4px; transition: color .15s;
}
.call-panel-header button:hover { color: var(--danger); }

.call-panel-body {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 24px 20px 22px; gap: 7px;
}

.call-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--grad-btn);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 20px rgba(31,200,182,.45);
  margin-bottom: 6px;
  position: relative;
}
.call-avatar.ringing::before,
.call-avatar.ringing::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(31,200,182,.5);
  animation: call-ring 1.8s ease-out infinite;
}
.call-avatar.ringing::after { animation-delay: .6s; }

@keyframes call-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.7); opacity: 0;  }
}

.call-name   { font-size: 16px; font-weight: 700; }
.call-status { font-size: 12px; color: var(--muted); min-height: 16px; }

.call-timer {
  font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--success);
  letter-spacing: .04em;
  min-height: 30px;
}

.call-controls { display: flex; gap: 16px; margin-top: 10px; }

.call-btn {
  width: 52px; height: 52px;
  border-radius: 50%; border: none;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.call-btn.mute   { background: var(--card3); color: var(--text); }
.call-btn.mute:hover { background: var(--warning); color: #000; transform: scale(1.08); }
.call-btn.mute.muted { background: var(--warning); color: #000; }

.call-btn.hangup {
  background: linear-gradient(135deg, #F43F5E, #E11D48);
  color: #fff;
  box-shadow: 0 4px 14px rgba(244,63,94,.45);
}
.call-btn.hangup:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(244,63,94,.55); }

/* ── Incoming call notification ──────────────────────────────── */
.incoming-call {
  position: fixed;
  top: 20px; right: 20px;
  width: 310px;
  background: linear-gradient(135deg, #16211F, #0E1518);
  border: 1px solid rgba(16,185,129,.45);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 36px rgba(0,0,0,.65), 0 0 0 1px rgba(16,185,129,.1);
  z-index: 1500;
  animation: slide-from-right .32s cubic-bezier(.21,1.02,.73,1) both;
}
.incoming-call.hidden { display: none; }

@keyframes slide-from-right {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.incoming-call-top {
  display: flex; align-items: center; gap: 13px; margin-bottom: 14px;
}

.incoming-call-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #059669);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(16,185,129,.4);
  position: relative;
}
.incoming-call-icon::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(16,185,129,.4);
  animation: call-ring 1.4s ease-out infinite;
}

.incoming-call-label  { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.incoming-caller-name { font-size: 16px; font-weight: 700; margin-top: 2px; }

.incoming-call-btns { display: flex; gap: 10px; }
.incoming-call-btns .btn { flex: 1; justify-content: center; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --sidebar-w: 200px; }
  .page-header, .page-body { padding-left: 18px; padding-right: 18px; }
  .form-row, .form-row-3, .form-row-plz { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
  .page-header { padding: 18px 16px 0; }
  .page-body { padding: 18px 16px; }
}


/* ============================================================================
   Typografie der Hauptseite
   ----------------------------------------------------------------------------
   Ueberschriften in Bricolage Grotesque, Zahlen und Kennungen in Plex Mono —
   dieselbe Rollenverteilung wie auf ipsumit.ch.
   ============================================================================ */

h1, h2, h3, h4,
.page-title,
.stat-value,
.sidebar-logo span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
}

/* Kennungen, Zeitangaben und Zahlen: gleiche Ziffernbreite, damit Spalten
   nicht springen. */
.ticket-id,
.badge,
.meta-value,
.time,
.stat-label,
time,
[data-numeric] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Schrift auf dem Markenverlauf ist dunkel — der Verlauf ist hell. */
.btn-primary,
.btn-accent {
  color: var(--on-accent);
}

/* ============================================================================
   Zeiterfassung
   ----------------------------------------------------------------------------
   Bewusst eine schmale Leiste und keine Kachel. Der Wunsch war „wie ein
   Taximeter, aber nicht aufdringlich": der Stand ist ablesbar, ohne dass
   eine Uhr im Blickfeld tickt.
   ============================================================================ */

.zeit-leiste {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 13px;
}

/* Ruhender Punkt. Er pulsiert nur, solange wirklich erfasst wird — ein
   dauerhaft blinkendes Element wäre genau die Aufdringlichkeit, die hier
   vermieden werden soll. */
.zeit-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.zeit-leiste--laeuft {
  border-color: rgba(31, 200, 182, .45);
}
.zeit-leiste--laeuft .zeit-punkt {
  background: var(--accent);
  animation: zeitPuls 2s ease-in-out infinite;
}
@keyframes zeitPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 200, 182, .5); }
  60%      { box-shadow: 0 0 0 7px rgba(31, 200, 182, 0); }
}

.zeit-wert strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.zeit-wert em {
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
  margin-left: 5px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.zeit-betrag {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.zeit-knoepfe {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.btn-zeit {
  border: 1px solid var(--border-2);
  background: var(--card2);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-zeit:hover {
  border-color: var(--accent);
  color: var(--accent-h);
}
.btn-zeit--still {
  background: transparent;
  color: var(--text-2);
}
.zeit-leiste--laeuft .btn-zeit[data-zeit-aktion] {
  border-color: var(--accent);
  color: var(--accent-h);
}

/* Der Kunde sieht nur den Stand, keine Bedienelemente. */
.zeit-leiste--kunde {
  background: var(--card2);
  border-style: dashed;
}

/* --- Einträge --- */
.zeit-details {
  margin: -6px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card2);
}
.zeit-leer {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.zeit-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.zeit-tabelle th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--border);
}
.zeit-tabelle td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.zeit-tabelle tr:last-child td {
  border-bottom: 0;
}
.zeit-tabelle tr.laeuft td {
  color: var(--accent-h);
}

@media (max-width: 640px) {
  .zeit-knoepfe {
    margin-left: 0;
    width: 100%;
  }
  /* Die Tabelle bekommt einen eigenen Scrollbereich, damit die Seite nicht
     seitwärts läuft. */
  .zeit-details {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zeit-leiste--laeuft .zeit-punkt { animation: none; }
}

/* Summenleiste der Monatsübersicht */
.zeit-summe-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--grad-card);
}
.zeit-summe-leiste strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.zeit-summe-leiste em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nur für Screenreader — sichtbar ist das Feld daneben selbsterklärend,
   ohne Label bliebe es für Vorleseprogramme aber namenlos. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Abrechnungsart je Kunde in der Benutzertabelle */
.abrechnung-form {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: nowrap;
}

/* ── Kundendaten in der Benutzerliste ───────────────────────────────────────
   Die Anschrift steht in einer Zeile, die sich unter dem Eintrag aufklappt.
   Eine eigene Unterseite je Kunde waere mehr Klicks fuer dieselbe Handvoll
   Felder, und alle Felder gleichzeitig in der Tabelle machten sie unlesbar. */

/* Zweite Zeile in einer Tabellenzelle: Firma unter dem Namen, Telefon unter
   der Adresse. */
.zeile-neben {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.zeile-neben a { color: inherit; }
.zeile-neben a:hover { color: var(--accent); }

/* Es gibt keine allgemeine .hidden-Regel im Stylesheet, nur eine je
   Baustein — deshalb hier die eigene. */
.daten-zeile.hidden { display: none; }

.daten-zeile > td {
  background: rgba(255, 255, 255, .02);
  padding: 18px 16px;
}
.daten-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.daten-form__titel {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.daten-form__hinweis {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 12px;
}
/* Das Passwortfeld steht abgesetzt: Es ist der einzige Teil der Zeile, der
   sich nicht folgenlos ausprobieren laesst. */
.daten-form--passwort {
  border-left: 2px solid var(--danger, #e5484d);
  padding-left: 20px;
}

@media (max-width: 900px) {
  .daten-raster { grid-template-columns: 1fr; }
  .daten-form--passwort {
    border-left: 0;
    border-top: 2px solid var(--danger, #e5484d);
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ── Bildschirmuebertragung ─────────────────────────────────────────────────
   Das Bild war auf 520px Hoehe festgenagelt. Auf einem grossen Schirm blieb
   daneben die Haelfte leer, und Schrift auf dem uebertragenen Bild war nicht
   zu entziffern. Jetzt nimmt es, was da ist — und ueber den Vollbildknopf
   den ganzen Schirm. */
.video-buehne {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  min-height: 320px;
}
.video-buehne > video#remote-video {
  display: block;
  width: 100%;
  /* 16:9 als Grundform, damit der Kasten nicht in sich zusammenfaellt,
     bevor ein Bild da ist. object-fit sorgt dafuer, dass ein Bildschirm
     mit anderem Seitenverhaeltnis trotzdem vollstaendig zu sehen ist. */
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
}

/* Im Vollbild faellt die Begrenzung weg: dort ist der Schirm die Grenze. */
.video-buehne:fullscreen {
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-buehne:fullscreen > video#remote-video {
  aspect-ratio: auto;
  max-height: 100vh;
  height: 100vh;
  cursor: zoom-out;
}

.video-buehne__eigen {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 140px;
  border-radius: 8px;
  border: 2px solid var(--accent);
  background: #111;
  display: none;
}
.video-buehne__status {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, .7);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.video-buehne__hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 24px;
}

/* ── Fernwartung ──────────────────────────────────────────────────────────── */
.fernwartung__text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.fernwartung__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.fernwartung__schritte {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
  padding-left: 20px;
  margin: 0 0 18px;
}
.fernwartung__schritte strong { color: var(--text); }
.fernwartung__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.fernwartung__form .form-group { flex: 1 1 220px; }
.fernwartung__fuss {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 14px 0 0;
}

/* ── Anruffenster ───────────────────────────────────────────────────────────
   Ein eigenes kleines Fenster haelt das Gespraech, damit es das Neuladen der
   Arbeitsseite uebersteht. Deshalb ohne Seitenleiste und ohne Navigation:
   Es liegt neben dem Arbeitsfenster, nicht davor. */
body.anruf-fenster {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: var(--bg, #0a0f11);
}
.anruf-karte {
  width: 100%;
  max-width: 300px;
  text-align: center;
}
.anruf-karte .call-avatar { margin: 0 auto 16px; }
.anruf-karte .call-name   { font-size: 17px; font-weight: 600; }
.anruf-karte .call-status { margin-top: 4px; }
.anruf-karte .call-timer  { margin-top: 2px; }
.anruf-karte .call-controls { margin-top: 20px; justify-content: center; }
.anruf-fuss {
  margin-top: 26px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

/* app.js zeigt und versteckt #call-panel. In diesem Fenster gibt es nichts
   zu zeigen — die Karte steht ohnehin schon da. */
.call-panel-still { display: none !important; }