/* Dark Theme — Tokens aus dem Launch-Dashboard (Business Base Dashboard). */
* { box-sizing: border-box; }

:root {
  --bg: #0f1218;
  --panel: #171b24;
  --panel-2: #1f2533;
  --text: #e6eaf2;
  --muted: #8a93a6;
  --accent: #4ea1ff;
  --accent-2: #7c5cff;
  --good: #2ecc71;
  --warn: #f39c12;
  --bad: #e74c3c;
  --border: #232a3a;

  /* Marken-Tokens (Katrin Hill) — nur für die Auth-Seiten (heller Marken-Look).
     Das übrige Dashboard bleibt im Dark-Theme oben. Nichts hartcodieren: alle
     Auth-Styles referenzieren diese Variablen. */
  --brand-cream: #FFFBF5;
  --brand-card: #FFFFFF;
  --brand-navy: #1D3665;
  --brand-pink: #F4364C;
  --brand-gold: #FDC100;
  --brand-ink: #2b2b33;            /* Fließtext auf hellem Grund */
  --brand-muted: #6b7180;          /* dezenter Sekundärtext */
  --brand-line: #e7e1d7;           /* dezenter Rahmen auf Creme */
  --brand-focus: rgba(244, 54, 76, 0.25);
  --brand-font-head: 'League Spartan', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --brand-font-body: 'Josefin Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

.muted { color: var(--muted); }

/* ---------- Buttons / Inputs ---------- */

button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: #283044; border-color: #2f384d; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
}
/* Aufgeklappte <select>-Liste lesbar: heller Text auf dunklem Grund (Browser nehmen sonst
   System-/dunkle Defaults). Gilt für ALLE Selects konsistent. */
