/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Sagt dem Browser, dass die Oberfläche dunkel ist: Scrollbars, Dropdown-Listen,
     Zahlen-Spinner, Datums-Picker und andere native Bedienelemente werden dadurch
     dunkel gerendert statt weiß. */
  color-scheme: dark;
  --admin-primary: #c31622;
  --admin-primary-hover: #9d121b;
  --admin-primary-rgb: 195, 22, 34;
  --admin-primary-faint: rgba(var(--admin-primary-rgb), 0.2);
  --admin-danger: #ef4444;
  --admin-danger-hover: #dc2626;
  --admin-success: #22c55e;
  --admin-bg: #222222;
  --admin-bg-elevated: #313131;
  --admin-card: #313131;
  --admin-card-hover: #3a3a3a;
  --admin-border: #444444;
  --admin-text: #ebebeb;
  --admin-text-muted: #6a6a6a;
  --admin-text-faint: #555555;
  --admin-radius: 3px;
  --admin-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --admin-shadow-heavy: 0 25px 50px rgba(0,0,0,0.5);
  --sidebar-bg: #313131;
  --sidebar-dark: #222222;
  --sidebar-border: #444444;
  --sidebar-text: #8c8c8c;
  --sidebar-text-hover: #ebebeb;
  --sidebar-text-active: #fff;
  --sidebar-text-faint: #666666;
  --sidebar-icon-opacity: 0.5;
  --sidebar-width: 300px;
  --topbar-height: 50px;
  --topbar-bg: #000000;
  --admin-hover-bg: rgba(255,255,255,0.04);
  --admin-subtle-bg: rgba(255,255,255,0.08);
}

/* === Light Theme === */
[data-theme="light"] {
  color-scheme: light;
  --admin-bg: #f5f5f7;
  --admin-bg-elevated: #ffffff;
  --admin-card: #ffffff;
  --admin-card-hover: #f0f0f2;
  --admin-border: #d1d1d6;
  --admin-text: #1d1d1f;
  --admin-text-muted: #86868b;
  --admin-text-faint: #aeaeb2;
  --admin-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --admin-shadow-heavy: 0 25px 50px rgba(0,0,0,0.12);
  --sidebar-bg: #f5f5f7;
  --sidebar-dark: #eaeaec;
  --sidebar-border: #d1d1d6;
  --sidebar-text: #86868b;
  --sidebar-text-hover: #1d1d1f;
  --sidebar-text-active: #1d1d1f;
  --sidebar-text-faint: #aeaeb2;
  --sidebar-icon-opacity: 0.6;
  --topbar-bg: #1d1d1f;
  --admin-hover-bg: rgba(0,0,0,0.04);
  --admin-subtle-bg: rgba(0,0,0,0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --admin-bg: #f5f5f7;
    --admin-bg-elevated: #ffffff;
    --admin-card: #ffffff;
    --admin-card-hover: #f0f0f2;
    --admin-border: #d1d1d6;
    --admin-text: #1d1d1f;
    --admin-text-muted: #86868b;
    --admin-text-faint: #aeaeb2;
    --admin-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --admin-shadow-heavy: 0 25px 50px rgba(0,0,0,0.12);
    --sidebar-bg: #f5f5f7;
    --sidebar-dark: #eaeaec;
    --sidebar-border: #d1d1d6;
    --sidebar-text: #86868b;
    --sidebar-text-hover: #1d1d1f;
    --sidebar-text-active: #1d1d1f;
    --sidebar-text-faint: #aeaeb2;
    --sidebar-icon-opacity: 0.6;
    --topbar-bg: #1d1d1f;
    --admin-hover-bg: rgba(0,0,0,0.04);
    --admin-subtle-bg: rgba(0,0,0,0.05);
  }
}

/* Scrollbars app-weit im Theme. scrollbar-width/-color werden vererbt, ein
   einzelner Regelsatz auf html reicht deshalb für alle Scrollbereiche; wo eine
   Komponente etwas anderes braucht (z. B. .tabs), überschreibt sie das lokal. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--admin-border) transparent;
}

/* Auffangnetz: Eingabefelder ohne eigene Klasse (z. B. per JS erzeugte) sollen
   nie im Browser-Weiß stehen bleiben. Spezifischere Regeln weiter unten gewinnen. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  background: var(--admin-bg);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
}
/* Native Häkchen/Regler in der Akzentfarbe statt im System-Blau. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--admin-primary);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--admin-bg);
  color: var(--admin-text);
  line-height: 1.5;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "sidebar main"
    "sidebar footer";
}

a { color: var(--admin-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Login Page Override === */
body.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url('admin-login-background.jpg') center/cover no-repeat fixed;
}

.login-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  flex: 1;
  justify-content: center;
}

/* DGM logo in footers — small, inline left of the copyright text */
.footer-dgm { display: inline-block; vertical-align: middle; height: 18px; width: 18px; margin: -3px 6px 0 0; }
.sidebar-dgm { display: inline-block; vertical-align: middle; height: 13px; width: 13px; margin: -3px 4px 0 0; }

.login-logo { display: flex; justify-content: center; margin: 0 0 1.6rem; }
.login-logo img { height: 40px; width: auto; display: block; }
.login-logo .logo-on-light { display: none; }
.login-logo .logo-on-dark { display: block; }
[data-theme="light"] .login-logo .logo-on-dark { display: none; }
[data-theme="light"] .login-logo .logo-on-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .login-logo .logo-on-dark { display: none; }
  :root:not([data-theme="dark"]) .login-logo .logo-on-light { display: block; }
}

.login-container {
  background: var(--admin-card);
  padding: 2.5rem;
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-heavy);
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--admin-border);
}

.login-footer {
  text-align: center;
  padding: 2rem;
  color: var(--admin-text-faint);
  font-size: 0.75rem;
}

.forgot-password-link {
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
}
.forgot-password-link:hover {
  color: var(--admin-accent);
}

/* === Top Bar === */
.admin-topbar {
  grid-area: topbar;
  display: flex;
  background: var(--topbar-bg);
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 200;
}

.topbar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--admin-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.sidebar-toggle:hover { color: var(--admin-text); }

/* Desktop sidebar collapse toggle (shown on desktop via media query below) */
.sidebar-collapse-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--admin-text-muted);
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sidebar-collapse-btn:hover { color: var(--admin-text); }
.sidebar-collapse-btn svg { width: 20px; height: 20px; }

.topbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.topbar-logo img {
  height: 18px;
  width: auto;
}

.topbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--admin-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  letter-spacing: 1px;
}

.topbar-menu-btn:hover { color: var(--admin-text); }

.topbar-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* User Dropdown */
.topbar-user-dropdown { position: relative; }

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.topbar-user-btn:hover { color: var(--admin-text); background: rgba(255,255,255,0.08); }

.topbar-user-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.dropdown-chevron {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s;
}

.topbar-user-dropdown.open .dropdown-chevron { transform: rotate(180deg); }

.topbar-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 210;
  padding: 0.35rem 0;
}

.topbar-user-dropdown.open .topbar-user-menu { display: block; }

.topbar-user-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}

.topbar-user-menu a:hover { background: var(--admin-hover-bg); color: var(--admin-text); }

.topbar-user-menu a svg { width: 16px; height: 16px; flex-shrink: 0; }

/* === Sidebar === */
.admin-sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  width: var(--sidebar-width);
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;
}

.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 2px; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-top { flex: 1; }

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 2px; }

/* Tenant switcher */
.sidebar-tenant-switch {
  background: var(--sidebar-dark);
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.sidebar-tenant-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}

.sidebar-tenant-btn:hover { background: var(--admin-hover-bg); }
.sidebar-tenant-switch.static .sidebar-tenant-btn { cursor: default; }
.sidebar-tenant-switch.static .sidebar-tenant-btn:hover { background: none; }
.sidebar-tenant-btn.active { background: var(--admin-hover-bg); }

.sidebar-tenant-btn-text { flex: 1; min-width: 0; }

.sidebar-tenant-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sidebar-text-faint);
  font-family: inherit;
}

.sidebar-tenant-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-text-hover);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}

.sidebar-tenant-arrow {
  font-size: 8px;
  color: var(--sidebar-text-faint);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.sidebar-tenant-switch.open .sidebar-tenant-arrow { transform: rotate(180deg); }

.sidebar-tenant-dropdown {
  display: none;
  background: var(--sidebar-dark);
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-tenant-switch.open .sidebar-tenant-dropdown { display: block; }

.sidebar-tenant-option {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 36px;
  font-size: 13px;
  color: var(--sidebar-text);
  text-decoration: none !important;
  cursor: pointer;
  border-bottom: 1px solid var(--sidebar-border);
  transition: background 0.12s, color 0.12s;
}

.sidebar-tenant-option:hover { background: var(--admin-hover-bg); color: var(--sidebar-text-hover); }

.sidebar-tenant-option.current { color: var(--sidebar-text-hover); font-weight: 600; }

.sidebar-tenant-option.current::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--admin-primary);
  margin-left: auto;
}

/* Sidebar nav items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 34px;
  font-size: 13px;
  color: var(--sidebar-text);
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  text-decoration: none !important;
  transition: color 0.12s, background 0.12s;
  cursor: pointer;
  border-right: 2px solid transparent;
}

.sidebar-item:hover { color: var(--sidebar-text-hover); }

.sidebar-item.active {
  color: var(--sidebar-text-active);
  background: var(--admin-primary-faint);
  border-right-color: var(--admin-primary);
}

.sidebar-item .s-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.sidebar-tool-head .s-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-item:hover .s-icon { filter: brightness(1.6); }
.sidebar-item.active .s-icon { filter: brightness(2.2); }

/* Tool header row */
.sidebar-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 16px;
  height: 34px;
  background: var(--sidebar-dark);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-tool-logo { height: 14px; flex-shrink: 0; width: auto; }
.tool-logo-inline { height: 16px; width: auto; vertical-align: middle; margin-right: 2px; }

.sidebar-tool-btns {
  margin-left: auto;
  display: flex;
  gap: 5px;
  align-items: center;
}

.sidebar-tool-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  text-decoration: none !important;
  transition: opacity 0.15s;
  opacity: 0.7;
}

.sidebar-tool-btn:hover { opacity: 1; }
.sidebar-tool-btn svg { width: 18px; height: 18px; }

/* Tool child items */
.sidebar-tool-items .sidebar-item { padding-left: 28px; }

/* Level-2 status toggle (square-dot icon) */
.sidebar-status-toggle {
  margin-left: auto;
  margin-right: -6px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--sidebar-text-faint);
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.sidebar-status-toggle svg { width: 18px; height: 18px; }
.sidebar-status-toggle.active { color: #4caf50; }
.sidebar-status-toggle:hover { opacity: 0.8; }

/* Actions wrapper (add + status toggle) on accordion heads */
.sidebar-item-actions {
  margin-left: auto;
  margin-right: -6px;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.sidebar-item-actions .sidebar-status-toggle {
  margin-left: 0;
  margin-right: 0;
}

/* Add button inside sidebar items */
.sidebar-item-add {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--admin-primary);
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
  opacity: 0.7;
}
.sidebar-item-add svg { width: 18px; height: 18px; }
.sidebar-item-add:hover { opacity: 1; }

/* Sidebar resize handle */
.sidebar-resize-handle {
  position: fixed;
  top: var(--topbar-height);
  left: calc(var(--sidebar-width) - 2px);
  width: 5px;
  height: calc(100vh - var(--topbar-height));
  cursor: col-resize;
  z-index: 160;
  background: transparent;
  transition: background 0.15s;
}
.sidebar-resize-handle:hover {
  background: rgba(var(--admin-primary-rgb), 0.3);
}
.sidebar-resize-handle.active {
  background: rgba(var(--admin-primary-rgb), 0.5);
}

/* Sidebar accordion (shared: Configurator + Trigger) */
.sidebar-accordion {}
.sidebar-accordion-head { position: relative; }
.sidebar-sub-item {
  display: flex;
  align-items: center;
  padding: 0 16px 0 2.8rem;
  height: 34px;
  font-size: 13px;
  color: var(--sidebar-text);
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  text-decoration: none !important;
  transition: color 0.12s, background 0.12s;
  cursor: pointer;
  border-right: 2px solid transparent;
}
.sidebar-sub-item:hover { color: var(--sidebar-text-hover); }
.sidebar-sub-item.active {
  color: var(--sidebar-text-active);
  background: var(--admin-primary-faint);
  border-right-color: var(--admin-primary);
}

/* Repeater rows (configurator model form) */
.repeater-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--admin-border);
}
.repeater-row:last-child { border-bottom: none; }
.repeater-row-wrap { flex-wrap: wrap; }
.repeater-remove { align-self: flex-end; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 1rem; }
.variant-group-block { border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 1rem; margin-bottom: 1rem; }
.variant-group-header { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.variant-group-header > .btn-danger { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 0; }
.variant-options-container { margin-bottom: 0.5rem; }
.color-picker-input { width: 100%; height: 36px; padding: 2px; cursor: pointer; }
.repeater-remove svg,
.variant-group-header > .btn-danger svg,
.actions-cell .btn-small svg { width: 0.9rem; height: 0.9rem; }

/* Sidebar bottom */
.sidebar-bottom {
  padding: 0;
  background: var(--sidebar-dark);
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.sidebar-bottom .sidebar-item {
  border-bottom: none;
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-dark);
}

/* Sidebar copyright */
.sidebar-copyright {
  padding: 0.75rem 16px;
  font-size: 10px;
  color: var(--sidebar-text-faint);
  text-align: center;
  border-top: 1px solid var(--sidebar-border);
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 140;
}

/* === Main Content === */
.admin-main {
  grid-area: main;
  padding: 2rem 2rem;
  width: 100%;
  min-width: 0;
}

/* === Footer === */
.admin-footer {
  grid-area: footer;
  text-align: center;
  padding: 2rem;
  color: var(--admin-text-faint);
  font-size: 0.75rem;
}

/* === Page Header === */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-header h2, .page-header h3 { font-weight: 600; }

.header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Active checkbox in page header */
.header-active-toggle { margin: 0 !important; }
.header-active-toggle input[type="checkbox"] {
  width: 38px !important;
  height: 38px !important;
  border-color: var(--admin-primary) !important;
}
.header-active-toggle input[type="checkbox"]:checked {
  background: var(--admin-primary) !important;
  border-color: var(--admin-primary) !important;
}
.header-active-toggle input[type="checkbox"]:checked::after {
  left: 13px !important;
  top: 6px !important;
  width: 8px !important;
  height: 16px !important;
  border-color: #fff !important;
  border-width: 0 3px 3px 0 !important;
}

.page-header > div:first-child {
  font-size: 0.9rem;
  color: var(--admin-text-muted);
}
.breadcrumb { color: var(--admin-text-muted); font-size: inherit; }
.breadcrumb:hover { color: var(--admin-primary); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.4;
}

.btn-primary { background: var(--admin-primary); color: #fff; }
.btn-primary:hover { background: var(--admin-primary-hover); }

.btn-secondary {
  background: var(--admin-card);
  color: var(--admin-text);
  border-color: var(--admin-border);
}
.btn-secondary:hover { background: var(--admin-card-hover); }

.btn-danger { background: color-mix(in srgb, var(--admin-primary) 70%, #000); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--admin-primary) 55%, #000); }

.btn-block { display: block; width: 100%; justify-content: center; }

.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.inline-form { display: inline; }

/* === Cards === */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none !important;
  color: var(--admin-text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border-color: var(--admin-primary);
}

.card-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 3px;
}

.card-logo-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--admin-primary-rgb), 0.12);
  border-radius: 3px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--admin-primary);
}

.card-body h3 { font-size: 1rem; font-weight: 600; }

/* Project tiles with a preview image on top (customer dashboard) */
.card-project { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.card-thumb img, .card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb video { pointer-events: none; }
.card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(var(--admin-primary-rgb), 0.12); color: var(--admin-primary); font-size: 2.2rem; font-weight: 700; }
.card-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0.9; transition: opacity 0.15s, transform 0.15s; }
.card-thumb-play svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.card-project:hover .card-thumb-play { opacity: 1; transform: scale(1.08); }
.card-project .card-body { padding: 0.85rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--admin-subtle-bg);
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

/* === Detail === */
.detail-grid { margin-bottom: 1.5rem; }

.detail-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
}

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 3px;
}

.detail-meta { color: var(--admin-text-muted); font-size: 0.9rem; }
.detail-meta p { margin-bottom: 0.25rem; }

.detail-branding {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--admin-border);
}

.text-muted { color: var(--admin-text-muted); font-size: 0.85rem; }

/* === Table === */
.table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  /* border-collapse: collapse; */
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.admin-table th, .admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--admin-border);
}

.admin-table th {
  background: var(--admin-bg-elevated);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table th:last-child, .admin-table td:last-child { text-align: right; }

.actions-cell { display: flex; gap: 0.4rem; flex-wrap: nowrap; white-space: nowrap; }

/* Role-grouped user list: section headings between the per-role tables */
.users-group-title { font-size: 1.05rem; margin: 1.75rem 0 0.75rem; }
.users-group-title:first-of-type { margin-top: 0; }
.users-group-title .text-muted { font-weight: 400; font-size: 0.85em; }

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
}
.status-active { background: rgba(34,197,94,0.15); color: #4ade80; }
.status-inactive { background: rgba(239,68,68,0.15); color: #f87171; }

/* === Forms === */
.admin-form {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
}

.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--admin-text);
  opacity: 0.6;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group select,
.form-group textarea,
.sb-voice-picker select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  height: 38px;
  font-size: 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  background: var(--admin-bg);
  color: var(--admin-text);
  transition: border-color 0.15s;
}

.form-group textarea {
  height: auto;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.sb-voice-picker select:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}

.form-group select option,
.sb-voice-picker select option {
  background: var(--admin-card);
  color: var(--admin-text);
}

/* Match the DGM styleguide select: a fixed-height control with no vertical
   padding (the vertical padding squeezed the text/native arrow and looked off). */
.form-group select,
.sb-voice-picker select {
  padding: 0 0.75rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Thematic grouping outline (test) */
.tab-content .form-section {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.color-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-input input[type="color"] {
  width: 40px;
  height: 36px;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px;
  background: var(--admin-bg);
}

.color-input input[type="text"] { flex: 1; }

.color-input-hex {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-input-hex input[type="color"] {
  width: 48px;
  height: 48px;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px;
  background: var(--admin-bg);
  flex-shrink: 0;
}

.color-input-hex input[type="text"] {
  flex: 1;
  font-family: monospace;
  letter-spacing: 0.05em;
}

/* Scale input row (Transform tab) */
.scale-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.scale-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

.scale-field .scale-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  min-width: 14px;
  text-align: center;
}

.scale-field input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  background: var(--admin-bg);
  color: var(--admin-text);
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}

.scale-field input[type="number"]::-webkit-inner-spin-button,
.scale-field input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.scale-field input[type="number"]:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}

.scale-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  background: var(--admin-bg);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.scale-link-btn:hover {
  color: var(--admin-text);
  border-color: var(--admin-text-muted);
}

.scale-link-btn.active {
  color: var(--admin-primary);
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.08);
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 400 !important;
}

.checkbox-label input[type="checkbox"],
.repeater-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  display: block;
  box-sizing: border-box;
}
.repeater-row input[type="checkbox"] {
  width: 38px;
  height: 38px;
}
.checkbox-label input[type="checkbox"]:checked,
.repeater-row input[type="checkbox"]:checked {
  background: var(--admin-bg);
  border-color: var(--admin-border);
}
.checkbox-label input[type="checkbox"]:checked::after,
.repeater-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--admin-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.repeater-row input[type="checkbox"]:checked::after {
  left: 13px;
  top: 6px;
  width: 8px;
  height: 16px;
  border-width: 0 3px 3px 0;
}

.form-hint {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  margin-bottom: 1rem;
}
.tooltip-wrap {
  display: inline-block;
  position: relative;
  cursor: help;
  font-size: 0.95em;
  color: var(--admin-text-muted);
  margin-left: 4px;
}
.tooltip-wrap:hover { color: var(--admin-primary); }
.tooltip-text {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #000000;
  opacity: 1;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 6px;
  width: 300px;
  white-space: normal;
  z-index: 10000;
  pointer-events: none;
}
.tooltip-wrap:hover .tooltip-text { display: block; }

/* Feld-Hilfe: aufklappbarer Erklärtext direkt am Formularfeld. Ergänzt den
   Tooltip für Fälle, in denen mehrere Schritte oder ein Link nötig sind —
   der Tooltip ist dafür zu klein und nicht anklickbar (pointer-events: none). */
.field-help {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--admin-text-muted);
  cursor: pointer;
}
.field-help:hover, .field-help.is-open { color: var(--admin-primary); }
.field-help svg { width: 14px; height: 14px; }
.field-help-box {
  margin: 0.5rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-primary);
  border-radius: var(--admin-radius);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--admin-text-muted);
}
.field-help-box strong { color: var(--admin-text); }
.field-help-box ol, .field-help-box ul { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; }
.field-help-box li { margin-bottom: 0.3rem; }
.field-help-box li:last-child { margin-bottom: 0; }
.field-help-box a { color: var(--admin-primary); }
.field-help-box p:last-child { margin-bottom: 0; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--admin-border);
}

/* === Tabs === */
.tabs-wrap {
  position: relative;
  margin: -1.5rem -1.5rem 0 -1.5rem;
}

.tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, #181818);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.tabs-wrap.has-overflow::after { opacity: 1; }

.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
  background: #181818;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  background: rgba(255,255,255,0.06);
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  color: var(--admin-text-muted);
  white-space: nowrap;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
}

.tab.tab-right { margin-left: auto; }
.tab:hover { color: var(--admin-text); background: rgba(255,255,255,0.06); }
.tab.active { color: var(--admin-primary); background: var(--admin-card); }
.tab.tab-highlight { border-top: 3px solid rgba(var(--admin-primary-rgb), 0.5); display: inline-flex; align-items: center; gap: 0.35rem; }
.tab.tab-highlight.active { border-top-color: var(--admin-primary); }
.tab.tab-highlight svg { width: 14px; height: 14px; }

.tab-content { display: none; padding-top: 1.5rem; }
.tab-content.active { display: block; }
.tab-content h4 { font-size: 0.85rem; font-weight: 500; text-transform: uppercase; opacity: 0.4; padding-bottom: 15px; }

/* === Alerts === */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alert-error { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.alert-warning { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }

.empty-state {
  text-align: center;
  padding: 0.2rem 0 1.5rem 0;
  color: var(--admin-text-muted);
}

/* === Upload === */
.upload-area {
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.15s;
  margin-bottom: 25px;
}

.upload-area.dragover { border-color: var(--admin-primary); background: rgba(var(--admin-primary-rgb), 0.05); }

.upload-area .upload-preview {
  max-width: 120px;
  max-height: 80px;
  margin-bottom: 0.5rem;
  border-radius: 3px;
}

.upload-hint { font-size: 0.8rem; color: var(--admin-text-muted); margin-top: 0.5rem; transition: all 0.2s ease; }
.upload-hint.upload-error { background: #dc2626; color: #fff; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; }

/* Upload progress bar */
.upload-progress {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.upload-progress-track {
  flex: 1;
  height: 6px;
  background: var(--admin-border);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--admin-primary);
  border-radius: 3px;
  transition: width 0.15s ease;
}

.upload-progress-text {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
  min-width: 60px;
}

/* Globale Upload-Anzeige (window.uploadRequest in admin.js): begleitet JEDEN
   Datei-Upload unten rechts, unabhängig davon, wo er ausgelöst wurde. */
.upload-monitor {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1200;
  display: flex; flex-direction: column; gap: 0.5rem;
  width: min(320px, calc(100vw - 2rem));
}
.upload-monitor[hidden] { display: none; }
.upload-monitor-item {
  background: var(--admin-card); border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-primary);
  border-radius: var(--admin-radius); box-shadow: var(--admin-shadow-heavy);
  padding: 0.6rem 0.75rem;
}
.upload-monitor-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.upload-monitor-name {
  flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-monitor-pct { flex: 0 0 auto; font-size: 0.78rem; color: var(--admin-text-muted); font-variant-numeric: tabular-nums; }
.upload-monitor-track { height: 6px; background: var(--admin-border); border-radius: 3px; overflow: hidden; }
.upload-monitor-fill { height: 100%; width: 0%; background: var(--admin-primary); border-radius: 3px; transition: width 0.15s ease; }
.upload-monitor-item.is-done { border-left-color: var(--admin-success); }
.upload-monitor-item.is-done .upload-monitor-fill { background: var(--admin-success); }
.upload-monitor-item.is-error { border-left-color: var(--admin-danger); }
.upload-monitor-item.is-error .upload-monitor-fill { background: var(--admin-danger); }
.upload-monitor-item.is-error .upload-monitor-pct { color: var(--admin-danger); }

.file-input {
  display: block;
  margin: 0 auto;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.asset-list {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: var(--admin-subtle-bg);
  border-radius: 3px;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

.asset-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--admin-danger);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* === Media Picker Input === */
.media-picker-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.media-picker-input input[type="text"] {
  flex: 1;
}

.media-picker-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* === Media Toolbar === */
.media-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 25px;
}

.media-search-input {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  background: var(--admin-bg);
  color: var(--admin-text);
  width: 250px;
}

.media-search-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}

.media-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 25px;
}

/* === Tag Chips === */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.tag-chip:hover { opacity: 0.8; }

.tag-chip.active {
  box-shadow: 0 0 0 2px var(--admin-primary);
}