select option {
  background: var(--panel);
  color: var(--text);
}
select option:checked { background: var(--panel-2); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(78, 161, 255, 0.2);
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  gap: 1rem;
}
.topbar h1 { margin: 0; font-size: 1.15rem; letter-spacing: 0.02em; }
.cart-open { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.topbar-actions { display: flex; gap: 0.75rem; align-items: center; }
.status { color: var(--muted); font-size: 0.85rem; }
.status.error { color: var(--bad); }
.status.ok { color: var(--good); }

/* ---------- Layout: Sidebar + Content ---------- */

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 62px);
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-item {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 6px;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav-item[aria-selected="true"] {
  color: var(--text);
  background: var(--panel-2);
  border-left: 2px solid var(--accent);
}

main {
  padding: 1.5rem;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  max-width: 1000px;
}

.tab-panel { display: grid; gap: 1.25rem; }
.tab-panel[hidden] { display: none; }

/* ---------- Cards ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.card h2 { margin: 0 0 0.75rem; font-size: 1.05rem; letter-spacing: 0.02em; }

/* ---------- Forms ---------- */

.form-grid { display: grid; gap: 0.75rem; max-width: 420px; }
.field { display: grid; gap: 0.3rem; }
.field label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
}
.form-grid > button {
  margin-top: 0.25rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #0c1018;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  justify-self: start;
}
.form-grid > button:hover { background: linear-gradient(135deg, #6cb3ff, #9479ff); }
.form-msg { margin: 0.75rem 0 0; font-size: 0.85rem; }
.form-msg.ok { color: var(--good); }
.form-msg.error { color: #f5a89e; }

.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Tabelle ---------- */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.data-table th { color: var(--muted); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* Schmale, zentrierte Zahlenspalten (Formulare / E-Mails) */
.data-table th.num-col, .data-table td.num-col { text-align: center; width: 5.5rem; white-space: nowrap; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 99px; font-size: 0.75rem; }
.badge.active { background: rgba(46, 204, 113, 0.15); color: var(--good); }
.badge.inactive { background: rgba(138, 147, 166, 0.15); color: var(--muted); }
.badge.role { background: rgba(124, 92, 255, 0.15); color: #b3a3ff; }

.badge.stale { background: rgba(243, 156, 18, 0.15); color: var(--warn); }
.badge.bad { background: rgba(231, 76, 60, 0.15); color: var(--bad); }
.badge.tag { background: rgba(78, 161, 255, 0.12); color: #9ec9ff; margin: 0 0.2rem 0.2rem 0; }
/* Gratis = über ein anderes aktives Programm inkludiert (türkis, klar von aktiv-grün getrennt). */
.badge.gratis { background: rgba(0, 201, 167, 0.15); color: #2fd9bd; }
.gratis-src { font-size: 0.75rem; margin-left: 0.2rem; }
/* Banner unter der Bereichs-Überschrift (zahlend · +gratis · gesamt). */
.product-banner { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px;
  background: rgba(0, 201, 167, 0.08); border: 1px solid rgba(0, 201, 167, 0.25);
  color: var(--text); font-size: 0.9rem; }
.product-banner strong { color: #2fd9bd; }

/* ---------- Phase 2: Kundenliste ---------- */

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; }

/* Sync-Bereich: je Quelle ein abgesetzter Block (Name oben, Steuerung darunter). */
.sync-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.sync-source {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.sync-source-name { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.sync-source-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sync-source-controls select { padding: 0.4rem 0.5rem; font-size: 0.85rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #0c1018;
  font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(135deg, #6cb3ff, #9479ff); }

.sync-status { margin: 0 0 0.85rem; font-size: 0.82rem; min-height: 1rem; }

.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* Controls an der Unterkante ausrichten: beschriftete Felder (.field-inline mit Label oben)
     und label-lose Felder/Buttons stehen so mit ihren Eingaben auf EINER Höhe. */
  align-items: flex-end;
  margin-bottom: 1rem;
}
.filter-bar input[type="search"] { min-width: 220px; flex: 1 1 220px; }
/* Einheitliche Feldhöhe für alle Controls einer Filterzeile (Inputs, Selects, Buttons). */
.filter-bar input, .filter-bar select, .filter-bar > button { padding: 0.4rem 0.6rem; font-size: 0.88rem; height: 36px; box-sizing: border-box; }
.filter-bar > button { line-height: 1; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.check input { width: auto; }

.customer-row { cursor: pointer; }
.customer-row:hover td { background: rgba(255, 255, 255, 0.03); }

.pagination {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Phase 3: Detailansicht ---------- */

.btn-back {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.2rem 0;
  font-size: 0.9rem;
  justify-self: start;
}
.btn-back:hover { background: transparent; color: var(--text); }

.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.detail-head h2 { margin: 0; font-size: 1.2rem; }
.detail-head p { margin: 0.2rem 0 0; }

.detail-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.detail-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: -1px;
}
.detail-tab:hover:not(:disabled) { background: transparent; color: var(--text); }
.detail-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.detail-tab:disabled { opacity: 0.4; cursor: not-allowed; }

.detail-body { display: grid; gap: 1.25rem; }
.detail-panel { display: grid; gap: 1.25rem; }
.detail-panel[hidden] { display: none; }
.detail-panel h3 { margin: 0 0 0.75rem; font-size: 0.95rem; letter-spacing: 0.02em; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: grid;
  gap: 0.25rem;
}
.kpi-value { font-size: 1.4rem; font-weight: 600; }
.kpi-value.kpi-unknown { color: var(--muted); font-weight: 500; }

/* Mehrfach-E-Mail: Adressliste in der Übersicht */
.email-addr-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.email-addr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.email-addr-mail { font-size: 0.9rem; overflow-wrap: break-word; word-break: normal; min-width: 0; }
.kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

.detail-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0;
}
.detail-dl dt { color: var(--muted); font-size: 0.85rem; }
.detail-dl dd { margin: 0; font-size: 0.9rem; word-break: break-word; }

.form-card { scroll-margin-top: 1rem; }
.form-card + .form-card { margin-top: 1rem; }
.form-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.form-card-head h3 { margin: 0; font-size: 1rem; }
/* Quellen-Badge je Formular (Google Forms / Typeform). */
.form-source { font-weight: 500; }
/* Filter-Leiste im Formulare-Reiter (Quelle + Formularname). */
.form-filter { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.form-filter select { padding: 0.4rem 0.6rem; font-size: 0.88rem; }

/* Formulare-Reiter: einklappbare Quellen-Gruppen (Google Forms / Typeform), Standard ZU. */
.form-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.form-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.form-group-head:hover { background: rgba(255, 255, 255, 0.03); }
.form-group-caret { display: inline-block; transition: transform 0.15s ease; color: var(--muted); }
.form-group-head.open .form-group-caret { transform: rotate(90deg); }
.form-group-count { font-weight: 500; }
.form-group-body { padding: 0 1rem 1rem; }
/* Sprungmarken-Chips innerhalb einer Gruppe. */
.form-group-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0.2rem 0 0.9rem; }

/* Formulare-Reiter: Übersicht (Inhaltsverzeichnis) oben. */
.form-toc { margin-bottom: 1rem; }
.form-toc h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.form-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.form-toc-link {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--accent);
  cursor: pointer;
}
.form-toc-link:hover:not(.disabled) { border-color: var(--accent); }
.form-toc-link.disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
}

/* Frage/Antwort-Layout. Zwei robuste Spalten (~40 % / 60 %); minmax(0,…) erlaubt der
   Antwortspalte zu schrumpfen, OHNE den Inhalt mitten im Wort zu zerbrechen. */
.form-dl { margin: 0; }
.form-dl .form-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0.4rem 1.5rem;
  align-items: start;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}
.form-dl .form-row:first-child { border-top: none; padding-top: 0; }
.form-dl dt {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}
.form-dl dd {
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;     /* Zeilenumbrüche aus den Antworten erhalten */
  overflow-wrap: break-word; /* nur an Wortgrenzen umbrechen … */
  word-break: normal;        /* … niemals mitten im Wort */
}

/* Schmale Breiten: Frage über Antwort stapeln, damit nie wieder ein
   Einzelzeichen-Bruch entstehen kann. */
@media (max-width: 640px) {
  .form-dl .form-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .form-dl dt { font-size: 0.8rem; }
}

.badge-wrap { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.muted.small { font-size: 0.78rem; margin: 0.6rem 0 0; }

/* ---------- E-Mails-Reiter (Front) ---------- */
.email-head { margin-bottom: 1rem; }
.email-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.email-head-row h3 { margin: 0; font-size: 1rem; }

.email-thread { padding: 0; overflow: hidden; }
.email-thread + .email-thread { margin-top: 0.6rem; }
.email-thread-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.email-thread-head:hover { background: var(--panel-2); }
.email-thread-subject {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.email-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.email-thread-caret {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--muted);
}
.email-thread-head.open .email-thread-caret { transform: rotate(90deg); }

.email-thread-body {
  padding: 0.5rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* WICHTIG: display:flex überschreibt sonst das hidden-Attribut (UA-Style hat
   niedrigere Spezifität) -> Thread bliebe immer offen. Diese Regel gewinnt. */
.email-thread-body[hidden] { display: none; }

.email-msg {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  max-width: 88%;
}
.email-msg.msg-in {
  align-self: flex-start;
  background: var(--panel-2);
}
.email-msg.msg-out {
  align-self: flex-end;
  background: rgba(78, 161, 255, 0.08);   /* dezent in Akzentfarbe -> ausgehend */
  border-color: rgba(78, 161, 255, 0.35);
}
.email-msg-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.email-msg-author { font-size: 0.82rem; font-weight: 600; }
.email-msg-head .muted.small { margin: 0; }
.email-msg-body {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;       /* Zeilenumbrüche erhalten */
  overflow-wrap: break-word;   /* nur an Wortgrenzen umbrechen */
  word-break: normal;          /* niemals mitten im Wort (gleiche Lehre wie Formulare) */
}

@media (max-width: 640px) {
  .email-msg { max-width: 100%; }
  .email-thread-head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ---------- Zoom-Daten ---------- */
.zoom-format + .zoom-format { margin-top: 0.8rem; }
.zoom-format-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; cursor: pointer;
}
.zoom-format-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.zoom-format-head h3 { margin: 0; font-size: 1rem; }
.zoom-format-caret { color: var(--muted); transition: transform 0.15s ease; flex-shrink: 0; }
.zoom-format-head.open .zoom-format-caret { transform: rotate(90deg); }
.zoom-format-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.zoom-ext-toggle, .zoom-area-assign { font-size: 0.8rem; color: var(--muted); cursor: default; }
.zoom-instances { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
/* display:flex überschreibt sonst das hidden-Attribut -> diese Regel gewinnt (default ZU). */
.zoom-instances[hidden] { display: none; }
.zoom-downloads { margin-top: 0.8rem; }
.zoom-instance {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.8rem; color: var(--text);
}
.zoom-instance:hover { border-color: var(--accent); }
.zoom-inst-date { font-weight: 600; font-size: 0.88rem; min-width: 9rem; }
.zoom-inst-ind { margin-left: auto; display: flex; gap: 0.3rem; align-items: center; }

.zoom-section-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; cursor: pointer; color: var(--text);
  font-size: 1rem; font-weight: 600; padding: 0;
}
.zoom-section-caret { color: var(--muted); transition: transform 0.15s ease; }
.zoom-section-head.open .zoom-section-caret { transform: rotate(90deg); }
.zoom-section-body {
  margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  max-height: 32rem; overflow-y: auto;
}
.zoom-section-body[hidden] { display: none; }

/* ---------- Phase 4: Notizen / Wiedervorlagen / DSGVO ---------- */

.nav-badge {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.35rem;
  margin-left: 0.25rem;
  border-radius: 99px;
  background: var(--bad);
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
}

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.btn-secondary {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Notizen-Composer */
.note-composer textarea,
.note-card textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}
.note-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
.field-inline {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.field-inline select, .field-inline input { font-size: 0.88rem; }

/* Notiz-Karten */
.note-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.85rem;
}
.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.note-author { font-weight: 600; font-size: 0.9rem; }
.note-reminder { color: var(--warn); font-size: 0.78rem; }
.note-body { font-size: 0.92rem; line-height: 1.5; word-break: break-word; }
.note-body p:first-child { margin-top: 0; }
.note-body p:last-child { margin-bottom: 0; }
.note-body a { color: var(--accent); }
.note-body code {
  background: var(--panel-2);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.85em;
}
.note-body pre {
  background: #0c0f15;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem;
  overflow: auto;
}
.note-actions { display: flex; gap: 0.75rem; margin-top: 0.6rem; }
.link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 0.1rem 0;
  font-size: 0.82rem;
}
.link-btn:hover { background: transparent; text-decoration: underline; }
.link-btn.danger { color: #f5a89e; }

/* Wiedervorlagen */
.reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.reminder-main { display: flex; flex-direction: column; gap: 0.2rem; }
.reminder-date { font-size: 0.8rem; color: var(--muted); }
.reminder-date.due { color: var(--bad); font-weight: 600; }
.reminder-row.due { background: rgba(231, 76, 60, 0.05); }
.reminder-customer { color: var(--accent); font-weight: 600; text-decoration: none; }
.reminder-customer:hover { text-decoration: underline; }

/* Gefahren-Bereich (DSGVO-Löschung) */
.danger-zone {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.04);
}
.danger-zone h3 { color: var(--bad); }
.btn-danger {
  background: var(--bad);
  border: none;
  color: #fff;
  font-weight: 600;
  margin-top: 0.4rem;
}
.btn-danger:hover { background: #c0392b; }

/* ---------- Admin: Sync-Intervalle ---------- */
/* Feste Spaltenbreiten -> alle Zellen einer Spalte stehen bündig untereinander, unabhängig
   vom Inhalt (kurze/lange Dropdown-Werte, eine/zwei Uhrzeiten). */
.sched-table { table-layout: fixed; width: 100%; }
.sched-table th:nth-child(1), .sched-table td:nth-child(1) { width: 18%; }      /* Quelle */
.sched-table th:nth-child(2), .sched-table td:nth-child(2) { width: 165px; }    /* Häufigkeit */
.sched-table th:nth-child(3), .sched-table td:nth-child(3) { width: 195px; }    /* Uhrzeit(en) */
.sched-table th:nth-child(4), .sched-table td:nth-child(4) { width: 95px; }     /* Wochentag */
.sched-table th:nth-child(5), .sched-table td:nth-child(5) { width: 80px; }     /* Aktiv */
.sched-table th:nth-child(6), .sched-table td:nth-child(6) { width: auto; }     /* Zuletzt gesynct */
.sched-table th:nth-child(7), .sched-table td:nth-child(7) { width: 170px; text-align: right; } /* Aktionen */
.sched-table td { vertical-align: middle; }
.sched-table input[type="time"], .sched-table select {
  padding: 0.3rem 0.4rem; font-size: 0.85rem; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box;
}
/* Einheitliche Control-Breiten über alle Zeilen (auch leer). */
.sched-table .sched-freq, .sched-table .sched-wd { width: 100%; }
.sched-table .sched-time, .sched-table .sched-time2 { width: 82px; }
.sched-table .sched-time2 { margin-left: 0.3rem; }
.sched-actions { white-space: nowrap; display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.form-msg.success { color: var(--good, #2ecc71); }

/* ---------- DSGVO-Lösch-Modal: Schritt 2 (Erledigt) ---------- */
.del-success { margin: 0.25rem 0 0.4rem; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.4); color: var(--good); font-size: 1rem; }
.del-manual-title { margin: 0.8rem 0 0.3rem; font-size: 0.95rem; }

/* ---------- Manuelle Löschpunkte (abhakbare Checkliste) ---------- */
.manual-tasks-wrap { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.manual-tasks { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.manual-tasks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.manual-tasks li:first-child { border-top: none; }
.manual-tasks .mt-id { flex: 1 1 220px; }
.manual-tasks .mt-date { width: 150px; }
.manual-tasks .mt-ok { color: var(--good); }
.dl-detail { padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.02); border-radius: 8px; }
.dl-detail-row > td { padding: 0 !important; }
.dl-actions { white-space: nowrap; }

/* ---------- DSGVO-Lösch-Modal ---------- */
.del-banner { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.5); color: #ff9b8f; }
.del-sources { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--border, #2a2f3a); border-radius: 8px; }
.del-sources legend { padding: 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.del-src { display: block; margin: 0.25rem 0; }
.del-preview { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 8px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); max-height: 320px; overflow:auto; font-size: 0.9rem; }
.del-preview ul { margin: 0.2rem 0 0.6rem 1.1rem; }
.del-preview li { margin: 0.1rem 0; }
.del-warn { color: var(--warn, #f39c12); }

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.modal-head h2 { margin: 0; font-size: 1.05rem; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.45rem;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

/* Einmalpasswort-Anzeige (Anlage + Reset) */
.temp-pw-reveal {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: #0c0f15;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}
.temp-pw-reveal code {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  user-select: all;
}
/* Aktions-Buttons in der Team-Tabelle (Einmalpasswort + Deaktivieren) */
.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.debug-output {
  margin-top: 0.75rem;
  background: #0c0f15;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.8rem;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Login-Seite / Auth im Marken-Look ---------- */

/* Nur die Login-Seite bekommt den Creme-Hintergrund (eigenständige Route).
   Das Dashboard selbst bleibt im Dark-Theme. */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: var(--brand-cream);
}

/* .auth-brand = gemeinsamer Marken-Look für ALLE Auth-Karten:
   Login-Karte + die Passwort-Modals (setzen / ändern). Eine Quelle, ein Look. */
.auth-brand {
  background: var(--brand-card);
  border: 1px solid var(--brand-line);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(29, 54, 101, 0.12);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 400px;
  display: grid;
  gap: 1rem;
  color: var(--brand-ink);
  font-family: var(--brand-font-body);
  text-align: left;
}
.auth-brand .auth-mark {
  font-family: var(--brand-font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-pink);
  text-transform: uppercase;
  font-size: 0.8rem;
  margin: 0;
}
.auth-brand h2 {
  margin: 0;
  font-family: var(--brand-font-head);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--brand-navy);
}
.auth-brand .login-intro,
.auth-brand .auth-intro,
.auth-brand > p.muted {
  margin: 0;
  color: var(--brand-muted);
  font-family: var(--brand-font-body);
  font-size: 0.98rem;
  line-height: 1.5;
}
.auth-brand form { display: grid; gap: 0.85rem; }
.auth-brand .field { display: grid; gap: 0.35rem; }
.auth-brand label {
  font-family: var(--brand-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--brand-navy);
}
/* Eingabefelder: rund, hell, klar, mit sichtbarem Fokus im Marken-Pink. */
.auth-brand input {
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: var(--brand-font-body);
  width: 100%;
}
.auth-brand input::placeholder { color: #b3a99b; }
.auth-brand input:focus {
  outline: none;
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 3px var(--brand-focus);
}
/* Primär-CTA im Marken-Pink, rund. */
.auth-brand button[type="submit"] {
  margin-top: 0.35rem;
  background: var(--brand-pink);
  border: none;
  color: #fff;
  font-family: var(--brand-font-head);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.02s ease;
}
.auth-brand button[type="submit"]:hover { filter: brightness(1.05); }
.auth-brand button[type="submit"]:active { transform: translateY(1px); }
.auth-brand button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-focus);
}
/* Sekundär-Aktion (z. B. „Abmelden" im Passwort-setzen-Modal). */
.auth-brand .btn-secondary {
  background: transparent;
  border: 1px solid var(--brand-line);
  color: var(--brand-navy);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-family: var(--brand-font-body);
  font-weight: 600;
}
.auth-brand .btn-secondary:hover { background: var(--brand-cream); border-color: var(--brand-navy); }
/* Marken-Links statt Browser-Blau (z. B. „Passwort vergessen?"). */
.auth-brand .auth-link,
.auth-brand a {
  color: var(--brand-pink);
  font-family: var(--brand-font-body);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
}
.auth-brand .auth-link:hover,
.auth-brand a:hover { text-decoration: underline; }
/* Fehlermeldung sichtbar im Marken-Look — Inhalt bleibt neutral/unverändert. */
.auth-brand .login-error,
.auth-brand .form-msg.error {
  margin: 0;
  font-family: var(--brand-font-body);
  font-size: 0.9rem;
  color: #b23a48;
  background: rgba(244, 54, 76, 0.08);
  border: 1px solid rgba(244, 54, 76, 0.28);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
.auth-brand .form-msg.ok {
  margin: 0;
  font-family: var(--brand-font-body);
  font-size: 0.9rem;
  color: #1b7a4b;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
.auth-brand .modal-head { margin-bottom: 0.25rem; }
.auth-brand .modal-head h2 { font-size: 1.4rem; }
.auth-brand .modal-close { color: var(--brand-muted); }
.auth-brand .modal-close:hover { background: var(--brand-cream); color: var(--brand-navy); }
.auth-brand .modal-actions { margin-top: 0.5rem; }

/* ---------- Passwort anzeigen/verbergen (Augen-Toggle) ---------- */
/* Wrapper um genau ein Passwortfeld; der Button liegt rechts im Feld und
   überlagert den Text nicht (Feld bekommt rechts extra Padding). */
.pw-field { position: relative; display: block; }
.pw-field > input { padding-right: 3rem; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--brand-muted);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--brand-navy); background: rgba(29, 54, 101, 0.06); }
.pw-toggle:focus-visible {
  outline: none;
  color: var(--brand-navy);
  box-shadow: 0 0 0 3px var(--brand-focus);
}
.pw-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
/* Icon-Wechsel rein über den aria-pressed-Zustand — verborgen = offenes Auge,
   sichtbar (aria-pressed=true) = durchgestrichenes Auge. */
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; }

/* Handy: Karte sitzt sauber zentriert, volle Breite mit etwas Rand. */
@media (max-width: 480px) {
  .auth-brand { padding: 1.75rem 1.25rem; border-radius: 16px; max-width: 100%; }
  .auth-brand h2 { font-size: 1.4rem; }
}

/* ---------- Phase 5: Custom-Tags + Tag-Filter ---------- */

/* Editierbare Custom-Tags (optisch klar von den read-only AC-Tags abgesetzt:
   AC-Tags = blau .badge.tag, Custom-Tags = violett mit Entfernen-Knopf). */
.badge.custom-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(124, 92, 255, 0.15);
  color: #c4b6ff;
  border: 1px solid rgba(124, 92, 255, 0.35);
}
.tag-remove {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
  opacity: 0.7;
}
.tag-remove:hover { opacity: 1; color: #fff; }

.tag-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.tag-add-row input {
  flex: 1 1 200px;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
}

/* Tag-Filter in der Kundenliste (Mehrfachauswahl per Dropdown). */
.tag-filter {
  position: relative;
  font-size: 0.88rem;
}
.tag-filter > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  white-space: nowrap;
}
.tag-filter > summary::-webkit-details-marker { display: none; }
.tag-filter > summary::after { content: " ▾"; color: var(--muted); }
.tag-filter[open] > summary { border-color: var(--accent); }
.tag-filter-menu {
  position: absolute;
  z-index: 30;
  margin-top: 0.3rem;
  min-width: 200px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- Produkt-Reiter (Schritt 2) ---------- */

/* Dynamische Gruppen-Reiter teilen das .nav-item-Styling; aria-selected greift bereits. */
.nav-item--group { display: flex; justify-content: space-between; align-items: center; }

/* Navigations-Gruppen (Kunden-Bereich · Programmbereiche · separat unten). */
.nav-group { display: flex; flex-direction: column; gap: 0.2rem; }
.nav-group + .nav-group { margin-top: 0.9rem; }
.nav-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  padding: 0 0.85rem;
  margin-bottom: 0.15rem;
}
/* Unterste Gruppe (KI-Fragen · Kurs freischalten) ans Sidebar-Ende + deutliche Trennlinie. */
.nav-group--bottom { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--border); }

/* ---------- Übergeordnete Reiter-Ebene (Kunden · Daten · Rechte · Admin) ---------- */
.topnav {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.topnav-tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.topnav-tab:hover { color: var(--text); }
.topnav-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
/* Nur die Nav-Gruppen des aktiven Reiters sind sichtbar; die aktive füllt die Sidebar-Höhe,
   damit .nav-group--bottom (margin-top:auto) unten andockt. */
.nav-tabgroup { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; }
/* WICHTIG: display:flex überschreibt sonst das hidden-Attribut (UA-Style hat nur [hidden]{display:none}
   mit niedrigerer Spezifität) — ohne diese Regeln bleiben ausgeblendete Reiter-Gruppen (nav-tabgroup)
   bzw. leergefilterte Nav-Gruppen (nav-group) sichtbar stehen. setTopTab()/applyAreaVisibility() setzen
   hidden; diese Regeln machen es sichtbar wirksam (keine fremden Gruppen, keine verwaisten Titel/Striche). */
.nav-tabgroup[hidden] { display: none; }
.nav-group[hidden] { display: none; }

/* ---------- Bereichsrechte-Matrix (Reiter „Zugriffsrechte Mitarbeiter") ---------- */
.area-user { border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.85rem; margin-bottom: 0.55rem; }
.area-user > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 600; }
.area-user > summary::-webkit-details-marker { display: none; }
.area-user > summary::after { content: "▾"; color: var(--muted); }
.area-user[open] > summary::after { content: "▴"; }
.area-count { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 0.85rem; }
.area-col h4 { margin: 0 0 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.area-col label { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.area-actions { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
@media (max-width: 640px) { .area-grid { grid-template-columns: 1fr; } }

/* Warn-Badge (Teil-Rückgabe). */
.badge.warn { background: rgba(243, 156, 18, 0.15); color: var(--warn); }

/* Segmented Control (Aktiv | Beendet) im Produkt-Reiter. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.seg-btn {
  background: var(--panel-2);
  color: var(--muted);
  border: none;
  border-radius: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn[aria-selected="true"] { background: var(--accent); color: #0f1218; font-weight: 600; }

/* Support-Produkt-Block in der Detail-Übersicht. */
.support-prod { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.6rem 0.4rem 0; }
.support-prod a { color: var(--accent); text-decoration: none; }
.support-prod a:hover { text-decoration: underline; }

/* Kursinhalte (Mentortools). */
.mt-course-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mt-course-title h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.mt-course-body { margin-top: 0.85rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.mt-module, .mt-lesson { border: 1px solid var(--border); border-radius: 8px; margin: 0.4rem 0; background: var(--panel-2); }
.mt-module > summary, .mt-lesson > summary {
  cursor: pointer; padding: 0.55rem 0.75rem; font-weight: 600; list-style: none;
}
.mt-module > summary::-webkit-details-marker, .mt-lesson > summary::-webkit-details-marker { display: none; }
.mt-module > summary::before, .mt-lesson > summary::before { content: '▸ '; color: var(--muted); }
.mt-module[open] > summary::before, .mt-lesson[open] > summary::before { content: '▾ '; }
.mt-lesson { background: var(--panel); margin-left: 0.4rem; }
.mt-lesson > summary { font-weight: 500; }
.mt-module-body, .mt-lesson-body { padding: 0.2rem 0.85rem 0.7rem; }
.mt-richtext { color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.mt-richtext h1, .mt-richtext h2, .mt-richtext h3 { font-size: 1rem; margin: 0.6rem 0 0.3rem; }
.mt-richtext img { max-width: 100%; height: auto; }
.mt-richtext a { color: var(--accent); }
.mt-media { font-size: 0.9rem; margin: 0.4rem 0; }
.mt-media a { color: var(--accent); }

/* Admin: Produkt-Gruppen-Mapping. */
.pg-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--panel-2);
}
.pg-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.pg-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-left: auto; }
.pg-ids { margin-bottom: 0.5rem; }
.pg-id { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Admin: Zugriffsdauer-Perioden je Produkt-ID. */
.pg-id-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
  background: var(--panel);
}
.pg-id-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.pg-periods { margin-top: 0.45rem; }
.pp-list { list-style: none; margin: 0 0 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.5rem; }
.pg-period-add { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pg-period-add input { padding: 0.3rem 0.4rem; }

/* Produkt-Picker-Modal. */
.modal-wide { max-width: 560px; width: 92%; }
.picker-list {
  max-height: 50vh;
  overflow: auto;
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.picker-row:last-child { border-bottom: none; }
#pp-search { width: 100%; margin-top: 0.4rem; padding: 0.45rem 0.6rem; }

/* Zoom-Reiter im Kundendetail: eindeutig zugeordnete Gesprächsabschnitte */
.zoom-seg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.zoom-seg-head .btn-secondary { white-space: nowrap; }
.zoom-seg-body {
  margin-top: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border, #2a2f3a);
  line-height: 1.5; font-size: 0.92rem; max-height: 22rem; overflow-y: auto; white-space: normal;
}
.zoom-seg-me { color: #9ec9ff; }
.zoom-badges { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

/* Close-Reiter (Kundendetail, read-only) */
.close-lead-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.close-block { margin-top: 0.8rem; }
.close-block h4 { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--text); }
.close-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.close-kv { font-size: 0.9rem; margin: 0.15rem 0; }
.close-line { margin-top: 0.2rem; font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.close-activity {
  margin-top: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border, #2a2f3a);
}
.close-act-head { display: flex; align-items: center; gap: 0.4rem; }
.close-act-body { margin-top: 0.25rem; line-height: 1.45; font-size: 0.9rem; }

/* Formularzentrierte Bereiche (Google Formulare / Typeform) */
.form-area-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.form-area-item-main { display: flex; flex-direction: column; gap: 0.2rem; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.fa-table { min-width: 100%; }
/* Lesbarkeit: Spaltenköpfe + Zellen umbrechen statt abschneiden; sinnvolle Breiten. */
.fa-table th { vertical-align: bottom; white-space: normal; word-break: break-word; min-width: 9rem; max-width: 22rem; line-height: 1.25; }
.fa-table td { vertical-align: top; white-space: pre-wrap; word-break: break-word; min-width: 8rem; max-width: 26rem; }
/* Wichtige Fixspalten klar dimensioniert. */
.fa-table th:nth-child(1), .fa-table td:nth-child(1) { min-width: 8.5rem; white-space: nowrap; }   /* Datum */
.fa-table th:nth-child(2), .fa-table td:nth-child(2) { min-width: 12rem; }                          /* E-Mail */
.fa-table th:nth-child(3), .fa-table td:nth-child(3) { min-width: 12rem; }                          /* Kunde */
.fa-table th:nth-child(4), .fa-table td:nth-child(4) { min-width: 5rem; white-space: nowrap; }      /* Zugeordnet */
.fa-row-anon td { opacity: 0.82; }
.fa-pager { align-items: center; gap: 0.75rem; margin-top: 0.6rem; }

/* Programm-Kriterien (Hakerl) + erweiterte Filter */
.filter-bar--secondary { margin-top: 0.5rem; }
.crit-badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 99px; font-size: 0.8rem; background: rgba(78,161,255,0.12); color: #9ec9ff; }
.crit-badge.crit-full { background: rgba(46,204,113,0.15); color: var(--good); }
.crit-group { margin-top: 0.6rem; }
.crit-group-title { margin: 0.2rem 0; font-size: 0.95rem; }
.crit-list { display: flex; flex-direction: column; gap: 0.3rem; }
.crit-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.crit-item input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.crit-audit { cursor: help; }
/* Warn-Hinweis am EG-Hakerl (Buchung vor 01.01.2026) — dezent unter dem Hakerl, eingerückt. */
.crit-eg-warn { margin: 0.1rem 0 0.2rem 1.55rem; max-width: 46rem; font-size: 0.82rem; }
.pg-criteria { margin-top: 0.75rem; border-top: 1px solid var(--border, #2a2f3a); padding-top: 0.5rem; }
.pg-crit-title { margin: 0 0 0.35rem; font-size: 0.95rem; }
.pg-crit-actions { display: inline-flex; gap: 0.5rem; align-items: center; }
.pp-row.crit-inactive { opacity: 0.6; }

/* Klappbare Admin-Abschnitte (native <details>) */
.admin-collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.admin-collapsible > summary::-webkit-details-marker { display: none; }
.admin-collapsible > summary h2 { margin: 0; display: inline; }
.admin-collapsible > summary::before { content: '▸'; color: var(--muted); transition: transform 0.15s; }
.admin-collapsible[open] > summary::before { transform: rotate(90deg); }
.admin-collapsible-body { margin-top: 0.75rem; }
/* Admin-Reiter: Karten in Subgruppen bündeln. Dezente Sektions-Überschriften im Stil der
   Sidebar-Sektionstitel (nav-group-title). Der Wrapper übernimmt denselben Grid-Abstand wie
   das Panel (1.25rem) -> kein Layout-Sprung. */
.admin-group { display: grid; gap: 1.25rem; }
.admin-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

/* Zoom „Neueste" (flache chronologische Liste) */
.zoom-recent-list { display: flex; flex-direction: column; gap: 0.3rem; }
.zoom-recent-row { display: grid; grid-template-columns: 8rem 1fr auto auto; gap: 0.6rem; align-items: center;
  text-align: left; background: var(--card, #161a22); border: 1px solid var(--border, #2a2f3a);
  border-radius: 8px; padding: 0.5rem 0.75rem; color: inherit; cursor: pointer; }
.zoom-recent-row:hover { border-color: #3a4256; background: rgba(255,255,255,0.03); }
.zoom-recent-date { color: var(--muted); font-size: 0.88rem; }
.zoom-recent-topic { font-weight: 500; }

/* Admin: vertrauliche Zoom-Calls */
.zoom-conf-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border, #2a2f3a); cursor: pointer; }
.zoom-conf-row:last-child { border-bottom: none; }
.zoom-conf-topic { font-weight: 500; }

/* Typeform-Bereich: Listen-Controls, Kategorie/Aktualität, Produkt-Marker, alt-Block */
.form-area-controls .filter-bar { margin-top: 0.5rem; }
.form-area-badges { margin: 0 0.3rem; }
.form-area-admin { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.4rem; }
.form-area-admin .field-inline.small { font-size: 0.85rem; }
.prod-marker { display: inline-block; padding: 0.02rem 0.45rem; border-radius: 99px; font-size: 0.72rem;
  background: rgba(124,92,255,0.16); color: #c3b5ff; margin-left: 0.25rem; white-space: nowrap; }
.form-old-block { margin-top: 0.75rem; border-top: 1px dashed var(--border, #2a2f3a); padding-top: 0.5rem; }
.form-old-block > summary { cursor: pointer; color: var(--muted); }
.form-old-body { margin-top: 0.5rem; }

/* ===== Monday-Anbindung (Phase A: Lese-Seite) ============================
   Lese-Modus klar gekennzeichnet. Schreib-Modus (Phase B) bekommt ein
   farblich abgesetztes Warn-Banner (.write-banner), damit beide Modi optisch
   eindeutig unterscheidbar sind. */
.badge.warn { background: rgba(243, 156, 18, 0.15); color: var(--warn); }

.read-mode-hint {
  display: inline-block; margin: 0.4rem 0; padding: 0.3rem 0.7rem;
  border-radius: 6px; font-size: 0.82rem;
  background: rgba(46, 204, 113, 0.10); color: var(--good);
  border: 1px solid rgba(46, 204, 113, 0.3);
}
/* Phase B: deutlich sichtbares Warn-Banner während des Schreib-Modus. */
.write-banner {
  margin: 0.6rem 0; padding: 0.6rem 0.9rem; border-radius: 8px;
  background: rgba(231, 76, 60, 0.14); color: #ffb4ab;
  border: 1px solid rgba(231, 76, 60, 0.5); font-weight: 600;
}

.monday-group { padding: 0; overflow: hidden; }
.monday-group-head {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.8rem 1rem;
}
.monday-group-head:hover { background: rgba(255,255,255,0.03); }
.monday-group-head h3 { margin: 0; font-size: 0.98rem; }
.monday-group-caret { color: var(--muted); transition: transform 0.15s; display: inline-block; }
.monday-group-head.open .monday-group-caret { transform: rotate(90deg); }
.monday-group-body { padding: 0.5rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.monday-item { padding: 0.7rem 0.9rem; }
.monday-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
.monday-item-title { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.monday-item-match { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.monday-vals { margin: 0.55rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.35rem 1rem; }
.monday-val { display: flex; gap: 0.4rem; font-size: 0.85rem; }
.monday-val-label { color: var(--muted); min-width: 90px; }
.monday-val-text { color: var(--text); word-break: break-word; }
.monday-item-foot { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.8rem; }
.monday-open { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
a.badge.active { text-decoration: none; }

/* ===== Monday-Notizen (Updates-Feed, read-only) ===== */
.badge.note-badge { background: rgba(124, 92, 255, 0.15); color: #b3a3ff; }
.monday-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.monday-notes { margin: 0.6rem 0 0; border-top: 1px dashed var(--border); padding-top: 0.5rem; }
.monday-notes > summary { cursor: pointer; color: var(--text); font-size: 0.88rem; font-weight: 600; list-style: none; }
.monday-notes > summary::-webkit-details-marker { display: none; }
.monday-notes > summary::before { content: '▸ '; color: var(--muted); }
.monday-notes[open] > summary::before { content: '▾ '; }
.monday-notes-body { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.monday-note {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.7rem;
}
.monday-note-meta { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.25rem; }
.monday-note-text { color: var(--text); font-size: 0.88rem; line-height: 1.45; word-break: break-word; }
.monday-reply { margin: 0.45rem 0 0 1.1rem; border-left: 2px solid var(--accent); background: rgba(255,255,255,0.02); }

/* ===== Monday-Notiz-Composer (Phase B, Schreibmodus) ===== */
#monday-note-modal .modal { max-width: 560px; }
#monday-note-modal textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.7rem; font: inherit;
}
.monday-note-preview {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-left: 3px solid var(--warn); border-radius: 8px; padding: 0.55rem 0.7rem;
  font-size: 0.88rem; line-height: 1.45; color: var(--text); word-break: break-word;
  min-height: 1.4rem;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.btn-link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 0.1rem 0.2rem; font-size: 0.82rem;
}
.btn-link:hover { text-decoration: underline; background: none; }
.monday-note-actions { margin-top: 0.35rem; }
.monday-notes-foot, .monday-notes-empty { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.monday-toast {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 1000;
  background: rgba(46, 204, 113, 0.16); color: var(--good);
  border: 1px solid rgba(46, 204, 113, 0.5); border-radius: 8px;
  padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* Generischer Toast (Erfolg/Fehler) — gleiche Optik wie .monday-toast. */
.app-toast {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 1000;
  background: rgba(46, 204, 113, 0.16); color: var(--good);
  border: 1px solid rgba(46, 204, 113, 0.5); border-radius: 8px;
  padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.app-toast--error {
  background: rgba(231, 76, 60, 0.16); color: var(--bad);
  border-color: rgba(231, 76, 60, 0.5);
}

/* ===== Monday Multi-Board ===== */
.monday-head-left { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
#monday-board-select { max-width: 320px; }
.monday-board-section { margin-bottom: 1rem; }
.monday-board-title { margin: 0.6rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.mb-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.25rem 0.8rem; max-height: 220px; overflow-y: auto; padding: 0.4rem; border: 1px solid var(--border); border-radius: 8px; }
.mb-checkboxes .check { font-size: 0.85rem; }
.mb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mb-actions .btn-link { font-size: 0.8rem; }

/* Erfolgsgarantie */
.nav-item--sub { font-size: 0.85rem; opacity: 0.92; padding-left: 1.1rem; }
/* Marker in der LA-Liste: Kunde erscheint dort wegen der Erfolgsgarantie (Zugriff abgelaufen). */
.badge.eg-badge { background: rgba(253, 193, 0, 0.16); color: var(--gold, #FDC100); }

/* DSGVO-Auskunft-Versanddoku (Admin-Formular + Kundendetail-Hinweis) */
.av-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1rem; margin: 0.8rem 0; }
.av-form-grid label { font-size: 0.85rem; }
.av-form-grid input, .av-form-grid select { width: 100%; }
.av-form-grid .av-form-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .av-form-grid { grid-template-columns: 1fr; } }
.av-hint { margin: 0 0 0.6rem; }

/* Events: rotes Warnbanner (nicht zugeordnete Ausnahmecodes -> „gelten fälschlich als eingewilligt"). */
.product-banner.ev-warn-bad { color: var(--bad, #e74c3c); }
.product-banner.ev-warn-bad strong { color: var(--bad, #e74c3c); }

/* Events: soft-gelöschte Ticketzeilen deutlich abgesetzt (ausgegraut + durchgestrichen). */
tr.ev-deleted td { opacity: 0.55; text-decoration: line-through; }
tr.ev-deleted td:last-child { text-decoration: none; }   /* Aktions-/Info-Spalte lesbar lassen */
.link-btn.danger { color: var(--bad, #e74c3c); }
.eg-statusline { margin: 0.15rem 0 0.7rem; font-size: 0.9rem; color: var(--text); line-height: 1.75; }
.eg-statusline strong { font-weight: 700; }
.eg-statusline .eg-sl-sep { color: var(--muted); opacity: 0.55; margin: 0 0.15rem; }
.eg-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; vertical-align: middle; margin: 0 0.1rem 0 0.4rem; }
.eg-dot.eg-aktiv { background: #34d399; }
.eg-dot.eg-verfallen { background: #f87171; }
.eg-dot.eg-erfuellt { background: #60a5fa; }
.badge.eg-b-aktiv { background: rgba(52,211,153,0.18); color: #34d399; }
.badge.eg-b-verfallen { background: rgba(248,113,113,0.18); color: #f87171; }
.badge.eg-b-abgeschlossen { background: rgba(52,211,153,0.22); color: #34d399; }
.badge.eg-b-rausgeflogen { background: rgba(148,163,184,0.22); color: #cbd5e1; }
.eg-dot.eg-abgeschlossen { background: #34d399; }
.eg-dot.eg-rausgeflogen { background: #94a3b8; }
.eg-src { font-size: 0.85em; opacity: 0.85; }
.eg-umsatz { min-width: 130px; }
.eg-umsatz-bar { height: 6px; border-radius: 4px; background: rgba(148,163,184,0.25); overflow: hidden; margin-bottom: 2px; }
.eg-umsatz-bar > span { display: block; height: 100%; background: #60a5fa; border-radius: 4px; }
.eg-umsatz-bar > span.eg-reached { background: #34d399; }
.eg-umsatz-txt { font-size: 0.8rem; color: var(--muted, #94a3b8); }
.eg-detail-umsatz { margin: 0.5rem 0; max-width: 360px; }
.eg-suggest { color: #fbbf24; }
.eg-gilt-nicht { color: #fbbf24; font-size: 0.85rem; white-space: nowrap; }
.eg-gilt-nicht-box { color: #fbbf24; background: rgba(251,191,36,0.12); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.9rem; margin: 0.3rem 0; }
.eg-setter { margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--border, #e5e7eb); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.eg-setter label { color: var(--muted, #94a3b8); font-size: 0.9rem; width: 100%; }
.eg-warn-chip { display: inline-block; background: rgba(251,191,36,0.18); color: #fbbf24; border-radius: 5px; padding: 0 0.35rem; font-size: 0.8rem; margin-left: 0.2rem; }
.eg-warn-chip.eg-warn-stale { background: rgba(148,163,184,0.2); color: #cbd5e1; }
.eg-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.eg-sort:hover { text-decoration: underline; }
.eg-sort-active[data-dir="asc"]::after { content: " ▲"; font-size: 0.7em; }
.eg-sort-active[data-dir="desc"]::after { content: " ▼"; font-size: 0.7em; }
.eg-row { cursor: pointer; }
.eg-row:hover { background: var(--row-hover, rgba(255,255,255,0.04)); }
.eg-row-verfallen td:first-child { box-shadow: inset 3px 0 0 #f87171; }
/* Dezentes Status-Dropdown in der Erfolgsgarantie-Übersicht (Status-Spalte). */
.eg-row-status { margin-top: 0.25rem; display: block; font-size: 0.78rem; padding: 0.1rem 0.3rem; max-width: 11rem; }
/* 10k automatisch erreicht, aber noch nicht händisch gesetzt -> golden hervorheben. */
.eg-row-auto10k { background: rgba(253, 193, 0, 0.10); }
.eg-row-auto10k:hover { background: rgba(253, 193, 0, 0.16); }
.eg-row-auto10k td:first-child { box-shadow: inset 3px 0 0 #fdc100; }
/* Zwischenüberschrift in Admin-Karten (z.B. „Tag-Protokoll"). */
.admin-subhead { font-size: 0.95rem; margin: 1.1rem 0 0.3rem; color: var(--text); }
/* KI-Nutzung & Kosten: Gesamtsumme + Warnzeile bei unbekanntem Modell. */
.aiu-total { font-size: 1.05rem; }
tr.aiu-unknown td { background: rgba(220, 76, 76, 0.12); }

/* KI-Fragen: sortierbare Kopfzeile + aufklappbare Konversations-Einträge. */
.kf-head { display: grid; grid-template-columns: 12rem 1fr 12rem; gap: .5rem; padding: 0 .6rem .4rem; }
.kf-sort { background: none; border: none; color: var(--muted); font: inherit; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; text-align: left; cursor: pointer; padding: 0; }
.kf-sort:hover { color: var(--text); }
.kf-entry { border: 1px solid var(--border); border-radius: 6px; margin-bottom: .4rem; background: var(--card-bg, rgba(255,255,255,0.02)); }
.kf-entry > summary { list-style: none; cursor: pointer; padding: .55rem .6rem; }
.kf-entry > summary::-webkit-details-marker { display: none; }
.kf-entry > summary { display: grid; grid-template-columns: 12rem 1fr 12rem; gap: .5rem; align-items: center; }
.kf-entry[open] > summary { border-bottom: 1px solid var(--border); }
.kf-col-date { color: var(--muted); font-size: .85rem; }
.kf-cust-link { color: var(--gold, #FDC100); text-decoration: none; }
.kf-cust-link:hover { text-decoration: underline; }
.kf-body { padding: .6rem .8rem; }
.kf-qa { margin-bottom: .6rem; }
.kf-qa-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .2rem; }
.kf-qa-text { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 720px) {
  .kf-head, .kf-entry > summary { grid-template-columns: 1fr; gap: .15rem; }
}
/* „Zugriff erloschen?"-Kontrollliste: klickbare Zeilen, Aktionsspalte. */
.ac-row { cursor: pointer; }
.ac-row:hover { background: var(--row-hover, rgba(255,255,255,0.04)); }
#ac-table .ac-ctrl { white-space: nowrap; }
/* Sortierbare Spaltenüberschriften (Buchung / Zugriff bis). */
#ac-table th.ac-sort { cursor: pointer; user-select: none; white-space: nowrap; }
#ac-table th.ac-sort:hover { text-decoration: underline; }
#ac-table th.ac-sort-active[data-dir="asc"]::after { content: " ▲"; font-size: 0.7em; }
#ac-table th.ac-sort-active[data-dir="desc"]::after { content: " ▼"; font-size: 0.7em; }
/* Block-Kopfzeile (Monats-/Sammelblöcke) mit Zähler + Batch-Button. */
#ac-table tr.ac-block-head td {
  background: var(--panel-2, #1f2533);
  border-top: 2px solid var(--border, #232a3a);
  padding: 0.45rem 0.6rem;
}
#ac-table tr.ac-block-head { cursor: pointer; }
.ac-block-caret { display: inline-block; color: var(--muted); transition: transform 0.15s ease; margin-right: 0.3rem; }
#ac-table tr.ac-block-head.open .ac-block-caret { transform: rotate(90deg); }
.ac-block-title { font-weight: 600; }
.ac-block-count {
  display: inline-block; margin-left: 0.5rem; padding: 0.02rem 0.45rem;
  border-radius: 999px; background: rgba(255,255,255,0.10); font-size: 0.8rem;
}
.ac-block-check { float: right; }
.eg-detail-head .eg-detail-status { font-size: 1.05rem; margin-bottom: 0.3rem; }
.eg-launch { margin-top: 0.75rem; }
.eg-launch h3 { margin: 0 0 0.5rem; color: var(--accent, #60a5fa); }
.eg-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0; }
.eg-kv dt { color: var(--muted, #94a3b8); }
.eg-kv dd { margin: 0; }

/* Kurs freischalten */
.cu-summary { margin: 0.25rem 0 0.75rem; font-size: 1.05rem; }
.cu-banner { margin: 0.75rem 0; }
.cu-row-muted { opacity: 0.55; }
.cu-results { margin-top: 1rem; }
.cu-run-row { cursor: pointer; }
.cu-run-row:hover { background: var(--row-hover, #f3f4f6); }
.cu-run-detail { margin-top: 1rem; border-top: 1px solid var(--border, #e5e7eb); padding-top: 0.75rem; }

/* ---------- KI-Antwort-Assistent (Detail-Reiter) ---------- */
.ki-card .ki-label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.ki-privacy {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0.2rem;
}
.ki-textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}
.ki-result { background: #12161f; }
.ki-details { margin: 0.7rem 0; }
.ki-details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 0.35rem 0;
}
.ki-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem 1rem;
  margin-top: 0.5rem;
}
.ki-field { font-size: 0.88rem; }

/* ---------- Klappbare Info-Karten im Kundendetail (Teil A) ---------- */
/* Reuse des admin-collapsible-Musters, aber für Karten mit <h3> im <summary>. */
.card.collapsible { /* native <details>; .card-Padding bleibt erhalten */ }
.collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary h3 { margin: 0; display: inline; }
.collapsible > summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 0.15s;
  flex: 0 0 auto;
}
.collapsible[open] > summary::before { transform: rotate(90deg); }
.collapsible[open] > summary { margin-bottom: 0.75rem; }

/* ---------- EG-Status als klar erkennbares Dropdown (Teil B) ---------- */
/* Sichtbarer Rahmen + eigener Chevron (native Pfeil ist auf Dark zu blass) + Hover.
   Reine Optik, identisch in Übersicht (.eg-row-status) und Kundenreiter (#eg-beendet-sel). */
.eg-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a93a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.6rem;
  padding-right: 1.7rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.eg-status-select:hover { border-color: var(--accent); background-color: var(--panel); }
.eg-status-select:hover { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%234ea1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* ---------- Kursinhalte/Formulare: Markierungen (Auftrag 2) ---------- */
.mt-bulk-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mt-course-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mt-bulk-inline { font-size: 0.8rem; color: var(--muted); }
.mt-bulk-inline .link-btn { font-size: 0.8rem; }
/* KI-Relevant-Zähler „X/Y relevant" (Modul + Kurs) — dezente Pille, Dark-Theme.
   alle relevant = grün, teils ausgemustert = gold, keine = grau. */
.mt-relcount { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.mt-relcount--all { background: rgba(46, 204, 113, 0.15); color: var(--good); }
.mt-relcount--some { background: rgba(243, 156, 18, 0.15); color: var(--warn); }
.mt-relcount--none { background: rgba(138, 147, 166, 0.15); color: var(--muted); }
.ki-form-check { display: inline-flex; margin-top: 0.3rem; font-size: 0.85rem; }
/* Lektions-Hakerl „für KI relevant" — gleiche Optik wie .ki-form-check, inline in der Summary. */
.ki-lesson-check { display: inline-flex; margin-left: 0.4rem; font-size: 0.85rem; }

.cu-single-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ---------- Export-Modal (Auftrag 4) ---------- */
.export-format, .export-tabs { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.export-format legend, .export-tabs legend { padding: 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.export-format { display: flex; gap: 1.2rem; }
/* Mentortools-Kursauswahl (DSGVO-Auskunft): Suchfeld + scrollbare Checkbox-Liste. */
.export-format.ausk-mt-fieldset { display: block; }
.ausk-mt-search { width: 100%; margin-bottom: 0.5rem; }
.ausk-mt-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 15rem; overflow-y: auto; margin-bottom: 0.4rem; }
.ausk-mt-list .check { display: flex; }
.export-tabs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.35rem 1rem; }
.export-tab-check { font-size: 0.9rem; }
.export-tab-disabled { opacity: 0.45; }

/* ---------- Mail-Automatik (Admin-Karte) ---------- */
.ma-switches { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.ma-switches .check { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 1rem; }
.ma-routing-add { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ma-routing-add input[type="text"] { min-width: 9rem; }
.ma-style-editor { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.ma-style-editor textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.9rem; }
.ma-inbox-table td { vertical-align: middle; }
.ma-estimate, .ma-analysis-result { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; margin-top: 0.5rem; }

/* ---------- E-Mails-Reiter (AC-Kampagnen-Übersicht) ---------- */
.emails-totals {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: stretch; margin-bottom: 0.9rem;
}
.emails-metric { min-width: 6rem; }
.emails-metric-val { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.emails-metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.15rem; }
.emails-rate { color: var(--muted); font-weight: 400; font-size: 0.85em; }

.emails-sortbar { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem 0.1rem; }
.emails-sort-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.82rem; cursor: pointer;
}
.emails-sort-btn:hover { border-color: var(--accent); }
.emails-sort-btn.is-active { border-color: var(--accent); color: var(--accent); }

.emails-groups { display: flex; flex-direction: column; gap: 0.55rem; }
.emails-group {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.emails-group.is-open { border-color: var(--accent); }
.emails-group-head {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--text); padding: 0.75rem 0.95rem; font-size: 0.9rem;
}
.emails-group-head:hover { background: rgba(255,255,255,0.02); }
.emails-arrow { color: var(--muted); font-size: 0.75rem; width: 0.9rem; flex: none; }
.emails-group-title { font-weight: 600; }
.emails-pill {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; white-space: nowrap;
}
.emails-group-stats {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin-left: auto;
  font-size: 0.83rem; color: var(--text);
}
.emails-stat-label { color: var(--muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; margin-right: 0.25rem; }
.emails-group-body { border-top: 1px solid var(--border); padding: 0.2rem 0.5rem 0.5rem; overflow-x: auto; }

.emails-table { font-size: 0.85rem; }
.emails-table th.emails-num, .emails-table td.emails-num { text-align: right; white-space: nowrap; }
.emails-arrow-cell { width: 1.2rem; color: var(--muted); font-size: 0.7rem; }
.emails-mail-row { cursor: pointer; }
.emails-mail-row:hover { background: rgba(255,255,255,0.03); }
.emails-detail-row td { background: rgba(255,255,255,0.02); }
.emails-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.35rem 1.2rem; padding: 0.6rem 0.4rem;
}
.emails-detail-label { color: var(--muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; margin-right: 0.35rem; }
.emails-detail code { background: var(--panel-2); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.85em; }

/* ---------- E-Mails-Reiter: Umbau auf flache Segment-Liste ---------- */
.emails-testtoggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: var(--muted); cursor: pointer; user-select: none;
}
.emails-testtoggle input { cursor: pointer; }
.emails-list { overflow-x: auto; }
.emails-list .emails-table { margin: 0; }
.emails-grouprow { cursor: pointer; }
.emails-grouprow:hover { background: rgba(255,255,255,0.03); }
.emails-grouptitle { font-weight: 600; }
.emails-prefix-badge {
  color: var(--muted); font-size: 0.72rem; border: 1px solid var(--border);
  border-radius: 4px; padding: 0.02rem 0.35rem; margin-left: 0.4rem; white-space: nowrap;
}
/* Segment-Zeilen innerhalb einer aufgeklappten Gruppe: eingerückt + abgesetzt */
.emails-seg-row { background: rgba(255,255,255,0.015); }
.emails-seg-row td:nth-child(2) { padding-left: 1.8rem; position: relative; color: var(--text); }
.emails-seg-row td:nth-child(2)::before {
  content: "↳"; position: absolute; left: 0.7rem; color: var(--muted); font-size: 0.8rem;
}

/* ---------- AC-Tag ausstehend: Warnung (Kundendetail) + kleiner Button ---------- */
.btn-small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.eg-tag-pending-warn {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  color: #fca5a5; background: rgba(231,76,60,0.10); border: 1px solid rgba(231,76,60,0.45);
  border-radius: 8px; padding: 0.55rem 0.8rem; margin: 0 0 0.7rem; font-size: 0.9rem;
}
.eg-tag-pending-warn strong { color: #fecaca; }
.eg-tag-pending-warn .btn-secondary { margin-left: auto; white-space: nowrap; }
.eg-tag-ok {
  color: var(--good); background: rgba(46,204,113,0.10); border: 1px solid rgba(46,204,113,0.4);
  border-radius: 8px; padding: 0.55rem 0.8rem; margin: 0 0 0.7rem; font-size: 0.9rem;
}

/* ---------- E-Mails: Mail-Inhalt (Plaintext) in der Detailzeile ---------- */
.emails-body { grid-column: 1 / -1; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.emails-body-text {
  margin: 0.3rem 0 0; font-family: inherit; font-size: 0.85rem; line-height: 1.5;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.8rem;
}
.emails-body-text.is-full { max-height: 22rem; overflow: auto; }
.emails-body-more {
  margin-top: 0.4rem; background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 0.82rem; padding: 0.15rem 0;
}
.emails-body-more:hover { text-decoration: underline; }

/* ===================== Passwort-Tresor ===================== */
.vault-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.vault-toolbar-spacer, .modal-actions-spacer { flex: 1 1 auto; }
.input, .vault-toolbar input[type="search"] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 0.5rem 0.7rem; font: inherit; min-width: 220px;
}
.input:focus, .vault-form input:focus, .vault-form textarea:focus { outline: none; border-color: var(--accent); }

/* Mitarbeiter-Ansicht: Karten-Liste, nach Kategorie gruppiert */
.vault-list { display: flex; flex-direction: column; gap: 1.2rem; }
.vault-cat-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.5rem; }
.vault-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.7rem; }
.vault-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.9rem; }
.vault-card h4 { margin: 0 0 0.3rem; font-size: 0.98rem; }
.vault-card .vault-url { font-size: 0.8rem; color: var(--accent); text-decoration: none; word-break: break-all; }
.vault-card .vault-url:hover { text-decoration: underline; }
.vault-field { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.vault-field .vault-label { font-size: 0.72rem; color: var(--muted); width: 62px; flex: 0 0 auto; }
.vault-field .vault-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; flex: 1 1 auto; word-break: break-all; }
.vault-field .vault-value.masked { letter-spacing: 0.12em; color: var(--muted); }
.vault-note { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); white-space: pre-wrap; border-top: 1px dashed var(--border); padding-top: 0.4rem; }
.vault-copy, .vault-reveal, .btn-icon {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.74rem; cursor: pointer; white-space: nowrap;
}
.vault-copy:hover, .vault-reveal:hover, .btn-icon:hover { color: var(--text); border-color: var(--accent); }
.vault-copy.copied { color: var(--good); border-color: var(--good); }
.vault-empty { color: var(--muted); padding: 1rem 0; }

/* Verwaltung: Tabelle + Freigabe-Badges */
#pv-table td .pill { display: inline-block; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.74rem; color: var(--muted); }
#pv-table td .pill.all { color: var(--good); border-color: var(--good); }
.pv-rowbtns { display: flex; gap: 0.35rem; justify-content: flex-end; }

/* Modal-Body + Formular */
.modal-body { display: block; }
.vault-form { display: flex; flex-direction: column; gap: 0.7rem; }
.vault-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.vault-form label.check { flex-direction: row; align-items: center; gap: 0.45rem; }
.vault-form input:not([type="checkbox"]):not([type="file"]), .vault-form textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit; width: 100%; box-sizing: border-box;
}
.vault-form textarea { resize: vertical; }
.vault-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.vault-pw-input { display: flex; align-items: center; gap: 0.4rem; }
.vault-pw-input input { flex: 1 1 auto; }
.vault-share { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; }
.vault-share legend { padding: 0 0.4rem; font-size: 0.8rem; color: var(--muted); }
.vault-userlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.3rem 0.8rem; margin-top: 0.4rem; max-height: 180px; overflow: auto; }
.vault-userlist label { flex-direction: row; align-items: center; gap: 0.4rem; color: var(--text); font-size: 0.85rem; }
.vault-userlist.disabled { opacity: 0.45; pointer-events: none; }

/* Verwaltung: Ansichts-Umschalter (Einträge / Freigabe pro Mitarbeiter) */
.pv-viewswitch { display: inline-flex; gap: 0.25rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; margin: 0.25rem 0 0.6rem; }
.pv-seg { background: transparent; border: none; border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.pv-seg.active { background: var(--accent); color: #fff; }
.pv-userpick { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); font-size: 0.9rem; }
.pv-userpick select { min-width: 200px; }
/* Checkbox-Liste je Mitarbeiter */
.vault-share-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: 60vh; overflow: auto; margin-top: 0.4rem; }
.vault-share-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer; }
.vault-share-row:hover { background: var(--panel-2); }
.vault-share-row.is-all { background: color-mix(in srgb, var(--good) 8%, transparent); }
.vault-share-title { color: var(--text); }
.pill.small { font-size: 0.68rem; padding: 0.03rem 0.4rem; }
.pill.all { color: var(--good); border: 1px solid var(--good); border-radius: 999px; background: transparent; }
.modal-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.btn-link { background: transparent; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0.1rem 0.2rem; }
.btn-link:hover { text-decoration: underline; }

/* --- DSGVO-Auskunft: Entwurf/Freigabe-Gate + interne Prüfliste (Modal) --- */
/* Eigene Breite (nicht .modal-wide anfassen — das nutzen Lösch-/Picker-Modals mit 560px):
   die Prüfliste + Dokumentations-Zeilen brauchen mehr Platz, sonst umbricht jede Zeile. */
.modal-ausk { max-width: 820px; width: 96%; max-height: 88vh; overflow-y: auto; }
.ausk-draft-banner { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.5); color: #ff9b8f; }
.ausk-h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.ausk-warn { margin: 0.3rem 0; padding: 0.5rem 0.7rem; border-radius: 6px;
  background: rgba(243, 156, 18, 0.10); border: 1px solid rgba(243, 156, 18, 0.45); color: #ffcf7a; }
.ausk-info { margin: 0.3rem 0; padding: 0.45rem 0.7rem; border-radius: 6px;
  background: rgba(78, 161, 255, 0.08); border: 1px solid rgba(78, 161, 255, 0.30); color: #9dc7ff; font-size: 0.9rem; }
.ausk-ok { margin: 0.3rem 0; padding: 0.45rem 0.7rem; border-radius: 6px;
  background: rgba(46, 204, 113, 0.08); border: 1px solid rgba(46, 204, 113, 0.30); color: #86e0ad; font-size: 0.9rem; }
.ausk-sub { margin: 0.6rem 0 0.2rem; }
.ausk-list { margin: 0.2rem 0 0.4rem 1.1rem; font-size: 0.9rem; }
.ausk-list li { margin: 0.12rem 0; }
.ausk-manual-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end;
  padding: 0.55rem 0.7rem; margin: 0.35rem 0; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02); }
.ausk-manual-name { display: flex; flex-direction: column; flex: 1 1 120px; min-width: 120px; }
.ausk-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); flex: 0 0 auto; }
.ausk-field input, .ausk-field select { min-width: 108px; max-width: 148px; }
.ausk-release { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02); display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.ausk-release-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.ausk-release-state { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.85rem; }
.ausk-release-state.ok { color: #86e0ad; }
.ausk-release-state.warn { color: #ffcf7a; }
.ausk-exports { justify-content: flex-end; gap: 0.5rem; }

/* --- Erfolgsgarantie: LA2.0-Zugriffsverlängerung (Tracking-Spalte) --- */
.eg-verl-cell { display: flex; flex-direction: column; gap: 0.15rem; }
.eg-verl-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; white-space: nowrap; }
.eg-verl-toggle input { cursor: pointer; }
.eg-verl-meta { line-height: 1.1; }
.eg-verl-dringend .eg-verl-toggle span { color: #ffcf7a; font-weight: 600; }
.eg-monday-retry { margin-top: 0.15rem; align-self: flex-start; font-size: 0.72rem; padding: 0.1rem 0.4rem;
  border: 1px solid rgba(243, 156, 18, 0.5); border-radius: 5px; background: rgba(243, 156, 18, 0.12);
  color: #ffcf7a; cursor: pointer; }
.eg-monday-retry:hover { background: rgba(243, 156, 18, 0.22); }
/* Dringend = Zugriff läuft bald aus UND noch offen: Zeile + Zugriffsdatum warnend hervorheben. */
.eg-row-dringend { box-shadow: inset 3px 0 0 #f39c12; }
.eg-access-dringend { color: #ffcf7a; font-weight: 600; }