.tag-chip-filetype { background: rgba(59,130,246,0.15); color: #60a5fa; }
.tag-chip-custom { background: rgba(234,179,8,0.15); color: #facc15; }
.tag-chip-version { background: rgba(168,85,247,0.15); color: #c084fc; }
.tag-chip-project { background: rgba(34,197,94,0.15); color: #4ade80; }

.tag-chip .tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: 0.6;
}

.tag-chip .tag-remove:hover { opacity: 1; }

/* === Media Grid === */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
/* Status/empty messages inside a grid should span the full width, left-aligned,
   not sit centered in a single narrow column. */
.media-grid > .empty-state,
.media-grid > .text-muted {
  grid-column: 1 / -1;
  margin: 0;
  text-align: left;
}

.media-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}

.media-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border-color: var(--admin-primary);
}

.media-card-thumb {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-bg-elevated);
  overflow: hidden;
}

.media-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-card-thumb .media-icon {
  font-size: 2.5rem;
  color: var(--admin-text-faint);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* GLB 3D + Video thumbnails */
.glb-thumb, .video-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.glb-thumb-loading, .video-thumb-loading {
  width: 48px;
  height: 48px;
  animation: thumbPulse 1.2s ease-in-out infinite;
}
@keyframes thumbPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

.media-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.media-card-filename {
  font-size: 0.85rem;
  font-weight: 500;
  word-break: break-all;
  margin-bottom: 0.25rem;
}

.media-card-size {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  margin-bottom: 0.5rem;
}

.media-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.media-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.media-card-actions-row {
  display: flex;
  gap: 0.35rem;
}

.media-card-actions-row .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem 0.4rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* === Mediathek: Video-Gruppe (Versionen) === */
.media-group { position: relative; }
/* Stacked-deck look (layered shadows are not clipped by the card's overflow) */
.media-group-front {
  box-shadow:
    4px 4px 0 -1px var(--admin-card), 4px 4px 0 0 var(--admin-border),
    8px 8px 0 -1px var(--admin-card), 8px 8px 0 0 var(--admin-border);
}
.media-group-front:hover {
  box-shadow:
    4px 4px 0 -1px var(--admin-card), 4px 4px 0 0 var(--admin-border),
    8px 8px 0 -1px var(--admin-card), 8px 8px 0 0 var(--admin-border),
    0 6px 18px rgba(0,0,0,0.3);
}
.media-group-count {
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border);
  color: var(--admin-text-muted);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.media-group-caret { display: inline-block; transition: transform 0.15s; }
.media-group.open .media-group-caret { transform: rotate(180deg); }
.media-group-versions { display: none; margin-top: 0.6rem; }
.media-group.open .media-group-versions { display: flex; flex-direction: column; gap: 0.35rem; }
.media-version-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 0.35rem 0.5rem;
}
.media-version-name { flex: 1; font-size: 0.8rem; word-break: break-all; }
.media-version-label { color: var(--admin-text-muted); }
.media-version-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; flex-shrink: 0; }
.media-version-actions .btn { padding: 0.2rem 0.45rem; font-size: 0.72rem; white-space: nowrap; text-align: center; }

/* === Modal Overlay === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-dialog {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--admin-shadow-heavy);
}

.modal-dialog h3 {
  margin-bottom: 1rem;
  font-weight: 600;
}

.modal-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  background: var(--admin-bg);
  color: var(--admin-text);
}

.modal-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* === Video Review === */
.review-version-select { max-width: 420px; margin-bottom: 1rem; }

/* Version controls row: same column width as the player below, so the Vorschau
   button aligns flush with the right edge of the video. */
/* Variant sub-tabs inside Video-Review — same visual language as the main .tab */
.variant-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--admin-border); }
.variant-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  background: rgba(255,255,255,0.06); color: var(--admin-text-muted);
  font-family: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.variant-tab:hover { color: var(--admin-text); }
.variant-tab.active {
  color: var(--admin-primary); background: var(--admin-card);
  border-color: var(--admin-border); border-bottom-color: var(--admin-card);
}
.variant-tab-add { color: var(--admin-text-muted); }
.variant-tab-add svg { width: 15px; height: 15px; }
[data-theme="light"] .variant-tab { background: rgba(0,0,0,0.05); }
[data-theme="light"] .variant-tab.active { background: var(--admin-card); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .variant-tab { background: rgba(0,0,0,0.05); } }

/* Inline rename / delete controls on the active variant tab */
.variant-action { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; opacity: 0.65; cursor: pointer; }
.variant-action:hover { opacity: 1; background: rgba(var(--admin-primary-rgb), 0.15); }
.variant-action svg { width: 13px; height: 13px; }
.variant-name-input {
  font: inherit; color: var(--admin-text); background: var(--admin-bg);
  border: 1px solid var(--admin-primary); border-radius: 4px;
  padding: 0.1rem 0.35rem; width: 9rem; max-width: 12rem;
}

/* Shared-link variant picker */
.share-variant-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.share-variant-row .share-variant-version { flex: 1 1 220px; max-width: 360px; }

/* Shared viewer: variant tabs */
.shared-variant-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 1rem; }
.shared-variant-tab {
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--admin-border); background: var(--admin-bg-elevated);
  color: var(--admin-text); font-size: 0.85rem; font-weight: 500;
}
.shared-variant-tab.active { background: var(--admin-primary); border-color: var(--admin-primary); color: #fff; }

.review-controls-row { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; margin-bottom: 1rem; }
.review-version-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.review-version-bar .review-version-select { margin-bottom: 0; flex: 0 1 420px; }
.review-version-actions { display: flex; gap: 10px; flex: 0 0 auto; }
@media (max-width: 900px) { .review-controls-row { grid-template-columns: 1fr; } }

.review-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
/* Korrekturspalte bleibt beim Scrollen sichtbar; die Liste selbst wird höchstens
   so hoch wie das Fenster und scrollt eigenständig. */
.review-corrections-col {
  position: sticky; top: calc(var(--topbar-height) + 1rem); align-self: start;
  display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-height) - 2rem);
}
#corrections-list, #pdf-corrections-list { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 400px); overflow-y: auto; padding-right: 0.25rem; }
.review-player-wrap { background: #000; border-radius: var(--admin-radius); overflow: hidden; }

/* --- PDF-Review: text layer + annotation layer over each rendered page --- */
.pdf-annot-toolbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pdf-annot-toolbar .btn.active { outline: 2px solid var(--admin-primary); outline-offset: 1px; }

/* pdf.js text layer: transparent words, selectable only while in "Text markieren" */
.pdf-textlayer { position: absolute; inset: 0; overflow: hidden; opacity: 1; line-height: 1; text-align: initial; forced-color-adjust: none; transform-origin: 0 0; z-index: 1; user-select: none; }
.pdf-pages.text-selectable .pdf-textlayer { user-select: text; }
.pdf-textlayer span, .pdf-textlayer br { color: transparent; position: absolute; white-space: pre; cursor: text; margin: 0; transform-origin: 0% 0%; }
.pdf-textlayer ::selection { background: rgba(59, 130, 246, 0.45); }
/* Auswahl-Anker (wie im pdf.js-Viewer): liegt normalerweise unterhalb des Textes
   und legt sich beim Ziehen hinter die ganze Seite, damit die Textauswahl an der
   Seitengrenze endet statt in die nächste Seite zu laufen. */
.pdf-textlayer-end { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; }
.pdf-textlayer-end.active { top: 0; }

.pdf-annot-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pdf-annot-overlay.drawing { pointer-events: auto; cursor: crosshair; }
.pdf-annot-overlay.text-mode .pdf-annot-marker,
.pdf-annot-overlay.text-mode .pdf-annot-badge { pointer-events: none; }

.pdf-annot-marker { position: absolute; box-sizing: border-box; pointer-events: auto; cursor: pointer; }
.pdf-annot-marker.type-text, .pdf-annot-marker.type-highlight { background: rgba(250, 204, 21, 0.32); border: 1px solid rgba(250, 204, 21, 0.7); border-radius: 1px; }
.pdf-annot-marker.type-select { background: rgba(59, 130, 246, 0.12); border: 1.5px dashed rgba(59, 130, 246, 0.9); }
.pdf-annot-marker.type-circle { border: 2px solid #ef4444; border-radius: 50%; }
svg.pdf-annot-marker.type-pen { inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* --pen-color kommt aus der gespeicherten Anmerkung (siehe pdf-review.js); ältere
   Anmerkungen ohne Farbe bleiben rot. */
svg.pdf-annot-marker.type-pen path { fill: none; stroke: var(--pen-color, #ef4444); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.pdf-annot-marker.is-done { opacity: 0.5; }
.pdf-annot-marker.selected { outline: 2px solid var(--admin-primary); outline-offset: 2px; }
svg.pdf-annot-marker.type-pen.selected path { stroke: var(--admin-primary); }

.pdf-annot-badge { position: absolute; transform: translate(-55%, -55%); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--admin-primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); pointer-events: auto; cursor: pointer; z-index: 3; }
.pdf-annot-badge.selected { outline: 2px solid #fff; }

.pdf-annot-draft { position: absolute; box-sizing: border-box; pointer-events: none; }
.pdf-annot-draft.type-select { background: rgba(59, 130, 246, 0.12); border: 1.5px dashed rgba(59, 130, 246, 0.9); }
svg.pdf-annot-draft.pdf-annot-pen { inset: 0; width: 100%; height: 100%; overflow: visible; }
svg.pdf-annot-draft.pdf-annot-pen path { fill: none; stroke: var(--pen-color, #ef4444); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Stiftfarben-Wahl in der Viewer-Leiste */
.pdf-pen-colors { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.3rem; border: 1px solid transparent; border-radius: 999px; }
.pdf-pen-colors.is-active { border-color: var(--admin-border); background: var(--admin-subtle-bg); }
.pdf-pen-color {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--pen-color, #ef4444);
  border: 1px solid rgba(128, 128, 128, 0.6);
  box-shadow: none; transition: transform 0.1s;
}
.pdf-pen-color:hover { transform: scale(1.15); }
.pdf-pen-color.active { box-shadow: 0 0 0 2px var(--admin-bg), 0 0 0 4px var(--admin-primary); }

/* Leiste während einer mehrstrichigen Freihand-Zeichnung. Sie klebt OBEN im
   Viewer — direkt unter der Werkzeugleiste, wo der Blick nach dem Zeichnen
   hingeht; unten am Rand wurde sie leicht übersehen. */
.pdf-pen-draft-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 12px; padding: 0.55rem 0.75rem;
  background: var(--admin-card); border: 2px solid var(--admin-primary);
  border-radius: var(--admin-radius); box-shadow: var(--admin-shadow-heavy);
  font-size: 0.85rem; color: var(--admin-text);
  animation: pdf-pen-draft-in 0.25s ease-out;
}
@keyframes pdf-pen-draft-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.pdf-pen-draft-bar[hidden] { display: none; }
.pdf-pen-draft-count { font-weight: 600; }
.pdf-pen-draft-hint { color: var(--admin-text-muted); margin-right: auto; }

/* Viewer chrome: zoom + page overview */
.pdf-viewer-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pdf-viewer-bar .btn.active { outline: 2px solid var(--admin-primary); outline-offset: 1px; }
.pdf-viewer-bar-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--admin-border); margin: 0 0.25rem; }
.pdf-zoom-controls { display: inline-flex; align-items: center; gap: 0.3rem; }
.pdf-zoom-label { font-size: 0.8rem; color: var(--admin-text-muted); min-width: 46px; text-align: center; }

/* Direkter Sprung zu einer Seitenzahl */
.pdf-page-jump { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--admin-text-muted); }
.pdf-page-input {
  width: 3.4rem; padding: 0.3rem 0.4rem; font-size: 0.8rem; font-family: inherit; text-align: center;
  border: 1px solid var(--admin-border); border-radius: 3px;
  background: var(--admin-bg); color: var(--admin-text); transition: border-color 0.15s;
}
.pdf-page-input:focus { outline: none; border-color: var(--admin-primary); box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15); }

/* PDF review layout: viewer and corrections column each fill the viewport height
   below the topbar and scroll internally (sticky). Heights fall out of flexbox:
   preview = 100vh - topbar - viewer-bar; list = 100vh - topbar - h4 - hint.
   min-width:0 locks the widths so zoom / the page-overview never widen or shift
   the viewer — only the PDF content inside scrolls. */
.review-layout-pdf { align-items: start; }
.review-layout-pdf .review-player-col,
.review-layout-pdf .review-corrections-col {
  position: sticky; top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  min-width: 0; min-height: 0; max-height: none;
  display: flex; flex-direction: column;
}
.review-layout-pdf .pdf-viewer-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; gap: 0.6rem; }
.review-layout-pdf .pdf-review-preview { flex: 1 1 auto; min-height: 0; min-width: 0; margin-top: 0; max-height: none; }
.review-layout-pdf #pdf-corrections-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
#pdf-review-viewer { background: #181818; border-radius: 8px; padding: 16px; overflow: auto; }

/* Page-overview thumbnails. Die Panel-Breite ist per Zieh-Griff verstellbar und
   steckt in --pdf-thumb-width (je Browser in localStorage gemerkt, siehe
   pdf-review.js). flex-shrink:0 auf .pdf-thumb ist wichtig: sonst quetscht die
   Flex-Spalte viele Seiten zusammen, statt das Panel scrollen zu lassen. */
.pdf-thumb-panel { flex: 0 0 var(--pdf-thumb-width, 150px); overflow-y: auto; background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pdf-thumb-panel[hidden] { display: none; }
.pdf-thumb-resizer { flex: 0 0 10px; cursor: col-resize; position: relative; margin: 0 -0.3rem; }
.pdf-thumb-resizer[hidden] { display: none; }
.pdf-thumb-resizer::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--admin-border); border-radius: 2px; transition: background 0.15s, width 0.15s; }
.pdf-thumb-resizer:hover::before, .pdf-thumb-resizer.active::before { background: var(--admin-primary); width: 3px; }
.pdf-thumb { flex: 0 0 auto; cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; line-height: 0; }
.pdf-thumb.active { border-color: var(--admin-primary); }
.pdf-thumb-no { position: absolute; top: 2px; left: 2px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 3px; z-index: 1; }

/* Edit frame (move/resize a selected box or pen annotation) */
.pdf-edit-frame { position: absolute; box-sizing: border-box; border: 1px solid var(--admin-primary); background: rgba(59, 130, 246, 0.06); pointer-events: auto; cursor: move; z-index: 5; }
.pdf-edit-handle { position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--admin-primary); border-radius: 2px; box-sizing: border-box; }
.pdf-edit-handle.h-nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.pdf-edit-handle.h-n  { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.pdf-edit-handle.h-ne { left: 100%; top: 0; transform: translate(-50%, -50%); cursor: nesw-resize; }
.pdf-edit-handle.h-e  { left: 100%; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }
.pdf-edit-handle.h-se { left: 100%; top: 100%; transform: translate(-50%, -50%); cursor: nwse-resize; }
.pdf-edit-handle.h-s  { left: 50%; top: 100%; transform: translate(-50%, -50%); cursor: ns-resize; }
.pdf-edit-handle.h-sw { left: 0; top: 100%; transform: translate(-50%, -50%); cursor: nesw-resize; }
.pdf-edit-handle.h-w  { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }

/* === Website-Review (Snapshot im iframe) ===
   Gleiches Spaltenlayout wie PDF-Review: Viewer und Korrekturspalte füllen die
   Fensterhöhe. Der iframe hat die echte Gerätebreite (1440 bzw. 390 px) und wird
   per transform auf die Spaltenbreite verkleinert — so greifen die Breakpoints
   der Kundenseite wie auf dem echten Gerät (web-review.js setzt die Werte). */
.review-layout-web { align-items: start; }
.review-layout-web .review-player-col,
.review-layout-web .review-corrections-col {
  position: sticky; top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  min-width: 0; min-height: 0; max-height: none;
  display: flex; flex-direction: column;
}
.review-layout-web #web-corrections-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding-right: 0.25rem; }
.web-viewer-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.web-viewer-bar .btn.active { outline: 2px solid var(--admin-primary); outline-offset: 1px; }
.web-viewer-bar .view-toggle-btn { width: auto; height: 30px; padding: 0 0.6rem; gap: 0.3rem; font-size: 0.8rem; font-family: inherit; }
.web-viewer-bar .view-toggle-btn svg { width: 14px; height: 14px; }
.web-page-pick { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--admin-text-muted); }
.web-page-pick select { max-width: 260px; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.web-open-original { margin-left: auto; }
.web-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #181818; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.web-stage .pdf-pen-draft-bar { align-self: stretch; }
.web-frame-wrap { flex: none; background: #fff; transform-origin: top center; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
.web-frame-wrap.is-mobile { border-radius: 18px; overflow: hidden; }
.web-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.web-notice {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  max-width: calc(100% - 32px); padding: 0.5rem 0.85rem; border-radius: var(--admin-radius);
  background: rgba(17, 17, 17, 0.92); color: #fff; font-size: 0.8rem; box-shadow: var(--admin-shadow-heavy);
}
.web-notice[hidden] { display: none; }
.web-scale-hint { margin: 0.35rem 0 0; min-height: 1em; }
.web-fetch-errors ul { margin: 0.35rem 0 0 1.1rem; padding: 0; }
.web-fetch-errors li { word-break: break-all; }
.review-correction .web-loc { display: block; font-size: 0.75rem; color: var(--admin-text-muted); margin-top: 0.15rem; }
.review-correction .web-quote { display: block; margin: 0.25rem 0 0; padding-left: 0.5rem; border-left: 2px solid #f5c400; font-style: italic; color: var(--admin-text-muted); font-size: 0.82rem; }

/* === Version compare (project-compare.php) === */
.compare-page .admin-main { padding: 1rem 1.2rem; }
.compare-wrap { display: flex; align-items: stretch; gap: 0; height: calc(100vh - var(--topbar-height) - 72px); min-height: 420px; }
.compare-col { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); background: var(--admin-card); }
.compare-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--admin-border); }
.compare-side-label { font-size: 0.75rem; font-weight: 600; color: var(--admin-text-muted); white-space: nowrap; }
.compare-version-select { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 0.5rem; font-size: 0.85rem; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); background: var(--admin-bg); color: var(--admin-text); }
.compare-col-body { flex: 1 1 auto; min-height: 0; display: flex; }
.compare-media { flex: 1 1 60%; min-width: 0; min-height: 0; overflow: auto; }
.compare-pdf { background: #181818; padding: 12px; }
.compare-pdf-page { position: relative; }
.compare-video-wrap { background: #000; display: flex; align-items: flex-start; justify-content: center; }
.compare-video { width: 100%; height: auto; display: block; }
.compare-corrections { flex: 0 0 40%; min-width: 170px; min-height: 0; overflow-y: auto; padding: 0.5rem 0.6rem; border-left: 1px solid var(--admin-border); }
.compare-divider { flex: 0 0 10px; cursor: col-resize; position: relative; }
.compare-divider::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--admin-border); }
.compare-divider:hover::before { background: var(--admin-primary); width: 3px; }

/* read-only annotation markers in compare */
.compare-annot-overlay { position: absolute; inset: 0; pointer-events: none; }
.compare-annot { position: absolute; box-sizing: border-box; }
.compare-annot.type-text { background: rgba(250, 204, 21, 0.32); border: 1px solid rgba(250, 204, 21, 0.7); border-radius: 1px; }
.compare-annot.type-select { background: rgba(59, 130, 246, 0.12); border: 1.5px dashed rgba(59, 130, 246, 0.9); }
.compare-annot.type-circle { border: 2px solid #ef4444; border-radius: 50%; }
svg.compare-annot.type-pen { inset: 0; width: 100%; height: 100%; overflow: visible; }
svg.compare-annot.type-pen path { fill: none; stroke: var(--pen-color, #ef4444); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.compare-annot-badge { position: absolute; transform: translate(-55%, -55%); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--admin-primary); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.review-video { width: 100%; display: block; max-height: 60vh; background: #000; }

.review-timeline {
  position: relative; height: 12px; margin-top: 0.5rem;
  background: var(--admin-bg-elevated); border-radius: 6px; cursor: pointer;
}
.review-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(var(--admin-primary-rgb), 0.4); border-radius: 6px; }
.review-marker {
  position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--admin-card); background: var(--admin-primary);
  cursor: pointer; padding: 0; z-index: 2; transition: transform 0.1s;
}
.review-marker.done { background: var(--admin-success, #22c55e); }
.review-marker:hover { transform: translate(-50%, -50%) scale(1.3); }
.review-marker.draggable { cursor: grab; touch-action: none; }
.review-marker.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.4); transition: none; z-index: 3; }
.review-marker.saving { opacity: 0.5; }
/* Selected keyframe: enlarged with a halo ring so it stands out clearly. */
.review-marker.selected { transform: translate(-50%, -50%) scale(1.55); box-shadow: 0 0 0 1px var(--admin-card), 0 0 0 2px var(--admin-primary); z-index: 4; }
.review-marker.selected:hover { transform: translate(-50%, -50%) scale(1.7); }

.review-controls { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.review-time { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--admin-text-muted); }

.review-correction { border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; background: var(--admin-card); }
.review-correction.is-done { opacity: 0.6; }
.review-correction.flash { border-color: var(--admin-primary); box-shadow: 0 0 0 2px rgba(var(--admin-primary-rgb), 0.3); }
/* Selected correction stays highlighted until another is chosen. */
.review-correction.selected { border-color: var(--admin-primary); box-shadow: 0 0 0 2px rgba(var(--admin-primary-rgb), 0.35); }
.review-correction { cursor: pointer; }
.review-correction-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.review-correction-meta { font-size: 0.75rem; color: var(--admin-text-muted); flex: 1; }
.review-internal-badge { background: rgba(217, 119, 6, 0.18); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.35); }
.review-correction.is-internal { border-left: 3px solid #d97706; }
.review-correction-body { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.review-correction-actions { margin-top: 0.5rem; }
.review-jump {
  background: rgba(var(--admin-primary-rgb), 0.15); color: var(--admin-primary); border: none;
  border-radius: 3px; padding: 0.1rem 0.45rem; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  cursor: pointer; font-weight: 600;
}

.review-replies { margin-top: 0.5rem; padding-left: 0.7rem; border-left: 2px solid var(--admin-border); display: flex; flex-direction: column; gap: 0.4rem; }
.review-reply { background: var(--admin-bg-elevated); border-radius: var(--admin-radius); padding: 0.4rem 0.55rem; }
.review-reply-meta { font-size: 0.72rem; color: var(--admin-text-muted); margin-bottom: 0.2rem; }
.review-reply-body { font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.review-reply-form, .review-edit-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.review-reply-form textarea, .review-edit-form textarea { width: 100%; }

@media (max-width: 900px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-corrections-col { position: static; max-height: none; }
  #corrections-list { max-height: 70vh; }
  .review-layout-web .review-player-col { position: static; height: 75vh; }
  .review-layout-web .review-corrections-col { position: static; height: auto; }
}

/* === Shared Links (Verwaltung im Projekt) === */
.share-row {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--admin-border); border-radius: var(--admin-radius);
  padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; background: var(--admin-card);
}
.share-code {
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums; color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.12); border-radius: var(--admin-radius);
  padding: 0.2rem 0.6rem; flex-shrink: 0;
}
.share-code-none {
  font-size: 0.8rem; font-weight: 600; letter-spacing: normal;
  align-self: center;
}
.share-info { flex: 1; min-width: 0; }
.share-meta { font-size: 0.8rem; color: var(--admin-text-muted); margin-bottom: 0.25rem; }
.share-url {
  width: 100%; font-size: 0.78rem; padding: 0.25rem 0.4rem;
  border: 1px solid var(--admin-border); border-radius: 3px;
  background: var(--admin-bg-elevated); color: var(--admin-text);
}
.share-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
@media (max-width: 600px) { .share-row { flex-wrap: wrap; } }

/* Shared-link statistics (Super-Admin) */
.share-item { margin-bottom: 0.5rem; }
.share-item .share-row { margin-bottom: 0; }
.share-stats {
  border: 1px solid var(--admin-border); border-top: none;
  border-radius: 0 0 var(--admin-radius) var(--admin-radius);
  padding: 0.6rem 0.7rem; background: var(--admin-bg-elevated);
  margin: -1px 0 0;
}
.share-stats-summary {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  font-size: 0.85rem; margin-bottom: 0.5rem;
}
.share-stats-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.share-stats-table th, .share-stats-table td {
  text-align: left; padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--admin-border);
}
.share-stats-table th { color: var(--admin-text-muted); font-weight: 500; }
.share-stats-table td:not(:first-child), .share-stats-table th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Inline edit form for a shared link (Admin) */
.share-edit-form {
  display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap;
}
.share-edit-form .form-group { flex: 1 1 auto; }
.share-edit-form .btn { flex: 0 0 auto; }

/* Per-user login statistics row in the users table */
.user-stats-cell { padding: 0 !important; background: var(--admin-bg-elevated); }
.user-stats-cell .share-stats { border-radius: 0; border-left: none; border-right: none; margin: 0; }
.user-stats-cell .share-stats-table td:last-child,
.user-stats-cell .share-stats-table th:last-child { text-align: left; }

/* === Shared public viewer page === */
.shared-page { display: flex; flex-direction: column; min-height: 100vh; }
.shared-user { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #9a9a9a; font-weight: 500; }
.shared-user svg { width: 16px; height: 16px; }
.shared-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.shared-footer {
  background: #222222; color: #666666;
  text-align: center; font-size: 10px; padding: 0.9rem 1rem;
}
.code-entry-wrap { --code-box-w: 56px; --code-gap: 0.75rem; text-align: center; max-width: 440px; }
.code-entry { display: flex; gap: var(--code-gap, 0.75rem); justify-content: center; }
.code-box {
  width: var(--code-box-w, 56px); height: 68px; text-align: center;
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--admin-border); border-radius: var(--admin-radius);
  background: var(--admin-card); color: var(--admin-text);
}
.code-box:focus { outline: none; border-color: var(--admin-primary); box-shadow: 0 0 0 2px rgba(var(--admin-primary-rgb), 0.3); }
/* "Ansehen" exactly as wide as the 4 code boxes (4×box + 3×gap), centered */
.code-entry-wrap .btn { display: flex; justify-content: center; align-items: center; text-transform: uppercase; width: calc(4 * var(--code-box-w, 56px) + 3 * var(--code-gap, 0.75rem)); margin: 1.25rem auto 0; }
.shared-video-wrap { width: 100%; max-width: 1100px; }
.shared-video { width: 100%; max-height: 80vh; display: block; background: #000; border-radius: var(--admin-radius); }
.shared-pdf-wrap { width: 100%; max-width: 1100px; height: 84vh; }
.shared-pdf-frame { width: 100%; height: 100%; display: block; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); background: #fff; }

/* === Storyboard === */
.scene-insert-wrap { display: flex; justify-content: center; margin: 0.4rem 0; }
.scene-insert {
  background: none; border: 1px dashed var(--admin-primary); color: var(--admin-primary);
  border-radius: var(--admin-radius); padding: 0.3rem 0.9rem; font-size: 0.8rem; cursor: pointer;
}
.scene-insert:hover { border-color: var(--admin-border); color: var(--admin-text-muted); }
.scene-card { border: 1px solid var(--admin-border); border-radius: var(--admin-radius); background: var(--admin-card); margin-bottom: 0.5rem; overflow: hidden; }
.scene-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; background: var(--admin-bg-elevated); border-bottom: 1px solid var(--admin-border); }
.scene-handle { cursor: grab; color: var(--admin-text-muted); display: inline-flex; }
.scene-handle:active { cursor: grabbing; }
.scene-handle svg { width: 16px; height: 16px; }
.scene-title-field { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.9rem; font-weight: 600; font-family: inherit; border: 1px solid transparent; border-radius: var(--admin-radius); background: transparent; color: var(--admin-text); }
.scene-title-field:hover { border-color: var(--admin-border); }
.scene-title-field:focus { outline: none; border-color: var(--admin-primary); background: var(--admin-bg-elevated); }
.scene-title-read { font-weight: 600; font-size: 0.95rem; }
.scene-duration-edit { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 0.85rem; color: var(--admin-text-muted); }
.scene-duration-field { width: 44px; padding: 0.3rem 0.35rem; font-size: 0.85rem; font-family: inherit; text-align: right; border: 1px solid transparent; border-radius: var(--admin-radius); background: transparent; color: var(--admin-text); font-variant-numeric: tabular-nums; }
.scene-duration-field:hover { border-color: var(--admin-border); }
.scene-duration-field:focus { outline: none; border-color: var(--admin-primary); background: var(--admin-bg-elevated); }
.scene-duration-read { margin-left: auto; font-size: 0.85rem; color: var(--admin-text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.scene-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; padding: 0.7rem; align-items: start; }
.scene-content { display: grid; grid-template-columns: 180px 1fr; gap: 0.8rem; align-items: start; }
.scene-image { display: flex; flex-direction: column; gap: 0.4rem; }
.scene-images-list { display: flex; flex-direction: column; gap: 10px; }
.scene-image-item { position: relative; cursor: grab; }
.scene-image-item:active { cursor: grabbing; }
.scene-image-img { width: 100%; border-radius: var(--admin-radius); display: block; background: #000; }
.scene-image-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.scene-image-remove:hover { background: var(--admin-danger, #dc2626); }
.scene-image-placeholder {
  width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--admin-bg-elevated); border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius); color: var(--admin-text-muted); font-size: 0.8rem;
}
.scene-fields { display: flex; flex-direction: column; }
.scene-label { font-size: 0.8rem; font-weight: 500; opacity: 0.6; margin-bottom: 0.25rem; }
.scene-field {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.9rem; font-family: inherit;
  border: 1px solid var(--admin-border); border-radius: var(--admin-radius);
  background: var(--admin-bg-elevated); color: var(--admin-text); margin-bottom: 0.75rem; resize: vertical;
}
.scene-field:focus { outline: none; border-color: var(--admin-primary); }
.scene-readlabel { font-size: 0.75rem; font-weight: 600; opacity: 0.5; margin-bottom: 0.15rem; }
.scene-readtext { font-size: 0.9rem; white-space: pre-wrap; margin-bottom: 0.6rem; }
/* Sprecher-Text hebt sich von der Beschreibung ab */
.scene-speaker, .scene-read-speaker { font-size: 15px; color: #ffffff; }
.scene-desc, .scene-read-desc { font-size: 12px; }
.scene-label-gap, .scene-readlabel-gap { margin-top: 20px; }
/* Beschreibung-Text in gleicher Farbe wie die Beschreibung-Headline */
.scene-label-gap, .scene-readlabel-gap, .scene-desc, .scene-read-desc { color: var(--admin-text-muted); opacity: 1; }
.scene-corrections { border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 0.6rem 0.7rem; background: var(--admin-bg-elevated); }
.scene-corrections h5 { font-size: 0.8rem; margin-bottom: 0.4rem; opacity: 0.7; }
.scene-add-correction { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; margin-top: 0.5rem; }
.scene-add-correction textarea { width: 100%; }
@media (max-width: 1000px) { .scene-main { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .scene-content { grid-template-columns: 1fr; } }

/* Per-scene speaker audio (for the animatic) */
.scene-audio { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.scene-audio-current { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--admin-text-muted); background: var(--admin-bg-elevated); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 0.25rem 0.5rem; max-width: 100%; }
.scene-audio-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.scene-audio-remove { border: none; background: transparent; color: var(--admin-text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.scene-audio-remove:hover { color: var(--admin-danger, #dc2626); }
/* KI-Sprecher: steht direkt unter „Audio hinzufügen"; die beiden Knöpfe teilen
   sich eine Zeile, solange Platz ist. */
.scene-audio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.scene-audio-actions-read { margin-top: 0.5rem; }
.scene-tts-btn, .scene-play-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.scene-tts-btn svg, .scene-play-btn svg { width: 14px; height: 14px; }
.scene-tts-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scene-play-btn.is-playing { border-color: var(--admin-primary); color: var(--admin-primary); }

/* Sprecher-Auswahl in der Storyboard-Kopfzeile — die Stimme gehört zum Video,
   darum steht sie hier und nicht in den Projekt-Einstellungen. */
.sb-voice-picker { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.sb-voice-picker label { font-size: 0.82rem; color: var(--admin-text-muted); margin: 0; }
/* In der Flex-Zeile keine volle Breite, aber breit genug für Stimmennamen wie
   „Marc – Warm & Clear (male, german)". Höhe kommt aus der Formularfeld-Regel
   oben (38px) und passt damit zu den Knöpfen daneben. */
.sb-voice-picker select { width: auto; min-width: 240px; max-width: 340px; }
.sb-voice-msg { font-size: 0.78rem; color: var(--admin-text-muted); }
/* Freie Credits in Klammern hinter „Sprecher"; wird rot, wenn ein Stapellauf
   nicht mehr durchliefe oder weniger als 10 % übrig sind. Details im Tooltip. */
.sb-quota { color: var(--admin-text-muted); white-space: nowrap; }
.sb-quota:empty { display: none; }
.sb-quota.is-low { color: var(--admin-danger, #dc2626); font-weight: 500; }
@media (max-width: 800px) { .sb-voice-picker { width: 100%; margin-left: 0 !important; } }

/* Existing-tag suggestions in the "+ Tag" modal */
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.7rem 0 0.2rem; }
.tag-suggestions .tag-chip { cursor: pointer; }
.tag-suggest-label, .tag-suggest-empty { width: 100%; font-size: 0.8rem; color: var(--admin-text-muted); margin-bottom: 0.15rem; }

/* === Online-Hilfe === */
.topbar-help-btn {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--admin-text-muted);
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0.25rem 0.5rem; border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.topbar-help-btn:hover { color: var(--admin-text); background: rgba(255,255,255,0.08); }
.topbar-help-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* The [hidden] attribute must win over the display rules below, or the (transparent)
   overlays keep capturing clicks across the whole page. */
.help-intro[hidden], .help-overlay[hidden], .help-drawer[hidden] { display: none !important; }

.help-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.25s; }
.help-overlay.open { opacity: 1; }

.help-drawer {
  position: fixed; top: 0; right: 0; z-index: 5001;
  width: min(440px, 92vw); height: 100%;
  background: var(--admin-card); border-left: 1px solid var(--admin-border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.25s ease;
}
.help-drawer.open { transform: translateX(0); }
.help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--admin-border); flex-shrink: 0; }
.help-drawer-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 0; }
.help-drawer-head h2 svg { width: 18px; height: 18px; }
.help-close { background: none; border: none; color: var(--admin-text-muted); cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0 4px; }
.help-close:hover { color: var(--admin-text); }

.help-toc { display: flex; flex-direction: column; gap: 2px; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--admin-border); flex-shrink: 0; max-height: 28vh; overflow-y: auto; }
.help-toc-link { font-size: 0.82rem; color: var(--admin-text-muted); cursor: pointer; padding: 0.3rem 0.5rem; border-radius: var(--admin-radius); text-decoration: none; }
.help-toc-link:hover { background: var(--admin-bg-elevated); color: var(--admin-text); }
.help-toc-link.active { color: var(--admin-primary); background: var(--admin-bg-elevated); }

.help-content { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 2rem; }
.help-section { padding-bottom: 0.6rem; }
.help-section + .help-section { border-top: 1px solid var(--admin-border); padding-top: 1rem; margin-top: 0.6rem; }
.help-section h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.help-section h4 { font-size: 0.9rem; margin: 0.9rem 0 0.3rem; color: var(--admin-primary); }
.help-section p { font-size: 0.86rem; color: var(--admin-text); margin: 0 0 0.5rem; line-height: 1.5; }
.help-section ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.help-section li { font-size: 0.86rem; color: var(--admin-text); margin-bottom: 0.3rem; line-height: 1.45; }

.help-drawer-foot { padding: 0.7rem 1.2rem; border-top: 1px solid var(--admin-border); flex-shrink: 0; }
.help-link { background: none; border: none; color: var(--admin-primary); cursor: pointer; font-family: inherit; font-size: 0.82rem; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

/* First-run intro */
.help-intro { position: fixed; inset: 0; z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.25s; }
.help-intro.open { opacity: 1; }
.help-intro-card { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 1.6rem 1.7rem; transform: translateY(8px); transition: transform 0.25s; }
.help-intro.open .help-intro-card { transform: translateY(0); }
.help-intro-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; color: var(--admin-text-muted); cursor: pointer; font-size: 1.6rem; line-height: 1; }
.help-intro-card h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.help-intro-logo { display: flex; justify-content: center; margin: 0.2rem 0 1.2rem; }
.help-intro-logo img { height: 30px; width: auto; display: block; }
/* Theme-aware logo so it stays visible directly on the card (no backdrop) */
.help-intro-logo .logo-on-light { display: none; }
.help-intro-logo .logo-on-dark { display: block; }
[data-theme="light"] .help-intro-logo .logo-on-dark { display: none; }
[data-theme="light"] .help-intro-logo .logo-on-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .help-intro-logo .logo-on-dark { display: none; }
  :root:not([data-theme="dark"]) .help-intro-logo .logo-on-light { display: block; }
}
.help-intro-card p { font-size: 0.9rem; color: var(--admin-text); line-height: 1.55; margin: 0 0 0.8rem; }
.help-intro-list { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.help-intro-list li { font-size: 0.9rem; color: var(--admin-text); margin-bottom: 0.45rem; line-height: 1.5; }
.help-intro-hint { font-size: 0.85rem; color: var(--admin-text-muted); background: var(--admin-bg-elevated); border-radius: var(--admin-radius); padding: 0.6rem 0.8rem; }
.help-intro-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.1rem; }
@media (max-width: 600px) { .help-intro-actions { flex-direction: column-reverse; } .help-intro-actions .btn { width: 100%; } }

/* === Animatic generator overlay === */
.animatic-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.animatic-dialog { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 1.2rem 1.4rem; width: min(760px, 100%); max-height: 92vh; overflow: auto; }
.animatic-dialog h3 { margin: 0 0 .2rem; }
.animatic-canvas { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--admin-radius); display: block; }
.animatic-progress { height: 8px; background: var(--admin-bg-elevated); border-radius: 6px; overflow: hidden; margin: 0.8rem 0 0.4rem; }
.animatic-bar { height: 100%; width: 0; background: var(--admin-primary); transition: width 0.15s linear; }
.animatic-status { font-size: 0.85rem; color: var(--admin-text-muted); min-height: 1.2em; }
.animatic-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }

/* === Charaktere (Character-Sheets) === */
.char-handle { cursor: grab; color: var(--admin-text-muted); display: inline-flex; }
.char-handle:active { cursor: grabbing; }
.char-handle svg { width: 16px; height: 16px; }
.char-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; padding: 0.7rem; align-items: start; }
.char-figure { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.char-image-wrap { position: relative; width: 80%; }
.char-image-img { width: 80%; border-radius: var(--admin-radius); display: block; background: #000; }
.char-image-wrap .char-image-img { width: 100%; }
/* Der leere Platzhalter bleibt bewusst klein: mit 80% der breiten Karten-Spalte
   wurde er mehrere hundert Pixel hoch und schob „Bild hinzufügen" aus dem Bild. */
.char-image-placeholder { width: 80%; max-width: 170px; aspect-ratio: 3 / 4; border: 1px dashed var(--admin-border); border-radius: var(--admin-radius); display: flex; align-items: center; justify-content: center; color: var(--admin-text-muted); font-size: 0.85rem; }
@media (max-width: 1000px) { .char-main { grid-template-columns: 1fr; } }

/* === Akkordeon (z. B. Projekt-Zugang nach Mandant) === */
.acc { border: 1px solid var(--admin-border); border-radius: var(--admin-radius); overflow: hidden; max-width: 560px; }
.acc-item + .acc-item { border-top: 1px solid var(--admin-border); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: var(--admin-bg-elevated); border: none; cursor: pointer; font-size: 0.9rem; color: var(--admin-text); text-align: left; }
.acc-head:hover { background: var(--admin-card); }
.acc-title { font-weight: 600; }
.acc-count { margin-left: auto; font-size: 0.78rem; color: var(--admin-primary); }
.acc-caret { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.15s; }
.acc-item.open .acc-caret { transform: rotate(180deg); }
.acc-body { display: none; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.9rem 0.7rem; }
.acc-item.open .acc-body { display: flex; }
.acc-body .checkbox-label { margin: 0; }

/* Storyboard lightbox / slideshow (read-only) */
.sb-zoom { cursor: zoom-in; }
.sb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.sb-lightbox-close { position: fixed; top: 14px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.sb-lightbox-dialog { background: var(--admin-card); border-radius: var(--admin-radius); max-width: 820px; width: 100%; max-height: 90vh; overflow: auto; padding: 1.2rem; }
.sb-lightbox-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.7rem; }
.sb-lightbox-img { display: block; max-width: 100%; max-height: 65vh; width: auto; margin: 0 auto 10px; border-radius: var(--admin-radius); background: #000; }
.sb-lightbox-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2001; }
.sb-lightbox-arrow:hover { background: rgba(255,255,255,0.28); }
.sb-arrow-prev { left: 16px; }
.sb-arrow-next { right: 16px; }
.sb-lightbox-label { font-size: 0.75rem; font-weight: 600; opacity: 0.55; text-transform: uppercase; letter-spacing: .04em; margin-top: 0.8rem; }
.sb-lightbox-text { font-size: 0.95rem; white-space: pre-wrap; margin-top: 0.2rem; }
.sb-lightbox-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.sb-lightbox-counter { font-size: 0.85rem; color: var(--admin-text-muted); font-variant-numeric: tabular-nums; }

/* === Loading Overlay === */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  gap: 1rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
}

.loading-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}

/* === Media Picker Modal (large) === */
.picker-modal-dialog {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--admin-shadow-heavy);
}

.picker-modal-dialog h3 {
  margin-bottom: 1rem;
  font-weight: 600;
}

.picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.picker-toolbar input[type="text"] {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  width: 200px;
  background: var(--admin-bg);
  color: var(--admin-text);
}

.picker-toolbar input[type="text"]:focus {
  outline: none;
  border-color: var(--admin-primary);
}

.picker-grid-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.picker-card {
  background: var(--admin-bg-elevated);
  border: 2px solid var(--admin-border);
  border-radius: 3px;
  padding: 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.picker-card:hover {
  border-color: var(--admin-primary);
  box-shadow: 0 2px 8px rgba(var(--admin-primary-rgb), 0.2);
}

.picker-card-thumb {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.picker-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.picker-card-thumb .media-icon {
  font-size: 1.5rem;
  color: var(--admin-text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.picker-card-name {
  font-size: 0.75rem;
  word-break: break-all;
  color: var(--admin-text-muted);
}

.picker-upload-area {
  border: 2px dashed var(--admin-border);
  border-radius: 3px;
  padding: 0.75rem;
  text-align: center;
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}

.picker-upload-area.dragover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.05);
}

.picker-upload-area .file-input {
  display: block;
  margin: 0 auto;
  font-size: 0.8rem;
}

.picker-upload-area .upload-hint {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* === Stats Dashboard === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem;
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--admin-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

.stats-section {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.stats-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bar chart (pure CSS) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding-top: 0.5rem;
}

.bar-chart .bar {
  flex: 1;
  min-width: 4px;
  background: var(--admin-primary);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.15s;
  cursor: default;
}

.bar-chart .bar:hover { opacity: 0.8; }

.bar-chart .bar .bar-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.bar-chart .bar:hover .bar-tooltip { display: block; }

/* Device distribution bar */
.device-bar {
  display: flex;
  height: 32px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.device-bar .device-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  min-width: 30px;
  transition: flex 0.3s;
}

.device-bar .device-mobile { background: #3b82f6; }
.device-bar .device-tablet { background: #8b5cf6; }
.device-bar .device-desktop { background: #06b6d4; }

.device-legend {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

.device-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.device-legend .leg-mobile::before { background: #3b82f6; }
.device-legend .leg-tablet::before { background: #8b5cf6; }
.device-legend .leg-desktop::before { background: #06b6d4; }

/* Referrer mini table */
.referrer-table {
  width: 100%;
  font-size: 0.85rem;
}

.referrer-table td {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--admin-border);
}

.referrer-table tr:last-child td { border-bottom: none; }

.referrer-table .ref-url {
  color: var(--admin-text-muted);
  word-break: break-all;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referrer-table .ref-count {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* Share link inline form */
.share-create-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
}

.share-create-form .form-group {
  margin-bottom: 0;
}

.share-create-form .form-group label {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.share-create-form input[type="text"],
.share-create-form input[type="number"] {
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: inherit;
}

.share-create-form input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}

/* Copy button */
.btn-copy {
  background: none;
  border: 1px solid var(--admin-border);
  color: var(--admin-text-muted);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.btn-copy:hover { border-color: var(--admin-primary); color: var(--admin-primary); }
.btn-copy.copied { border-color: var(--admin-success); color: var(--admin-success); }

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--admin-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--admin-success);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* Short URL display */
.short-url {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--admin-primary);
  word-break: break-all;
}

/* Stats panel */
.stats-panel {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--admin-border);
}

/* === Role Badges === */
.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
}

.role-super-admin {
  background: rgba(234,179,8,0.15);
  color: #facc15;
}

.role-tenant-user {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
}

.role-customer {
  background: rgba(20,184,166,0.15);
  color: #2dd4bf;
}

.role-staff {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
}

/* === Tenant Checkbox List === */
.tenant-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  max-height: 300px;
  overflow-y: auto;
}

.tenant-checkbox {
  font-size: 0.9rem !important;
}

/* === Per-customer video release === */
.release-customers {
  margin: .75rem 0;
}
.release-customers-label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: .5rem;
  color: var(--admin-text-muted);
}
.release-customers-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}
.release-customer-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

/* === Theme Toggle Button === */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.theme-toggle:hover { opacity: 0.8; }

.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-icon-dark,
.theme-toggle .theme-icon-light {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

/* Global theme-icon visibility (tool logos etc.) */
[data-theme="dark"] .theme-icon-light,
:root:not([data-theme="light"]) .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: block; }

/* Theme toggle button (flex for icon + text) */
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: flex; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: flex; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: flex; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-icon-dark { display: none; }
  :root:not([data-theme="dark"]) .theme-icon-light { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .theme-icon-light { display: flex; }
}

/* Tool header uses theme-aware sidebar vars */

/* === Review-Typ-Karten (Neues Projekt) === */
/* Große Auswahlkarten mit Illustration (Wortmarke steckt in der SVG-Grafik);
   das Radio ist unsichtbar, der Auswahl-Zustand kommt über :has(input:checked). */
.review-type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.review-type-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-bg-elevated);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.review-type-card:hover { border-color: var(--admin-primary); }
.review-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.review-type-card:has(input:checked) {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 1px var(--admin-primary);
  background: var(--admin-primary-faint);
}
.review-type-card:has(input:focus-visible) {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}
.review-type-card img {
  width: min(72%, 300px);
  height: auto;
  display: block;
  margin: auto;
}
/* Nicht freigeschaltetes Tool: sichtbar (Schaufenster), aber ausgegraut und
   nicht wählbar. */
.review-type-card.is-disabled { cursor: not-allowed; }
.review-type-card.is-disabled:hover { border-color: var(--admin-border); }
.review-type-card.is-disabled img {
  filter: grayscale(1);
  opacity: 0.35;
}
/* Karte ohne Grafik (Tool-Grafik folgt): Icon + Name */
.rtc-text { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 1.15rem; font-weight: 600; color: var(--admin-text); }
.rtc-text svg { width: 42px; height: 42px; color: var(--admin-primary); }
.review-type-card.is-disabled .rtc-text { opacity: 0.35; }
.rtc-disabled-note {
  position: absolute;
  bottom: 0.8rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--admin-text-muted, #8e8e93);
}

/* === Ansichtswechsel (Liste/Kacheln) === */
/* Generisches Muster: <div class="view-toggle" data-view-toggle="NAME"> mit
   Buttons [data-view="…"] schaltet Panels [data-view-panel="NAME:…"] um;
   die Logik steckt in admin.js, die Wahl wird je NAME in localStorage gemerkt. */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  background: var(--admin-bg-elevated);
  border: none;
  cursor: pointer;
  color: var(--admin-text-muted);
  transition: background 0.15s, color 0.15s;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--admin-border); }
.view-toggle-btn:hover { color: var(--admin-text); }
.view-toggle-btn.active {
  background: var(--admin-primary-faint);
  color: var(--admin-primary);
}
.view-toggle-btn svg { width: 16px; height: 16px; }

/* === Light-Mode Color Overrides === */
[data-theme="light"] .status-active { color: #16a34a; }
[data-theme="light"] .status-inactive { color: #dc2626; }
[data-theme="light"] .role-super-admin { color: #a16207; }
[data-theme="light"] .role-tenant-user { color: #2563eb; }
[data-theme="light"] .role-customer { color: #0d9488; }
[data-theme="light"] .role-staff { color: #7c3aed; }
[data-theme="light"] .tag-chip-filetype { color: #2563eb; }
[data-theme="light"] .tag-chip-custom { color: #a16207; }
[data-theme="light"] .tag-chip-version { color: #7c3aed; }
[data-theme="light"] .tag-chip-project { color: #15803d; }
[data-theme="light"] .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .media-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .alert-error { color: #dc2626; }
[data-theme="light"] .tabs { background: #e0e0e2; }
[data-theme="light"] .tabs-wrap::after { background: linear-gradient(to right, transparent, #e0e0e2); }
[data-theme="light"] .tab:hover { background: rgba(0,0,0,0.06); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .status-active { color: #16a34a; }
  :root:not([data-theme="dark"]) .status-inactive { color: #dc2626; }
  :root:not([data-theme="dark"]) .role-super-admin { color: #a16207; }
  :root:not([data-theme="dark"]) .role-tenant-user { color: #2563eb; }
  :root:not([data-theme="dark"]) .role-customer { color: #0d9488; }
  :root:not([data-theme="dark"]) .role-staff { color: #7c3aed; }
  :root:not([data-theme="dark"]) .tag-chip-filetype { color: #2563eb; }
  :root:not([data-theme="dark"]) .tag-chip-custom { color: #a16207; }
  :root:not([data-theme="dark"]) .tag-chip-version { color: #7c3aed; }
  :root:not([data-theme="dark"]) .tag-chip-project { color: #15803d; }
  :root:not([data-theme="dark"]) .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  :root:not([data-theme="dark"]) .media-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  :root:not([data-theme="dark"]) .alert-error { color: #dc2626; }
  :root:not([data-theme="dark"]) .tabs { background: #e0e0e2; }
  :root:not([data-theme="dark"]) .tabs-wrap::after { background: linear-gradient(to right, transparent, #e0e0e2); }
  :root:not([data-theme="dark"]) .tab:hover { background: rgba(0,0,0,0.06); }
}

/* === Responsive === */
@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr auto;
    grid-template-areas:
      "topbar"
      "main"
      "footer";
  }

  .sidebar-toggle { display: flex; font-size: 1.6rem; padding: 0.35rem; }
  .sidebar-resize-handle { display: none; }

  .topbar-menu-btn { display: flex; align-items: center; justify-content: center; }

  .topbar-menu {
    display: none;
    position: absolute;
    top: calc(var(--topbar-height) - 8px);
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 210;
  }

  .topbar-menu.open { display: flex; }

  .topbar-menu .help-btn,
  .topbar-menu .theme-toggle,
  .topbar-menu .topbar-user-dropdown {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--admin-text-muted);
    border: none;
    border-radius: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
  }

  .topbar-menu .help-btn {
    width: 100%;
    height: auto;
    padding: 0.55rem 1rem;
    justify-content: flex-start;
    font-weight: 500;
  }

  .topbar-menu .theme-toggle { padding: 0.55rem 1rem; justify-content: flex-start; }

  .topbar-menu .topbar-user-dropdown {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-menu .topbar-user-btn {
    padding: 0.55rem 1rem;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
  }

  .topbar-menu .topbar-user-menu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    border-radius: 0;
    background: none;
  }

  .topbar-menu .topbar-user-menu a {
    padding: 0.55rem 1rem 0.55rem 2.5rem;
  }

  .topbar-menu .topbar-user-menu a:last-child {
    border-top: 1px solid var(--admin-border);
    margin-top: 0.25rem;
    padding-top: 0.65rem;
  }

  .topbar-menu .dropdown-chevron { display: none; }

  .admin-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    height: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 150;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .admin-main { padding: 1.5rem 1rem; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .tabs-wrap { margin: -1.5rem -1rem 0 -1rem; }
  .tabs { gap: 0.25rem; padding: 1.5rem 1rem 0 1rem; }
  .tab { padding: 0.5rem 0.6rem; font-size: 0.8rem; flex-shrink: 0; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .picker-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .media-toolbar { flex-direction: column; align-items: stretch; }
  .media-search-input { width: 100%; }
  .picker-modal-dialog { max-width: 100%; max-height: 90vh; }
}

/* Hide hamburger on desktop; show collapse toggle + enable collapsed state */
@media (min-width: 769px) {
  .sidebar-toggle { display: none; }
  .sidebar-collapse-btn { display: flex; }
  html.sidebar-collapsed body { grid-template-columns: 0 1fr; }
  html.sidebar-collapsed .admin-sidebar,
  html.sidebar-collapsed .sidebar-resize-handle { display: none; }
}

/* === Help Panel === */
.help-btn {
  background: none;
  border: none;
  color: #8c8c8c;
  width: 24px; height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.help-btn svg { width: 18px; height: 18px; }

.help-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

.help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 290;
}

.help-overlay.open { display: block; }

.help-panel {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--admin-card);
  border-left: 1px solid var(--admin-border);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}

.help-panel.open { transform: translateX(0); }

.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
  flex-shrink: 0;
}

.help-panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--admin-text);
}

.help-panel-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--admin-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
  transition: color 0.15s;
}

.help-panel-close:hover { color: var(--admin-text); }

.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.help-panel-body::-webkit-scrollbar { width: 4px; }
.help-panel-body::-webkit-scrollbar-track { background: transparent; }
.help-panel-body::-webkit-scrollbar-thumb { background: var(--admin-border); border-radius: 2px; }

.help-topic-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: 0.75rem;
}

.help-intro {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.help-intro p { margin-bottom: 0.5rem; }
.help-intro p:last-child { margin-bottom: 0; }

/* Help sections (accordion) */
.help-section {
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.help-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--admin-bg-elevated);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--admin-text);
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}

.help-section-toggle:hover { background: var(--admin-card-hover); }

.help-section-arrow {
  font-size: 0.55rem;
  color: var(--admin-text-faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.help-section.open .help-section-arrow { transform: rotate(180deg); }

.help-section-content {
  display: none;
  padding: 0.75rem 0.85rem;
  font-size: 0.83rem;
  color: var(--admin-text-muted);
  line-height: 1.65;
  border-top: 1px solid var(--admin-border);
}

.help-section.open .help-section-content { display: block; }

.help-section-content p { margin-bottom: 0.5rem; }
.help-section-content p:last-child { margin-bottom: 0; }

.help-section-content ul {
  margin: 0.35rem 0 0.5rem 1.25rem;
  list-style: disc;
}

.help-section-content li { margin-bottom: 0.25rem; }

.help-section-content strong { color: var(--admin-text); }

.help-section-content .help-img {
  display: block;
  width: 100%;
  border-radius: 3px;
  border: 1px solid var(--admin-border);
  margin: 0.5rem 0;
}

/* All topics list */
.help-topic-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-decoration: none !important;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 0.2rem;
}

.help-topic-link:hover { background: var(--admin-hover-bg); color: var(--admin-text); }

.help-topic-link.current { color: var(--admin-text); font-weight: 500; }

.help-topic-current-badge {
  font-size: 0.7rem;
  color: var(--admin-primary);
  background: var(--admin-primary-faint);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-weight: 500;
}

/* Footer */
.help-panel-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--admin-border);
  flex-shrink: 0;
}

.help-footer-btn {
  width: 100%;
  padding: 0.5rem;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  color: var(--admin-text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.help-footer-btn:hover { color: var(--admin-text); border-color: var(--admin-text-muted); }

.help-footer-tour-btn {
  background: var(--admin-primary-faint);
  color: var(--admin-primary);
  border-color: transparent;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.help-footer-tour-btn:hover { color: var(--admin-primary); border-color: var(--admin-primary); }

/* Responsive */
@media (max-width: 768px) {
  .help-panel { width: 100%; }
}

/* =============================================
   CONFIGURATOR INSPECTOR PANEL
   ============================================= */
.cfg-mockup-container {
  cursor: default;
}

.cfg-editor-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.cfg-inspector {
  width: 0;
  min-width: 0;
  background: rgba(15, 15, 25, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 12px 12px 0;
  margin-left: 0;
  transition: width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  color: #ccc;
  font-size: 11px;
  overflow: hidden;
  opacity: 0;
}

.cfg-inspector.open {
  width: 280px;
  margin-left: 8px;
  opacity: 1;
  align-self: stretch;
}

.cfg-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.cfg-inspector-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.cfg-inspector-close-btn:hover { color: #fff; }

.cfg-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
}

.cfg-inspector-body::-webkit-scrollbar { width: 3px; }
.cfg-inspector-body::-webkit-scrollbar-track { background: transparent; }
.cfg-inspector-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.cfg-inspector-section {
  margin-bottom: 8px;
}

.cfg-inspector-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
}

/* Mini fields */
.mini-field {
  margin-bottom: 6px;
}

.mini-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.mini-field-inline .mini-input {
  width: 60px;
  text-align: right;
}

.mini-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 2px;
}

.mini-field-inline .mini-label {
  margin-bottom: 0;
  flex: 1;
}

.mini-input {
  width: 100%;
  height: 26px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  background: rgba(0,0,0,0.3);
  color: #ddd;
  font-family: inherit;
}

.mini-input:focus {
  outline: none;
  border-color: #4a9eff;
}

.mini-input-hex {
  font-family: monospace;
  letter-spacing: 0.04em;
}

.mini-color-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mini-color {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  cursor: pointer;
  padding: 1px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.mini-color-wrap .mini-input-hex {
  flex: 1;
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

/* Inspector two-column layout */
.cfg-inspector-columns {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cfg-inspector-col {
  flex: 1;
  min-width: 0;
}

.cfg-inspector-col .mini-color-wrap .mini-input-hex {
  width: 50px;
  flex: 1;
}

/* Mockup Selection */
.mockup-selectable {
  transition: outline 0.15s;
}
.mockup-selectable:hover {
  outline: 1px dashed rgba(100, 150, 255, 0.4);
  outline-offset: -1px;
}
.mockup-selected {
  outline: 2px dashed #4a9eff !important;
  outline-offset: -2px;
}

/* === Cockpit (Dashboard) === */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-tile {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 1rem 1.25rem;
}
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; color: var(--admin-text); }
.stat-label { font-size: 0.82rem; color: var(--admin-text-muted); margin-top: 0.15rem; }
.stat-sub { font-size: 0.75rem; color: var(--admin-text-faint); margin-top: 0.3rem; }

/* Single-hue progress bar (share of completed corrections / watched video) */
.progress-wrap { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; }
.progress-track {
  flex: 1 1 auto;
  min-width: 60px;
  height: 6px;
  border-radius: 3px;
  background: var(--admin-subtle-bg);
  overflow: hidden;
}
.progress-fill { display: block; height: 100%; border-radius: 3px; background: var(--admin-primary); }
.progress-label { flex: 0 0 auto; font-size: 0.8rem; color: var(--admin-text-muted); white-space: nowrap; }

/* === Cockpit (Bento-Dashboard) === */
/* Jede Mandanten-Kachel setzt --tc (Akzentfarbe aus den Mandanten-Einstellungen);
   Ringe, Logo-Chip und Thumbnails greifen sie ab, globale Kennzahlen bleiben im DGM-Rot. */
.ck-search {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 8px;
  padding: 0.5rem 0.8rem; min-width: 260px; color: var(--admin-text-muted);
}
.ck-search svg, .ck-search i { width: 16px; height: 16px; flex: 0 0 auto; }
.ck-search input { background: none; border: none; outline: none; color: var(--admin-text); font-size: 0.9rem; width: 100%; }
.ck-search input::placeholder { color: var(--admin-text-faint); }

.ck-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
  grid-auto-rows: minmax(96px, auto);
}
.ck-tile {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--admin-shadow);
  display: flex; flex-direction: column;
  min-width: 0;
}
.ck-tile-head { display: flex; align-items: center; gap: 0.5rem; color: var(--admin-text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.ck-tile-head svg, .ck-tile-head i { width: 16px; height: 16px; }
.ck-span-2 { grid-column: span 2; } .ck-span-3 { grid-column: span 3; } .ck-span-4 { grid-column: span 4; }
.ck-span-6 { grid-column: span 6; } .ck-span-8 { grid-column: span 8; } .ck-span-12 { grid-column: span 12; }
.ck-rows-2 { grid-row: span 2; }
.ck-empty { color: var(--admin-text-muted); font-size: 0.85rem; margin: 0.25rem 0; display: flex; align-items: center; gap: 0.4rem; }
.ck-hidden { display: none !important; }

/* Tablet: 6 Spalten */
@media (max-width: 1350px) {
  .ck-bento { grid-template-columns: repeat(6, 1fr); }
  .ck-span-8, .ck-span-6, .ck-span-12 { grid-column: span 6; }
  .ck-span-4 { grid-column: span 4; }
  .ck-span-3 { grid-column: span 3; }
  .ck-span-2 { grid-column: span 2; }
}
/* Schmal: 2 Spalten */
@media (max-width: 900px) {
  .ck-bento { grid-template-columns: repeat(2, 1fr); }
  .ck-span-8, .ck-span-6, .ck-span-4, .ck-span-12 { grid-column: span 2; }
  .ck-span-3, .ck-span-2 { grid-column: span 1; }
  .ck-rows-2 { grid-row: span 1; }
  .ck-hero { flex-wrap: wrap; }
}
/* Mobil: 1 Spalte */
@media (max-width: 560px) {
  .ck-bento { grid-template-columns: 1fr; }
  .ck-span-8, .ck-span-6, .ck-span-4, .ck-span-3, .ck-span-2, .ck-span-12 { grid-column: span 1; }
  .ck-search { min-width: 0; width: 100%; }
}

/* Hero: Donut */
.ck-hero { flex-direction: row; align-items: center; gap: 1.5rem; }
.ck-donut { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.ck-donut svg { transform: rotate(-90deg); }
.ck-donut .ck-track, .ck-ring .ck-track { stroke: var(--admin-subtle-bg); }
.ck-donut .ck-val { stroke: var(--admin-primary); }
.ck-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ck-donut-center strong { font-size: 1.9rem; font-weight: 800; }
.ck-donut-center span { font-size: 0.7rem; color: var(--admin-text-muted); }
.ck-hero-facts { display: grid; gap: 0.45rem; font-size: 0.9rem; }
.ck-fact { display: flex; align-items: center; gap: 0.55rem; color: var(--admin-text-muted); }
.ck-fact svg, .ck-fact i { width: 16px; height: 16px; }
.ck-fact strong { color: var(--admin-text); font-size: 1.05rem; min-width: 2ch; text-align: right; }
.ck-fact-sep { margin-top: 0.4rem; border-top: 1px solid var(--admin-border); padding-top: 0.6rem; }
.ck-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ck-dot-open { background: var(--admin-primary); }
.ck-dot-done { background: var(--admin-text-faint); }

/* KPI-Kacheln */
.ck-kpi { justify-content: space-between; }
.ck-big { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.ck-trend { font-size: 0.78rem; color: var(--admin-text-muted); margin-top: 0.25rem; }
.ck-trend.good { color: var(--admin-success); }
.ck-trend.warn { color: #f59e0b; }

/* Mini-Balken (Besuche je Wochentag) */
.ck-spark { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-top: 0.5rem; }
.ck-spark b { flex: 1; background: rgba(var(--admin-primary-rgb), 0.8); border-radius: 3px 3px 0 0; min-height: 3px; }
.ck-spark b.today { background: var(--admin-primary); outline: 2px solid var(--admin-subtle-bg); outline-offset: -2px; }
.ck-spark-labels { display: flex; gap: 5px; margin-top: 4px; }
.ck-spark-labels i { flex: 1; font-style: normal; font-size: 0.6rem; color: var(--admin-text-faint); text-align: center; }

/* Braucht Aufmerksamkeit */
.ck-attn-list { display: grid; gap: 0.55rem; }
.ck-attn {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--admin-hover-bg);
  border: 1px solid var(--admin-border); border-radius: 8px;
  padding: 0.55rem 0.75rem; font-size: 0.87rem;
  color: var(--admin-text); text-decoration: none;
  transition: border-color .15s;
}
.ck-attn:hover { border-color: var(--admin-primary); }
.ck-why { color: var(--admin-text-muted); font-size: 0.78rem; }
.ck-go { margin-left: auto; color: var(--admin-text-faint); width: 16px; height: 16px; flex: 0 0 auto; }
.ck-attn:hover .ck-go { color: var(--admin-primary); }
.ck-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex: 0 0 auto; }
.ck-pill.warn { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.ck-pill.crit { color: var(--admin-primary); background: rgba(var(--admin-primary-rgb), 0.14); }
.ck-pill.ok   { color: var(--admin-success); background: rgba(34, 197, 94, 0.12); }

/* Mandanten-Kacheln & Projekt-Karten */
.ck-tenant { --tc: var(--admin-primary); border-top: 3px solid color-mix(in srgb, var(--tc) 65%, transparent); }
.ck-tenant-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.ck-tenant-logo { width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; }
.ck-tenant-head h2 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.ck-count { color: var(--admin-text-faint); font-size: 0.78rem; margin-left: auto; }
.ck-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.75rem; }
.ck-proj {
  background: var(--admin-hover-bg);
  border: 1px solid var(--admin-border); border-radius: 8px; overflow: hidden;
  transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column;
  color: var(--admin-text); text-decoration: none;
}
.ck-proj:hover { border-color: var(--tc, var(--admin-primary)); transform: translateY(-2px); }
.ck-thumb { aspect-ratio: 16/7; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); position: relative; }
.ck-thumb svg, .ck-thumb i { width: 26px; height: 26px; }
.ck-type { position: absolute; top: 7px; left: 8px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; background: rgba(0,0,0,0.45); color: #fff; border-radius: 4px; padding: 2px 6px; }
/* Neutrale, dezent in der Mandantenfarbe getönte Thumbnail-Flächen
   (später: echtes Vorschaubild der neuesten Version) */
.ck-thumb.t1 { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 32%, #1c1c1c), #191919); }
.ck-thumb.t2 { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 24%, #1c1c1c), #1b1b1b); }
.ck-thumb.t3 { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 28%, #1c1c1c), #1a1a1a); }
.ck-thumb.t4 { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 20%, #1c1c1c), #1c1c1c); }
.ck-proj-body { padding: 0.65rem 0.75rem 0.75rem; display: grid; gap: 0.5rem; }
.ck-proj-name { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ck-v { color: var(--admin-text-faint); font-weight: 600; font-size: 0.75rem; }
.ck-proj-meta { display: flex; align-items: center; gap: 0.6rem; }
.ck-ring { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.ck-ring svg { transform: rotate(-90deg); }
.ck-ring .ck-val { stroke: var(--tc, var(--admin-primary)); }
.ck-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; }
.ck-proj-stats { font-size: 0.75rem; color: var(--admin-text-muted); display: grid; gap: 2px; min-width: 0; }
.ck-line { display: flex; align-items: center; gap: 0.35rem; }
.ck-line svg, .ck-line i { width: 12px; height: 12px; flex: 0 0 auto; }
.ck-line strong { color: var(--admin-text); }
.ck-line.all-done { color: var(--admin-success); }

/* Aktivitäts-Feed */
.ck-feed { display: grid; gap: 0; overflow: hidden; }
.ck-feed-item { display: flex; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--admin-border) 55%, transparent); font-size: 0.83rem; }
.ck-feed-item:last-child { border-bottom: none; }
.ck-feed-item p { margin: 0; }
.ck-feed-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--admin-subtle-bg); color: var(--admin-text-muted); }
.ck-feed-ico svg, .ck-feed-ico i { width: 15px; height: 15px; }
.ck-feed-ico.c { background: rgba(var(--admin-primary-rgb), 0.14); color: var(--admin-primary); }
.ck-feed-ico.g { background: rgba(34,197,94,0.12); color: var(--admin-success); }
.ck-when { color: var(--admin-text-faint); font-size: 0.72rem; }

/* Feed-Einträge sind Links ins jeweilige Projekt */
a.ck-feed-item { color: var(--admin-text); text-decoration: none; border-radius: 6px; margin: 0 -0.4rem; padding: 0.55rem 0.4rem; transition: background 0.15s; }
a.ck-feed-item:hover { background: var(--admin-hover-bg); }
.ck-feed-item p { flex: 1; min-width: 0; }
.ck-feed-item .ck-go { opacity: 0; margin-top: 2px; transition: opacity 0.15s; }
.ck-feed-item:hover .ck-go { opacity: 1; color: var(--admin-primary); }

/* Cockpit: Anpassen-Modus (Kacheln verschieben & Größenstufen) */
.ck-tile { position: relative; }
.ck-tile-tools { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; z-index: 5; }
.ck-editing .ck-tile-tools { display: flex; }
.ck-tile-tools button {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--admin-border); background: var(--admin-card);
  color: var(--admin-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ck-tile-tools button:hover { color: var(--admin-primary); border-color: var(--admin-primary); }
.ck-tile-tools button svg, .ck-tile-tools button i { width: 13px; height: 13px; }
.ck-editing .ck-tile { cursor: grab; outline: 1px dashed color-mix(in srgb, var(--admin-primary) 55%, transparent); outline-offset: 2px; }
.ck-editing .ck-tile:active { cursor: grabbing; }
.ck-editing .ck-tile a { pointer-events: none; }
.ck-tile.ck-dragging { opacity: 0.45; }

/* Cockpit: echte Vorschaubilder in den Projekt-Karten */
.ck-thumb img, .ck-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-thumb video { pointer-events: none; }
.ck-type { z-index: 2; }

/* Cockpit: größere Vorschaubilder + Mandanten-Farbpunkt bei bezogenen Inhalten */
.ck-projects { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ck-thumb { aspect-ratio: 16/9; overflow: hidden; }
.ck-thumb img, .ck-thumb video { transition: transform 0.2s ease; }
.ck-proj:hover .ck-thumb img, .ck-proj:hover .ck-thumb video { transform: scale(1.04); }
.ck-tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--admin-text-faint)); margin-right: 3px; vertical-align: 0; }

/* Cockpit: prominenter erster Menüpunkt — 20px Abstand zum Mandant-Switcher darüber */
.sidebar-cockpit {
  margin: 20px 0 10px;
  background: rgba(var(--admin-primary-rgb), 0.10);
  border: 1px solid rgba(var(--admin-primary-rgb), 0.35);
  border-radius: 6px;
  font-weight: 700;
  color: var(--sidebar-text-hover);
}
.sidebar-cockpit .s-icon { color: var(--admin-primary); opacity: 1; }
.sidebar-cockpit:hover, .sidebar-cockpit.active { background: rgba(var(--admin-primary-rgb), 0.18); color: var(--sidebar-text-active); }

/* Größere Box = größere Bilder: Karten wachsen mit, statt dass mehr (kleinere) Spalten entstehen */
.ck-projects { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Deep-Link aus dem Cockpit: angesprungene Korrektur kurz hervorheben */
.review-correction.is-deeplinked { outline: 2px solid var(--admin-primary); outline-offset: 2px; border-radius: 4px; }

/* ===================================================================
   Lizensierung (v1.23.0) — Lizenz-Sektion in der Mandanten-Maske und
   Lizenz-Dashboard. Bento-Optik analog Cockpit (ck-*), Präfix lic-.
   =================================================================== */
.lic-section-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.8rem 0 0.9rem; }
.lic-section-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.lic-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  background: rgba(var(--admin-primary-rgb), 0.12); color: var(--admin-primary);
}
.lic-badge-expired { background: rgba(239, 68, 68, 0.14); color: var(--admin-danger); }
.lic-label-hint { font-weight: 400; color: var(--admin-text-faint); text-transform: none; letter-spacing: 0; }
.lic-readonly { background: var(--admin-subtle-bg) !important; color: var(--admin-text-muted) !important; cursor: default; }

.lic-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-bottom: 1rem; }
.lic-tile {
  background: var(--admin-card); border: 1px solid var(--admin-border);
  border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: var(--admin-shadow);
  display: flex; flex-direction: column; min-width: 0;
}
.lic-span-6 { grid-column: span 6; }
.lic-span-12 { grid-column: span 12; }
@media (max-width: 900px) { .lic-span-6 { grid-column: span 12; } }
.lic-tile-head {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--admin-text-muted); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem;
}

.lic-limits { display: grid; gap: 1.05rem; }
.lic-row { display: grid; grid-template-columns: 190px 100px 1fr; gap: 0.9rem; align-items: center; }
@media (max-width: 640px) {
  .lic-row { grid-template-columns: 1fr 100px; }
  .lic-row .lic-bar-wrap { grid-column: 1 / -1; }
}
.lic-row-label { font-size: 0.88rem; font-weight: 600; }
.lic-row-label small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--admin-text-faint); }
/* Inputs außerhalb von .form-group: identisches Styling wie die Styleguide-
   Formularfelder (die admin.css-Regeln greifen nur unter .form-group). */
input.lic-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  height: 38px;
  font-size: 0.9rem;
  border: 1px solid var(--admin-border);
  border-radius: 3px;
  font-family: inherit;
  background: var(--admin-bg);
  color: var(--admin-text);
  transition: border-color 0.15s;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
input.lic-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(var(--admin-primary-rgb), 0.15);
}
.lic-unit-field { position: relative; }
.lic-unit-field input { padding-right: 2.4rem; }
.lic-unit {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font-size: 0.78rem; color: var(--admin-text-faint); pointer-events: none;
}

.lic-bar-wrap { min-width: 0; }
.lic-bar-meta {
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.76rem; color: var(--admin-text-muted); margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.lic-state { font-weight: 600; color: var(--admin-text-muted); }
.lic-state-warn { color: #f59e0b; }
.lic-state-full { color: var(--admin-danger); }
.lic-state-unlimited { color: var(--admin-success); }
.lic-bar { height: 8px; border-radius: 99px; background: var(--admin-subtle-bg); overflow: hidden; display: flex; }
.lic-bar b { display: block; height: 100%; background: rgba(var(--admin-primary-rgb), 0.85); transition: width 0.25s ease; }
.lic-bar b.lic-seg-archive { background: rgba(var(--admin-primary-rgb), 0.3); }
.lic-bar b.lic-b-warn { background: #f59e0b; }
.lic-bar b.lic-b-full { background: var(--admin-danger); }
.lic-legend { display: flex; gap: 1rem; font-size: 0.72rem; color: var(--admin-text-faint); margin-top: 0.35rem; }
.lic-legend i { font-style: normal; display: inline-flex; align-items: center; gap: 0.35rem; }
.lic-sw { width: 10px; height: 10px; border-radius: 3px; background: rgba(var(--admin-primary-rgb), 0.85); }
.lic-sw-archive { background: rgba(var(--admin-primary-rgb), 0.3); }

.lic-log summary {
  cursor: pointer; list-style: none;
  color: var(--admin-text-muted); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.lic-log summary::-webkit-details-marker { display: none; }
.lic-log summary::before { content: "› "; display: inline-block; transition: transform 0.2s; }
.lic-log[open] summary::before { transform: rotate(90deg); }
.lic-log-entries { margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.lic-log-entry {
  display: flex; gap: 0.9rem; align-items: baseline; flex-wrap: wrap;
  font-size: 0.82rem; padding: 0.5rem 0.7rem;
  background: var(--admin-hover-bg); border-radius: 6px;
}
.lic-log-entry time { color: var(--admin-text-faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-log-who { color: var(--admin-text-muted); }

/* Lizenz-Dashboard: Karte je Mandant */
.lic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.lic-card-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.lic-card-title strong { font-size: 1rem; }
.lic-card-title a { color: inherit; text-decoration: none; }
.lic-card-title a:hover { text-decoration: underline; }
.lic-card-rows { display: grid; gap: 0.75rem; }
.lic-card-row .lic-bar-meta { margin-bottom: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .lic-bar b, .lic-log summary::before { transition: none; } }

/* Lizenz: Tool-Karten mit Schriftzug + Bildmarke (v1.23.2). Bewusst fester
   dunkler Grund in BEIDEN Themes — der Schriftzug (weiß/rot) und die Bildmarke
   sind auf dunkel gestaltet, analog zu den Review-Typ-Karten. */
.lic-tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.lic-tool-card {
  display: flex; align-items: flex-start; gap: 0.8rem;
  min-height: 118px; padding: 1rem 1.1rem;
  background: #232323; border: 1px solid #414141; border-radius: 8px;
  cursor: pointer; min-width: 0;
}
.lic-tool-card:hover { border-color: var(--admin-primary); }
.lic-tool-card input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--admin-primary); flex: 0 0 auto; cursor: pointer;
}
.lic-tool-card:has(input:checked) { border-color: rgba(var(--admin-primary-rgb), 0.6); }
.lic-tool-card:has(input:focus-visible) { outline: 2px solid var(--admin-primary); outline-offset: 2px; }
.lic-tool-wordmark { height: 21px; width: auto; margin-top: 1px; }
.lic-tool-name { color: #ebebeb; font-weight: 700; font-size: 0.95rem; }
.lic-tool-art { height: 74px; width: auto; margin-left: auto; align-self: center; flex: 0 0 auto; }
@media (max-width: 420px) { .lic-tool-art { height: 56px; } }