/* Erzeugt von tools/build-frontend-assets.php – nicht von Hand ändern. */

/* ── public/assets/css/base/tokens-reset.css ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --base: #f8fafc;
  /* Mono-Stack: wurde an ~25 Stellen als `var(--font-mono)` bzw.
     `var(--font-mono)` referenziert, ohne dass der Token existierte –
     der Fallback griff also immer und die Stacks liefen auseinander. */
  --font-mono: 'SFMono-Regular', 'Consolas', 'Menlo', 'Courier New', monospace;
  --surface: rgba(255,255,255,0.72);
  --surface-2: rgba(255,255,255,0.50);
  --border: rgba(255,255,255,0.55);
  --border-soft: rgba(148,163,184,0.18);
  /* Deckende Grautöne für Rahmen, Trenner und inaktive Flächen. Vorher an
     ~12 Stellen als #cbd5e1 / #e2e8f0 fest verdrahtet – dadurch behielten
     Themes dort den schiefergrauen Grundton des Standard-Schemas. */
  --border-strong: #cbd5e1;
  --border-mid:    #e2e8f0;
  /* RGB-Tripel der Flächen-/Rahmentöne für abweichende Deckkraftstufen. */
  --border-strong-rgb: 203, 213, 225;
  --border-mid-rgb:    226, 232, 240;
  --bg-1-rgb:          241, 245, 249;
  --bg-2-rgb:          248, 250, 252;
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06), 0 0 0 1px rgba(255,255,255,0.55);
  --shadow-md: 0 8px 32px rgba(15,23,42,0.10), 0 0 0 1px rgba(255,255,255,0.50);
  --shadow-lg: 0 20px 60px rgba(15,23,42,0.14), 0 0 0 1px rgba(255,255,255,0.45);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  /* Zwischenstufe zwischen primary und secondary – trägt die dichten
     Datenansichten (order_data-Werte, Chip-Werte, Detail-Hinweise). */
  --text-strong: #334155;
  --text-muted: #94a3b8;
  /* RGB-Tripel des gedämpften Grundtons für abweichende Deckkraftstufen –
     ersetzt ~150 feste rgba(148,163,184,X) in den Komponenten. */
  --text-muted-rgb: 148, 163, 184;
  /* UI-Akzent (Violett im Standard-Theme; Themes wie "reseller" überschreiben
     diese Tokens zentral, z. B. auf Petrol/Teal). */
  --accent-ui: #7c3aed;
  --accent-ui-rgb: 124, 58, 237;
  --accent-ui-strong: #6d28d9;
  --accent-ui-deep: #5b21b6;
  --accent-ui-light: #8b5cf6;
  --accent-ui-light-rgb: 139, 92, 246;
  --accent-ui-alt: #6366f1;
  --accent-ui-alt-rgb: 99, 102, 241;
  --accent-ui-soft: #a78bfa;
  --accent-ui-pale: #c4b5fd;
  --accent-ui-faint: #ede9fe;
  --primary-600: var(--accent-ui);
  --accent: var(--accent-ui);
  --grad-primary: linear-gradient(135deg, var(--accent-ui) 0%, #2563eb 100%);
  --accent-teal: #0d9488;
  --sidebar-w: 270px;
  /* Welle 3: Design-Tokens für Page-Templates */
  --color-info:        #2563eb;
  --color-info-dark:   #1d4ed8;
  --color-info-soft:   rgba(37,99,235,0.10);
  --color-success:     #16a34a;
  --color-success-dk:  #128337;
  --color-success-so:  #0f766e;
  --color-success-dkr: #14532d;
  --color-success-dkb: #166534;
  --color-success-e:   #059669;
  --color-amber:       #d97706;
  --color-amber-dark:  #b45309;
  --color-amber-e:     #ea580c;
  --color-amber-darkbg:#92400e;
  --color-rose:        #e11d48;
  --color-rose-dark:   #be123c;
  --color-danger:      #dc2626;
  --color-purple-700:  var(--accent-ui-strong);
  --color-purple-600:  #9333ea;
  --color-purple-900:  var(--accent-ui-deep);
  --color-purple-soft: var(--accent-ui-pale);
  --color-purple-400:  var(--accent-ui-soft);
  --color-purple-100:  var(--accent-ui-faint);
  --color-sky-700:     #0c4a6e;
  --color-cyan-600:    #0891b2;
  --color-indigo-600:  #4f46e5;
  --color-indigo-900:  #1e3a8a;
  --color-text-on-1:   #0f172a;
  --color-muted-1:     #94a3b8;
  --color-muted-2:     #64748b;
  --color-muted-3:     #475569;
  --color-bg-1:        #f1f5f9;
  --color-bg-2:        #f8fafc;
  /* Badge / Status Tokens
     Je Familie ein Basiston als RGB-Tripel (--*-rgb), aus dem Fläche und Rand
     abgeleitet werden. Komponenten-CSS, das eine abweichende Deckkraftstufe
     braucht, schreibt rgba(var(--badge-<familie>-rgb), X) statt eines festen
     Farbwerts – so folgt auch diese Stufe dem Farbschema. */
  --badge-success-rgb: 22, 163, 74;
  --badge-success-bg:  rgba(var(--badge-success-rgb),0.10);
  --badge-success-text:#16a34a;
  --badge-success-border:rgba(var(--badge-success-rgb),0.18);
  --badge-info-rgb:    37, 99, 235;
  --badge-info-bg:     rgba(var(--badge-info-rgb),0.09);
  --badge-info-text:   #2563eb;
  --badge-info-border: rgba(var(--badge-info-rgb),0.18);
  --badge-warning-rgb: 217, 119, 6;
  --badge-warning-bg:  rgba(var(--badge-warning-rgb),0.10);
  --badge-warning-text:#d97706;
  --badge-warning-border:rgba(var(--badge-warning-rgb),0.18);
  --badge-danger-rgb:  225, 29, 72;
  --badge-danger-bg:   rgba(var(--badge-danger-rgb),0.10);
  --badge-danger-text: #e11d48;
  --badge-danger-border:rgba(var(--badge-danger-rgb),0.18);
  /* Basiston als RGB-Tripel, damit auch abweichende Deckkraftstufen
     (0.06 … 0.24) dem Farbschema folgen – Muster wie --accent-ui-rgb. */
  --badge-neutral-rgb: 100, 116, 139;
  --badge-neutral-bg:  rgba(var(--badge-neutral-rgb),0.10);
  --badge-neutral-text:#64748b;
  --badge-neutral-border:rgba(var(--badge-neutral-rgb),0.20);
  --badge-teal-rgb:    13, 148, 136;
  --badge-teal-bg:     rgba(var(--badge-teal-rgb),0.10);
  --badge-teal-text:   #0d9488;
  --badge-teal-border: rgba(var(--badge-teal-rgb),0.18);
  --badge-purple-rgb:  var(--accent-ui-light-rgb);
  --badge-purple-bg:   rgba(var(--badge-purple-rgb),0.12);
  --badge-purple-text: var(--accent-ui);
  --badge-purple-border:rgba(var(--badge-purple-rgb),0.18);

  /* ── Struktur-Tokens (Sidebar / Topbar) ──────────────────────────────────
     Themes (reseller, calm) überschreiben ausschließlich diese Tokens –
     Komponenten-CSS (app-shell.css) liest nur noch var(--…). */
  --sidebar-bg:          rgba(255,255,255,0.62);
  --sidebar-blur:        blur(22px);
  --sidebar-border:      var(--border);
  --sidebar-shadow:      2px 0 24px rgba(15,23,42,0.06);
  --sidebar-text:        var(--text-secondary);
  --sidebar-text-dim:    var(--text-muted);
  --sidebar-hover-bg:    rgba(255,255,255,0.70);
  --sidebar-hover-text:  var(--text-primary);
  --sidebar-active-bg:   rgba(255,255,255,0.85);
  --sidebar-active-text: var(--accent-ui);
  --sidebar-sub-border:  rgba(148,163,184,0.20);
  --topbar-bg:           rgba(255,255,255,0.50);
  --topbar-blur:         blur(12px);
  --topbar-border:       var(--border-soft);

  /* Segmented Control (z. B. Auto-Renew: Aktiv | Aus | Rückgabe) */
  --seg-active:   var(--accent-teal);
  --seg-disabled: #64748b;
  --seg-release:  var(--color-amber);

  /* Fokus-Ring */
  --focus-ring-color: var(--accent-ui);
}

html,
body {
  min-height: 100%;
  font-family: 'Satoshi', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  background: var(--base);
  color: var(--text-primary);
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* ── Globale Skalierung bei gröberen Auflösungen ─────────────────────────────
   Bei Fensterbreiten <= 1800px wird die gesamte UI (Schrift, Icons, Sidebar,
   Abstände) proportional auf 90% verkleinert. `zoom` ist standardisiert und
   skaliert – anders als transform – auch Layout, fixed-Elemente und
   getBoundingClientRect konsistent. */
@media (max-width: 1800px) {
  html {
    zoom: 0.9;
  }
}




/* ── public/assets/css/layout/app-shell.css ── */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #eff3fa;
  overflow: hidden;
}

.bg-mesh::before,
.bg-mesh::after,
.bg-blob-3,
.bg-blob-4 {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.bg-mesh::before {
  width: 720px;
  height: 720px;
  top: -200px;
  left: -180px;
  background: radial-gradient(circle, var(--accent-ui-pale) 0%, #818cf8 50%, transparent 75%);
}

.bg-mesh::after {
  width: 640px;
  height: 640px;
  bottom: -140px;
  right: -100px;
  background: radial-gradient(circle, #93c5fd 0%, #60a5fa 50%, transparent 75%);
}

.bg-blob-3 {
  width: 520px;
  height: 520px;
  top: 30%;
  right: 10%;
  background: radial-gradient(circle, #99f6e4 0%, #2dd4bf 50%, transparent 75%);
  opacity: 0.38;
}

.bg-blob-4 {
  width: 400px;
  height: 400px;
  bottom: 0;
  left: 35%;
  background: radial-gradient(circle, #fca5a5 0%, #fb7185 50%, transparent 75%);
  opacity: 0.28;
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  height: auto;
  /* 100% statt 100vw: vw ignoriert den globalen zoom-Faktor (tokens-reset.css)
     und liesse bei aktiver 90%-Skalierung rechts einen Leerstreifen. */
  width: 100%;
  align-items: stretch;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  align-self: stretch;
  padding: 28px 18px 24px;
  background: var(--sidebar-bg);
  backdrop-filter: var(--sidebar-blur);
  -webkit-backdrop-filter: var(--sidebar-blur);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  overflow: visible;
  position: relative;
  z-index: 100;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 24px;
  border-bottom: 1px solid var(--border-soft);
}

.logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(var(--accent-ui-rgb),0.35);
  flex-shrink: 0;
}

.logo-icon svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.logo-text {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb),0.10);
  border: 1px solid rgba(var(--accent-ui-rgb),0.20);
  border-radius: 6px;
  padding: 2px 6px;
  text-transform: uppercase;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sidebar-text-dim);
  padding: 0 8px;
  margin-bottom: 6px;
}

.nav-item,
.nav-sub-item {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
}

.nav-item:hover,
.nav-sub-item:hover,
.nav-item.active,
.nav-sub-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

.nav-item:hover,
.nav-sub-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  transform: translateX(2px);
}

.nav-item.active,
.nav-sub-item.active {
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

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

.nav-icon-text {
  margin-right: 8px;
}

.nav-sub-items {
  margin-left: 14px;
  border-left: 1px solid var(--sidebar-sub-border);
  padding-left: 8px;
}

/* ── Nav-Badges (Laufende Aufträge / Aufgaben) ── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  transition: opacity 0.2s ease;
}

.nav-badge--orders {
  background: #f59e0b;
  color: #fff;
}

.nav-badge--tasks {
  background: var(--accent-ui);
  color: #fff;
}

.nav-badge[data-count="0"] {
  display: none;
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--topbar-bg);
  backdrop-filter: var(--topbar-blur);
  border-bottom: 1px solid var(--topbar-border);
  position: relative;
  z-index: 90;
}

.topbar-search {
  flex: 1;
  max-width: 340px;
  position: relative;
}

.topbar-search-hint {
  position: absolute;
  left: 36px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-search input {
  width: 100%;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 8px 14px 8px 36px;
  font: 500 13.5px inherit;
  color: var(--text-primary);
}

.topbar-search input:focus {
  outline: none;
  border-color: rgba(var(--accent-ui-rgb), 0.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb), 0.08);
  background: rgba(255,255,255,0.92);
}

.topbar-search--disabled input {
  color: rgba(15, 23, 42, 0.46);
  background: rgba(255,255,255,0.45);
  border-color: rgba(var(--text-muted-rgb),0.22);
  box-shadow: none;
  cursor: default;
}

.topbar-search--disabled .search-icon {
  color: rgba(100,116,139,0.55);
}

.topbar-search--disabled .topbar-search-hint {
  color: rgba(100,116,139,0.88);
}

.topbar-search--dns-zone-jump .topbar-search-hint {
  display: none;
}

.topbar-search--domain-detail-jump .topbar-search-hint {
  display: none;
}

.topbar-search--contact-detail-jump .topbar-search-hint {
  display: none;
}

.topbar-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  border: 1px solid rgba(var(--border-mid-rgb),0.95);
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px);
  padding: 6px;
  z-index: 120;
}

.topbar-search-result {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font: 500 13px inherit;
}

.topbar-search-result:hover,
.topbar-search-result.is-active {
  background: rgba(var(--accent-ui-rgb), 0.08);
}

.topbar-search-result-label {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
}

.topbar-search-result-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.topbar-search-result--empty {
  padding: 11px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-switcher-wrap {
  position: relative;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 72px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
}

.language-switcher[aria-expanded="true"] {
  background: rgba(255,255,255,0.88);
}

.language-switcher-icon {
  font-size: 13px;
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 182px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  z-index: 200;
}

.language-menu-label {
  padding: 4px 8px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 700;
}

.language-option:hover,
.language-option.active {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-ui);
}

.language-option-code {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.topbar-env-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.10);
  border: 1px solid rgba(var(--accent-ui-rgb),0.18);
  color: var(--accent-ui);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Nur für die Testsystem-Umgebung (backendInfo.key === 'test') – identische
   Farb-Tokens wie .badge-danger, damit "Testserver" unübersehbar vom
   Produktivsystem unterscheidbar ist. */
.topbar-env-badge--danger {
  background: var(--badge-danger-bg);
  border-color: var(--badge-danger-border);
  color: var(--badge-danger-text);
}

.system-status-btn {
  height: 36px;
  border-radius: 20px;
  border: 1px solid rgba(13,148,136,0.16);
  background: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-sm);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 12.5px inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.system-status-btn:hover {
  background: rgba(255,255,255,0.95);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

.system-status-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488, #0891b2);
}

.page-body {
  padding: 32px 88px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mockup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.breadcrumb-sep {
  opacity: 0.4;
}

.breadcrumb .current {
  color: var(--text-secondary);
  font-weight: 500;
}

.mockup-title {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.mockup-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 6px;
  max-width: 900px;
}

.page-actions-row,
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.subtle-chip,
.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.kpi-row-3,
.summary-list,
.form-grid,
.split-layout {
  display: grid;
  gap: 16px;
}

.kpi-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

.summary-list,
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-layout {
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}

.split-layout > * {
  min-width: 0;
}

.mockup-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mockup-kpi,
.glass-card,
.quick-card,
.summary-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

/* Cards mit Tabellen: unterer Innenabstand damit die letzte Zeile nicht am Rand klebt */
.glass-card:has(.domain-table),
.glass-card:has(table) {
  padding-bottom: 16px;
}

.mockup-kpi {
  padding: 18px 20px;
}

.mockup-kpi-label,
.summary-label,
/* IDNA-Hinweis unter Eingabefeldern bei Umlaut-Domains */
.idna-hint {
  display: none;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 3px;
  margin-bottom: 5px;
}
.idna-hint.visible { display: block; }

/* Alias für .form-field-label (Abwärtskompatibilität) */
.field-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; }

.mockup-kpi-value {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.summary-value {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.mockup-kpi-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.summary-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.glass-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.glass-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  align-self: flex-end;
}
.quick-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.glass-card-title,
.quick-card-title {
  font-size: 15.5px;
  font-weight: 800;
}

.glass-card-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.quick-card-body {
  padding: 18px 20px 24px;
  overflow-x: auto;
}

.list-status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
}

/* ── Tabellen-Ladezustand mit Spinner ───────────────────────────────────── */
@keyframes ui-spin {
  to { transform: rotate(360deg); }
}
.table-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  animation: ui-spin 0.75s linear infinite;
}
/* Kleine Variante für Inline-Badges (z. B. „wird geprüft“ in Bulk-Tabellen). */
.spinner-xs {
  width: 10px;
  height: 10px;
}
/* ── Listen-Spinner (Vollbild-Ladeindikator in Listenkarte) ─────────────── */
.list-status--loading { background: var(--color-bg-1); color: var(--text-muted); }
.list-status--ok      { background: #dcfce7; color: #166534; }
.list-status--error   { background: #fee2e2; color: #991b1b; }
.list-status--info    { background: var(--badge-info-bg); color: #1d4ed8; }

/* ── Listen-Hinweis-Banner (API <note>) ──────────────────────────────────
   Wird über jeder Listentabelle gerendert; ein Eintrag pro Note.
   --limit (Code 0008): Warn-Symbol des Limit-Skeletons; sonst Info-Symbol. */
.list-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(var(--bg-2-rgb),.9), rgba(var(--bg-1-rgb),.7));
  border: 1px solid rgba(var(--text-muted-rgb),.18);
}
.list-note-item { display: flex; align-items: center; gap: 10px; }
.list-note-icon {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.list-note-icon svg { width: 14px; height: 14px; }
.list-note-item--limit .list-note-icon {
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(234,88,12,.10));
  border: 1px solid rgba(245,158,11,.24);
  color: #d97706;
}
.list-note-item--info .list-note-icon {
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
  color: #2563eb;
}
.list-note-body { min-width: 0; }
.list-note-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.list-note-item--limit .list-note-text { color: #92400e; }
.list-note-action { margin-top: 7px; }
.list-note-action a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 11.5px; font-weight: 700; color: #d97706;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.24);
  padding: 5px 10px; border-radius: 8px;
  transition: .15s;
}
.list-note-action a:hover {
  background: rgba(217,119,6,.18);
  border-color: rgba(217,119,6,.35);
  color: #b45309;
}
.list-note-action a svg { width: 12px; height: 12px; }

.quick-card-header-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Account-Status-Warnbanner */
.account-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FFF8DC;
  border: 1px solid #F59E0B;
}

.account-status-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(217,119,6,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92400E;
}

.account-status-banner-icon svg {
  width: 18px;
  height: 18px;
}

.account-status-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-status-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: #78350F;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-status-banner-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(217,119,6,0.18);
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-status-banner-reason {
  font-size: 18px;
  font-weight: 600;
  color: #92400E;
}

.account-status-banner-hint {
  font-size: 12px;
  color: #B45309;
}

.account-status-banner-link {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #D97706;
  text-decoration: none;
  white-space: nowrap;
}

.account-status-banner-link:hover {
  text-decoration: underline;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  align-items: start;
}

.dashboard-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.chart-card,
.person-card {
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px;
}

/* Chart-Karten als Flex-Column, damit ein Empty-State den Restraum
   ausfüllt und vertikal zentriert werden kann (siehe .dash-empty--chart). */
.chart-card {
  display: flex;
  flex-direction: column;
}

.chart-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.chart-card-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.bar-chart {
  margin-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 170px;
}

.bar-chart-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bar-chart-track {
  width: 100%;
  max-width: 56px;
  height: 138px;
  border-radius: 16px;
  background: rgba(var(--text-muted-rgb),0.10);
  border: 1px solid rgba(var(--text-muted-rgb),0.10);
  display: flex;
  align-items: flex-end;
  padding: 6px;
}

/* Höhe kommt inline aus dashboard.php: Anteil am Gesamtbestand,
   max(<Anteil>%, 4px) für Werte > 0, damit kleine Anteile sichtbar bleiben; 0 bleibt 0 */
.bar-chart-fill {
  width: 100%;
  border-radius: 12px;
  background: var(--grad-primary);
  box-shadow: 0 8px 18px rgba(var(--accent-ui-rgb),0.16);
  transition: height 0.4s ease;
}

.bar-chart-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}


.bar-chart-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* Horizontale Bar-Charts (Kategorie- & Benutzer-Verteilung) */
.hbar-chart {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hbar-chart-item {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.hbar-chart-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-chart-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--text-muted-rgb),0.12);
  overflow: hidden;
}

/* Breite kommt inline aus dashboard.php. Benutzer-Chart: Anteil am Gesamtbestand,
   max(<Anteil>%, 8px) für Werte > 0; Kategorie-Chart: relativ zum größten Wert */
.hbar-chart-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--grad-primary);
  transition: width 0.4s ease;
}

.hbar-chart-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}

.hbar-chart-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}

.mini-donut-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
}

.mini-donut {
  width: 110px;
  height: 110px;
}

.mini-donut-center {
  font-size: 14px;
  font-weight: 800;
  fill: var(--text-primary);
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent-ui);
  flex-shrink: 0;
}

.legend-dot-transfer {
  background: var(--accent-ui);
}

.legend-dot-active {
  background: #0d9488;
}

.legend-dot-expiring {
  background: #d97706;
}

.legend-row .legend-name {
  color: var(--text-secondary);
  flex: 1;
}

.legend-row .legend-count {
  color: var(--text-primary);
  font-weight: 700;
}

.editorial-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
}

.editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(37,99,235,0.10);
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 700;
}

.editorial-logo {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(37,99,235,0.22);
}

.editorial-content h3 {
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.editorial-content p {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.editorial-link {
  display: block;
  width: fit-content;
  margin-top: 14px;
  margin-left: auto;
  color: var(--accent-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.editorial-link:hover {
  text-decoration: underline;
}
.quick-card-body--editorial .editorial-link {
  margin-right: 20px;
}


/* ── Dashboard: kombinierte KPI-Inline-Zeile ─────────────────────────── */
.kpi-inline-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.kpi-inline-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  gap: 2px;
}
.kpi-inline-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.kpi-inline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kpi-inline-note {
  font-size: 10px;
  color: var(--text-muted);
  opacity: .7;
}
.kpi-inline-item--warn .kpi-inline-value { color: #f59e0b; }
.kpi-inline-item--info .kpi-inline-value { color: var(--accent-ui); }
.kpi-inline-sep {
  width: 1px;
  background: rgba(var(--text-muted-rgb),.15);
  margin: 8px 0;
  align-self: stretch;
}
.quick-card-divider {
  height: 1px;
  background: rgba(var(--text-muted-rgb),.12);
  margin: 4px 0 12px;
}

.nis2-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nis2-item {
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
}

.nis2-item-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.nis2-item-value {
  margin-top: 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.nis2-item.pending .nis2-item-value { color: #d97706; }
.nis2-item.failed .nis2-item-value { color: #e11d48; }
.nis2-item.locked .nis2-item-value { color: var(--accent-blue); }

.nis2-item-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.person-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.person-photo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.person-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #1d4ed8;
}

.person-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.person-role {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.person-meta {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.person-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.person-meta-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-purple);
  flex-shrink: 0;
}

.person-socials {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.66);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.18s ease;
}

.social-chip:hover {
  color: var(--accent-purple);
  transform: translateY(-1px);
  background: rgba(255,255,255,0.92);
}

.summary-item {
  padding: 14px;
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}

.form-grid {
  width: 100%;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-group.full {
  grid-column: 1 / -1;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.78);
  border-radius: 12px;
  padding: 11px 12px;
  font: 500 13.5px inherit;
  color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
}
/* Select zuverlässig im Feld-Look: ohne appearance:none malt die Engine das
   native Widget und unterschlägt je nach Browser box-shadow und border-radius
   (sichtbar u. a. in Firefox: flaches Select neben schattiertem Input).
   Muster wie .xf-select select / .list-per-page-select; der Chevron-Farbwert
   im Data-URI ist die dokumentierte Token-Ausnahme (var() dort unmöglich).
   Selektor bewusst select.field-select (0,1,1): die Klasse wird auch als
   Zweitklasse an kompakte Select-Familien gehängt (acp-input, ta-f-input,
   sf-select, spec-select, sq-select) – appearance, Chevron und padding-right
   müssen deren später ladende Geometrie-Regeln (0,1,0) unabhängig von der
   Dateireihenfolge schlagen; alles Übrige (padding, font, Rahmen) behalten
   die Familien. */
select.field-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 5.5l3.5 3.5 3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),0.18), 0 1px 3px rgba(15,23,42,0.06);
}



/* ── public/assets/css/components/forms.css ── */
/* ── Passwort-Sichtbarkeits-Toggle ────────────────────────────────── */
.pwd-wrap {
  position: relative;
}
.pwd-wrap > .field-input {
  padding-right: 42px;
}
.pwd-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: color .15s;
  line-height: 0;
}
.pwd-eye:hover { color: var(--text-primary); }
.pwd-eye svg   { width: 18px; height: 18px; pointer-events: none; }

.field-textarea {
  min-height: 96px;
}

.field-checkbox {
  width: 18px;
  height: 18px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--border-soft);
}

.setting-title {
  font-size: 13.5px;
  font-weight: 700;
}

.setting-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.stack-gap-sm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ajax-status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
}

.ajax-status[data-state="loading"] {
  color: #2563eb;
}

.ajax-status[data-state="success"] {
  color: #0f766e;
}

.ajax-status[data-state="pending"] {
  color: #ea580c;
}

.ajax-status[data-state="error"] {
  color: #b91c1c;
}

.tab-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.62);
  color: var(--text-secondary);
  font: 700 12.5px inherit;
  cursor: pointer;
}

.tab-button.active {
  background: rgba(var(--accent-ui-rgb),0.12);
  border-color: rgba(var(--accent-ui-rgb),0.22);
  color: var(--accent-ui);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-section + .tab-section {
  margin-top: 16px;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
}

.filter-tab.active {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-ui);
  border-color: rgba(var(--accent-ui-rgb),0.18);
}

.filter-sep {
  flex: 1;
}

.filter-search-wrap {
  position: relative;
  min-width: 240px;
}

.filter-search-wrap input {
  width: 100%;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 10px 12px 10px 34px;
  font: 500 13.5px inherit;
}

.filter-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.filter-search-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ── Flatpickr Range-Picker Overrides ───────────────────────────── */
.flatpickr-calendar {
  border: 1px solid rgba(var(--text-muted-rgb),.16);
  box-shadow: 0 18px 48px rgba(15,23,42,.18);
  border-radius: 16px;
  font-family: inherit;
}
/* Linksbündige Darstellung, einheitlicher 2px Trenner zwischen den Tagen */
.dayContainer {
  justify-content: flex-start !important;
  column-gap: 2px !important;
}
.flatpickr-day {
  max-width: none !important;
  margin: 0 !important;
  /* 6 Gaps × 2px = 12px; 7 Zellen teilen den Rest */
  flex-basis: calc((100% - 12px) / 7) !important;
  width: calc((100% - 12px) / 7) !important;
}
/* Monat/Jahr Header verkleinern */
.flatpickr-months .flatpickr-month {
  height: 30px;
}
.flatpickr-current-month {
  font-size: 13px !important;
  padding-top: 4px;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper {
  font-size: 13px !important;
  font-weight: 600;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none;
}
/* Alle Tage: Basis – kein Outline, keine sichtbare Border */
.flatpickr-day {
  border-color: transparent !important;
  border-radius: 6px;
  outline: none !important;
}
/* 1) inRange ZUERST (wird danach von start/end überschrieben) */
.flatpickr-day.inRange,
.flatpickr-day.inRange:focus,
.flatpickr-day.inRange:hover {
  background: rgba(var(--accent-ui-rgb),.10) !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: -2px 0 0 rgba(var(--accent-ui-rgb),.10), 2px 0 0 rgba(var(--accent-ui-rgb),.10) !important;
  color: var(--accent-ui-deep) !important;
}
/* 2) Start + End DANACH → gewinnt über inRange bei gleicher Spezifität */
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  background: var(--accent-ui) !important;
  border-color: var(--accent-ui) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
/* Start: immer volle gerundete Ecken + Band nach rechts */
.flatpickr-day.startRange:not(.endRange) {
  border-radius: 6px !important;
  box-shadow: 2px 0 0 rgba(var(--accent-ui-rgb),.10) !important;
}
/* End: immer volle gerundete Ecken + Band nach links */
.flatpickr-day.endRange:not(.startRange) {
  border-radius: 6px !important;
  box-shadow: -2px 0 0 rgba(var(--accent-ui-rgb),.10) !important;
}
/* Start=End (gleicher Tag): voller Kreis, kein Band */
.flatpickr-day.startRange.endRange {
  border-radius: 6px !important;
  box-shadow: none !important;
}
/* Direkt benachbarte Start+End (kein inRange dazwischen): beide als Kreise */
.flatpickr-day.startRange + .flatpickr-day.endRange {
  border-radius: 6px !important;
  box-shadow: none !important;
}
/* Heute-Markierung wenn nicht selected */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
  border-bottom-color: var(--accent-ui) !important;
}
/* Fix: hidden prevMonthDay/nextMonthDay Zellen die inRange sind (z.B. Mo/Di/Mi in Jan 2026)
   werden sichtbar als Band, Tageszahl bleibt unsichtbar */
.flatpickr-day.hidden.inRange {
  visibility: visible !important;
  background: rgba(var(--accent-ui-rgb),.10) !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: -2px 0 0 rgba(var(--accent-ui-rgb),.10), 2px 0 0 rgba(var(--accent-ui-rgb),.10) !important;
  color: transparent !important;
}


/* ── API-Filterpanel ─────────────────────────────────────────────── */
.api-filter-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 16px;
}
.api-filter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.filter-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 160px;
  max-width: 240px;
}
.filter-field-group label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.filter-field-group input,
.filter-field-group select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.filter-field-group input:focus,
.filter-field-group select:focus {
  border-color: var(--accent);
}
.api-filter-actions {
  display: flex;
  gap: 8px;
}
/* Toggle-Button aktiv-Markierung */
.filter-button.filter-active {
  background: rgba(var(--accent-ui-rgb),.15);
  color: var(--accent);
  border-color: rgba(var(--accent-ui-rgb),.35);
}
.filter-button {
  position: relative;
}
.filter-button-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--accent-ui);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(var(--accent-ui-rgb),.25);
}

.align-right {
  text-align: right !important;
}

.center {
  text-align: center !important;
}

/* .badge-Basisklasse + Farbvarianten: siehe components/badges.css (TPL-05) */

.domain-cell,
.user-list-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.domain-favicon,
.user-avatar-lg {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg,rgba(var(--accent-ui-rgb),0.15),rgba(14,165,233,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--accent-ui);
  flex-shrink: 0;
}
.domain-favicon.domain-favicon-transfer { background: linear-gradient(135deg,rgba(var(--accent-ui-rgb),0.10),rgba(var(--accent-ui-rgb),0.18)); color: var(--accent-ui); }
.domain-favicon.domain-favicon-expiring { background: linear-gradient(135deg,rgba(217,119,6,0.12),rgba(217,119,6,0.20)); color: #D97706; }

.domain-name,
.user-meta-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.domain-tld-tag { font-weight: 500; color: var(--text-muted); }

.date-meta,
.user-meta-sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.date-meta.date-soon { color: #D97706; font-weight: 600; }
.date-val { font-weight: 700; font-size: 13px; }

/* Datums-Spalten behalten systemweit ihre Breite und brechen nicht um;
   bei Platzmangel weicht zuerst die Status-Spalte (umbricht). */
.date-val,
.date-meta { white-space: nowrap; }
.domain-table-td:has(> .date-val) { white-space: nowrap; width: 1%; }
.domain-status-cell { min-width: 0; }

/* ── Inline-Add-Zeile in listen-Karten (list-rich) ───────────────────────── */
.inline-add-row {
  border-bottom: 1px solid rgba(var(--accent-ui-rgb),0.12);
  background: rgba(var(--accent-ui-rgb),0.028);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
}
.inline-add-row.inline-add-row--open {
  max-height: 96px;
  opacity: 1;
  transform: translateY(0);
}
.inline-add-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
}
.inline-add-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(var(--accent-ui-rgb),0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple);
  flex-shrink: 0;
}
.inline-add-icon svg { width: 14px; height: 14px; }
.inline-add-input {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(var(--text-muted-rgb),0.25);
  background: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.inline-add-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),0.10);
}
.inline-add-input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}
.inline-add-toggle-row {
  padding: 8px 14px 6px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.10);
}
.inline-add-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.inline-add-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.inline-add-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.inline-add-toggle-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Actions-Spalte schmal und zentriert */
.domain-table td.align-right:has(.row-actions) {
  width: 56px;
  padding-left: 4px;
  padding-right: 4px;
}
.domain-table td.align-right:has(.row-actions):last-child {
  padding-right: 24px;
}

/* Benutzer-Badge unter Datum (date-created cell_type) */
.row-user-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.08);
  border: 1px solid rgba(var(--accent-ui-rgb),0.14);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* Hinweis-/Remarks-Kasten über Formularabschnitten. Ersetzt drei identische
   Inline-Kopien (ssl-pages.js, domain-preregistration.js, domain-register.js). */
.form-remark-box {
  margin: 0 24px 12px;
  padding: 11px 13px;
  border: 1px solid var(--badge-warning-border);
  background: var(--badge-warning-bg);
  border-radius: 10px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}


/* ── public/assets/css/components/badges.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   TPL-05: Konsolidiertes Badge/Pill-System
   Zwei Shape-Basisklassen (.badge = große Pille mit Dot, .badge-pill = kleiner
   Chip) + Farb-Modifikatoren, alle auf den --badge-*-Tokens aus
   base/tokens-reset.css aufgebaut. Ersetzt zuvor verstreute Farb-Duplikate
   (badge-teal/-gray/-amber, status-active/-completed/-pending/-failed in
   contract-rich.css, badge-suspended/badge-warning in domain-detail.css).
   ══════════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  gap: 4px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.badge-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  background: currentColor; margin-right: 5px; flex-shrink: 0;
}

/* Konsolidierung: ersetzt die früheren Duplikate .billing-status-pill__dot /
   .status-badge__dot / history-badge__dot. Diese Container bringen bereits
   ein eigenes gap mit – dann keinen zusätzlichen Außenabstand am Dot. */
.billing-status-pill .badge-dot,
.status-badge .badge-dot { margin-right: 0; }

.badge-active   { background: var(--badge-teal-bg);    color: var(--badge-teal-text);    border: 1px solid var(--badge-teal-border); }
.badge-expiring { background: var(--badge-warning-bg); color: var(--badge-warning-text); border: 1px solid var(--badge-warning-border); }
.badge-transfer { background: var(--badge-purple-bg);  color: var(--badge-purple-text);  border: 1px solid var(--badge-purple-border); }
.badge-danger   { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  border: 1px solid var(--badge-danger-border); }
.badge-neutral  { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); border: 1px solid var(--badge-neutral-border); }
.badge-success  { background: var(--badge-success-bg); color: var(--badge-success-text); border: 1px solid var(--badge-success-border); }
/* Die --badge-info-*-Tokens existierten bereits in base/tokens-reset.css, ohne
   dass es eine zugehörige Klasse gab. Für neutrale Hervorhebungen ohne
   Status-Bedeutung (z. B. die aktive Sprache in der Vertrags-Detailkarte). */
.badge-info     { background: var(--badge-info-bg);    color: var(--badge-info-text);    border: 1px solid var(--badge-info-border); }

/* ══════════════════════════════════════════════════════════════════════════════
   Klickbare Chips – Affordanz-Modifikator (.badge-action)
   ──────────────────────────────────────────────────────────────────────────────
   Problem: Klickbare Chips signalisierten ihre Klickbarkeit bisher nur über
   :hover. Im Ruhezustand waren sie von statischen Status-Badges nicht zu
   unterscheiden; auf Touch-Geräten gab es überhaupt kein Signal.

   Lösung (zwei Ebenen, bewusst kombiniert):
     1. Mikro-Icon rechts, bereits im Ruhezustand sichtbar (Deckkraft .45).
        Wirkt ohne Hover, ohne Farbwahrnehmung und ohne Bewegung.
     2. Interaktionsfarbe + Fokus-Ring aus dem etablierten transparent-violetten
        Chip-Ton (identisch zu .chip.is-active / .dreg-pref-all / .nic-badge--new:
        Fläche rgba(accent,.09), Rand rgba(accent,.20), Text var(--accent-ui)).

   Opt-in per Klasse, weil .chip/.badge im Projekt auch rein statisch verwendet
   werden (z. B. Read-only-Sprachanzeige in contract-page.js). Nur echte
   Interaktionselemente erhalten .badge-action.

   Verwendung – immer auf einem <button type="button">:
     <button type="button" class="badge badge-neutral badge-action">…</button>
     Default-Icon ist der Chevron (kein eigener Modifikator nötig); abweichend
     .badge-action--add (Plus) oder .badge-action--remove (X).
   ══════════════════════════════════════════════════════════════════════════════ */

.badge-action {
  /* Button-Reset: <button> soll sich exakt wie der bisherige Chip verhalten. */
  font: inherit;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  gap: 5px;
  padding-right: 8px;
  transition: background .15s, border-color .15s, color .15s;

  /* Default-Affordanz: Chevron = "führt weiter / öffnet Detail" */
  --badge-action-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Feste Höhe nur für die .badge-Variante des Aktions-Chips: `font: inherit`
   aus dem Button-Reset schlägt die .badge-Typografie (12px/1) und macht die
   natürliche Höhe damit kontextabhängig. 22px entspricht der .badge-Metrik
   (12px Schrift + 2×4px Padding + Rand); statische Farb-Modifikatoren wie
   .badge-neutral bleiben davon frei und folgen der jeweiligen Shape-Metrik. */
.badge.badge-action { height: 22px; padding-top: 0; padding-bottom: 0; }

/* Plus = "fügt hinzu" (Filter setzen, Wert übernehmen) */
.badge-action--add {
  --badge-action-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* X = "entfernt" (aktiven Filter abwählen) */
.badge-action--remove {
  --badge-action-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Das Icon wird als Maske über currentColor gelegt und übernimmt damit
   automatisch die Chip-Farbe – auch in den Farbvarianten und im Hover. */
.badge-action::after {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .45;
  transition: opacity .15s, transform .15s;
  -webkit-mask: var(--badge-action-ico) center / contain no-repeat;
          mask: var(--badge-action-ico) center / contain no-repeat;
}

/* Interaktionszustand: etablierter transparent-violetter Chip-Ton. */
.badge-action:hover,
.badge-action:focus-visible {
  background: rgba(var(--accent-ui-rgb), .09);
  color: var(--accent-ui);
  border-color: rgba(var(--accent-ui-rgb), .20);
}

.badge-action:hover::after,
.badge-action:focus-visible::after { opacity: 1; }

/* Nur der Chevron wandert – bei Plus/X wäre die Bewegung sinnlos. */
.badge-action:hover::after { transform: translateX(1.5px); }
.badge-action--add:hover::after,
.badge-action--remove:hover::after { transform: none; }

.badge-action:focus-visible {
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .badge-action::after { transition: opacity .15s; }
  .badge-action:hover::after { transform: none; }
}


/* ── public/assets/css/components/table-cells.css ── */
/* ── History cell types ─────────────────────────────── */
.ha-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ha-icon svg { width: 13px; height: 13px; }
/* Der Farbton steht als Tripel in --ha-bg/--ha-fg/--ha-bd, die Fläche liest ihn
   nur. Grund: die Transaktionsansicht (widget-list.js, actionCell) färbt die
   Kachel je Zeile nach Transaktionsstatus statt nach Aktionsart und musste den
   Ton bisher als style="background:…;border:…" ins Markup schreiben. Eine
   inline gesetzte Eigenschaft schlägt jede Regel im Stylesheet – kein Theme kam
   mehr dagegen an. Ein inline gesetztes Custom Property dagegen füttert nur die
   Regel hier, und die lässt sich weiterhin überschreiben (s. theme-cps.css,
   „Führende Zeilensymbole ohne Kasten"). */
.ha-create, .ha-modify, .ha-transfer, .ha-delete,
.ha-renew, .ha-expire, .ha-process, .ha-default {
  background: var(--ha-bg);
  color: var(--ha-fg);
  border: 1px solid var(--ha-bd);
}
.ha-create   { --ha-bg: rgba(var(--accent-ui-rgb),0.10); --ha-fg: var(--accent-ui); --ha-bd: rgba(var(--accent-ui-rgb),0.15); }
.ha-modify   { --ha-bg: rgba(37,99,235,0.10);  --ha-fg: #2563eb; --ha-bd: rgba(37,99,235,0.15); }
.ha-transfer { --ha-bg: rgba(217,119,6,0.10);  --ha-fg: #d97706; --ha-bd: rgba(217,119,6,0.15); }
.ha-delete   { --ha-bg: rgba(225,29,72,0.09);  --ha-fg: #e11d48; --ha-bd: rgba(225,29,72,0.15); }
.ha-renew    { --ha-bg: rgba(13,148,136,0.09); --ha-fg: #0d9488; --ha-bd: rgba(13,148,136,0.15); }
.ha-expire   { --ha-bg: rgba(var(--badge-neutral-rgb),0.09); --ha-fg: var(--badge-neutral-text); --ha-bd: rgba(var(--badge-neutral-rgb),0.15); }
.ha-process  { --ha-bg: rgba(234,179,8,0.10);  --ha-fg: #a16207; --ha-bd: rgba(234,179,8,0.20); }
.ha-default  { --ha-bg: color-mix(in srgb, var(--text-muted) 10%, transparent); --ha-fg: var(--text-muted); --ha-bd: color-mix(in srgb, var(--text-muted) 15%, transparent); }

/* ── record-user cell ────────────────────────────────── */
.record-user-cell {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.record-user-cell svg { width: 11px; height: 11px; color: var(--text-muted); flex-shrink: 0; }

/* ── record-time cell ────────────────────────────────── */
.record-time-date { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.record-time-sub  { display: block; font-size: 11px; color: var(--text-muted); }

/* ── status-badge (History) ──────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
  min-height: 22px;
}
.status-received         { background: rgba(var(--badge-neutral-rgb),0.10); color: var(--text-secondary); border-color: rgba(var(--badge-neutral-rgb),0.18); }
.status-pending          { background: rgba(217,119,6,0.10);   color: #d97706; border-color: rgba(217,119,6,0.20);   }
.status-success          { background: rgba(13,148,136,0.10);  color: #0d9488; border-color: rgba(13,148,136,0.18);  }
.status-failed           { background: rgba(225,29,72,0.10);   color: #e11d48; border-color: rgba(225,29,72,0.18);   }
.status-processing       { background: rgba(37,99,235,0.09);   color: #2563eb; border-color: rgba(37,99,235,0.20);   }
.status-pending_approval { background: rgba(249,115,22,0.10);  color: #f97316; border-color: rgba(249,115,22,0.20);  }
.status-locked           { background: rgba(var(--badge-neutral-rgb),0.10); color: var(--text-secondary); border-color: rgba(var(--badge-neutral-rgb),0.20); }
.status-email            { background: rgba(37,99,235,0.09);   color: #2563eb; border-color: rgba(37,99,235,0.20);   }
.status-name             { background: rgba(var(--accent-ui-rgb),0.10);  color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),0.20);  }
.status-document         { background: rgba(13,148,136,0.10);  color: #0d9488; border-color: rgba(13,148,136,0.20);  }
/* Kampagnen-Status (pricing) – nur innerhalb .status-badge, um globale .status-* nicht zu überschreiben */
.status-badge.status-active    { background: rgba(22,163,74,0.12);   color: #16a34a; border-color: rgba(22,163,74,0.22);   }
.status-badge.status-scheduled { background: rgba(217,119,6,0.10);   color: #d97706; border-color: rgba(217,119,6,0.20);   }
.status-badge.status-completed { background: rgba(37,99,235,0.09);   color: #2563eb; border-color: rgba(37,99,235,0.20);   }
.status-badge.status-expired   { background: rgba(var(--badge-neutral-rgb),0.10); color: var(--text-secondary); border-color: rgba(var(--badge-neutral-rgb),0.18); }
/* Farbvarianten gemäß badge_map.color (Konfig-getrieben, z. B. SSL: expired/revoked = rose) */
.status-badge--slate,
.status-badge--muted  { background: rgba(var(--badge-neutral-rgb),0.10); color: var(--text-secondary); border-color: rgba(var(--badge-neutral-rgb),0.18); }
.status-badge--amber  { background: rgba(217,119,6,0.10);   color: #d97706; border-color: rgba(217,119,6,0.20);   }
.status-badge--blue   { background: rgba(37,99,235,0.09);   color: #2563eb; border-color: rgba(37,99,235,0.20);   }
.status-badge--teal   { background: rgba(13,148,136,0.10);  color: #0d9488; border-color: rgba(13,148,136,0.18);  }
.status-badge--rose,
.status-badge--red    { background: rgba(225,29,72,0.10);   color: #e11d48; border-color: rgba(225,29,72,0.18);   }
.status-badge--orange { background: rgba(249,115,22,0.10);  color: #f97316; border-color: rgba(249,115,22,0.20);  }
.status-badge--purple { background: rgba(var(--accent-ui-rgb),0.10);  color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),0.20);  }

/* ── expandable detail row ───────────────────────────── */
.record-detail-row { display: none; }
.record-detail-row.open { display: table-row; }
.record-detail-td { padding: 0 14px 14px !important; background: rgba(var(--bg-2-rgb),0.55); }

/* ── code panel inside detail row ───────────────────── */
.record-code-panel {
  margin-top: 6px;
  background: rgba(15,23,42,0.03); border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
  border-radius: 10px; padding: 12px 16px;
}
.record-detail-pre {
  font-family: 'SF Mono','JetBrains Mono','Fira Mono',monospace;
  font-size: 11px; line-height: 1.75; color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-all;
}
.code-key { color: var(--text-secondary); font-weight: 600; }
.code-val { color: #1e40af; }
.record-detail-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ── Detail-Hint (detail-Feld) ───────────────────────── */
.record-detail-hint {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; color: var(--text-strong);
  background: rgba(var(--bg-1-rgb),0.9);
  border-radius: 6px; padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  margin-bottom: 10px;
  /* Rückmeldungen (detail-Feld) sind oft mehrzeiliger Rohtext der
     Registry/CA-Antwort – Zeilenumbrüche sollen wie beim mehrzeiligen
     order_data-Wert (.od-longval-pre) erhalten bleiben, statt zu
     Leerzeichen zu kollabieren. pre-line statt pre: es ist Fließtext,
     kein Code, daher soll weiterhin normal umgebrochen werden. */
  white-space: pre-line;
}
.record-detail-hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--badge-neutral-text); }

/* ── order_data Tabelle ──────────────────────────────── */
.record-od-table {
  border-collapse: collapse;
  font-family: 'SF Mono','JetBrains Mono','Fira Mono',monospace;
  min-width: 320px; max-width: 640px;
}
.od-key {
  font-size: 10.5px; font-weight: 600; color: var(--badge-neutral-text);
  padding-right: 14px; padding-left: 8px;
  padding-top: 3px; padding-bottom: 2.5px;
  width: 1%; white-space: nowrap; vertical-align: top;
}
.od-key-sub {
  font-size: 10.5px; font-weight: 500; color: var(--text-muted);
  padding-left: 18px;
}
.od-val { font-size: 11px; color: var(--text-strong); vertical-align: top; padding-top: 3px; padding-bottom: 2.5px; }
.od-group-hdr { }
.od-group-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 7px 0 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 13%, transparent);
}
.od-group-hdr:first-child .od-group-label { padding-top: 2px; }
.od-idx-sep td { padding: 3px 0; border-bottom: 1px dashed color-mix(in srgb, var(--text-muted) 10%, transparent); }
.od-sect-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 6px;
}
.od-detail-text {
  font-size: 11px; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 10px;
}

/* ── Chip-Strip (order_data Variante B) ──────────────────── */
.chip-strip { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; }
.cs-group   { width: 100%; }
.cs-grp-label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 8px 0 4px 0; padding-bottom: 3px;
}
.cs-grp-label:first-child { margin-top: 0; }
.cs-items { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; min-width: 0; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.6); border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  font-family: 'SF Mono','JetBrains Mono','Fira Mono',monospace;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  max-width: 100%; min-width: 0;
}
.cs-key  { font-size: 9.5px; font-weight: 600; color: var(--badge-neutral-text); flex: 0 0 auto; }
.cs-sep  { font-size: 9px; color: var(--text-muted); padding: 0 1px; flex: 0 0 auto; }
.cs-val  { font-size: 10px; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.cs-val.is-h    { color: var(--accent-ui); font-weight: 700; }
.cs-val.is-host { color: #0d9488; }
.cs-val.is-dis  { color: #e11d48; }
.cs-val.is-act  { color: #0d9488; }
.cs-val.is-disc-on  { color: #dc2626; }
.cs-val.is-disc-off { color: var(--text-muted); }
/* Indexed sub-group pill (groups chips with same ::NN prefix) */
.cs-idx-pill {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
  background: rgba(var(--badge-neutral-rgb),0.06); border: 1px solid rgba(var(--badge-neutral-rgb),0.16);
  border-radius: 8px; padding: 3px 5px;
  max-width: 100%; min-width: 0;
}
.cs-idx-pill .cs-chip {
  background: rgba(255,255,255,.75); border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
  box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 2px 7px 2px 5px;
}
/* Lange/mehrzeilige Werte (z. B. CSR, Zertifikat) – eigener Block statt Chip */
.od-longval {
  width: 100%; margin-top: 6px;
  background: rgba(255,255,255,.6); border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  border-radius: 8px; padding: 6px 9px;
}
.od-longval-key {
  font-size: 9.5px; font-weight: 600; color: var(--badge-neutral-text);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.od-longval-pre {
  font-family: 'SF Mono','JetBrains Mono','Fira Mono',monospace;
  font-size: 10px; color: var(--text-strong); line-height: 1.4;
  white-space: pre-wrap; word-break: break-all; margin: 0;
}

.odv-handle {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.09); color: var(--accent-ui);
  border: 1px solid rgba(var(--accent-ui-rgb),0.15); font-size: 11px; font-weight: 700;
}
.odv-active {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: rgba(13,148,136,0.07); color: #0d9488;
  border: 1px solid rgba(13,148,136,0.15); font-size: 10px; font-weight: 600;
}
.odv-disabled {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: rgba(225,29,72,0.07); color: #e11d48;
  border: 1px solid rgba(225,29,72,0.12); font-size: 10px; font-weight: 600;
}
.odv-host    { color: #0d9488; }
.odv-ip      { color: #d97706; }
.odv-auth    { color: var(--text-muted); font-style: italic; letter-spacing: 0.03em; }
.odv-default { color: var(--text-strong); }

/* ── chevron button ──────────────────────────────────── */
.domain-table td.td-center,
.domain-table th.td-center { text-align: center; }
.record-chevron {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,0.60); border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  flex-shrink: 0;
}
.record-chevron:hover { background: rgba(255,255,255,0.92); color: var(--text-primary); border-color: color-mix(in srgb, var(--text-muted) 32%, transparent); }
.record-chevron svg { width: 13px; height: 13px; transition: transform 0.20s; }
.record-chevron.open svg { transform: rotate(90deg); }

.history-main-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hm-domain {
  font-size: 13.5px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.1px;
  min-width: 0; flex-shrink: 1;
}
.task-obj-name-row .crd-copy-btn { flex-shrink: 0; }
.hm-message {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}

.txn-id-chip {
  display: inline-block;
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb),0.07);
  border: 1px solid rgba(var(--accent-ui-rgb),0.14);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* ── Transaction-Group Rendering ────────────────────────────────────── */
.txn-accent-cell { padding: 0 !important; width: 4px; min-width: 4px; }
.txn-accent-bar { width: 4px; min-height: 46px; height: 100%; border-radius: 0 3px 3px 0; }
.txn-group-hdr-row > td { transition: background 0.12s; }
.txn-lifecycle { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.txn-lp {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.txn-lp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.txn-lp-arr { color: var(--text-muted); font-size: 13px; padding: 0 1px; user-select: none; line-height: 1; }
.txn-step-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 20px; padding: 0 5px;
  background: rgba(var(--badge-neutral-rgb),0.1); border-radius: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--badge-neutral-text);
}
.txn-step-row { display: none; }
.txn-step-row.open { display: table-row; }
.txn-step-row > td { border-bottom: 1px solid rgba(var(--border-mid-rgb),0.5); }
.txn-step-row.open + .txn-step-detail-row.open > td { border-top: none; }
.txn-step-row.open:has(+ .txn-step-detail-row.open) > td { border-bottom: none; }
.txn-step-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.txn-ss {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.txn-step-msg { font-size: 12px; color: var(--text-secondary); }
.txn-step-msg-cell { vertical-align: middle; }
.txn-step-detail {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(var(--bg-1-rgb),0.7);
  border: 1px solid rgba(var(--border-strong-rgb),0.4);
  border-radius: 7px;
  max-width: 560px;
}
.txn-step-detail-row { display: none; }
.txn-step-detail-row.open { display: table-row; }
.txn-step-detail-row > td { border-bottom: 1px solid rgba(var(--border-mid-rgb),0.5); }
.txn-sd-inner {
  border-radius: 6px;
}
.step-exp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: none; border: none; cursor: pointer; border-radius: 6px;
  color: var(--text-muted); transition: color 0.15s, background 0.15s;
  padding: 0;
}
.step-exp-btn:hover { background: rgba(var(--badge-neutral-rgb),0.1); color: var(--text-secondary); }
.step-exp-btn svg { width: 13px; height: 13px; transition: transform 0.18s; }
.step-exp-btn.open { color: var(--accent-ui-alt); }
.step-exp-btn.open svg { transform: rotate(90deg); }



.table-amount {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  padding-right: 52px;
}
.billing-amount-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-right: 52px;
}
.billing-amount-qty { font-weight: 600; color: var(--badge-neutral-text); }
.billing-amount-sep { opacity: .4; }
.billing-amount-prc { color: var(--badge-neutral-text); }
.billing-debit  { color: #dc2626; }
.billing-credit { color: #16a34a; }
.billing-zero   { color: var(--text-muted); }

.billing-status-pill,
.billing-neutral-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(var(--badge-neutral-rgb),.20);
  background: rgba(var(--badge-neutral-rgb),.10);
  color: var(--badge-neutral-text);
}

.billing-neutral-pill--sm {
  font-size: 11px;
}

.billing-status-pill--success {
  background: rgba(13,148,136,.10);
  color: #0D9488;
  border-color: rgba(13,148,136,.18);
}

.billing-status-pill--failed {
  background: rgba(225,29,72,.10);
  color: #E11D48;
  border-color: rgba(225,29,72,.18);
}

.billing-status-pill--processing {
  background: rgba(217,119,6,.10);
  color: #D97706;
  border-color: rgba(217,119,6,.18);
}

.billing-status-pill--locked {
  animation: verif-locked-pulse 1.4s ease-in-out infinite;
}

@keyframes verif-locked-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.45); }
  50%      { box-shadow: 0 0 0 4px rgba(225,29,72,0); }
}

.contact-handle-cell { display:flex; flex-direction:column; gap:6px; }
.contact-handle-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.contact-handle-id {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.contact-type-pill {
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  border:1px solid transparent;
}
.contact-type-pill--person {
  background: rgba(249,115,22,.09);
  color: #f97316;
  border-color: rgba(249,115,22,.2);
}
.contact-type-pill--org {
  background: rgba(var(--accent-ui-alt-rgb),.09);
  color: var(--accent-ui-alt);
  border-color: rgba(var(--accent-ui-alt-rgb),.2);
}
.contact-type-pill--icon { padding: 5px 7px; }
.contact-type-pill--icon svg { display: block; }
/* ── Contact-Type-Badge (führend, analog dns-zone-ico, aber funktionale Farben) ── */
.contact-type-badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.contact-type-badge svg { width: 15px; height: 15px; display: block; }
.contact-type-badge--person {
  background: rgba(249,115,22,.09);
  color: #f97316;
  border-color: rgba(249,115,22,.2);
}
.contact-type-badge--org {
  background: rgba(var(--accent-ui-alt-rgb),.09);
  color: var(--accent-ui-alt);
  border-color: rgba(var(--accent-ui-alt-rgb),.2);
}
.contact-type-pill--disclosure-on {
  background: rgba(239,68,68,.10);
  color: #dc2626;
  border-color: rgba(239,68,68,.25);
}
.contact-type-pill--disclosure-off {
  background: color-mix(in srgb, var(--text-muted) 9%, transparent);
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
}

/* ── User-Type-Pill (user-handle cell type) ── */
.user-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
}
.user-type-pill--user {
  background: rgba(var(--accent-ui-alt-rgb),.09);
  color: var(--accent-ui-alt);
  border-color: rgba(var(--accent-ui-alt-rgb),.2);
}
.user-type-pill--alias {
  background: rgba(217,119,6,.09);
  color: #d97706;
  border-color: rgba(217,119,6,.2);
}

/* ── user-avatar cell ── */
.user-avatar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-av {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: 'Satoshi', system-ui, sans-serif;
  /* Einheitliche Palettenfarbe (Theme-Akzent): heller Tint als Hintergrund,
     voller Akzent als Buchstabe – ausreichend Kontrast in allen Themes. */
  background: rgba(var(--accent-ui-rgb), 0.12);
  color: var(--accent-ui);
}
.user-av-name {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── alias-handle cell ── */
.alias-handle-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alias-av {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--accent-ui-rgb), 0.08);
  border: 1px solid rgba(var(--accent-ui-rgb), 0.14);
  color: var(--accent-ui);
}
.alias-av svg { width: 13px; height: 13px; }
.alias-handle-wrap { display: flex; flex-direction: column; gap: 1px; }
.alias-handle-id {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
}
.alias-part-parent { color: var(--text-muted); }
.alias-part-sep { color: var(--border-strong); }
.alias-part-name { color: var(--text-primary); font-weight: 700; }
/* ── alias-badge: icon + name inline (z. B. auth-log alias-Spalte) ── */
.alias-badge-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alias-badge-av {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--accent-ui-rgb), 0.08);
  border: 1px solid rgba(var(--accent-ui-rgb), 0.14);
  color: var(--accent-ui);
}
.alias-badge-av svg { width: 13px; height: 13px; }
.alias-badge-name {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── alias group row ── */
.alias-group-row td {
  padding: 8px 16px 5px;
  background: transparent;
  border-bottom: none;
}
.alias-group-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.alias-group-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.alias-group-badge {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #2563eb;
  background: var(--badge-info-bg);
  border-radius: 999px;
  padding: 1px 7px;
  letter-spacing: 0;
  text-transform: none;
}
.alias-group-count {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ── count-badge cell ── */
.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--badge-info-bg);
  color: #2563eb;
}
.count-badge svg { width: 11px; height: 11px; }
.count-badge--zero {
  background: var(--color-bg-1);
  color: var(--border-strong);
}

/* ── count-badge-link: Sprung-Pille (Aliasse), Optik wie .domain-owner-pill ──
   Vormals eine zweisegmentige Compound-Pille (blaue Zählfläche + abgetrenntes
   Pfeil-Segment) mit blauem Glow-Hover. Jetzt flache Pille im neutralen
   Grundton; die Klick-Affordanz liefert .badge-action (Chevron + violetter
   Hover/Fokus), damit Aliasse- und Inhaber-Chips identisch wirken. */
.count-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--badge-neutral-bg);
  border: 1px solid var(--badge-neutral-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  max-width: 100%;
}
.count-badge-link__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.count-badge-link__count svg { width: 12px; height: 12px; flex-shrink: 0; }
/* zero-state: gedämpft, aber weiterhin klickbar (Alias anlegen) */
.count-badge-link--zero {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}


/* ── flag-pair cell ── */
.flag-pair {
  display: flex;
  gap: 5px;
  align-items: center;
}
.flag-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--color-bg-1);
  color: var(--border-strong);
  border: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent);
  transition: background .12s, color .12s, border-color .12s;
}
.flag-cell svg { width: 13px; height: 13px; }
.flag-cell--on {
  background: #ecfdf5;
  color: #059669;
  border-color: rgba(5, 150, 105, 0.2);
}
.flag-cell--warn {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.2);
}

/* ── DNS-Zonen: Zonenname-Zelle ─────────────────────────────── */
.dns-zone-cell { display: flex; align-items: center; gap: 10px; }
.dns-zone-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.15); color: #2563eb; }
.dns-zone-ico svg { width: 15px; height: 15px; }
.dns-zone-name { font-size: 13px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
.dns-zone-ace  { font-size: 11px; color: var(--text-muted); font-family: 'SFMono-Regular','Consolas','Courier New',monospace; margin-top: 2px; }
.dns-zone-sub  { font-size: 10.5px; color: var(--text-muted); font-family: 'SF Mono', 'Fira Code', monospace; margin-top: 2px; }
/* Größe/Radius/Farbe/Transition kommen zentral von .crd-copy-btn
   (contract-rich.css) – .dns-zone-copy wird immer in Kombination mit
   .crd-copy-btn eingesetzt (class="dns-zone-copy crd-copy-btn") und
   steuert hier nur noch das Ein-/Ausblenden bei Zeilen-Hover. */
.dns-zone-copy { opacity: 0; }
tr:hover .dns-zone-copy { opacity: 1; }
/* ── DNS-Zonen: Features-Zelle (AXFR + Anycast) ─────────────── */
.dns-feat-cell { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; padding: 12px 14px; box-sizing: border-box; }
.domain-table th.col-features,
.domain-table td.col-features { text-align: center; padding: 0; }
.dns-feat-icon { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.dns-feat-icon svg { width: 13px; height: 13px; }
.dns-feat-off     { background: color-mix(in srgb, var(--text-muted) 8%, transparent); border-color: color-mix(in srgb, var(--text-muted) 15%, transparent); color: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.dns-feat-axfr-on { background: rgba(var(--badge-info-rgb),.09);  border-color: rgba(var(--badge-info-rgb),.2);    color: var(--badge-info-text); }
.dns-feat-any-on  { background: rgba(var(--badge-teal-rgb),.09); border-color: rgba(var(--badge-teal-rgb),.2);   color: var(--badge-teal-text); }
/* Abweichung bewusst: Quellton ist #dc2626 (--color-danger), nicht der #e11d48
   der Badge-Danger-Familie – so bleibt die Optik der Domain-Liste unverändert. */
.dns-feat-bad     { background: color-mix(in srgb, var(--color-danger) 8%, transparent);  border-color: color-mix(in srgb, var(--color-danger) 18%, transparent);   color: var(--color-danger); }
.dns-feat-warn    { background: rgba(var(--badge-warning-rgb),.09);  border-color: rgba(var(--badge-warning-rgb),.2);    color: var(--badge-warning-text); }

/* ── Domains: restricted-Badge (Premium/Gesperrt) ── */
.domain-restricted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-light-rgb),.12);
  border: 1px solid rgba(var(--accent-ui-light-rgb),.25);
  color: var(--accent-ui-light);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
}
.domain-restricted-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.domain-restricted-text { line-height: 1.4; }
/* Premium/Restricted-Badge hochgestellt direkt neben dem Domainnamen (Hero-Wert).
   Bricht durch white-space:nowrap nur dann um, wenn der Name die Card-Breite erreicht. */
.domain-restricted-badge--sup {
  vertical-align: super;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9px;
}
.domain-restricted-badge--sup svg { width: 9px; height: 9px; }

/* ── Domains: Domaininhaber-Pille (klickbar → Kontakt-Sidepanel) ── */
.domain-owner-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--badge-neutral-bg);
  border: 1px solid var(--badge-neutral-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  max-width: 100%;
}
.domain-owner-pill:hover,
.domain-owner-pill:focus-visible {
  background: rgba(var(--accent-ui-rgb),.09);
  border-color: rgba(var(--accent-ui-rgb),.20);
  color: var(--accent-ui);
}
.domain-owner-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.domain-owner-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── datetime cell ── */
.ts-cell {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}


/* ── Scroll-Hinweis für horizontal scrollbare Tabellen (table-scroll-hint.js) ── */
.tbl-scroll-hint {
  position: absolute;
  width: 56px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--surface) 85%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 3;
}
.tbl-scroll-hint.is-visible { opacity: 1; }
.tbl-scroll-hint svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  animation: tbl-hint-nudge 1.6s ease-in-out infinite;
}
@keyframes tbl-hint-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-scroll-hint svg { animation: none; }
}


/* ── public/assets/css/components/object-clipboard.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Virtuelle Zwischenablage (Objektsammler)
   ──────────────────────────────────────────────────────────────────────────────
   Zwei Bausteine:
     1. .dns-zone-clip – Copy++ inline in der Objektzelle, direkt neben dem
        vorhandenen .dns-zone-copy. Gleiche Maße (11 px) und dasselbe
        Einblendverhalten (Hover auf der Zeile); unterschieden wird über den
        Plus-Marker bzw. das Häkchen im gesammelten Zustand.
     2. .ocb-*         – Topbar-Button mit Zähler und Drop-Down.

   Alle Farben aus den Tokens in base/tokens-reset.css – keine harten Werte,
   damit die Themes (calm/reseller) automatisch greifen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Copy++ in der Objektzelle ─────────────────────────────────────────── */

.dns-zone-clip {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  /* Gleiche Rahmen-Geometrie wie der benachbarte Copy-Button (.dns-zone-copy
     kombiniert mit .crd-copy-btn aus contract-rich.css: 22x22, padding 0,
     radius 5px) – zentral hier für .dns-zone-clip nachgezogen, damit beide
     Buttons in jeder Tabelle gleich groß sind. Das SVG-Icon bleibt bei 11px,
     nur die Klickfläche wächst. */
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  position: relative;
  transition: opacity .12s, color .12s, background .12s;
}
.dns-zone-clip svg { width: 11px; height: 11px; }
tr:hover .dns-zone-clip { opacity: 1; }
.dns-zone-clip:hover {
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb), .08);
}
/* Ring bleibt der Tastatur vorbehalten; der Button muss dafür sichtbar sein. */
.dns-zone-clip:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
}

/* Plus-Marker: unterscheidet Copy++ (sammeln) vom reinen Kopieren. Position
   relativ zum größeren 22px-Rahmen neu berechnet, damit das Zeichen weiterhin
   direkt an der Ecke des (zentrierten) 11px-Icons sitzt statt an der Ecke
   der jetzt größeren Klickfläche. */
.dns-zone-clip::after {
  content: '+';
  position: absolute;
  right: 1.5px;
  bottom: 1.5px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  color: inherit;
}

/* Bereits gesammelt: dauerhaft sichtbar (Zustandsanzeige ohne Hover) und in
   Teal wie die Status-Badges der Familie badge-active. */
.dns-zone-clip.is-in {
  opacity: 1;
  color: var(--badge-teal-text);
}
.dns-zone-clip.is-in::after { content: '✓'; font-size: 8px; }

/* ── 2. Topbar-Button mit Zähler ──────────────────────────────────────────────
   Optik exakt wie die übrigen Topbar-Elemente (`.system-status-btn`,
   `.language-switcher`, `.topbar-env-badge` in layout/app-shell.css):
   Pill mit 36 px Höhe, weiße Glasfläche, `--border-soft`, `--shadow-sm`,
   12,5 px/700. Der gefüllte Zustand übernimmt die Akzent-Tönung des
   Umgebungs-Badges. */

.object-clipboard-wrap { position: relative; }

.object-clipboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  font: 700 12.5px inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.object-clipboard-btn:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}
.object-clipboard-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Gefüllt: gleiche Akzent-Tönung wie `.topbar-env-badge`. */
.object-clipboard-btn.is-filled {
  background: rgba(var(--accent-ui-rgb),0.10);
  border-color: rgba(var(--accent-ui-rgb),0.18);
  color: var(--accent-ui);
}
.object-clipboard-btn[aria-expanded="true"] {
  background: rgba(var(--accent-ui-rgb),0.14);
  border-color: rgba(var(--accent-ui-rgb),0.22);
  color: var(--accent-ui);
}

.object-clipboard-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--badge-neutral-rgb),0.20);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.object-clipboard-btn.is-filled .object-clipboard-count {
  background: rgba(var(--accent-ui-rgb),0.16);
  color: var(--accent-ui);
}

/* Rückmeldung beim Sammeln – ersetzt bewusst einen Toast je Klick. Umgesetzt
   als kurzer Farbumschlag des Zählers über die vorhandene `transition`
   (kein eigenes @keyframes: erlaubt ist projektweit nur `ui-spin`). */
.object-clipboard-btn.is-pulse .object-clipboard-count {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}

/* ── 3. Drop-Down ─────────────────────────────────────────────────────────────
   Rahmen, Radius und Schatten wie das Sprach-Menü (`.language-menu`), damit
   alle Topbar-Overlays gleich aussehen. */

.object-clipboard-dd {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}
.object-clipboard-dd[hidden] { display: none; }

.ocb-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ocb-head-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ocb-head-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ocb-head-spacer { flex: 1; }
/* Leeren: derselbe Button wie in den Listen (`.icon-btn.danger` mit trash-Icon,
   siehe row-actions in pages/list-cells.js). Fläche, Farbe und Hover kommen aus
   components/modal-userpwd.css; lokal nur die Ausrichtung in der Kopfzeile. */
.ocb-clear-btn { align-self: center; }
/* .icon-btn setzt display:flex – hidden muss explizit gewinnen. */
.ocb-clear-btn[hidden] { display: none; }

.ocb-mixed {
  margin: 10px 16px 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--badge-warning-bg);
  border: 1px solid var(--badge-warning-border);
  color: var(--badge-warning-text);
  font-size: 11.5px;
  line-height: 1.45;
}
.ocb-mixed[hidden] { display: none; }

.ocb-groups { max-height: 296px; overflow-y: auto; }

.ocb-group-head {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--text-muted) 6%, white);
  backdrop-filter: blur(8px);
  padding: 7px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ocb-group-count { font-size: 11px; font-weight: 700; color: var(--text-muted); }

.ocb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb),0.12);
}
.ocb-item:hover { background: rgba(var(--accent-ui-rgb),0.04); }
.ocb-item-main { flex: 1; min-width: 0; }
.ocb-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocb-item-id {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
/* Icon-Aktion in der Zeile: gleiche Geometrie wie `.icon-btn`, aber flächenlos
   im Ruhezustand (die Zeile ist bereits eine Liste, kein Karten-Raster). */
.ocb-item-remove {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.ocb-item-remove:hover {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}
.ocb-item-remove svg { width: 13px; height: 13px; }

.ocb-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.ocb-empty[hidden] { display: none; }

.ocb-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text-muted) 4%, white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* Der Fuß trägt nur noch die Übernahme in den Massenauftrag; „Leeren" sitzt als
   Mülltonne (.ocb-clear-btn) rechts in der Kopfzeile. Der Button trägt die
   globalen Klassen (.btn .btn-primary .btn-sm) – keine eigene Geometrie nötig. */


/* ── public/assets/css/components/toast-log.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Meldungs-Historie (Toast-Log)
   ──────────────────────────────────────────────────────────────────────────────
   Glocken-Button in der Topbar mit Panel, das die letzten Toasts der Sitzung
   auflistet (siehe pages/toast-log.js, Mockup documentation/mockups/
   toast-history-bell.html, Variante D).

   Zwei Bausteine:
     1. .toast-log-btn – Icon-Pill, Geometrie wie `.object-clipboard-btn`
        (36 px Höhe, weiße Glasfläche, `--border-soft`, `--shadow-sm`), nur ohne
        Beschriftung. Zähler-Badge oben rechts für ungelesene Meldungen.
     2. .tl-*         – Panel mit Kopf, Liste und Fuß; Rahmen, Radius und
        Schatten wie `.object-clipboard-dd`, damit alle Topbar-Overlays gleich
        aussehen.

   Die Typfarben sind bewusst identisch zu den Toast-Typen in
   components/feedback.css (dort ebenfalls als Hex-Literale, weil es
   Feedback-Semantik und keine Theme-Farben sind): success #16a34a,
   error #dc2626, warning #d97706, pending #ea580c, info #2563eb.
   Voll gesättigt bleiben Balken und Icon; die Zeilenfläche trägt nur eine
   abgeblasste Tönung derselben Farbe.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Topbar-Button ─────────────────────────────────────────────────────── */

.toast-log-wrap { position: relative; }

.toast-log-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.toast-log-btn:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}
.toast-log-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast-log-btn[aria-expanded="true"] {
  background: rgba(var(--accent-ui-rgb),0.14);
  border-color: rgba(var(--accent-ui-rgb),0.22);
  color: var(--accent-ui);
}

/* Zähler der ungelesenen Meldungen. Die Farbe folgt der höchsten Schwere im
   ungelesenen Bestand (Klasse wird in toast-log.js gesetzt). */
.toast-log-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.toast-log-badge[hidden] { display: none; }
.toast-log-badge--warning { background: #d97706; }
.toast-log-badge--pending { background: #ea580c; }
.toast-log-badge--success { background: #16a34a; }
.toast-log-badge--info    { background: #2563eb; }

/* ── 2. Panel ─────────────────────────────────────────────────────────────── */

.toast-log-dd {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}
.toast-log-dd[hidden] { display: none; }

.tl-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tl-head-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tl-head-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.tl-head-spacer { flex: 1; }
/* Löschen im Kopf: derselbe Button wie in den Listen (`.icon-btn.danger` mit
   trash-Icon, siehe row-actions in pages/list-cells.js) – Fläche, Farbe und
   Hover kommen vollständig aus components/modal-userpwd.css. Lokal nur die
   hidden-Regel, weil `.icon-btn` display:flex setzt. */
.tl-clear-btn { align-self: center; }
.tl-clear-btn[hidden] { display: none; }

.tl-list { max-height: 420px; overflow-y: auto; }

.tl-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.tl-empty[hidden] { display: none; }

/* ── 3. Eintrag ───────────────────────────────────────────────────────────── */

.tl-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb),0.14);
  border-left: 4px solid transparent;
}
/* Trenner nur zwischen Zeilen: am Listenende hätte er kein Gegenüber und lief
   als freie Linie am Rand der Box entlang. */
.tl-row:last-child { border-bottom: none; }
.tl-row--success { border-left-color: #16a34a; background: rgba(22,163,74,0.045); }
.tl-row--error   { border-left-color: #dc2626; background: rgba(220,38,38,0.05); }
.tl-row--warning { border-left-color: #d97706; background: rgba(217,119,6,0.05); }
.tl-row--pending { border-left-color: #ea580c; background: rgba(234,88,12,0.05); }
.tl-row--info    { border-left-color: #2563eb; background: rgba(37,99,235,0.045); }

.tl-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-ico svg { width: 13px; height: 13px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-row--success .tl-ico svg { stroke: #16a34a; }
.tl-row--error   .tl-ico svg { stroke: #dc2626; }
.tl-row--warning .tl-ico svg { stroke: #d97706; }
.tl-row--pending .tl-ico svg { stroke: #ea580c; }
.tl-row--info    .tl-ico svg { stroke: #2563eb; }

.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 12.5px; font-weight: 800; color: var(--text-primary); line-height: 1.4; }
.tl-msg   { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 5px; }

.tl-time {
  flex-shrink: 0;
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Objekt-Zeile: Entity-Icon + Kennung der Meldung (toast-log.js
   ENTITY_TYPES) direkt unter dem Titel. Reine Anzeige, kein Link. */
.tl-ent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 1px;
  color: var(--text-secondary);
}
.tl-ent-ico { flex-shrink: 0; display: flex; color: var(--text-muted); }
.tl-ent-ico svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-ent-name {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* detail/note wie im Toast: Akzentleiste bzw. Info-Zeilen (feedback.css). */
.tl-detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 6px;
  padding: 2px 0 2px 9px;
  border-left: 2px solid rgba(15,23,42,0.16);
}
.tl-note { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.tl-note-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 8px;
}
.tl-note-ico { flex-shrink: 0; display: flex; margin-top: 1px; color: var(--text-muted); }
.tl-note-ico svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tl-note-item-text { flex: 1; }

/* Aufklapp-Schalter für detail/note – hält die Zeile unabhängig von der
   Nutzlast kompakt; der Chip folgt der Standard-Chip-Höhe (~21 px wie die
   Typ-Badges). */
.tl-extra > summary { list-style: none; cursor: pointer; }
.tl-extra > summary::-webkit-details-marker { display: none; }
.tl-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.75);
  /* Einzel-Properties statt font-Shorthand: `font: 800 10.5px inherit` war
     ungültig (Shorthand verlangt eine Font-Family) und wurde komplett
     verworfen – der Chip lief mit geerbten 14px. */
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-secondary);
}
.tl-more svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; transition: transform 0.18s; }
.tl-extra[open] .tl-more svg { transform: rotate(180deg); }


/* ── public/assets/css/components/ui-modal.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   ui-modal – zentrale Modal-Schale
   ──────────────────────────────────────────────────────────────────────────────
   Ersetzt die zuvor viermal identisch inline aufgebaute Modal-Struktur
   (`domain-detail.js` 3×, `overlays.js` 1×): Overlay, Karte, Farbstreifen,
   Kopfzeile mit Icon-Kachel, Body und Fuß.

   Farbvariante über einen Modifier an `.ui-modal-box`:
     (Standard) Akzent  ·  `.ui-modal-box--warn` Amber/Warnung
   Streifen, Kopfzeilen-Tönung und Icon-Kachel lesen nur die beiden lokalen
   Variablen `--uim-tone-*`, dadurch genügt ein Modifier je Modal.

   Alle Werte aus den Tokens in base/tokens-reset.css.
   ══════════════════════════════════════════════════════════════════════════════ */

.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ui-modal-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  max-height: 88vh;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 32px 64px rgba(15, 23, 42, .16);

  --uim-tone-rgb: var(--accent-ui-rgb);
  --uim-tone-grad: var(--grad-primary);
  --uim-tone-stripe: linear-gradient(90deg, var(--accent-ui-alt), var(--accent-ui-light) 60%, var(--color-purple-600));
}
.ui-modal-box--warn {
  --uim-tone-rgb: var(--badge-warning-rgb);
  --uim-tone-grad: linear-gradient(135deg, var(--color-amber), var(--color-amber-e));
  --uim-tone-stripe: linear-gradient(90deg, var(--color-amber), var(--color-amber-e) 60%, var(--color-danger));
}

.ui-modal-stripe {
  height: 3px;
  flex-shrink: 0;
  background: var(--uim-tone-stripe);
}

.ui-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb), .15);
  background: linear-gradient(135deg, rgba(var(--uim-tone-rgb), .06) 0%, rgba(var(--uim-tone-rgb), .04) 50%, transparent 100%);
}
.ui-modal-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }

.ui-modal-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--uim-tone-grad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--uim-tone-rgb), .35);
}

.ui-modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.ui-modal-sub   { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.ui-modal-body { padding: 20px 24px; overflow-y: auto; }
.ui-modal-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Typ-Kennzeichnung über dem Text (z. B. „E-Mail“ / „Name“). */
.ui-modal-tags { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.ui-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--badge-info-bg);
  color: var(--badge-info-text);
}
.ui-modal-tag--ok    { background: var(--badge-teal-bg);    color: var(--badge-teal-text); }
.ui-modal-tag--warn  { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.ui-modal-tag--bad   { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.ui-modal-tag--muted { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* Beschriftete Wertzeile im Body (Freigabe-Details). */
.ui-modal-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  align-items: start;
}
.ui-modal-row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 2px;
}
.ui-modal-row-value { font-size: 13px; color: var(--text-primary); word-break: break-word; }

/* Feldgruppe im Body. */
.ui-modal-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

.ui-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid rgba(var(--badge-neutral-rgb), .12);
}


/* ── public/assets/css/components/type-check.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   ui-type-check – Auswahlanzeige für Typ-Kacheln („Radio"-Punkt mit Haken)
   ──────────────────────────────────────────────────────────────────────────────
   Ersetzt drei auseinandergelaufene Fassungen desselben Elements:
     · `.zone-type-radio`  (DNS-Zone anlegen, Domain-Transfer, Bulk-Auftrag)
       – Kreis ohne Icon, der Haken wurde als gedrehtes `::after`-Rechteck
         gezeichnet und saß dadurch leicht außermittig.
     · `.bo-tile-check`    (Massenauftrag, Auftragsart) – Kreis mit SVG-Haken,
       9px, per `display:none` geschaltet.
     · `.sslc-tile-check`  (SSL erstellen, Produktkachel) – 18px, gefüllt statt
       umrandet, Einblendung über opacity/scale.

   Einheitlich: 16px Kreis, 2px Rand, im aktiven Zustand in der Akzentfarbe
   gefüllt, darin ein zentrierter SVG-Haken.

   Der Zustand kommt weiterhin von der Kachel, weil die jeweiligen Module ihre
   eigene Zustandsklasse setzen (`.active` / `.selected` / `.is-active`). Die
   drei Selektoren stehen deshalb hier zusammen – so bleibt die Optik an einer
   Stelle, auch wenn die Auslöser unterschiedlich heißen.
   ══════════════════════════════════════════════════════════════════════════════ */

.ui-type-check {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
  /* line-height:0 verhindert, dass die Zeilenbox des Inline-SVG den Kreis
     vertikal um einen Subpixel verschiebt. */
  line-height: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, background-color .18s ease, opacity .15s ease;
}

/* Der Haken ist immer im Markup, aber erst im aktiven Zustand sichtbar.
   Wichtig: dafür das Icon `check` verwenden, nicht `check-alt`. `check-alt`
   liegt im 24er-viewBox bei x 9–22 / y 4–14, sein optischer Mittelpunkt sitzt
   also 3,5 Einheiten rechts und 3 über der Mitte – im Kreis wirkte der Haken
   dadurch nach rechts oben verschoben. `check` (x 4–20, y 6–17) ist mittig. */
.ui-type-check svg {
  /* 10px im 12px-Innenraum (16px minus 2x2px Rand) lässt links wie rechts
     glatte 1px – bei 9px blieben 1,5px, die je nach Subpixel-Position der
     Kachel mal auf 1, mal auf 2px gerundet wurden. Genau daher kam der
     1px-Versatz, der je nach Seite unterschiedlich ausfiel. */
  width: 10px;
  height: 10px;
  display: block;
  opacity: 0;
  transition: opacity .15s ease;
}

.zone-type-card.active .ui-type-check,
.bo-tile.selected .ui-type-check,
.sslc-tile.is-active .ui-type-check {
  border-color: var(--accent-ui);
  background: var(--accent-ui);
}
.zone-type-card.active .ui-type-check svg,
.bo-tile.selected .ui-type-check svg,
.sslc-tile.is-active .ui-type-check svg {
  opacity: 1;
}

/* Gefahren-Auftragsarten (Löschen/Release) im Massenauftrag. */
.bo-tile.danger.selected .ui-type-check {
  border-color: var(--color-danger);
  background: var(--color-danger);
}


/* ── public/assets/css/components/modal-userpwd.css ── */
/* ── UserPwdModal ──
   `.upm-opt` ist ein Segmented Control (Auswahl „Passwort eingeben“ /
   „Automatisch vergeben“). Zustandsklasse ist – wie bei allen Segmented
   Controls und Tabs – `.active` (Kap. 8: nur Chips nutzen `.is-active`).
   Ruhe-/Hover-/Aktiv-Optik folgt dem dokumentierten Muster der weiß-
   transparenten Gruppe: Fläche .06 im Hover, .09 aktiv, Rand .22, Text
   Akzentfarbe – alles aus `--accent-ui-rgb`, damit die Themes greifen. */
.upm-options {
  display: flex;
  gap: 8px;
}
.upm-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.upm-opt svg { width: 16px; height: 16px; flex-shrink: 0; }
.upm-opt:hover {
  border-color: rgba(var(--accent-ui-rgb), .30);
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb), .06);
}
.upm-opt.active {
  border-color: rgba(var(--accent-ui-rgb), .22);
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb), .09);
}
.upm-auto-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--badge-info-bg);
  border: 1px solid var(--badge-info-border);
  color: var(--badge-info-text);
  font-size: 12.5px;
  line-height: 1.5;
}
.upm-auto-info svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.upm-error-msg {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--badge-danger-bg);
  color: var(--color-danger);
  font-size: 12.5px;
}
/* Panel-weiter Fehlertext (Ladefehler in Host-/Benachrichtigungs-Panels).
   Ersetzt vier Inline-Kopien von `color:#b91c1c` in account-panels.js. */
.acp-load-error {
  padding: 16px;
  color: var(--color-danger);
  font-size: 13px;
}
.acp-load-error--center { padding: 24px; text-align: center; }
.csd-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.csd-input:focus { border-color: var(--accent); }
.inline-add-input-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cdw-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.contact-name-cell { display:flex; flex-direction:column; gap:4px; }
.contact-name-row { display:flex; align-items:flex-start; gap:3px; flex-wrap:wrap; }
.contact-name-primary { font-size:12.5px; font-weight:600; color:var(--text-primary); }
.contact-name-secondary { font-size:12.5px; color:var(--text-muted); }
.contact-city-pill {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(var(--text-muted-rgb),.10);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.contact-disclosure-icon {
  width: 13px;
  height: 13px;
  color: #0d9488;
  opacity: .92;
  margin-top: -2px;
  margin-left: 5px;
  flex-shrink: 0;
}

.row-actions,
.records-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.row-actions--center { justify-content: center; }
.domain-table td.align-center { text-align: center !important; }

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(var(--text-muted-rgb),0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.18s;
  text-decoration: none;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.95);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15,23,42,0.10);
}
.icon-btn svg { width: 13px; height: 13px; }
/* Akzent-Variante: getönte Fläche aus der Theme-Palette (statt Inline-Styles). */
.icon-btn--accent {
  background: rgba(var(--accent-ui-light-rgb),.12);
  border-color: rgba(var(--accent-ui-light-rgb),.18);
  color: var(--accent-ui);
}
.icon-btn--accent:hover {
  background: rgba(var(--accent-ui-light-rgb),.20);
  color: var(--accent-ui);
}
.icon-btn.danger { color: var(--text-muted); }
.icon-btn.danger:hover { color: #E11D48; border-color: rgba(225,29,72,0.20); background: rgba(225,29,72,0.06); transform: none; box-shadow: none; }

.records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.record-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--accent-blue);
}

/* Toggle styles → see domain section below */

.danger-zone {
  border-color: rgba(220,38,38,0.18);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.permission-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--border-soft);
}

.permission-title {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 12px;
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.permission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.20s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

/* Größenvarianten. `.btn-sm` war in Kap. 7 dokumentiert und an ~30 Stellen im
   Markup verwendet, aber nirgends definiert – die Buttons blieben dadurch in
   Standardgröße. `.btn-xs` ersetzt die zuvor inline gesetzten Miniaturgrößen
   (`padding:5px 10px;font-size:11px`) in account-panels.js. */
.btn-sm {
  padding: 7px 13px;
  font-size: 12.5px;
  border-radius: 9px;
}
.btn-sm svg { width: 13px; height: 13px; }
.btn-xs {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 8px;
  gap: 5px;
}
.btn-xs svg { width: 12px; height: 12px; }

.btn-ghost {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--text-muted-rgb),0.20);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.95);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

/* Akzent-Variante: getönte Fläche aus der Theme-Palette (leichter als
   `.btn-primary`, für sekundäre Aktionen in Listen und Karten). */
.btn-accent {
  background: rgba(var(--accent-ui-light-rgb),.12);
  border: 1px solid rgba(var(--accent-ui-light-rgb),.18);
  color: var(--accent-ui);
}
.btn-accent:hover {
  background: rgba(var(--accent-ui-light-rgb),.20);
  color: var(--accent-ui-strong);
}

.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-ui-rgb),0.30);
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(var(--accent-ui-rgb),0.42);
  transform: translateY(-1px);
}
.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220,38,38,0.30);
}
.btn-danger:hover {
  box-shadow: 0 6px 20px rgba(220,38,38,0.42);
  transform: translateY(-1px);
}
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245,158,11,0.30);
}
.btn-warning:hover {
  box-shadow: 0 6px 20px rgba(245,158,11,0.42);
  transform: translateY(-1px);
}

/* ── Special-Buttons für neue Funktionen (Kap. 7, „Special-Buttons";
      Entwurf: documentation/mockups/btn-feature-varianten.html, V2 + V4).
      Farben ausschließlich über die --accent-ui*-Tokens – die Themes
      restylen beide Varianten automatisch. Auffälligkeit ohne eigene
      @keyframes (Kap.-14-Verbot). ── */

/* V2 „NEU-Satellit": leiser Accent-Chip, das Eck-Badge (s. u.) macht die
   Arbeit. overflow: visible weicht bewusst von der .btn-Basis ab, damit
   das Badge über die Ecke ragen darf. */
.btn-special-neu {
  background: rgba(var(--accent-ui-rgb),.08);
  color: var(--accent-ui-strong);
  border: 1px solid rgba(var(--accent-ui-rgb),.28);
  overflow: visible;
}
.btn-special-neu:hover {
  background: rgba(var(--accent-ui-rgb),.13);
  transform: translateY(-1px);
}

/* Eck-Badge – variantenunabhängig, deklarativ über page_actions
   ("badge": "<i18n-Key>", s. layout/app.php); funktioniert auf jedem .btn,
   dessen Variante overflow: visible setzt. */
.btn-feature-badge {
  position: absolute; top: -8px; right: -5px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-ui); color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-ui-rgb),.45), 0 0 0 2px rgba(255,255,255,.85);
}

/* V4 „Lichtstreif": satte Accent-Fläche mit diagonalem Glanzstreif, der
   beim Hover per background-position-Transition über den Button wandert. */
.btn-special-streif {
  background:
    linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.05) 54%, transparent 68%),
    linear-gradient(135deg, var(--accent-ui-deep) 0%, var(--accent-ui) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--accent-ui-rgb),.34);
  transition: background-position .55s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-special-streif:hover {
  background-position: 0 0, 0 0;
  box-shadow: 0 6px 22px rgba(var(--accent-ui-rgb),.46);
  transform: translateY(-1px);
}

/* Spinner-State für Buttons – Standard für alle .btn-Elemente.
   Verwendung: btn.classList.add('btn-loading') / remove('btn-loading')
   Kein HTML-Eingriff nötig: Text + Icons werden transparent,
   zentrierter CSS-Spinner via ::after */
.btn.btn-loading {
  color: transparent !important;
  /* Safari: bei disabled-Buttons erzwingt die UA-Textfarbe sonst weiterhin
     sichtbaren Text (Spinner läge über dem Label) */
  -webkit-text-fill-color: transparent !important;
  /* Sofort ausblenden: die .btn-Transition (all .2s) würde color sonst nur
     langsam ausfaden – Safari friert beim Form-Submit mitten im Fade ein und
     zeigt Text und Spinner übereinander. */
  transition: none;
  pointer-events: none;
  opacity: 1 !important; /* Standard: Buttons im Spinner-/Ladezustand nie muten */
}
/* Kind-Elemente (Label-Spans, Icons) zusätzlich ausblenden – robust gegen
   Browser, die color nicht zuverlässig auf Kinder vererben */
.btn.btn-loading > * {
  visibility: hidden;
}
.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
}
.fb-modal-btn.btn-loading {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  pointer-events: none;
  position: relative;
}
.fb-modal-btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
}

.domain-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.domain-table--history {
  table-layout: fixed;
}

.domain-table th,
.domain-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.12);
  font-size: 13.5px;
}

.domain-table th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Letzte Spalte: mehr Abstand zum rechten Rand – gilt für alle Tabellen */
.domain-table th:last-child,
.domain-table td:last-child {
  padding-right: 24px;
}
/* Erste Spalte: Abstand zum linken Rand passend zur Toolbar */
.domain-table th:first-child,
.domain-table td:first-child {
  padding-left: 24px;
}

.domain-table tbody tr {
  transition: background 0.12s ease;
}
.domain-table tbody tr:hover td {
  background: rgba(var(--accent-ui-rgb),0.028);
}
.domain-table tbody .txn-step-row:hover td,
.domain-table tbody .txn-step-detail-row:hover td,
.domain-table tbody .record-detail-row:hover td { background: inherit; }

/* Aktions-Chips (.badge-action) sind ausgenommen: Link-Chips wie der
   Forecast- oder der Alias-Sprung-Chip färben sich über ihre eigenen
   Badge-Tokens; diese Regel würde sie sonst per Spezifität überstimmen. */
.domain-table a:not(.badge-action) {
  color: var(--accent-ui);
  text-decoration: none;
  font-weight: 700;
}

.json-form {
  width: 100%;
}

.login-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: min(520px, 100%);
  position: relative;
  overflow: hidden; /* clips .login-progress exakt auf die Card-Grenze */
}



/* ── public/assets/css/components/account-panels.css ── */
/* ══════════════════════════════════════════════════════════════════════
   Account-Panels (.acp-*)  –  gemeinsame Bausteine der Overlay-Panels
   in public/assets/js/pages/account-panels.js:
     UserCreatePanel · UserAliasCreatePanel ·
     UserEditPanel · UserAliasEditPanel

   Vorher lagen diese Regeln als vier per JavaScript injizierte
   <style>-Blöcke im Modul (`_injectStyles()`), mit rund 30 hartcodierten
   Farbliteralen. Zwei der Blöcke definierten dieselbe Klasse
   `.ucp-toggle-slider` mit unterschiedlichen Werten – wer zuletzt
   injizierte, gewann, das Aussehen hing also davon ab, welches Panel in
   der Sitzung zuerst geöffnet wurde. Beim Zusammenführen entfielen
   zusätzlich mehrere nie verwendete Regeln (Badge-, Select- und
   Tab-Operations-Varianten).

   Die Modal-Hülle selbst kommt unverändert aus der System-Chrome
   `.csm-*`; hier stehen nur die Panel-Innereien.

   Slate-200/-300 haben keine eigenen Tokens; beide werden aus dem
   neutralen Badge-Grundton abgeleitet (`--badge-neutral-rgb`), damit
   Fläche und Rand aus derselben Quelle kommen.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tab-Leiste ── */
.acp-tabs {
  display: flex;
  gap: 3px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.acp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  transition: color .15s;
  font-family: inherit;
}
.acp-tab:hover {
  color: var(--text-secondary);
  background: rgba(var(--badge-neutral-rgb), .07);
}
.acp-tab.active {
  color: var(--accent-ui);
  border-bottom-color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb), .04);
}
.acp-tab svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ── Tab-Inhalte ── */
.acp-panel { display: none; }
.acp-panel.active { display: block; }

/* ── Abschnitts-Karte ── */
.acp-sec {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255,255,255,.6);
}
.acp-sec-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Formularfelder ──
   Bewusst eigene, kompaktere Optik als die Seitenformulare
   (.field-input, app-shell.css): die Panels sind schmale Overlays. */
.acp-field { display: flex; flex-direction: column; gap: 5px; }
.acp-label { font-size: 12px; font-weight: 700; color: var(--color-muted-2); }

/* Anzeige eines vom Backend einmalig gelieferten Werts (%%AUTO%%-Passwort,
   PanelBase.showSecret). Rahmen, Radius und Typografie kommen komplett von
   .acp-tile/.acp-label/.acp-val--mono – identisch zu den Wertefeldern im
   DNSSEC-Eintrag-Modal (DnssecViewPanel). Hier wird nur die Wertzeile um den
   Kopier-Button ergänzt. */
.pb-secret-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pb-secret-row .acp-val { flex: 1 1 auto; min-width: 0; }
/* Einmalig angezeigter Wert: 13px statt der 12px der Detail-Tiles – innerhalb
   der Typografie-Vorgabe für Monospace (12–14px, Weight 400) und lesbarer, da
   der Wert nur einmal erscheint und abgeschrieben/kopiert werden muss. */
.pb-secret-row .acp-val--mono { font-size: 13px; font-weight: 400; }

/* Pflicht-Bestätigung unter dem Wert (PanelBase.showSecret): Toggle links,
   Text daneben, ganze Zeile klickbar. Bewusst ohne Rahmen/Hintergrund – die
   Settings-Zeile .acp-tr wäre direkt unter dem Wert-Feld zu schwer. Schrift
   wie .upm-auto-info (12.5px), damit sie sich der Modal-Typografie einordnet
   und nicht mit der Feld-Beschriftung .acp-label konkurriert. */
.pb-secret-ack {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
.pb-secret-ack-txt {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Sicherheitsnetz: Landet die Ergebnis-Ansicht in einem noch zweispaltigen
   Body (.acp-split, z. B. „Benutzer erstellen“), stehen Wert und Bestätigung
   trotzdem untereinander statt nebeneinander. */
.acp-split > .pb-secret,
.acp-split > .pb-secret-ack { grid-column: 1 / -1; }
.acp-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(var(--badge-neutral-rgb), .35);
  background: #fff;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.acp-input:focus {
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb), .1);
}
.acp-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.acp-hint--block { display: block; margin-top: 3px; }

/* Eingabefeld-Varianten (ersetzen die JS-Konstanten INP_MONO / INP_RO und die
   Inline-Variante des Passwortfelds). */
.acp-input--mono { font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace; }
.acp-input--ro {
  background: rgba(var(--badge-neutral-rgb), .10);
  color: var(--text-secondary);
  font-weight: 600;
}
/* Platz für den Sichtbarkeits-Toggle (.pwd-eye) rechts im Feld. */
.acp-input--pwd { padding-right: 42px; }

/* Pflichtfeld-Markierung am Label. */
.acp-req { color: var(--color-danger); }

/* ── Layout-Bausteine der Panels ──────────────────────────────────────
   Ersetzen die zuvor inline gesetzten Flex-/Grid-Container. */
.acp-col   { display: flex; flex-direction: column; gap: 14px; }
.acp-col--pb { padding-bottom: 4px; }
.acp-cols  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .acp-cols { grid-template-columns: 1fr; } }
.acp-row   { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acp-stack { display: flex; flex-direction: column; gap: 8px; }
.acp-full  { width: 100%; }

/* Kreis-Platzhalter (leere Kontaktkarte) und Kurztexte. */
.acp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--badge-neutral-rgb), .10);
  color: var(--text-muted);
  flex-shrink: 0;
}
.acp-strong { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.acp-empty  { padding: 8px 0; color: var(--text-muted); font-size: 13px; }
.acp-mono   { font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace; }

/* Panel-Kopfzeile innerhalb einer Karte. */
.acp-hdr {
  padding: 12px 14px 9px;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb), .16);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ladezustand: Text + Spinner. Der Spinner nutzt die zentrale ui-spin-Animation
   (Kap. 7) – projektweit die einzige erlaubte @keyframes-Regel. */
.acp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.acp-loading--sm { padding: 24px 0; }
.acp-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--badge-neutral-rgb), .35);
  border-top-color: var(--accent-ui);
  border-radius: 50%;
  display: inline-block;
  animation: ui-spin .7s linear infinite;
}

/* Wert-Kachel im Zusammenfassungs-Raster. */
.acp-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--badge-neutral-rgb), .16);
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  min-width: 0;
}
.acp-tile--wide { grid-column: 1 / -1; gap: 6px; padding: 12px 14px; }
.acp-val { font-size: 13px; color: var(--text-primary); }
.acp-val--mono { font-family: var(--font-mono); word-break: break-all; font-size: 12px; }

/* Mehrzeiliger Wert (Betreff/Nachricht in der Benachrichtigungs-Ansicht). */
.acp-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.acp-text--mono {
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Code-/Schlüsselwert (DNSSEC-Key, Handle). */
.acp-code {
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .04em;
}

/* Mehrzeiliges Eingabefeld. */
.acp-textarea { resize: vertical; min-height: 80px; }

/* Eingabegruppe mit festem Präfix (z. B. „ns.“ vor dem Hostnamen). */
.acp-ig { display: flex; align-items: center; }
.acp-ig-prefix {
  padding: 9px 10px 9px 12px;
  border: 1.5px solid var(--border-soft);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: rgba(var(--badge-neutral-rgb), .10);
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.acp-ig-input { flex: 1; min-width: 0; border-radius: 0 8px 8px 0; }

/* Akzent-getönte Hinweiszeile / Chip. */
.acp-accent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-ui-rgb), .05);
  border: 1px solid rgba(var(--accent-ui-rgb), .14);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.acp-accent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(var(--accent-ui-rgb), .08);
  border: 1px solid rgba(var(--accent-ui-rgb), .18);
  color: var(--accent-ui);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* Platzhalter-Fläche „noch nichts ausgewählt“. */
.acp-drop {
  border: 1.5px dashed rgba(var(--badge-neutral-rgb), .34);
  background: rgba(var(--badge-neutral-rgb), .06);
  border-radius: 13px;
  padding: 20px 16px;
}
.acp-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 6px 0 2px;
}

/* Zweispaltiges Panel-Layout (Formular + Vorschau). */
.acp-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}
.acp-split--wide { grid-template-columns: 1.2fr .8fr; gap: 18px; padding-bottom: 4px; }
@media (max-width: 860px) {
  .acp-split, .acp-split--wide { grid-template-columns: 1fr; }
}

/* ── Info-Kasten (Hinweis mit Icon) ──────────────────────────────────
   Ersetzt vier identische Inline-Style-Kopien in account-panels.js
   (Auto-Passwort-Hinweise in „Benutzer erstellen“/„Benutzerkonto
   erstellen“ und die Hinweise in Panels ohne eigene Klasse). Farben
   aus den --badge-info-*-Tokens, damit die Themes greifen. */
.acp-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--badge-info-bg);
  border: 1px solid var(--badge-info-border);
  color: var(--badge-info-text);
  font-size: 12px;
  line-height: 1.55;
  box-sizing: border-box;
}
.acp-note--full { width: 100%; }
.acp-note svg { flex-shrink: 0; }

/* ── Schalter-Zeile (Label + Toggle) ── */
.acp-tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-bg-2);
  border-radius: 8px;
  border: 1px solid rgba(var(--badge-neutral-rgb), .35);
  gap: 12px;
}
.acp-tr-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.acp-tr-sub { font-size: 11px; color: var(--color-muted-2); margin-top: 1px; }

/* ── Rechte-Matrix (Ressourcen x Aktionen) ──
   `table-layout: fixed`: Nur die Gruppen-Spalte bekommt eine feste Breite,
   alle Aktions-Spalten teilen sich den Rest exakt gleichmäßig – unabhängig
   davon, wie viele es sind (ACT in account-panels.js) und wie lang die
   einzelnen Kopftexte sind. Mit Auto-Layout war das nicht zu erreichen: dort
   richten sich die Breiten nach dem Inhalt, wodurch CREATE breit wurde und
   die Gruppen-Spalte zusammenfiel.
   `min-width` fängt sehr schmale Ansichten ab, damit die Kopftexte
   (längster: TRANSFER) nicht beschnitten werden; darunter scrollt der
   umgebende Wrapper. Die Panels selbst sind mit 860–940px deutlich breiter,
   im Normalfall greift die Grenze also nicht. */
.acp-rt {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}
.acp-rt th {
  padding: 7px 6px 6px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-muted-2);
  font-size: 9.5px;
  border-bottom: 2px solid rgba(var(--badge-neutral-rgb), .35);
  white-space: nowrap;
}
.acp-rt th.rh { text-align: left; padding-left: 12px; width: 120px; }

.acp-rt td {
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb), .18);
}
/* Zeilenunterscheidung wie in allen übrigen Tabellen des Systems: Trennlinie
   plus Hover-Tönung (vgl. .domain-table, .bulk2-table, .ta-table). Zuvor stand
   hier eine Zebra-Streifung – projektweit der einzige Fall, und sie machte den
   Untergrund der Zellen uneinheitlich, was mit überlagerten Zustandsklassen
   wie .ui-unavailable schlecht zusammenging. */
.acp-rt tbody tr:hover td { background-color: rgba(var(--accent-ui-rgb), .03); }
.acp-rt td:first-child {
  text-align: left;
  padding-left: 12px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
}
.acp-rt input[type=checkbox] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent-ui);
}

/* Für Rechte, die der Elternbenutzer eines Alias nicht hat, setzt
   _muteByParent() (account-panels.js) die zentrale Klasse `.ui-unavailable`
   auf die Zelle – Definition in components/state-unavailable.css. */

.acp-rdot { display: inline-flex; align-items: center; gap: 7px; }
.acp-rdot-c { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Toggle-Schalter (.ui-toggle)
   Erwartetes Markup:
     <label class="ui-toggle">
       <input type="checkbox"><span class="ui-toggle-slider"></span>
     </label>
   ══════════════════════════════════════════════════════════════════════ */
.ui-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
}
.ui-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ui-toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: rgba(var(--badge-neutral-rgb), .55);
  border-radius: 999px;
  transition: background .2s;
}
.ui-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
input:checked + .ui-toggle-slider { background: var(--accent-ui); }
input:checked + .ui-toggle-slider::before { transform: translateX(16px); }

/* ── DnssecResetPanel: Warnhinweis der destruktiven Aktion ─────────────────
   Farben über die Danger-Badge-Tokens (folgen den Themes, dev.md Kap. 7). */
.dsrp-warn {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--badge-danger-bg);
  border: 1px solid var(--badge-danger-border);
  color: var(--badge-danger-text);
  font-size: 12.5px;
  line-height: 1.45;
}
.dsrp-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }


/* ── public/assets/css/components/misc-nav.css ── */
/* ── Login-Ladebalken (indeterminate, oben an der Card beim Anmelden) ───── */
.login-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: color-mix(in srgb, var(--accent-ui) 12%, transparent);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  z-index: 2;
}
.login-card.is-loading .login-progress {
  opacity: 1;
}
.login-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-ui), transparent);
  animation: login-progress-slide 1.05s ease-in-out infinite;
}
@keyframes login-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.login-submit-btn[disabled] {
  cursor: progress;
  opacity: 0.85;
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
}

.error-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-ui);
  font-size: 12px;
  font-weight: 700;
}

.error-state h2 {
  font-size: 28px;
  font-weight: 900;
}

.error-state p,
.error-message,
.error-route {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .kpi-row-3,
  .summary-list,
  .form-grid,
  .split-layout,
  .permission-grid {
    grid-template-columns: 1fr;
  }

  .language-menu {
    left: 0;
    right: auto;
  }
}
.login-card-body {
  padding: 32px;
}

.login-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.login-language-switcher {
  margin-left: auto;
  align-self: flex-start;
}

.login-language-switcher .language-switcher {
  min-width: 74px;
  height: 36px;
}

.login-language-switcher .language-switcher-icon {
  font-size: 13px;
  line-height: 1;
}

.login-language-switcher .language-menu {
  right: 0;
  left: auto;
  top: calc(100% + 10px);
  min-width: 182px;
}

.login-title {
  font-size: 22px;
}

.login-subtitle {
  margin-top: 6px;
}

.login-form {
  margin-top: 0;
}

.login-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.login-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-forgot-link {
  margin-top: 0;
}

.login-submit-row {
  margin-top: 22px;
}

.login-submit-btn {
  width: 100%;
  justify-content: center;
}

.login-status-list {
  margin-top: 18px;
}

.two-factor-field {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
}

.two-factor-field.is-visible {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

.token-inputs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
  padding: 3px 4px 3px 4px;
}

.token-digit-input {
  width: 100%;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.78);
  border-radius: 12px;
  padding: 11px 0;
  text-align: center;
  font: 700 18px/1 inherit;
  color: var(--text-primary);
}

.token-digit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-ui-rgb),0.32);
  box-shadow: 0 0 0 4px rgba(var(--accent-ui-rgb),0.10);
}

.auth-error {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.16);
}

.auth-error-title {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 800;
}

.auth-error-copy,
.auth-error-detail {
  margin-top: 6px;
  color: #7f1d1d;
  font-size: 12.5px;
  line-height: 1.5;
}

.sidebar-inner {
  flex: 1;
}

.nav-icon-mono {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-icon-mono svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

.nav-item.active .nav-icon-mono,
.nav-sub-item.active .nav-icon-mono {
  opacity: 1;
}

.nav-item,
.nav-sub-item {
  gap: 10px;
}

.sidebar-account {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-account-top {
  margin-top: 8px;
  margin-bottom: 14px;
  padding-top: 0;
  border-top: none;
  padding-bottom: 14px;
}

@media (max-height: 860px) {
  .sidebar-account {
    padding-top: 12px;
  }
}

@media (max-height: 760px) {
  .sidebar-account {
    padding-top: 8px;
  }
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  background: transparent;
  cursor: default;
}

.user-card:hover {
  background: transparent;
}

.avatar {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--accent-ui-rgb),0.30);
}

.user-info {
  min-width: 0;
  flex: 1;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
}

.user-role {
  color: var(--text-muted);
  font-size: 11px;
}

.sidebar-more-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-more-dots {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.sidebar-more-dots span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.sidebar-account-menu {
  top: calc(100% + 10px);
  bottom: auto;
  /* Linke Kante am Drei-Punkte-Knopf statt rechtsbündig: der Wrapper ist genau
     so breit wie der Knopf, deshalb reicht das Umdrehen der Ausrichtung. Das
     Menü klappt dadurch nach rechts auf, statt die Benutzerkarte zu verdecken. */
  left: 0;
  right: auto;
  min-width: 236px;
}

.sidebar-account-menu.opens-up {
  top: auto;
  bottom: calc(100% + 10px);
}

/* Button-Variante der Menüeinträge an die <a>-Optik angleichen */
.sidebar-account-menu button.language-option {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

/* Hover-Hintergrund wie bei den <a>-Einträgen (spezifischer als die
   transparent-Regel oben, sonst greift nur die Textfarbe) */
.sidebar-account-menu button.language-option:hover {
  background: rgba(var(--accent-ui-rgb),0.10);
}

/* Kein Zeilenumbruch der Menütexte */
.sidebar-account-menu .language-option span {
  white-space: nowrap;
}

/* Farbschema-Auswahl: flache Felder direkt unter der Benutzerkarte. Bewusst
   ohne Menü davor, damit die Auswahl mit einem Klick erreichbar ist. Jedes
   Feld zeigt die Leitfarbe seines Themes. */
.theme-swatches {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 8px;
}

.theme-swatch {
  flex: 1;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  /* Volle Markenfarbe; inaktive Felder treten über die Deckkraft zurück. */
  opacity: 0.5;
  transition: opacity .12s ease;
}

.theme-swatch:hover,
.theme-swatch[aria-checked="true"] {
  opacity: 1;
}

.theme-swatch:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.theme-swatch--default {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.theme-swatch--calm {
  background: #6b8f71;
}

.theme-swatch--cps {
  background: #4c8503;
}

/* Ausführliche Auswahl im Darstellungs-Dialog: je Theme eine Karte mit
   Miniatur der Oberfläche (Seitenleiste links, Fläche mit Akzentzeile rechts),
   Name und Kurzbeschreibung. Ergänzt die Farbfelder in der Seitenleiste, die
   für den schnellen Wechsel gedacht sind. */
.theme-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* Hält den Abstand zum Dialogende, den vorher der Hinweistext erzeugt hat. */
  margin-bottom: 10px;
}

.theme-card {
  display: block;
  padding: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s ease;
}

.theme-card:hover {
  border-color: rgba(var(--accent-ui-rgb),0.45);
}

.theme-card[aria-checked="true"] {
  border-color: var(--accent-ui);
  /* Bewusst outline statt eines inset-Schattens: der Schatten liegt unter den
     Kindelementen, sodass die Vorschau-Miniatur ihn an drei Seiten verdeckt
     hat. Ein Umriss mit negativem Versatz legt sich darüber. */
  outline: 1px solid var(--accent-ui);
  outline-offset: -2px;
}

.theme-card-preview {
  display: flex;
  height: 64px;
  margin-bottom: 8px;
}

.theme-card-nav {
  width: 34%;
}

.theme-card-body {
  width: 66%;
  padding: 8px 7px;
  display: block;
}

.theme-card-line {
  display: block;
  height: 5px;
  border-radius: 2px;
  margin-bottom: 5px;
  background: rgba(var(--text-muted-rgb),0.30);
}

.theme-card-line--short {
  width: 65%;
}

.theme-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.theme-card-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
}

.theme-card-check {
  margin-left: auto;
  width: 15px;
  height: 15px;
  color: var(--accent-ui);
  opacity: 0;
}

.theme-card-check svg {
  width: 100%;
  height: 100%;
}

.theme-card[aria-checked="true"] .theme-card-check {
  opacity: 1;
}

.theme-card-desc {
  display: block;
  padding: 3px 10px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Vorschau-Farben je Theme. Bewusst feste Werte: die Miniatur soll zeigen,
   wie das jeweils andere Theme aussieht, nicht das gerade aktive. */
.theme-card--default .theme-card-nav { background: #f3f4f8; }
.theme-card--default .theme-card-body { background: #ffffff; }
.theme-card--default .theme-card-line--accent { background: #6366f1; }

.theme-card--calm .theme-card-nav { background: #eef1ee; }
.theme-card--calm .theme-card-body { background: #fbfcfb; }
.theme-card--calm .theme-card-line--accent { background: #6b8f71; }

.theme-card--cps .theme-card-nav { background: #0d2457; }
.theme-card--cps .theme-card-body { background: #ffffff; }
.theme-card--cps .theme-card-line--accent { background: #4c8503; }


.app-login {
  display: block;
}

.main-login {
  width: 100%;
  padding: 0;
}

.page-body-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

/* ── 2nd-level section navigation ──────────────────────────────────────────── */
.section-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 0 0 1px rgba(255,255,255,0.55);
  flex-shrink: 0;
}

.section-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.section-tab:hover:not(.active) {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-ui);
}

.section-tab.active {
  background: #fff;
  color: var(--accent-ui);
  box-shadow: 0 2px 8px rgba(15,23,42,0.09), 0 0 0 1px rgba(var(--accent-ui-rgb),0.10);
}

.section-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.section-tab .tab-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.12);
  color: var(--accent-ui);
  line-height: 1.6;
}

.section-tab:not(.active) .tab-badge {
  background: rgba(var(--text-muted-rgb),0.18);
  color: var(--text-muted);
}

/* ── Header: title row, then sub-nav+actions row ────────────────────────────── */
.mockup-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}

.page-nav-actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 24px;
}

.page-nav-actions-row .page-actions-row {
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  align-self: center;
}

/* ── Tab panel visibility ────────────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active-panel { display: contents; }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
  color: var(--text-muted);
  text-align: center;
}
.empty-state svg { width: 48px; height: 48px; opacity: 0.35; }
.empty-state-title { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.empty-state-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 380px; }
.empty-state-meta { font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 380px; margin-top: 6px; }



/* ── public/assets/css/components/progress-steps.css ── */
/* ══════════════════════════════════════════════════════════════════════
   Fortschritts-Schrittliste (.ui-steps)

   Vertikale Schrittfolge mit Verbindungslinie, wie sie mehrstufige
   Vorgänge in Modals anzeigen (Transfer-Agent, SSL-DCV-Eintrag).
   Zuvor lag dieselbe Darstellung doppelt vor (.ta-prog-* und .sdcv-*);
   beide Kopien waren bereits leicht auseinandergelaufen.

   Markup:
     <ul class="ui-steps">
       <li class="done|active|pending|error">
         <span class="ui-step-ic">…Nummer, Icon oder .ui-step-spin…</span>
         <span class="ui-step-txt"><b>Titel</b><small>Zusatz</small></span>
       </li>
     </ul>
   ══════════════════════════════════════════════════════════════════════ */

.ui-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ui-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  padding: 9px 0;
  position: relative;
}

/* Verbindungslinie zwischen den Punkten */
.ui-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 36px;
  bottom: -4px;
  width: 2px;
  background: var(--border-soft);
}
.ui-steps li.done:not(:last-child)::before {
  background: rgba(var(--badge-success-rgb), .45);
}

/* Punkt: trägt Schrittnummer, Häkchen, Kreuz oder Spinner */
.ui-step-ic {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--border-soft);
  background: #fff;
  color: var(--text-muted);
}
.ui-step-ic svg { width: 12px; height: 12px; stroke-width: 3; }

.ui-steps li.done   .ui-step-ic { border-color: var(--color-success); background: var(--color-success); color: #fff; }
.ui-steps li.active .ui-step-ic { border-color: var(--accent-ui); color: var(--accent-ui); }
.ui-steps li.error  .ui-step-ic { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }

.ui-step-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-ui-rgb), .25);
  border-top-color: var(--accent-ui);
  animation: ui-spin 1s linear infinite;
}

.ui-step-txt b {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.ui-step-txt small {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 1px;
  word-break: break-word;
}
.ui-steps li.pending .ui-step-txt b     { color: var(--text-muted); font-weight: 600; }
.ui-steps li.done    .ui-step-txt small { color: var(--color-success); }
.ui-steps li.error   .ui-step-txt small { color: var(--color-danger); font-weight: 600; }


/* ── public/assets/css/pages/overview-cards.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Stats row + cards  (Dashboard / Domains / DNS etc.)
   ══════════════════════════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
/* Einzelne Stat-Card nicht auf volle Breite strecken – sonst wirkt der
   farbige Akzentbalken (::before) wie ein durchgehender Deckbalken. */
.stats-row:has(> .stat-card:only-child) {
  grid-template-columns: minmax(200px, 260px);
  justify-content: start;
}

.stat-card {
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06), 0 0 0 1px rgba(255,255,255,0.50);
  position: relative;
  overflow: hidden;
  transition: transform 0.20s ease, box-shadow 0.20s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15,23,42,0.10); }
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
}
.stat-card.purple::before { background: var(--grad-primary); }
.stat-card.teal::before   { background: linear-gradient(135deg, #0D9488 0%, #0891B2 100%); }
.stat-card.blue::before   { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.stat-card.amber::before  { background: linear-gradient(135deg, #D97706 0%, #b45309 100%); }
.stat-card.rose::before   { background: linear-gradient(135deg, #E11D48 0%, #be123c 100%); }
.stat-card.green::before  { background: linear-gradient(135deg, #16a34a 0%, #059669 100%); }
.stat-card.slate::before  { background: linear-gradient(135deg, var(--badge-neutral-text) 0%, var(--text-secondary) 100%); }

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-value {
  font-size: 32px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-meta { font-size: 11.5px; color: var(--text-muted); }
.stat-delta { font-size: 11.5px; font-weight: 600; }
.stat-delta.delta-up   { color: #0D9488; }
.stat-delta.delta-warn { color: #D97706; }
.transfer-meta-note { font-size: 11.5px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   Two-column content grid: main list + right panel
   ══════════════════════════════════════════════════════════════════════════════ */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.30s both;
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Quick card (right panel widgets)
   ══════════════════════════════════════════════════════════════════════════════ */
.quick-card {
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
  overflow: hidden;
}
.quick-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.10);
}
.quick-card-header-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}
.quick-card-body { padding: 14px 18px; }

/* Donut chart */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.donut-chart { width: 80px; height: 80px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.legend-item  { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.legend-dot   {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.legend-dot-active   { background: linear-gradient(135deg,#0D9488,#0891B2); }
.legend-dot-expiring { background: #D97706; }
.legend-dot-transfer { background: var(--accent-ui); }
.legend-label { flex: 1; color: var(--text-secondary); font-weight: 500; }
.legend-val   { font-weight: 800; color: var(--text-primary); font-size: 13px; }

/* Quick actions list */
.quick-card-actions-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s;
}
.quick-action:hover { background: rgba(var(--accent-ui-rgb),0.05); }
.qa-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qa-icon svg { width: 15px; height: 15px; stroke: #fff; }
.qa-icon.purple { background: linear-gradient(135deg,var(--accent-ui),var(--accent-ui-deep)); }
.qa-icon.teal   { background: linear-gradient(135deg,#0D9488,#0891B2); }
.qa-icon.amber  { background: linear-gradient(135deg,#D97706,#b45309); }
.qa-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.qa-desc  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.qa-arrow { margin-left: auto; color: var(--text-muted); }
.qa-arrow svg { width: 14px; height: 14px; }

/* ── Dashboard Promoaktionen ────────────────────────────────────────────── */
.dash-promo-list { display: flex; flex-direction: column; gap: 10px; }
.dash-promo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border-soft);
  transition: box-shadow .18s, transform .18s;
}
.dash-promo-item:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}
.dash-promo-price {
  flex-shrink: 0;
  min-width: 74px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-ui-rgb),0.28);
}
.dash-promo-amount {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.dash-promo-cur {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
  margin-top: 2px;
  text-transform: uppercase;
}
.dash-promo-body { flex: 1; min-width: 0; }
.dash-promo-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-promo-name { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.dash-promo-ref {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.35;
}
.dash-promo-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-promo-meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.dash-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.dash-promo-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.dash-promo-badge.is-active    { background: rgba(22,163,74,0.10);  color: var(--color-success); }
.dash-promo-badge.is-active .dot    { background: var(--color-success); }
.dash-promo-badge.is-scheduled { background: rgba(217,119,6,0.12);  color: var(--color-amber); }
.dash-promo-badge.is-scheduled .dot { background: var(--color-amber); }
.dash-promo-badge.is-expired   { background: rgba(var(--text-muted-rgb),0.16); color: var(--text-muted); }
.dash-promo-badge.is-expired .dot   { background: var(--text-muted); }

/* Generischer grafischer Leer-/Fehler-Zustand für Dashboard-Boxen */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 16px;
}
.dash-empty-ico {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-ui-rgb),0.10), rgba(37,99,235,0.10));
  color: var(--accent);
}
.dash-empty-ico svg { width: 22px; height: 22px; }
.dash-empty-text { font-size: 12px; color: var(--text-muted); font-weight: 500; max-width: 220px; line-height: 1.45; }
.dash-empty--chart { padding: 16px 8px; gap: 8px; flex: 1 1 auto; justify-content: center; }
.dash-empty--chart .dash-empty-ico { width: 38px; height: 38px; border-radius: 12px; }
.dash-empty--chart .dash-empty-ico svg { width: 19px; height: 19px; }
.dash-empty--chart .dash-empty-text { font-size: 11.5px; }

/* Tasks list */
.tasks-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.15s;
}
.task-item:hover { background: rgba(var(--text-muted-rgb),0.08); }
.task-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.task-dot.amber  { background: #D97706; }
.task-dot.purple { background: var(--accent-ui); }
.task-dot.teal   { background: #0D9488; }
.task-text { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.task-time { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.task-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.task-badge.urgent { background: rgba(225,29,72,0.10); color: #E11D48; }
.task-badge.info   { background: rgba(var(--accent-ui-rgb),0.10); color: var(--accent-ui); }



/* ── public/assets/css/pages/domain-detail.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Toggles (Auto-Renew / Lock)
   ══════════════════════════════════════════════════════════════════════════════ */
.toggle-wrap { display: flex; justify-content: center; }
.toggle {
  width: 36px; height: 20px;
  border-radius: 20px;
  border: none;
  background: rgba(var(--text-muted-rgb),0.25);
  cursor: pointer;
  position: relative;
  transition: background 0.20s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: left 0.20s;
}
.toggle.on { background: linear-gradient(135deg,var(--accent-ui),var(--accent-ui-deep)); }
.toggle.on::after { left: calc(100% - 17px); transform: none; }

.lock-cell { display: flex; justify-content: center; }
.lock-icon svg { width: 14px; height: 14px; color: #0D9488; }
.lock-icon.off svg { color: rgba(var(--text-muted-rgb),0.45); }

/* Domain favicon */
.domain-favicon {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg,rgba(var(--accent-ui-rgb),0.15),rgba(14,165,233,0.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: var(--accent-ui);
  flex-shrink: 0;
}
.domain-favicon.domain-favicon-transfer { background: linear-gradient(135deg,rgba(var(--accent-ui-rgb),0.10),rgba(var(--accent-ui-rgb),0.18)); color: var(--accent-ui); }
.domain-favicon.domain-favicon-expiring { background: linear-gradient(135deg,rgba(217,119,6,0.12),rgba(217,119,6,0.20)); color: #D97706; }

.domain-cell { display: flex; align-items: center; gap: 10px; }
/* ── Service-Favicon (initials bubble) ─────────────────────────────────── */
.service-favicon {
  background: linear-gradient(135deg, rgba(var(--accent-ui-rgb),0.12), rgba(var(--accent-ui-rgb),0.22));
  color: var(--accent-ui);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.service-favicon--icon { display: flex; align-items: center; justify-content: center; }
.service-favicon--icon svg { width: 16px; height: 16px; stroke: var(--accent-ui); flex-shrink: 0; }

/* ── Usage-Bar ──────────────────────────────────────────────────────────── */
.usage-bar-wrap       { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.usage-bar-label      { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.usage-bar-track      { height: 4px; background: rgba(var(--text-muted-rgb),0.15); border-radius: 999px; overflow: hidden; }
.usage-bar-fill       { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.domain-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.domain-tld-tag { font-weight: 500; color: var(--text-muted); }

/* Badge-Farbvarianten: konsolidiert in components/badges.css (TPL-05).
   badge-suspended -> badge-danger, badge-warning -> badge-expiring (identische Tokens). */

/* ── Domains: Status-Zelle mit Warn-Pills ───────────────────────── */
.domain-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.warn-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.warn-pill svg { width: 10px; height: 10px; flex-shrink: 0; pointer-events: none; }
.warn-verification { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.22); font-weight: 700; }
.warn-verification--failed { background: rgba(239,68,68,0.12); color: #dc2626; border-color: rgba(239,68,68,0.22); }
.warn-verification--locked { animation: verif-locked-pulse 1.4s ease-in-out infinite; }
.warn-sync         { background: rgba(220,38,38,0.10); color: #dc2626; border: 1px solid rgba(220,38,38,0.22); }

/* ── Anycast Toggle ─────────────────────────────────────────────── */
.anycast-toggle-wrap { display:flex; align-items:center; gap:8px; }
.anycast-toggle      { position:relative; width:32px; height:18px; flex-shrink:0; display:inline-block; }
.anycast-toggle input { opacity:0; width:0; height:0; position:absolute; }
.anycast-track       { position:absolute; inset:0; border-radius:18px; background:var(--border-strong); transition:background .2s; cursor:pointer; }
.anycast-toggle input:checked + .anycast-track { background:#0d9488; }
.anycast-thumb       { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff;
                       box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s; pointer-events:none; }
.anycast-toggle input:checked ~ .anycast-thumb { transform:translateX(14px); }
.anycast-toggle input:disabled + .anycast-track { opacity:.5; cursor:not-allowed; }
.anycast-spin { width:12px; height:12px; border:1.5px solid rgba(var(--text-muted-rgb),.35); border-top-color:#0d9488;
                border-radius:50%; animation:ui-spin .7s linear infinite; flex-shrink:0; }

/* ── AXFR-ACL Card ──────────────────────────────────────────────── */
.dzep-axfr-card      { background:rgba(255,255,255,0.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.55);
                       border-radius:16px; box-shadow:0 8px 32px rgba(15,23,42,.10),0 0 0 1px rgba(255,255,255,.50);
                       padding:16px 20px; margin-bottom:8px; }
.dzep-axfr-header    { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dzep-axfr-title     { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
                       text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
.dzep-axfr-title svg { width:13px; height:13px; }
.dzep-axfr-subtitle  { font-size:11.5px; color:var(--text-muted); }
.dzep-axfr-fields    { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.dzep-axfr-field     { display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px; }
.dzep-axfr-field label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.dzep-axfr-input     { padding:7px 10px; border-radius:8px; border:1.5px solid rgba(var(--text-muted-rgb),.28);
                       font-size:12.5px; font-family:var(--font-mono); color:var(--text-primary);
                       background:#fff; outline:none; transition:border .15s, box-shadow .15s; width:100%; }
.dzep-axfr-input:focus { border-color:var(--accent-ui); box-shadow:0 0 0 3px rgba(var(--accent-ui-rgb),.10); }
.dzep-axfr-input::placeholder { color:var(--text-muted); font-family:inherit; }
.dzep-axfr-actions   { display:flex; gap:8px; align-items:flex-end; padding-bottom:1px; flex-shrink:0; }

/* ── TTL-Exception Notice ───────────────────────────────────────── */
.dzep-ttl-notice     { display:flex; align-items:flex-start; gap:8px; padding:7px 10px; border-radius:8px;
                       background:rgba(234,179,8,.08); border:1px solid rgba(234,179,8,.22); margin:4px 0 2px; }
.dzep-ttl-notice svg { width:13px; height:13px; color:#ca8a04; flex-shrink:0; margin-top:1px; }
.dzep-ttl-notice-text { font-size:11.5px; color:#92400e; line-height:1.5; }

/* ── TTL Inline-Edit ────────────────────────────────────────────── */
.ttl-edit-wrap    { display:flex; align-items:center; justify-content:flex-start; flex:1; }
.ttl-display      { display:flex; align-items:center; gap:4px; }
.ttl-val          { font-weight:600; color:var(--text-primary); }
.ttl-val.ttl-val--pending { color:var(--accent-ui); font-weight:600; }
.ttl-dirty-dot    { width:6px; height:6px; border-radius:50%; background:var(--accent-ui); flex-shrink:0; cursor:default; }
.ttl-edit-trigger { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
                    border-radius:5px; border:none; background:transparent; cursor:pointer;
                    color:var(--text-muted); opacity:1; transition:background .15s, color .15s; flex-shrink:0; }
.crd-field-row:hover .ttl-edit-trigger { opacity:1; }
.ttl-edit-trigger:hover { background:rgba(var(--accent-ui-rgb),.09); color:var(--accent-ui); }
.ttl-edit-trigger svg   { width:11px; height:11px; pointer-events:none; }
.ttl-input-wrap   { display:none; align-items:center; gap:4px; }
.ttl-input        { width:72px; padding:3px 7px; border-radius:7px; border:1.5px solid var(--accent-ui);
                    font-size:12.5px; font-weight:500; background:#fff; color:var(--text-primary);
                    outline:none; text-align:right; box-shadow:0 0 0 3px rgba(var(--accent-ui-rgb),.10); }
.ttl-unit         { font-size:11px; color:var(--text-muted); white-space:nowrap; user-select:none; }
.ttl-confirm      { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
                    border-radius:6px; border:none; background:rgba(13,148,136,.12); color:#0d9488;
                    cursor:pointer; flex-shrink:0; transition:background .15s; }
.ttl-confirm:hover { background:rgba(13,148,136,.22); }
.ttl-confirm svg  { width:12px; height:12px; pointer-events:none; }
.ttl-cancel       { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
                    border-radius:6px; border:none; background:rgba(var(--text-muted-rgb),.12); color:var(--text-muted);
                    cursor:pointer; flex-shrink:0; transition:background .15s; }
.ttl-cancel:hover { background:rgba(var(--text-muted-rgb),.22); }
.ttl-cancel svg   { width:12px; height:12px; pointer-events:none; }
/* .badge-dot: siehe components/badges.css (TPL-05) */

/* Align helpers for domain table */
.domain-table .center { text-align: center; }
.domain-table 
/* ── API-Filterpanel ─────────────────────────────────────────────── */
.api-filter-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 16px;
}
.api-filter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.filter-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 160px;
  max-width: 240px;
}
.filter-field-group label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.filter-field-group input,
.filter-field-group select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.filter-field-group input:focus,
.filter-field-group select:focus {
  border-color: var(--accent);
}
.api-filter-actions {
  display: flex;
  gap: 8px;
}
/* Toggle-Button aktiv-Markierung */
.filter-button.filter-active {
  background: rgba(var(--accent-ui-rgb),.15);
  color: var(--accent);
  border-color: rgba(var(--accent-ui-rgb),.35);
}

.align-right { text-align: right; }
.date-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.date-meta.date-soon { color: #D97706; font-weight: 600; }

@media (max-width: 1100px) {
  .content-grid { grid-template-columns: 1fr; }
  .right-panel { position: static; flex-direction: row; flex-wrap: wrap; }
  .quick-card  { flex: 1 1 240px; }
}
@media (max-width: 700px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
}


/* Aktionszeile innerhalb der Info-Box: bündig zum Card-Inhalt (kein eigener
   Innenabstand links/rechts), Trennlinie nach oben. Doppelte Klasse, weil die
   Basis `.dreg-submit-bar` in dns-zone.css nach dieser Datei geladen wird. */
.dreg-submit-bar.dreg-submit-bar--inset {
  padding: 14px 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* ── Optionen als lange Card in der oberen Info-Box (volle Breite) ─────────
   Vier gleich breite Spalten mit Haarlinien-Trennern – dasselbe Muster wie die
   Meta-Cards darüber. Label oben, Steuerelement darunter: Toggle und das
   3er-Segment (Auto-Renew) stehen dadurch auf einer gemeinsamen Grundlinie.
   Erläuterungen hängen als Tooltip (.opt-hint) am Info-Icon neben dem Label. */
.ddet-opt-card {
  margin-top: 20px;
  border: 1px solid rgba(var(--text-muted-rgb),.14);
  border-radius: 12px;
  background: rgba(255,255,255,.5);
  overflow: hidden;
}
.ddet-opt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 11px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.14);
}
.ddet-opt-head .crd-block-title { margin-bottom: 0; }
.ddet-opt-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ddet-opt-cols > .opt-col {
  padding: 14px 18px 15px;
  min-width: 0;
}
.ddet-opt-cols > .opt-col + .opt-col { border-left: 1px solid rgba(var(--text-muted-rgb),.14); }
/* Label darf zweizeilig umbrechen; das Steuerelement steht darunter. */
.ddet-opt-cols .opt-col-label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ddet-opt-cols .opt-col-label .crd-toggle-name { font-size: 12.5px; min-width: 0; }
.ddet-opt-cols .opt-ctrl { display: flex; align-items: center; gap: 9px; }
@media (max-width: 1100px) {
  .ddet-opt-cols { grid-template-columns: 1fr 1fr; }
  .ddet-opt-cols > .opt-col:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--text-muted-rgb),.14); }
  .ddet-opt-cols > .opt-col:nth-child(3) { border-left: none; }
}
@media (max-width: 620px) {
  .ddet-opt-cols { grid-template-columns: 1fr; }
  .ddet-opt-cols > .opt-col + .opt-col { border-left: none; border-bottom: none; }
  .ddet-opt-cols > .opt-col:not(:last-child) { border-bottom: 1px solid rgba(var(--text-muted-rgb),.14); }
}


/* ── public/assets/css/pages/domain-owner-change.css ── */
/* ══════════════════════════════════════════════════════════════════════
   Inhaberwechsel (?page=domain-owner-change, Präfix dwoc-)
   Nur Layout-Geometrie – Karten, Buttons, Notiz und Sonderfelder kommen
   vollständig aus den globalen Komponenten (crd-hcard, btn, csm-note, xf-*).
   ══════════════════════════════════════════════════════════════════════ */

.dwoc-flow {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 12px;
  align-items: start;
}
.dwoc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--text-muted);
}
@media (max-width: 860px) {
  .dwoc-flow { grid-template-columns: 1fr; }
  .dwoc-arrow { transform: rotate(90deg); }
}

/* Domain-Kopf: Akzentfarbe wie die Meta-Card der Detailseite – hier als
   Klasse statt des dortigen Inline-Styles. Das Spalten-Layout kommt aus der
   System-Klasse .split-layout (app-shell.css), wie auf domain-detail. */
/* Doppel-Selektor noetig: .crd-fin-value (contract-rich.css) setzt
   --text-primary und laedt NACH dieser Datei – bei einfacher Klasse gewinnt
   dort die Reihenfolge. Auf domain-detail erledigt das der Inline-Style;
   hier hebt die hoehere Spezifitaet den Akzent ueber die Basisregel. */
.crd-fin-value.dwoc-domain { color: var(--accent); word-break: break-all; }
.dwoc-domain-ascii { font-family: var(--font-mono); word-break: break-all; margin-top: 2px; }


/* ── public/assets/css/pages/contact-drawer.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Contact Drawer  (floating right-side panel)
   ══════════════════════════════════════════════════════════════════════════════ */
.contact-drawer {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  pointer-events: none;
}

.contact-drawer-tab,
.contact-drawer-panel {
  pointer-events: auto;
}

.contact-drawer-tab {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.68);
  border-right: none;
  border-radius: 16px 0 0 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--accent-ui);
  box-shadow: -4px 0 24px rgba(15,23,42,0.10), 0 0 0 1px rgba(255,255,255,0.50);
  padding: 16px 10px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 700 11px/1 inherit;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
}
.contact-drawer-tab:hover {
  background: rgba(255,255,255,0.98);
  box-shadow: -6px 0 28px rgba(15,23,42,0.14), 0 0 0 1px rgba(255,255,255,0.65);
}

.contact-drawer-panel {
  width: 320px;
  transform: translateX(calc(100% + 1px));
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.70);
  border-right: none;
  border-radius: 22px 0 0 22px;
  box-shadow: -8px 0 40px rgba(15,23,42,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.contact-drawer-panel.open { transform: translateX(0); }

/* Backdrop für contactDrawerPanel – sperrt Seite hinter dem Panel */
.contact-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: transparent;
  cursor: default;
}

.contact-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.12);
  background: linear-gradient(135deg, rgba(var(--accent-ui-rgb),0.08), rgba(37,99,235,0.06));
}
.contact-drawer-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cdw-title-pill {
  font-size: 10px;
  padding: 2px 7px;
  font-weight: 700;
  vertical-align: middle;
  flex-shrink: 0;
}
.contact-drawer-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.contact-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-muted-rgb),0.20);
  background: rgba(255,255,255,0.80);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.contact-drawer-close:hover { background: #fff; color: var(--text-primary); }

/* Contact person card */
.contact-person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.10);
}
.contact-person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg,var(--accent-ui),#2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}
.contact-person-name { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.contact-person-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Info rows */
.contact-drawer-body {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-drawer-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-drawer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-ui-rgb),0.08);
  flex-shrink: 0;
}
.contact-drawer-icon svg { width: 16px; height: 16px; color: var(--accent-ui); }
.contact-drawer-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.contact-drawer-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
  line-height: 1.3;
}
.contact-drawer-value a {
  color: inherit;
  text-decoration: none;
}
.contact-drawer-value a:hover { color: var(--accent-ui); text-decoration: underline; }
.contact-drawer-note {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}

/* Action buttons */
.contact-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 18px;
}
.contact-action {
  /* .btn-Basisklasse (modal-userpwd.css) liefert Farben/Hover/Themes;
     hier nur noch Groessen- und Layout-Abweichungen */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.contact-action svg { width: 15px; height: 15px; flex-shrink: 0; }
.cdw-chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.5;
}
.cdw-chat-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cdw-chat-pill-online {
  background: rgba(16,185,129,0.12);
  color: #059669;
}
.cdw-chat-pill-offline {
  background: rgba(var(--text-muted-rgb),0.16);
  color: var(--badge-neutral-text);
}
.cdw-chat-pill-checking {
  background: rgba(245,158,11,0.12);
  color: #D97706;
}
.cdw-chat-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(16,185,129,0.12);
  color: #059669;
}



/* ── public/assets/css/components/feedback.css ── */
/* ══════════════════════════════════════════════════════════════════════
   FEEDBACK SYSTEM – Toast · Inline-Banner · Modal
══════════════════════════════════════════════════════════════════════ */

/* ── Toast / Snackbar ─────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.fb-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(15,23,42,0.13), 0 0 0 1px rgba(255,255,255,0.40);
  min-width: 280px;
  max-width: 360px;
  position: relative;
  overflow: hidden;
  pointer-events: all;
  animation: fb-toast-in 0.28s cubic-bezier(.34,1.56,.64,1) both;
}
.fb-toast.fb-toast--out {
  animation: fb-toast-out 0.22s ease forwards;
}
@keyframes fb-toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes fb-toast-out {
  /* Startwert kommt aus --fb-toast-h; dismissToast() in ui-system.js setzt die
     gemessene Höhe, bevor die Klasse gesetzt wird. Vorher stand hier fest
     120px – ein Toast mit message + detail + notes (gemessen 209 px) sprang
     beim Schließen auf 120 px und schnitt Inhalt ab. Der Fallback greift nur,
     wenn die Klasse ohne den Helfer gesetzt wird. */
  from { opacity: 1; transform: translateX(0) scale(1); max-height: var(--fb-toast-h, 400px); margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(24px) scale(0.95); max-height: 0; margin-bottom: -10px; padding-top: 0; padding-bottom: 0; }
}
.fb-toast--success  { background: rgba(220,252,231,0.92); border-left: 3px solid #16a34a; }
.fb-toast--error    { background: rgba(254,226,226,0.92); border-left: 3px solid #dc2626; }
.fb-toast--warning  { background: rgba(254,243,199,0.92); border-left: 3px solid #d97706; }
.fb-toast--pending  { background: rgba(255,237,213,0.92); border-left: 3px solid #ea580c; }
.fb-toast--info    { background: rgba(239,246,255,0.92); border-left: 3px solid #2563eb; }

.fb-toast-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fb-toast--success  .fb-toast-icon { background: rgba(22,163,74,0.12); }
.fb-toast--error    .fb-toast-icon { background: rgba(220,38,38,0.10); }
.fb-toast--warning  .fb-toast-icon { background: rgba(217,119,6,0.12); }
.fb-toast--pending  .fb-toast-icon { background: rgba(234,88,12,0.12); }
.fb-toast--info    .fb-toast-icon { background: rgba(37,99,235,0.10); }
.fb-toast-icon svg { width: 16px; height: 16px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fb-toast--success .fb-toast-icon svg { stroke: #16a34a; }
.fb-toast--error   .fb-toast-icon svg { stroke: #dc2626; }
.fb-toast--warning .fb-toast-icon svg { stroke: #d97706; }
.fb-toast--pending .fb-toast-icon svg { stroke: #ea580c; }
.fb-toast--info    .fb-toast-icon svg { stroke: #2563eb; }

.fb-toast-body { flex: 1; min-width: 0; }
.fb-toast-title { font-size: 13px; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.fb-toast-msg    { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
/* ── detail: Akzent-Spalte in der Typfarbe ────────────────────────────────
   Statt Kursiv + Haarlinie (detail und note waren dadurch optisch identisch)
   trägt das Detail eine schmale Leiste in der Farbe des Toast-Typs.
   Schriftstaffelung im Toast: title/msg 13px, detail und note einheitlich
   12.5px – zwei Stufen statt der früheren drei (13 / 12.5 / 12). */
.fb-toast-detail {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 9px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid rgba(15,23,42,0.16);
  line-height: 1.5;
}
.fb-toast--success .fb-toast-detail { border-left-color: rgba(22,163,74,0.45); }
.fb-toast--error   .fb-toast-detail { border-left-color: rgba(220,38,38,0.45); }
.fb-toast--warning .fb-toast-detail { border-left-color: rgba(217,119,6,0.50); }
.fb-toast--pending .fb-toast-detail { border-left-color: rgba(234,88,12,0.45); }
.fb-toast--info    .fb-toast-detail { border-left-color: rgba(37,99,235,0.45); }

/* ── note: eigenständige Info-Zeilen auf heller Fläche ────────────────────
   Jeder Hinweis ist eine abgesetzte Zeile mit Info-Icon – dadurch als
   Backend-Hinweis erkennbar und klar vom detail unterschieden. */
.fb-toast-note {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 9px;
  padding: 7px 9px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  /* Bewusst nur leicht aufgehellt: bei höherem Weißanteil überstrahlen die
     Zeilen die Typfarbe des Toasts (besonders bei error/warning). Die Kontur
     kommt überwiegend vom Rahmen, nicht von der Füllung. */
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 9px;
  line-height: 1.5;
}
/* Mehrere Notes: je Hinweis eine eigene Zeile, Container selbst transparent */
.fb-toast-note--list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
}
.fb-toast-note-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 9px;
}
.fb-toast-note-item-text { flex: 1; min-width: 0; }
/* Info-Icon je Hinweis – rein dekorativ, im Markup mit aria-hidden */
.fb-toast-note-ico { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; color: var(--badge-neutral-text); }
.fb-toast-note-ico svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.fb-toast-copy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.fb-toast-copy-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.fb-toast-copy-val {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: .02em;
}

.fb-toast-close {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--text-muted-rgb),0.18); border: none; cursor: pointer;
  flex-shrink: 0; margin-top: 1px; padding: 0;
}
.fb-toast-close svg { width: 10px; height: 10px; fill: none; stroke: var(--text-muted); stroke-width: 2.5; }

.fb-toast-progress {
  position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 0 0 0 14px;
  transition: width linear;
}
.fb-toast--success .fb-toast-progress { background: #16a34a; }
.fb-toast--error   .fb-toast-progress { background: #dc2626; }
.fb-toast--warning .fb-toast-progress { background: #d97706; }
.fb-toast--pending .fb-toast-progress { background: #ea580c; }
.fb-toast--info    .fb-toast-progress { background: #2563eb; }

/* ── Inline-Banner ───────────────────────────────────────────────── */
.fb-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 16px;
  animation: fb-banner-in 0.22s ease both;
}
@keyframes fb-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fb-banner--success { background: rgba(220,252,231,0.60); border: 1px solid rgba(22,163,74,0.22); }
.fb-banner--error   { background: rgba(254,226,226,0.60); border: 1px solid rgba(220,38,38,0.22); }
.fb-banner--warning { background: rgba(254,243,199,0.60); border: 1px solid rgba(217,119,6,0.22); }
.fb-banner--info    { background: rgba(239,246,255,0.60); border: 1px solid rgba(37,99,235,0.22); }

.fb-banner-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fb-banner--success .fb-banner-icon { background: rgba(22,163,74,0.12); }
.fb-banner--error   .fb-banner-icon { background: rgba(220,38,38,0.10); }
.fb-banner--warning .fb-banner-icon { background: rgba(217,119,6,0.12); }
.fb-banner--info    .fb-banner-icon { background: rgba(37,99,235,0.10); }
.fb-banner-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-banner--success .fb-banner-icon svg { stroke: #16a34a; }
.fb-banner--error   .fb-banner-icon svg { stroke: #dc2626; }
.fb-banner--warning .fb-banner-icon svg { stroke: #d97706; }
.fb-banner--info    .fb-banner-icon svg { stroke: #2563eb; }

.fb-banner-body { flex: 1; }
.fb-banner-title { font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.fb-banner--success .fb-banner-title { color: #14532d; }
.fb-banner--error   .fb-banner-title { color: #7f1d1d; }
.fb-banner--warning .fb-banner-title { color: #78350f; }
.fb-banner--info    .fb-banner-title { color: #1e3a8a; }
.fb-banner-msg { font-size: 12px; line-height: 1.55; }
.fb-banner--success .fb-banner-msg { color: #166534; }
.fb-banner--error   .fb-banner-msg { color: #991b1b; }
.fb-banner--warning .fb-banner-msg { color: #92400e; }
.fb-banner--info    .fb-banner-msg { color: #1d4ed8; }
.fb-banner-actions { display: flex; gap: 8px; margin-top: 10px; }
.fb-banner-btn {
  font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: 8px; border: none; cursor: pointer; font-family: inherit;
}
.fb-banner--error   .fb-banner-btn-primary { background: #dc2626; color: #fff; }
.fb-banner--error   .fb-banner-btn-ghost   { background: rgba(220,38,38,0.08); color: #dc2626; }
.fb-banner--success .fb-banner-btn-primary { background: #16a34a; color: #fff; }
.fb-banner--warning .fb-banner-btn-primary { background: #d97706; color: #fff; }
.fb-banner--info    .fb-banner-btn-primary { background: #2563eb; color: #fff; }
.fb-banner-close {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(var(--text-muted-rgb),0.15); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
}
.fb-banner-close svg { width: 11px; height: 11px; fill: none; stroke: var(--text-muted); stroke-width: 2.5; }

/* ── Modal / Dialog ──────────────────────────────────────────────── */
#fb-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: fb-overlay-in 0.20s ease both;
}
@keyframes fb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#fb-modal-overlay.fb-overlay--out {
  animation: fb-overlay-out 0.18s ease forwards;
}
@keyframes fb-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.fb-modal {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.16), 0 0 0 1px rgba(255,255,255,0.55);
  width: 340px;
  text-align: center;
  animation: fb-modal-in 0.28s cubic-bezier(.34,1.56,.64,1) both;
  overflow: hidden;
  position: relative;
}
@keyframes fb-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fb-modal-stripe {
  height: 3px;
  margin: -28px -28px 24px;
  border-radius: 20px 20px 0 0;
}
.fb-modal--success .fb-modal-stripe { background: linear-gradient(90deg, #16a34a, #4ade80); }
.fb-modal--error   .fb-modal-stripe { background: linear-gradient(90deg, #dc2626, #f87171); }
.fb-modal--warning .fb-modal-stripe { background: linear-gradient(90deg, #d97706, #fbbf24); }
.fb-modal--danger  .fb-modal-stripe { background: linear-gradient(90deg, #dc2626, #f87171); }
.fb-modal--info    .fb-modal-stripe { background: linear-gradient(90deg, #2563eb, #60a5fa); }

.fb-modal-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.fb-modal-icon svg { width: 30px; height: 30px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-modal--success .fb-modal-icon { background: linear-gradient(135deg, rgba(22,163,74,0.12), rgba(22,163,74,0.22)); }
.fb-modal--success .fb-modal-icon svg { stroke: #16a34a; }
.fb-modal--error   .fb-modal-icon { background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(220,38,38,0.20)); }
.fb-modal--error   .fb-modal-icon svg { stroke: #dc2626; }
.fb-modal--warning .fb-modal-icon { background: linear-gradient(135deg, rgba(217,119,6,0.10), rgba(217,119,6,0.20)); }
.fb-modal--warning .fb-modal-icon svg { stroke: #d97706; }
.fb-modal--danger  .fb-modal-icon { background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(220,38,38,0.20)); }
.fb-modal--danger  .fb-modal-icon svg { stroke: #dc2626; }
.fb-modal--info    .fb-modal-icon { background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.20)); }
.fb-modal--info    .fb-modal-icon svg { stroke: #2563eb; }

.fb-modal-title { font-size: 17px; font-weight: 900; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.2px; }
.fb-modal-body  { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.fb-modal-detail {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px; color: var(--text-secondary); background: rgba(15,23,42,0.04);
  border-radius: 10px; padding: 10px 14px; text-align: left;
  margin-bottom: 20px; line-height: 1.6;
}
.fb-modal-note {
  margin-top: 16px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.18);
  color: #92400e; font-size: 12px; line-height: 1.55; text-align: left;
}
.fb-modal-actions { display: flex; gap: 8px; justify-content: center; }

.fb-modal-btn {
  flex: 1; padding: 10px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 700; border: none;
  cursor: pointer; font-family: inherit; transition: opacity 0.15s;
}
.fb-modal-btn:hover { opacity: 0.88; }
.fb-modal-btn-ghost   { background: rgba(var(--text-muted-rgb),0.14); color: var(--text-secondary); }
.fb-modal--success .fb-modal-btn-primary { background: #16a34a; color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,0.28); }
.fb-modal--error   .fb-modal-btn-primary { background: #dc2626; color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,0.28); }
.fb-modal--warning .fb-modal-btn-primary { background: #d97706; color: #fff; box-shadow: 0 4px 12px rgba(217,119,6,0.28); }
.fb-modal--danger  .fb-modal-btn-primary { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,0.32); }
.fb-modal--info    .fb-modal-btn-primary { background: #2563eb; color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.28); }

/* ── Session-Timer-Balken ────────────────────────────────────────── */
.session-bar-wrap {
  padding: 0 16px 10px;
  cursor: default;
}
.session-bar {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-ui), #2563eb);
  transition: width 1s linear, background 0.6s ease;
  max-width: 100%;
}
.session-bar[data-state="warning"] {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.session-bar[data-state="critical"] {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

/* ── Cache Refresh Button ─────────────────────────────────────────
   Teil der Header-Button-Familie in `.topbar-actions` und deshalb bewusst
   deckungsgleich mit `.object-clipboard-btn` und `.language-switcher`:
   36px hoch, Pillenform, Tokens statt Farbliteralen, gleiche Hover-Geste.
   Zuvor wich er als einziger ab (12px Radius, kein festes Höhenmaß,
   kleinere Schrift, eigener Rahmen-/Schattenwert, zusätzlicher
   backdrop-filter) und stand dadurch sichtbar aus der Reihe. */
.cache-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  font: 700 12.5px inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cache-refresh-btn:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}
.cache-refresh-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}
.cache-refresh-btn.is-loading svg {
  animation: ui-spin 0.75s linear infinite;
}
.cache-refresh-btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
}
/* Cooldown-Sperre: Button bleibt sichtbar, ist aber bis zum Ablauf
   der Wartezeit (Tooltip-Countdown) nicht klickbar. */
.cache-refresh-btn.is-cooldown {
  opacity: 0.45;
  cursor: not-allowed;
}
.cache-refresh-btn.is-cooldown:hover {
  background: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.cache-refresh-age {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding-left: 2px;
}

/* ── Tabellen-Lade-Spinner ───────────────────────────────────────── */
.table-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--accent-ui-rgb),0.15);
  border-top-color: var(--accent-ui);
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
  vertical-align: middle;
}
/* Kleine Variante für Inline-Einsatz in einer Textzeile (Contact-Drawer,
   Report-Statuszeile). Muss hier – neben `.table-spinner` – stehen: das ältere
   `.spinner-xs` aus layout/app-shell.css hat dieselbe Spezifität, verliert aber,
   weil components/ nach layout/ geladen wird. `.spinner-xs` bleibt für
   `.spinner` + SVG-Kind zuständig (z. B. tools-rdap-bulk.php). */
.table-spinner--sm {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

/* ── RDAP / WHOIS ─────────────────────────────────────────────────── */
.rdap-card { padding: var(--space-4); }

.rdap-search-row { display: flex; flex-direction: column; gap: var(--space-2); }
.rdap-search-wrap { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.input-with-icon { position: relative; flex: 1; min-width: 200px; }
.rdap-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.rdap-input { padding-left: 2.25rem !important; }
.rdap-query-btn { white-space: nowrap; }
.rdap-error-inline { color: var(--color-danger); font-size: 13px; margin-top: 4px; }
.rdap-spinner { text-align: center; padding: var(--space-6); color: var(--text-muted); font-size: 1.5rem; }

.rdap-section { padding: var(--space-3) var(--space-4); }
.rdap-section-title { font-weight: 600; font-size: 14px; padding-bottom: var(--space-2); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

.rdap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; }
.rdap-item { display: flex; flex-direction: column; gap: 2px; }
.rdap-item-label { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rdap-item-value { font-size: 13px; color: var(--text-primary); }
.rdap-divider { margin: var(--space-2) 0; border-color: var(--border-color); }

.rdap-raw-pre { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; line-height: 1.5; background: var(--bg-secondary); padding: var(--space-3); overflow-x: auto; white-space: pre-wrap; word-break: break-all; border-radius: 6px; }

.rdap-ns-tag { background: var(--bg-secondary); padding: 2px 8px; border-radius: 4px; font-size: 12px; color: var(--text-primary); border: 1px solid var(--border-color); }

.rdap-contact-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; height: 100%; }
.rdap-contact-role { background: var(--accent-ui); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 8px 8px 0 0; }
.rdap-contact-body { padding: var(--space-2) var(--space-3); }
.rdap-cd { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.rdap-cd-icon { color: var(--text-muted); width: 14px; flex-shrink: 0; margin-top: 2px; }

.rdap-dnssec-yes { color: var(--color-success); font-weight: 500; }
.rdap-dnssec-no  { color: var(--text-muted); }

.rdap-related-box { padding: var(--space-3) var(--space-4); }
.rdap-related-title { font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.rdap-related-hint { font-size: 12px; color: var(--text-muted); }

/* Bulk */
.rdap-bulk-label { font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.rdap-tld-checkbox-label { cursor: pointer; display: inline-flex; align-items: center; }
/* Nicht display:none – das nimmt der Checkbox den Tastatur-Fokus. Stattdessen
   visuell versteckt, aber fokussierbar; der Fokusring wandert auf das Badge (V4). */
.rdap-tld-checkbox-label input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rdap-tld-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); transition: background .15s, color .15s, border-color .15s; cursor: pointer; }
.rdap-tld-checkbox-label input:checked + .rdap-tld-badge { background: var(--accent-ui); color: #fff; border-color: var(--accent-ui); }
.rdap-tld-checkbox-label input:focus-visible + .rdap-tld-badge { outline: 2px solid var(--accent-ui); outline-offset: 2px; border-color: rgba(var(--accent-ui-rgb),.20); }
.rdap-bulk-table { font-size: 13px; }
.rdap-bulk-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }

/* ── Dashboard News-Widget ──────────────────────────────────────────── */
.quick-card-more-link { font-size: 11px; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.quick-card-more-link:hover { color: var(--accent-ui); }

.quick-card-body--list { padding: 0; }
.quick-card-body--editorial { padding: 20px 20px 24px; }
.quick-card-footer {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 16px;
  border-top: 1px solid var(--border-color);
}
.quick-card-footer a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--text-secondary); text-decoration: none;
  transition: color .12s;
}
.quick-card-footer a:hover { color: var(--accent-ui); }

.news-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.news-skeleton-item { height: 36px; background: var(--bg-secondary); border-radius: 6px; animation: news-shimmer 1.4s ease-in-out infinite; }
@keyframes news-shimmer { 0%,100%{opacity:.5} 50%{opacity:1} }
.news-load-error { padding: 20px 16px; text-align: center; font-size: 12px; color: var(--text-muted); margin: 0; }

/* Compact news items (Dashboard Variante B) */
.dash-news-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.08);
  text-decoration: none; color: inherit; transition: background .12s;
}
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item:hover { background: rgba(var(--accent-ui-rgb),.028); }
.dni-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--accent-ui);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.12);
}
.dni-dot--read { background: var(--text-muted); box-shadow: none; }
.dni-body { flex: 1; min-width: 0; }
.dni-date { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; letter-spacing: .03em; }
.dni-title {
  font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* Icon in quick-card-header (news box) */
.quick-card-header svg { width: 14px; height: 14px; color: var(--accent-ui); flex-shrink: 0; }

.news-error { font-size: 13px; color: var(--text-muted); padding: 12px 16px; text-align: center; }

/* ── News-Seite (NIC-Cards) ─────────────────────────────────────────── */
.news-page-wrapper { display: flex; flex-direction: column; gap: 16px; }

.nic-card {
  background: var(--surface);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
  margin-bottom: 14px;
}
.nic-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--accent-ui-rgb),.22); }
.nic-card--new { border-left: 3px solid var(--accent-ui); }
.nic-card--highlight { box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.35), var(--shadow-md); }

.nic-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px 14px; cursor: pointer; user-select: none;
}
.nic-head:hover { background: rgba(var(--accent-ui-rgb),.028); }

.nic-date-col {
  display: flex; flex-direction: column; align-items: center;
  min-width: 42px; padding-top: 2px; flex-shrink: 0;
}
.nic-day   { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.nic-month { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 2px; }
.nic-year  { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.nic-date-sep { width: 1px; background: var(--border-soft); align-self: stretch; flex-shrink: 0; margin: 2px 0; }

.nic-title-col { flex: 1; min-width: 0; }

.nic-badge-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.nic-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.nic-badge--new  { background: rgba(var(--accent-ui-rgb),.09); color: var(--accent-ui); border: 1px solid rgba(var(--accent-ui-rgb),.20); }
.nic-badge--info { background: rgba(37,99,235,.09);  color: #2563eb; border: 1px solid rgba(37,99,235,.18); }
.nic-badge--warn { background: rgba(217,119,6,.09);  color: #d97706; border: 1px solid rgba(217,119,6,.18); }

.nic-title   { font-size: 14.5px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.nic-preview {
  font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nic-chevron {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 2px;
  background: rgba(255,255,255,.55); border: 1px solid var(--border-soft);
  transition: background .12s;
}
.nic-chevron svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform .2s; }
.nic-chevron--open svg { transform: rotate(180deg); }

.nic-body {
  padding: 12px 18px 18px 74px; /* 42px (date) + 14px (gap) + 18px (card-pad) */
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.7;
}
.nic-body p { margin: 0 0 .8em; }
.nic-body p:last-child { margin-bottom: 0; }
.nic-body a { color: var(--accent-ui); text-decoration: none; }
.nic-body a:hover { text-decoration: underline; }
.nic-body strong { color: var(--text-primary); }

.nic-body-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.nic-body-footer .btn { height: 26px; font-size: 11.5px; padding: 0 10px; border-radius: 8px; }

/* Pagination */
.news-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0 4px; }
.pg-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px;
  font: 600 13px inherit;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,.62);
  color: var(--text-secondary); cursor: pointer; transition: all .15s;
}
.pg-btn:hover:not(:disabled) { background: rgba(var(--accent-ui-rgb),.09); color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),.25); }
.pg-btn--active { background: rgba(var(--accent-ui-rgb),.09); color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),.25); }
.pg-btn--disabled, .pg-btn:disabled { opacity: .4; pointer-events: none; }
.pg-sep { color: var(--text-muted); font-size: 13px; padding: 0 2px; }

/* Admin-Toolbar */
.news-admin-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(var(--accent-ui-rgb),.06);
  border: 1px solid rgba(var(--accent-ui-rgb),.15);
  border-radius: 12px;
}
.news-admin-toolbar-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-right: 2px;
}
.news-refresh-btn { gap: 6px; }
.news-refresh-status { font-size: 12.5px; font-weight: 600; }
.news-refresh-status--ok  { color: var(--color-success); }
.news-refresh-status--err { color: var(--color-danger); }

/* Empty state */
.news-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 24px; text-align: center;
}
.news-empty-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--text-muted); margin-bottom: 4px; }
.news-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  RDAP / WHOIS + Bulk – Redesign v2                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Mini-Button – zentrale Klasse für kleine Pill-Aktions-Buttons ─────────
   Referenz: Bulk-Abfrage Preset-Buttons ("Nur ccTLDs" etc.)
   Verwendung: class="mini-btn" auf <button> oder klickbarem <span>.
   Aliase (rückwärtskompatibel, NICHT für neue Elemente): .bulk2-preset, .rdap2-example, .rdap2-ref-btn */
.mini-btn,
.bulk2-preset,
.rdap2-example,
.rdap2-ref-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 6px;
  border: 1px solid rgba(var(--accent-ui-rgb),.2); background: rgba(var(--accent-ui-rgb),.07);
  font-size: 11px; font-weight: 600; color: var(--accent-ui-deep);
  cursor: pointer; transition: all .12s; white-space: nowrap;
  font-family: inherit; line-height: 1.6;
}
.mini-btn:hover,
.bulk2-preset:hover,
.rdap2-example:hover,
.rdap2-ref-btn:hover { background: rgba(var(--accent-ui-rgb),.14); border-color: rgba(var(--accent-ui-rgb),0.45); }

/* ── Gemeinsam ──────────────────────────────────────────────────────────── */
.rdap2-card       { padding: 20px; }
.rdap2-query-btn  { white-space: nowrap; min-width: 120px; justify-content: center; }
.rdap2-err-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #b91c1c;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 8px;
  padding: 7px 11px;
  margin-top: 8px;
}
.rdap2-muted      { font-size: 13px; color: var(--text-muted); }
.rdap2-code       { font-size: 10px; background: var(--bg-secondary); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); }
.rdap2-uri-link   { font-size: 11px; word-break: break-all; color: var(--accent-color); }
/* ── Form-Field-Label – zentrale Klasse für alle Eingabefeld-Labels ──────────
   Referenz: Bulk-Abfrage "Wunschname"-Label
   Verwendung: class="form-field-label" auf <label> oder <div>/<span> über einem Eingabefeld.
   Alle Templates und zukünftigen Formulare MÜSSEN diese Klasse verwenden.
   Aliase: .field-label, .spec-label, .filter-field-group label
   ─────────────────────────────────────────────────────────────────────────── */
.form-field-label,
.spec-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rdap2-section-hd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }

/* Spinner: siehe `.spinner` / `.spinner-xs` (zentrale ui-spin-Animation
   in layout/app-shell.css). Eigene @keyframes sind projektweit unzulässig. */

/* ── Suche ──────────────────────────────────────────────────────────────── */
.rdap2-search-row  { display: flex; gap: 10px; align-items: center; }
.rdap2-search-wrap { position: relative; flex: 1; }
.rdap2-search-globe {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.rdap2-search-input {
  width: 100%; padding: 10px 32px 10px 40px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: rgba(255,255,255,.75);
  font-family: inherit; font-size: 15px; color: var(--text-primary);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.rdap2-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.1);
}
.rdap2-search-input::placeholder { color: var(--text-muted); }
.rdap2-search-clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; padding: 2px 5px;
  border-radius: 4px; line-height: 1; display: none;
}
.rdap2-search-clear:hover { background: rgba(15,23,42,.06); color: var(--text-primary); }
.rdap2-search-clear.vis { display: block; }
.rdap2-examples       { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.rdap2-examples-label { font-size: 11px; color: var(--text-muted); line-height: 22px; }
/* .rdap2-example → see .mini-btn */

/* ── Platzhalter-Zustände und Lade-Indikatoren ──────────────────────────────────────── */
.rdap2-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 48px 24px; text-align: center;
}
.rdap2-placeholder p { font-size: 13px; color: var(--text-muted); max-width: 280px; line-height: 1.6; }
.rdap2-error-box { padding: 28px 24px; }
.rdap2-error-inner {
  display: flex; align-items: flex-start; gap: 14px;
  color: #b91c1c;
}
.rdap2-error-inner svg { flex-shrink: 0; margin-top: 1px; }
.rdap2-error-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.rdap2-error-msg   { font-size: 13px; color: var(--text-secondary); line-height: 1.6; word-break: break-word; }
.rdap2-loading-row {
  display: flex; align-items: center; gap: 12px;
  padding: 36px 24px; justify-content: center;
  font-size: 13px; color: var(--text-muted);
}

/* ── Ergebnis-Card ──────────────────────────────────────────────────────── */
.rdap2-result  { overflow: hidden; }
.rdap2-header  {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-color);
}
.rdap2-domain-name { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.3px; }
.rdap2-tld         { color: var(--accent-color); }
.rdap2-domain-idna { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0; }
.rdap2-badges        { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; align-items: flex-start; }
.rdap2-status-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.rdap2-src {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.rdap2-src-rdap  { background: rgba(37,99,235,.12);  color: #2563eb; border: 1px solid rgba(37,99,235,.2); }
.rdap2-src-whois { background: rgba(13,148,136,.12); color: #0d9488; border: 1px solid rgba(13,148,136,.2); }
.rdap2-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 99px; font-size: 13px; font-weight: 500;
  background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color);
}
.rdap2-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.rdap2-header-meta { text-align: right; font-size: 11px; color: var(--text-muted); line-height: 1.7; flex-shrink: 0; }

/* ── Sections (single-column, stacked) ───────────────────────────────────── */
.rdap2-grid { display: flex; flex-direction: column; }
.rdap2-section { padding: 14px 20px; border-bottom: 1px solid var(--border-color); }
.rdap2-section:last-child { border-bottom: none; }
.rdap2-section.full { border-right: none; }

/* KV-Zeilen */
.rdap2-kv       { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; align-items: baseline; }
.rdap2-kv-row   { display: contents; font-size: 13px; }
.rdap2-kv-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; font-size: 12px; padding: 2px 0; }
.rdap2-kv-val   { color: var(--text-primary); font-size: 13px; padding: 2px 0; word-break: break-word; }
.rdap2-kv-ok    { color: #16a34a; font-weight: 600; }
.rdap2-kv-no    { color: var(--text-muted); }

/* Nameserver */
.rdap2-ns-list  { display: flex; flex-wrap: wrap; gap: 5px; }
.rdap2-ns-badge {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  background: rgba(var(--text-muted-rgb),.13); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}

/* Kontakte */
.rdap2-contact-list { display: flex; flex-direction: column; gap: 10px; }
.rdap2-contact-card { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.rdap2-contact-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.rdap2-contact-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.rdap2-contact-line { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.rdap2-contact-lbl  { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; min-width: 50px; }
.rdap2-contact-val  { color: var(--text-primary); word-break: break-word; }
.rdap2-role-badge   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.rdap2-role-registrant { background: rgba(var(--accent-ui-rgb),.1);  color: var(--accent-ui); }
.rdap2-role-tech       { background: rgba(37,99,235,.1);   color: #2563eb; }
.rdap2-role-admin      { background: rgba(217,119,6,.1);   color: #b45309; }
.rdap2-role-zone       { background: rgba(13,148,136,.1);  color: #0d9488; }
.rdap2-role-billing    { background: rgba(239,68,68,.1);   color: #dc2626; }
.rdap2-role-other      { background: var(--bg-secondary);  color: var(--text-secondary); }
.rdap2-role-abuse      { background: rgba(var(--text-muted-rgb),.12); color: var(--text-secondary); }
.rdap2-contact-card--abuse { opacity: .75; }

.rdap2-contact-name    { color: var(--text-primary); font-weight: 500; font-size: 13px; }
.rdap2-contact-handle  {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); background: rgba(0,0,0,.04); padding: 1px 5px; border-radius: 4px; margin-left: auto;
}

/* Referenz-Server */
.rdap2-refservers       { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.rdap2-refservers-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); flex-shrink: 0; }
/* .rdap2-ref-btn → see .mini-btn */

/* Raw-Toggle */
.rdap2-raw-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 20px; border-top: 1px solid var(--border-color);
  cursor: pointer; font-size: 12px; color: var(--text-muted); font-weight: 600;
  user-select: none; transition: color .12s;
}
.rdap2-raw-toggle:hover { color: var(--text-primary); }
.rdap2-raw-toggle svg   { transition: transform .2s; }
.rdap2-raw-toggle.open svg { transform: rotate(90deg); }
.rdap2-raw-body      { display: none; padding: 0 20px 18px; }
.rdap2-raw-body.open { display: block; }
.rdap2-raw-pre {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 14px 16px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;
}

/* WHOIS-Textblock */
.rdap2-whois-block { padding: 16px 20px; }
.rdap2-whois-pre {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 14px 16px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;
  max-height: 460px; overflow-y: auto;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Bulk v2                                                                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.bulk2-input-wrap  { position: relative; max-width: 380px; flex: 1; }
.bulk2-sld-input {
  width: 100%; padding: 10px 12px 10px 40px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: rgba(255,255,255,.75);
  font-family: inherit; font-size: 15px; color: var(--text-primary);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.bulk2-sld-input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.1); }
.bulk2-sld-input::placeholder { color: var(--text-muted); }

/* TLD-Chips */
.bulk2-tld-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk2-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
  border-radius: 8px; border: 1.5px solid var(--border-color);
  background: var(--bg-secondary); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  transition: all .13s; user-select: none;
}
.bulk2-chip:hover     { border-color: rgba(var(--accent-ui-rgb),.3); color: var(--text-primary); }
/* Tastatur-Fokus im Violett-Ton, wie .chip / .xf-qchip / .badge-action. */
.bulk2-chip:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; border-color: rgba(var(--accent-ui-rgb),.22); color: var(--accent-ui); }
/* Aktiv-Zustand am Muster der .chip-Familie: Rand .22 statt Volldeckung. */
.bulk2-chip.is-active { background: rgba(var(--accent-ui-rgb),.09); border-color: rgba(var(--accent-ui-rgb),.22); color: var(--accent-ui); }
.bulk2-chip-dot       { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.bulk2-dot-cc         { background: #0d9488; }
.bulk2-dot-g          { background: var(--accent-ui); }
.bulk2-dot-n          { background: #2563eb; }
.bulk2-chip-check     { opacity: 0; transition: opacity .12s; }
.bulk2-chip.is-active .bulk2-chip-check { opacity: 1; }

/* Presets */
.bulk2-tld-section { padding: 16px 0; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.bulk2-tld-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bulk2-preset-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* .bulk2-preset → see .mini-btn */
.bulk2-preset-neutral { color: var(--text-secondary); background: var(--bg-secondary); border-color: var(--border-color); }
.bulk2-preset-neutral:hover { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--border-color); }

/* Fortschritt */
.bulk2-progress-wrap  { }
.bulk2-progress-bar   { height: 4px; background: var(--bg-secondary); border-radius: 99px; overflow: hidden; }
.bulk2-progress-fill  { height: 100%; background: linear-gradient(90deg, var(--accent-ui), var(--accent-ui-soft)); border-radius: 99px; transition: width .3s ease; width: 0%; }
.bulk2-progress-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* Ergebnis-Header */
.bulk2-result-hd    { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.bulk2-result-title { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.bulk2-result-idna  { font-size: 14px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.bulk2-result-sub   { font-size: 12px; color: var(--text-muted); }
.bulk2-stat-pills   { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk2-pill         { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.bulk2-pill-avail   { background: rgba(34,197,94,.12); color: #16a34a; }
.bulk2-pill-reg     { background: rgba(100,116,139,.10); color: var(--badge-neutral-text); border: 1px solid rgba(100,116,139,.20); height: 22px; padding-top: 0; padding-bottom: 0; }
.bulk2-pill-err     { background: rgba(239,68,68,.1); color: #dc2626; }

/* Ergebnis-Tabelle */
.bulk2-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); white-space: nowrap; padding: 9px 16px;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); text-align: left;
}
.bulk2-table td { padding: 11px 16px; font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
.bulk2-table tbody tr:last-child td { border-bottom: none; }
.bulk2-table tbody tr:hover { background: rgba(var(--accent-ui-rgb),.028); }
.bulk2-domain-cell { display: flex; align-items: center; }
.bulk2-domain-sld  { font-weight: 600; color: var(--text-primary); }
.bulk2-domain-tld  { color: var(--accent-color); font-weight: 700; }

/* Status-Badges Bulk */
.bulk2-badge-avail {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(34,197,94,.12); color: #16a34a;
}
.bulk2-badge-taken {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--bg-secondary); color: var(--text-secondary);
}
.bulk2-badge-premium {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  background: rgba(217,119,6,.12); color: #b45309; margin-left: 4px;
}
.bulk2-badge-err {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(239,68,68,.1); color: #dc2626;
}
.bulk2-badge-checking {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; background: var(--bg-secondary); color: var(--text-muted);
}
.bulk2-src-tag {
  font-size: 11px; color: var(--text-muted); background: var(--bg-secondary);
  padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono);
}
/* Zeilen-Aktion „Details": nur kompakte Maße – Farbe liefert `.btn-accent`. */
.bulk2-details-btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 7px;
}


/* ── RDAP / Bulk 2-column layout ─────────────────────────────────────────── */
.rdap2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.rdap2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) {
  .rdap2-layout { grid-template-columns: 1fr; }
}

/* ── Einheitliche Eingabefeld-Optik (alle Inputs) ───────────────────────── */
input[type="text"]:not(.field-input):not(.field-select),
input[type="email"]:not(.field-input),
input[type="password"]:not(.field-input),
input[type="number"]:not(.field-input),
input[type="url"]:not(.field-input),
input[type="search"]:not(.field-input),
select:not(.field-input):not(.field-select),
textarea:not(.field-input):not(.field-textarea),
.rdap2-search-input,
.bulk2-sld-input,
.tld-search-input,
.ssl-search-input {
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input[type="text"]:not(.field-input):not(.field-select):focus,
input[type="email"]:not(.field-input):focus,
input[type="password"]:not(.field-input):focus,
input[type="number"]:not(.field-input):focus,
input[type="url"]:not(.field-input):focus,
input[type="search"]:not(.field-input):focus,
select:not(.field-input):not(.field-select):focus,
textarea:not(.field-input):not(.field-textarea):focus,
.rdap2-search-input:focus,
.bulk2-sld-input:focus,
.tld-search-input:focus,
.ssl-search-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),0.18), 0 1px 3px rgba(15,23,42,0.06) !important;
  outline: none !important;
}

/* ── Table sorting ──────────────────────────────────────────────────────── */
.domain-table-th {
  cursor: default;
}
.domain-table-th.th-sortable {
  cursor: pointer;
  user-select: none;
}
.domain-table-th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.domain-table-th .th-label {
  transition: color 0.12s;
}
.domain-table-th.th-sortable:hover .th-label {
  color: var(--accent-ui);
}
.domain-table-th .sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.28;
  transition: opacity 0.12s;
}
.domain-table-th.th-sortable:hover .sort-icon { opacity: 0.60; }
.domain-table-th .sort-icon span {
  display: block;
  width: 0;
  height: 0;
}
.domain-table-th .sort-icon .sort-asc  {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid currentColor;
}
.domain-table-th .sort-icon .sort-desc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}
/* Active sort column – only label + arrows colored, no background change */
.domain-table-th.th-sort-asc  .th-label,
.domain-table-th.th-sort-desc .th-label {
  color: var(--accent-ui);
}
.domain-table-th.th-sort-asc  .sort-icon,
.domain-table-th.th-sort-desc .sort-icon { opacity: 1; }
.domain-table-th.th-sort-asc  .sort-icon .sort-asc  { color: var(--accent-ui); }
.domain-table-th.th-sort-asc  .sort-icon .sort-desc { opacity: 0.2; }
.domain-table-th.th-sort-desc .sort-icon .sort-desc { color: var(--accent-ui); }
.domain-table-th.th-sort-desc .sort-icon .sort-asc  { opacity: 0.2; }

/* ── List pagination footer ─────────────────────────────────────────────── */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 20px;
  border-top: 1px solid rgba(var(--text-muted-rgb),0.12);
  background: rgba(var(--bg-2-rgb),0.60);
  border-radius: 0 0 16px 16px;
  font-size: 12px;
}
.list-pagination-info {
  color: var(--text-muted);
  white-space: nowrap;
}
.list-pagination-info strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.list-pagination-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}
.list-pagination-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 2px;
}
.list-pagination-label strong {
  color: var(--text-primary);
  font-weight: 700;
}
.list-page-input {
  width: 44px;
  text-align: center;
  padding: 3px 5px;
  border: 1px solid rgba(var(--text-muted-rgb),0.22);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255,255,255,0.82);
  outline: none;
  font-family: inherit;
}
.list-page-input:focus {
  border-color: rgba(var(--accent-ui-rgb),0.45);
}
.list-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(var(--text-muted-rgb),0.20);
  border-radius: 7px;
  background: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.list-page-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-ui-rgb),0.35);
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb),0.06);
}
.list-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.list-page-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.list-per-page-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}
.list-per-page-select {
  appearance: none;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(var(--text-muted-rgb),0.22);
  border-radius: 7px;
  padding: 3px 22px 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.list-per-page-select:focus { outline: none; border-color: rgba(var(--accent-ui-rgb),0.45); }



/* ── public/assets/css/components/state-unavailable.css ── */
/* ══════════════════════════════════════════════════════════════════════
   Zustand „nicht verfügbar" (.ui-unavailable)

   Kennzeichnet ein Bedienelement, das technisch bedienbar bleibt, dessen
   Wirkung aber durch eine Bedingung ausserhalb der Maske aufgehoben ist.

   Abgrenzung zu den bestehenden Mitteln:
     - `disabled`      Element ist gesperrt und wird beim Absenden nicht
                       übernommen. Falsch, wenn der Wert erhalten bleiben soll.
     - `.muted`        reine Abschwächung (Deckkraft, Graustufen) für
                       Elemente, die gerade nicht sinnvoll sind
                       (z. B. `.ta-btn-transfer.muted`).
     - `.ui-unavailable` zusätzlich eine Schraffur auf der Fläche: macht auf
                       einen Blick erkennbar, dass hier eine *fremde*
                       Bedingung greift, nicht der eigene Formularzustand.

   Erster Anwendungsfall: Rechte-Matrix in „Alias bearbeiten". Ein Alias kann
   nicht mehr dürfen als sein Elternbenutzer; Rechte, die dem Elternbenutzer
   fehlen, bleiben setzbar und werden gespeichert (sonst nähme die Maske
   stillschweigend Rechte weg), sind aber wirkungslos, solange der
   Elternbenutzer sie nicht hat.

   Verwendung – Klasse auf den *Container* des Elements, nicht auf das
   Eingabefeld selbst, plus eine Erklärung als Tooltip:

     <td class="ui-unavailable">
       <input type="checkbox" data-ui-tooltip="…Begründung…">
     </td>

   FARBE: Neutrales Grau (`--badge-neutral-rgb`, Slate-500) – das einzige
   Grau der Palette mit RGB-Variante und damit das einzige, das sich für
   `rgba()` verwenden lässt. Ein Zwischenstand nutzte Amber
   (`--badge-warning-rgb`), weil eine neutrale Schraffur auf der damaligen
   Zebra-Streifung der Rechte-Matrix verschwamm. Seit die Streifung entfernt
   ist (Zellhintergrund einheitlich), trägt Grau besser: Der Zustand ist keine
   Warnung, sondern eine sachliche Einschränkung – Amber, Rot und Teal bleiben
   ihren Bedeutungen vorbehalten.

   TECHNIK: Die Schraffur liegt als Pseudo-Element-Overlay auf der Fläche,
   nicht als `background-image`. Grund: Hintergrundregeln des Aufrufers nutzen
   häufig die Kurzform `background:` und haben oft höhere Spezifität
   (`.tabelle tbody tr:hover td`) – die Kurzform setzt `background-image`
   zurück und löschte die Schraffur. Als Overlay ist die Komponente unabhängig
   davon, was der Aufrufer am Hintergrund macht.

   Winkel (135°) und Streifenbreite (4px/8px) sind bewusst fein gehalten,
   damit Häkchen und Text darüber lesbar bleiben.
   ══════════════════════════════════════════════════════════════════════ */

.ui-unavailable {
  position: relative;
}

.ui-unavailable::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(var(--badge-neutral-rgb), .20) 0 4px,
    transparent 4px 8px
  );
}

/* Inhalt über das Overlay heben, damit die Streifen nicht über Häkchen und
   Text liegen. */
.ui-unavailable > * {
  position: relative;
  z-index: 1;
}

/* Bedienelemente zurücknehmen – gleiches Mittel wie `.muted`. Deckkraft
   genügt; `grayscale()` wäre bei einer grauen Schraffur ohnehin wirkungslos. */
.ui-unavailable input,
.ui-unavailable select,
.ui-unavailable textarea {
  opacity: .45;
}

@media (prefers-contrast: more) {
  .ui-unavailable::before {
    background-image: repeating-linear-gradient(
      135deg,
      rgba(var(--badge-neutral-rgb), .40) 0 4px,
      transparent 4px 8px
    );
  }
  .ui-unavailable input,
  .ui-unavailable select,
  .ui-unavailable textarea { opacity: .7; }
}


/* ── public/assets/css/components/segmented.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Segmented Control (`.opt-seg` / `.opt-seg-btn`)
   Der System-Segment-Switch für exklusive Auswahl aus 2–3 Optionen.
   Nutzer: Zahlungsart (`contract-fin-payment.php`, `contract-fin-edit.php`),
   Auto-Renew (`domain-register.js`), Report-Format (`reports.php`).

   Lag zuvor in `pages/contract-rich.css` und wurde von dort seitenübergreifend
   mitgenutzt – mit dem dritten Nutzer nach `components/` verschoben (TPL-03:
   `pages/` nur für seitenspezifisches CSS). Die Regeln sind unverändert
   übernommen; ergänzt wurde lediglich `width: fit-content` (s. u.).

   Zustandsklasse ist `.active` (projektweit für Segmente und Tabs, s. Kap. 8),
   Aktivfüllung kommt aus `--seg-active`. Markup: Container `role="radiogroup"`,
   Segmente `role="radio"` + `aria-checked` (Ausnahme Auto-Renew: reine Anzeige,
   daher `role="group"` und `disabled`).
   ══════════════════════════════════════════════════════════════════════════════ */

.opt-seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  /* Ohne definite Breite dehnt ein Flex-/Grid-Elternteil mit dem Default
     `align-items: stretch` das inline-flex auf die volle Spaltenbreite – so lief
     der Balken der Zahlungsart (Elternteil `.crd-fg`, column-flex, in
     `.cfp-full` über die ganze Formularbreite) bis zum rechten Rand durch.
     `fit-content` statt `align-self: flex-start`, weil `align-self` in einem
     row-flex Elternteil die Querachse = vertikale Ausrichtung trifft und dort
     die Zentrierung zerstören würde (z. B. Auto-Renew in `.opt-ctrl`). */
  width: fit-content;
}
.opt-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.opt-seg-btn + .opt-seg-btn { border-left: 1px solid var(--border); }
.opt-seg-btn:hover:not(.active):not(:disabled) { background: var(--badge-neutral-bg); }
.opt-seg-btn.active { background: var(--seg-active); color: #fff; }
/* Statusabhängige Einfärbung des aktiven Segments (Auto-Renew).
   Alle Werte über Token, damit theme-calm/theme-reseller greifen – die drei
   Token sind dort überschrieben und im Default-Theme wertgleich zu den vorher
   hier stehenden Literalen (#D97706 → --badge-warning-text, var(--badge-neutral-text) →
   --badge-neutral-text). Für die Füllfläche von "disabled" gibt es kein
   Flächen-Token: die vorherigen #e4e8ed sind der Neutral-Grundton bei 18 % auf
   Weiß (0.18 × 100 + 0.82 × 255 ≈ 228). Bewusst `color-mix` statt `rgba(…,0.18)`:
   die alte Farbe war deckend, eine Alpha-Fläche würde den nicht reinweißen
   Untergrund (`--surface-2` auf der Karte) durchscheinen lassen und dadurch rund
   9 Einheiten dunkler wirken. `#fff` bleibt als Textfarbe auf gefüllter Fläche
   stehen – dafür existiert projektweit kein Token (40 weitere Vorkommen in
   components/ und layout/). */
.opt-seg-btn.active[data-seg-val="active"] {
  background: var(--badge-teal-text);
  color: #fff;
}
.opt-seg-btn.active[data-seg-val="disabled"] {
  background: color-mix(in srgb, rgb(var(--badge-neutral-rgb)) 18%, #fff);
  color: var(--badge-neutral-text);
}
.opt-seg-btn.active[data-seg-val="disabled_release"] {
  background: var(--badge-warning-text);
  color: #fff;
}
.opt-seg-btn:disabled { cursor: default; }
.opt-seg.is-locked { opacity: .45; }
.opt-seg.is-locked .opt-seg-btn { cursor: not-allowed; }


/* ── public/assets/css/pages/domain-filter.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Domain Filter V2 – Sidebar Layout
   ══════════════════════════════════════════════════════════════════════════════ */

/* Split-Wrapper: table + filter sidebar nebeneinander */
.domain-split {
  display: grid;
  grid-template-columns: 1fr;
}
.domain-split.filter-open {
  grid-template-columns: 1fr 225px;
}

/* ── Listen-Ansichts-Umschalter (Variante B: Domains ↔ Verifizierungen) ── */
.dlv-seg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: rgba(var(--text-muted-rgb),0.14);
  border: 1px solid rgba(var(--text-muted-rgb),0.18);
}
.dlv-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.dlv-seg-btn svg { width: 15px; height: 15px; }
.dlv-seg-btn:hover { color: var(--text-primary); }
.dlv-seg-btn.on {
  background: #fff;
  color: var(--primary-600);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}

/* Verifizierungs-Tabelle: Platzhalter / Ladezustand */
.verif-empty {
  text-align: center;
  padding: 34px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.verif-empty.verif-error { color: var(--color-rose); }

/* Filter-Sidebar */
.domain-filter-sidebar {
  display: none;
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(var(--text-muted-rgb),0.12);
  align-self: stretch;
  overflow: visible;
  position: relative;
}
.domain-split.filter-open .domain-filter-sidebar {
  display: block;
}
.dfs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.12);
}
.dfs-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}
.dfs-reset {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.dfs-reset:hover { color: var(--accent); }

/* Sektionen */
.dfs-section {
  padding: 14px 16px 0;
}
.dfs-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dfs-clear {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dfs-clear:hover { color: var(--accent); }

/* Toggle-Filter (z. B. Nachrichten einblenden) */
.dfs-section--toggle {
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(var(--border-mid-rgb), 0.8);
}
.dfs-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.dfs-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dfs-toggle-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.dfs-toggle-hint {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
}
.dfs-switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; }
.dfs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dfs-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.dfs-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.dfs-switch input:checked + .dfs-switch-track {
  background: linear-gradient(135deg, var(--accent-ui), var(--accent-ui-alt));
}
.dfs-switch input:checked + .dfs-switch-track .dfs-switch-thumb {
  transform: translateX(16px);
}
.dfs-switch input:focus-visible + .dfs-switch-track {
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb), 0.3);
}

/* Message-Zeilen in der Historie (Hybrid: Nachrichten dazugemischt) */
.msg-row > td { background: rgba(var(--accent-ui-light-rgb), 0.04); }
.msg-row--warn > td { background: rgba(245, 158, 11, 0.06); }
.msg-row:hover > td { background: rgba(var(--accent-ui-light-rgb), 0.08) !important; }
.msg-row--warn:hover > td { background: rgba(245, 158, 11, 0.1) !important; }
.msg-icon svg { width: 13px; height: 13px; }
.msg-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.msg-type-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
/* Farbbalken der Nachrichten-Detail-Zeile. Nur box-shadow, kein
   background/border – dadurch kann weder ".msg-row:hover > td" noch
   ".txn-step-detail-row:hover td { background: inherit }" den Balken
   verfärben. Farbwerte aus denselben Badge-Token wie Icon-Box und Badge.
   Warum keine rowspan-Lösung wie bei den History-Step-Zeilen: siehe Kommentar
   an barCls in widget-list.js (Kopfzeile dauerhaft sichtbar, Detail-Zeile
   eingeklappt – rowspan würde in die nächste sichtbare Zeile übergreifen). */
.msg-sd-strip { padding: 0; }
.msg-bar--warn   { box-shadow: inset 3px 0 0 0 rgba(var(--badge-warning-rgb),0.4); }
.msg-bar--notice { box-shadow: inset 3px 0 0 0 rgba(var(--badge-purple-rgb),0.4); }
.msg-log-message {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
  /* gleicher Grund wie bei .record-detail-hint: Rohtext mit echten
     Zeilenumbrüchen soll diese auch anzeigen statt sie zu kollabieren. */
  white-space: pre-line;
}
.msg-log-message + .record-detail-hint { margin-top: 8px; }
.msg-new-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-ui-strong);
  /* Vorher: "var(--accent-ui-light)1f" bzw. "…)55" – ein Alpha-Suffix direkt an
     einen var()-Aufruf ist ungültiges CSS, beide Deklarationen wurden verworfen
     und die Pille erschien als reiner Text ohne Füllung/Rahmen. Jetzt dieselben
     Badge-Token wie beim benachbarten "Mitteilung"-Badge und der Icon-Box; die
     kräftigere Textfarbe bleibt zur Hervorhebung erhalten. */
  background: var(--badge-purple-bg);
  border: 1px solid var(--badge-purple-border);
}

/* Chips (Multi-Select) */
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chip-wrap--grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.chip-wrap--grid2 .chip {
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(var(--text-muted-rgb),0.20);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
/* Hover: violette Tönung + Randfarbe – dasselbe Muster wie .zone-type-card
   und .tld-dd-tile (bg .06 / border .30). Bewusst ohne Ring, der bleibt dem
   Tastatur-Fokus vorbehalten. Zuvor wechselte nur der Weißanteil der Fläche
   (.55 -> .88), was auf hellem Untergrund praktisch unsichtbar war. */
.chip:hover {
  background: rgba(var(--accent-ui-rgb),0.06);
  border-color: rgba(var(--accent-ui-rgb),0.30);
  color: var(--accent-ui);
}
/* Tastatur-Fokus im etablierten transparent-violetten Chip-Ton (V4). */
.chip:focus-visible {
  outline: 2px solid var(--accent-ui);
  outline-offset: 2px;
  background: rgba(var(--accent-ui-rgb),0.09);
  color: var(--accent-ui);
  border-color: rgba(var(--accent-ui-rgb),0.20);
}
/* Aktiv-Zustand. Einheitliches Muster über alle Farbvarianten:
   Fläche 0.09, Rand 0.22, Text = Farbton. Die Farbvarianten bleiben absichtlich
   erhalten – ein Status-Filter-Chip „active" soll beim Auswählen den Farbton des
   zugehörigen Status-Badges annehmen. Vereinheitlicht wurde das Muster, nicht
   der Farbton (zuvor wichen chip-red mit 0.10/0.25 und chip-muted mit 0.12/0.28
   ab). Zustandsklasse projektweit .is-active (vormals .sel/.on/.active). */
.chip.is-active           { background: rgba(var(--accent-ui-rgb),0.09); color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),0.22); }
.chip.chip-teal.is-active { background: rgba(var(--badge-teal-rgb),0.09);  color: var(--badge-teal-text); border-color: rgba(var(--badge-teal-rgb),0.22); }
.chip.chip-amber.is-active{ background: rgba(var(--badge-warning-rgb),0.09);   color: var(--badge-warning-text); border-color: rgba(var(--badge-warning-rgb),0.22); }
/* chip-red und chip-orange haben keine passende Badge-Familie (239,68,68 bzw.
   249,115,22) und bleiben fest. Sie folgen dem Theme also nicht, brechen aber
   auch nicht auseinander, da Fläche und Schrift im selben Farbton liegen
   (chip-red bewusst mit etwas dunklerer Schrift: #dc2626 auf #ef4444-Fläche). */
.chip.chip-red.is-active  { background: rgba(239,68,68,0.09);   color: #dc2626; border-color: rgba(239,68,68,0.22); }
.chip.chip-rose.is-active { background: rgba(var(--badge-danger-rgb),0.09);   color: var(--badge-danger-text); border-color: rgba(var(--badge-danger-rgb),0.22); }
.chip.chip-muted.is-active{ background: rgba(var(--badge-neutral-rgb),0.09); color: var(--text-secondary); border-color: rgba(var(--badge-neutral-rgb),0.22); }
.chip.chip-blue.is-active { background: rgba(var(--badge-info-rgb),0.09);   color: var(--badge-info-text); border-color: rgba(var(--badge-info-rgb),0.22); }
.chip.chip-orange.is-active{background: rgba(249,115,22,0.09);  color: #f97316; border-color: rgba(249,115,22,0.22); }
.chip.chip-purple.is-active{background: rgba(var(--accent-ui-alt-rgb),0.09);  color: var(--accent-ui-alt); border-color: rgba(var(--accent-ui-alt-rgb),0.22); }

/* Aktive Chips sind bereits getönt – .chip:hover würde von .chip.is-active
   überschrieben. Hover vertieft daher nur die Fläche und behält den Farbton
   der jeweiligen Variante bei (currentColor als Quelle). */
.chip.is-active:hover { background: color-mix(in srgb, currentColor 16%, transparent); }

/* ── .chip--clearable: × am aktiven Chip ──────────────────────────────────────
   Nur für Filter-Gruppen, die sich durch erneuten Klick LEEREN lassen
   (dfsChipClick -> '*', dfsRangePresetClick, cdwChipClick -> ''). Das × macht
   sichtbar, dass ein weiterer Klick den Filter aufhebt.

   Bewusst KEIN „+" am inaktiven Chip: keine dieser Gruppen ist eine
   Mehrfachauswahl – ein Klick ersetzt den Gruppenwert, er fügt nichts hinzu.
   Ein + würde also eine Semantik behaupten, die der Handler nicht hat.
   Nicht angewandt auf .xf-qchip und die Sprach-Chips (dort ist immer genau ein
   Wert gesetzt, es gibt keinen leeren Zustand) sowie auf .bulk2-chip (echte
   Mehrfachauswahl, hat bereits das eingeblendete Häkchen .bulk2-chip-check).

   Der Platz für das Symbol wird immer reserviert (opacity 0 im inaktiven
   Zustand), damit der Chip beim Umschalten nicht die Breite ändert. */
.chip--clearable { gap: 4px; padding-right: 7px; }
.chip--clearable::after {
  content: '';
  width: 10px; height: 10px; flex-shrink: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s;
  -webkit-mask: var(--chip-clear-ico) center / contain no-repeat;
          mask: var(--chip-clear-ico) center / contain no-repeat;
  --chip-clear-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.chip--clearable.is-active::after       { opacity: .55; }
.chip--clearable.is-active:hover::after { opacity: 1; }

/* Toggle-Zeilen (Checkbox-Stil) */
.toggle-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  gap: 8px;
  margin-bottom: 4px;
}
.toggle-row:last-child { margin-bottom: 0; }
.toggle-row:hover .tr-label { color: var(--text-primary); }
.tr-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(var(--text-muted-rgb),0.30);
  background: rgba(255,255,255,0.72);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.tr-check.checked { background: var(--accent-ui); border-color: var(--accent-ui); }
.tr-check.checked svg { display: block; }
.tr-check svg { display: none; width: 10px; height: 10px; }
.tr-label { font-size: 12.5px; color: var(--text-secondary); flex: 1; }
.tr-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(var(--text-muted-rgb),0.12);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ── Date-Range-Picker (Option A: Chips im Kalender + Dual-Input + Flatpickr) ── */
.date-pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
/* Horizontales Von/Bis-Layout, kompakt für schmalen Filter-Slider */
.dp-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
}
.dp-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dp-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(var(--text-muted-rgb),0.22);
  border-radius: 7px;
  padding: 5px 7px;
  cursor: pointer;
  width: 100%;
  transition: border-color .14s, background .14s;
  box-sizing: border-box;
}
.dp-input:hover {
  background: #fff;
  border-color: rgba(var(--text-muted-rgb),0.38);
}
.dp-input--has-value {
  border-color: rgba(var(--accent-ui-rgb),0.35);
  background: rgba(var(--accent-ui-rgb),0.04);
}
.dp-input-icon {
  display: none;
}
.dp-input-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-input-text.dp-placeholder {
  color: var(--text-muted);
}
.dp-input::after {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.dp-sep {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-bottom: 5px;
  line-height: 1;
}
.date-pair .date-range-anchor {
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}

/* Freitext + Select */
.sf-input,
.sf-select {
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--text-muted-rgb),0.20);
  background: rgba(255,255,255,0.78);
  color: var(--text-primary);
  font: 500 13px inherit;
  outline: none;
  transition: border-color 0.15s;
}
.sf-input:focus, .sf-select:focus { border-color: rgba(var(--accent-ui-rgb),0.40); }
.sf-input::placeholder { color: var(--text-muted); }

/* ── Typeahead-Filter (Name → product_id) ── */
.sf-typeahead { position: relative; width: 100%; }
.sf-typeahead-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(var(--text-muted-rgb),0.22);
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,0.14);
}
.sf-ta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.sf-ta-item:hover, .sf-ta-item.active { background: rgba(var(--accent-ui-rgb),0.10); }
.sf-ta-name { font: 600 13px inherit; color: var(--text-primary); }
.sf-ta-id { font: 500 10px ui-monospace, monospace; color: var(--text-muted); white-space: nowrap; opacity: .85; }

/* ── user_scope Filter ── */
.sf-user-scope {
  width: 100%;
}
.sf-user-scope-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.sf-user-scope-wrap .sf-user-scope-text {
  width: 100%;
  padding-right: 88px;
}
.sf-user-scope-wrap .sf-user-scope-text:disabled {
  background: var(--color-bg-1);
  cursor: not-allowed;
  color: var(--text-muted);
}
.sf-user-scope-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(var(--text-muted-rgb),0.25);
  border-radius: 5px;
  overflow: hidden;
  height: 24px;
  flex-shrink: 0;
}
.sf-scope-btn {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  height: 100%;
  white-space: nowrap;
  transition: background .12s, color .12s;
  line-height: 1;
}
.sf-scope-btn:hover:not(.active) { background: rgba(var(--text-muted-rgb),0.15); }
.sf-scope-mine.active { background: rgba(82,121,111,0.13); color: #3d7065; }
.sf-scope-all.active  { background: rgba(74,111,165,0.13); color: #3a6496; }
.sf-scope-div {
  width: 1px;
  height: 14px;
  background: rgba(var(--text-muted-rgb),0.3);
  flex-shrink: 0;
}


.dfs-footer {
  padding: 24px 16px 12px;
}
.dfs-footer .btn {
  width: 100%;
  justify-content: center;
}

/* Aktive-Filter-Tags (kompakte Zeile über der Tabelle) */
.active-filters-compact {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),0.12);
  align-items: center;
  background: rgba(var(--accent-ui-rgb),0.025);
}
.active-filters-compact.visible { display: flex; }
.af-label-compact {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
}
.af-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px 0 9px;
  border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),0.09);
  border: 1px solid rgba(var(--accent-ui-rgb),0.20);
  color: var(--accent-ui);
  font-size: 11px;
  font-weight: 600;
}
.af-tag button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  transition: opacity 0.12s;
}
.af-tag button:hover { opacity: 1; }
.af-tag button svg { width: 9px; height: 9px; }
.af-sep { flex: 1; }
.af-clear-all {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.af-clear-all:hover { color: var(--accent-ui); }

/* Portfolio in stat-card */
.stat-card.portfolio {
  padding: 16px 18px;
}
.stat-card.portfolio .stat-label { margin-bottom: 10px; }
.portfolio-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.portfolio-inner .donut-chart {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}
.portfolio-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.portfolio-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.portfolio-legend .legend-val {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Filter-Button-Aktiv-Zustand */
.filter-button.filter-active {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent-ui);
  border-color: rgba(var(--accent-ui-rgb),0.20);
}



/* ── public/assets/css/pages/contract-rich.css ── */
/* ══════════════════════════════════════════════════════════════════
   contract-rich.php – Vertragsdaten / Kontakt-Handle-Verwaltung
   ══════════════════════════════════════════════════════════════════ */

/* Split-Layout: Hauptinhalt | Panel */
.crd-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}
.crd-split.panel-open {
  grid-template-columns: 1fr 320px;
}

/* Hauptinhalt */
.crd-main {
  padding: 18px 20px;
  min-width: 0;
}

/* Rechtes Panel */
.crd-panel {
  display: none;
  border-left: 1px solid rgba(var(--text-muted-rgb),.15);
  background: rgba(255,255,255,.62);
  min-width: 0;
}
.crd-split.panel-open .crd-panel {
  display: block;
}
.crd-panel-inner {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.crd-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.crd-panel-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.crd-panel-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.crd-panel-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(var(--text-muted-rgb),.18);
  background: rgba(255,255,255,.7);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.crd-panel-close:hover { background: rgba(255,255,255,1); }
.crd-panel-close svg { width: 14px; height: 14px; }

/* Panel-Tabs */
.crd-panel-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(var(--text-muted-rgb),.15);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}
.crd-ptab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font: 600 12px var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.crd-ptab svg { width: 13px; height: 13px; }
.crd-ptab.active {
  background: white;
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

/* Adress- / System-Info-Blocks */
.crd-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}
.crd-info-block {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(var(--text-muted-rgb),.14);
  border-radius: 12px;
  padding: 13px 15px;
}
.crd-block-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.crd-block-title svg { width: 12px; height: 12px; }
/* Karten-Aktion im Blocktitel (z. B. Historie-Button, rechtsbündig).
   Nur Geometrie – die Akzent-Tönung liefert `.icon-btn--accent`. */
.crd-title-action {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.crd-title-action svg { width: 13px; height: 13px; }
/* Datum + Benutzer-Pille: kontrollierter Umbruch statt hängendem Badge */
.crd-dateby {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  min-width: 0;
}
.crd-dateby-date { white-space: nowrap; }
.crd-field-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.07);
  font-size: 13px;
}
.crd-field-row:last-child { border-bottom: none; padding-bottom: 0; }
.crd-empty-note {
  padding: 4px 0 2px;
  color: var(--text-muted);
  font-size: 13px;
}
.crd-fkey {
  min-width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}
/* SSL-Detail (Zertifikat-Details): breitere Label-Spalte für Approver-Zeilen */
#ssld-cert-body .crd-fkey { min-width: 150px; }
.crd-fval {
  font-weight: 600;
  color: var(--text-primary);
}

/* AuthInfo Credential-Box (Domain-Detail) */
.ddet-cred {
  background: rgba(var(--accent-ui-rgb),.045);
  border: 1px dashed rgba(var(--accent-ui-rgb),.28);
  border-radius: 10px;
  padding: 12px 14px;
}
.ddet-cred-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ddet-cred-code {
  font-size: 15px;
  letter-spacing: .02em;
  word-break: break-all;
}
.ddet-cred-meta {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.16);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.ddet-cred-meta b { color: var(--text-primary); font-weight: 600; }

/* Kontakt-Handle-Grid */
.crd-handle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crd-hcard {
  position: relative;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(var(--text-muted-rgb),.15);
  border-radius: 12px;
  padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s;
  min-width: 0;
}
.crd-hcard.just-copied { animation: crd-copy-flash .9s ease; }
@keyframes crd-copy-flash {
  0%   { background: rgba(22,163,74,.10); }
  100% { background: rgba(255,255,255,.48); }
}
.crd-hcard:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.07);
}

/* ── Schnellzugriffe: Griff (ziehen) und × (leeren) ───────────────────────
   Beide erscheinen erst beim Hover bzw. bei Tastaturfokus, damit die Karte
   im Ruhezustand nicht mit Bedienelementen überladen wirkt. Das × bleibt für
   Screenreader immer im DOM und per Tab erreichbar.

   28×28 px Zielfläche: über den 24 px, die WCAG 2.2 (2.5.8 Target Size) als
   Minimum nennt – beide Elemente liegen direkt nebeneinander und werden auch
   auf Touch-Geräten getroffen. */
.crd-hcard-quick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity .12s;
}
.crd-hcard:hover .crd-hcard-quick,
.crd-hcard:focus-within .crd-hcard-quick { opacity: 1; }

.crd-hcard-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-tertiary);
  cursor: grab;
  transition: color .12s, background .12s, border-color .12s;
}
.crd-hcard-grip:hover,
.crd-hcard-grip:focus-visible {
  color: rgb(var(--accent-ui-rgb));
  background: rgba(var(--accent-ui-rgb),.08);
  border-color: rgba(var(--accent-ui-rgb),.20);
}
.crd-hcard-grip svg { width: 18px; height: 18px; }
.crd-hcard.is-drag-source { opacity: .55; }

/* Leere Rollen-Kachel: Skeleton-Platzhalter statt leerer Fläche. Signalisiert,
   dass hier ein Kontakt erwartet wird (per Drag&Drop oder „Auswählen"). */
.crd-hcard-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.crd-hcard-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px dashed rgba(0,0,0,.14);
  background: rgba(var(--text-muted-rgb),.10);
  color: var(--text-muted);
}
.crd-hcard-empty-ico svg { width: 15px; height: 15px; }
.crd-hcard-empty-txt {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.crd-hcard-empty-txt b { color: var(--text-tertiary); font-weight: 700; }

.crd-hcard-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.crd-hcard-clear:hover,
.crd-hcard-clear:focus-visible {
  color: #e11d48;
  background: rgba(225,29,72,.09);
  border-color: rgba(225,29,72,.20);
}
.crd-hcard-clear svg { width: 15px; height: 15px; }

/* Aktives Drop-Ziel: gestrichelter Rahmen, damit „hier landet es" auch ohne
   Farbwahrnehmung erkennbar ist. */
.crd-hcard.is-drop-target {
  border-color: rgb(var(--accent-ui-rgb));
  border-style: dashed;
  background: rgba(var(--accent-ui-rgb),.07);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.10);
}

.crd-hcard-role {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Platz für Griff und × dauerhaft freihalten – die „von …"-Markierung sitzt
   per margin-left:auto rechts und würde sonst beim Hover überdeckt. Reserviert
   statt beim Hover umzubrechen, damit die Zeile nicht springt. */
.crd-hcard:has(.crd-hcard-quick) .crd-hcard-role { padding-right: 66px; }

.crd-copied-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #16a34a;
  background: rgba(22,163,74,.09);
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 999px;
  padding: 1px 7px;
}
.crd-copied-tag svg { width: 10px; height: 10px; }
.crd-hcard-handle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.crd-hcard-handle {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.crd-huser-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  border-radius: 50%;
  vertical-align: super;
  cursor: help;
  line-height: 0;
}
.crd-huser-mark svg { width: 9px; height: 9px; display: block; }
.crd-huser-mark--ok {
  background: rgba(22,163,74,.12);
  color: #16a34a;
}
.crd-huser-mark--diff {
  background: rgba(234,179,8,.15);
  color: #d97706;
}
/* Kontakttyp „Person" / „Organisation" – bewusst in Normalschreibung, wie in
   Listen, Filter-Chips, Side-Panel-Chips und Donut-Legende. Uppercase stammt
   noch aus der Zeit, als hier der API-Rohwert (organisation/person) stand.
   Im Card bleibt Uppercase der Rollen-Kennung (.crd-hcard-role: ADMIN-C)
   vorbehalten; lesbare Attribute wie dieser Typ und „Handle vorgemerkt"
   (.crd-hcard-pending-badge) stehen in Normalschreibung. */
.crd-htype-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.6;
  white-space: nowrap;
}
.crd-hbadge-org {
  background: rgba(var(--accent-ui-alt-rgb),.09);
  color: var(--accent-ui-alt);
  border: 1px solid rgba(var(--accent-ui-alt-rgb),.2);
}
.crd-hbadge-person {
  background: rgba(249,115,22,.09);
  color: #f97316;
  border: 1px solid rgba(249,115,22,.2);
}
/* ── Skeleton Shimmer ─────────────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.sk-block {
  display: inline-block;
  border-radius: 7px;
  background: linear-gradient(90deg,
    rgba(var(--text-muted-rgb),.10) 25%,
    rgba(var(--text-muted-rgb),.24) 50%,
    rgba(var(--text-muted-rgb),.10) 75%);
  background-size: 200% auto;
  animation: sk-shimmer 1.5s ease-in-out infinite;
  vertical-align: middle;
}
.sk-stat {
  width: 54px;
  height: 28px;
  border-radius: 8px;
  display: inline-block;
}
.sk-stat-sm {
  width: 32px;
  height: 20px;
  border-radius: 5px;
}
.crd-hcard-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.crd-hcard-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--accent-ui-rgb),0.15);
  border-top-color: var(--accent-ui);
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
  flex-shrink: 0;
}
/* ── Fehlerzustand – Kontakt nicht ladbar ──────────────────────────────────────
   In Anlehnung an den domain-favicon-Stil der Rich-Listen (Icon-Block + Text).
   Verwendung: el.innerHTML = '<div class="crd-hcard-error"><div class="crd-hcard-error-icon">SVG</div>
     <div class="crd-hcard-error-body"><div class="crd-hcard-error-title">...</div>
     <div class="crd-hcard-error-sub">...</div></div></div>'
   ─────────────────────────────────────────────────────────────────────────── */
.crd-hcard-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0 3px;
}
.crd-hcard-error-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(245,158,11,.13), rgba(234,88,12,.09));
  border: 1px solid rgba(245,158,11,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  flex-shrink: 0;
}
.crd-hcard-error-icon svg { width: 13px; height: 13px; }
.crd-hcard-error-body { min-width: 0; }
.crd-hcard-error-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 2px;
}
.crd-hcard-error-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Info-/Leer-Zustand – neutrale Variante (z. B. "Keine Einträge gefunden") ──
   Gleiche Struktur wie .crd-hcard-error, aber ohne farbigen Icon-Box-Hintergrund.
   Verwendung: gleiche HTML-Struktur mit .crd-hcard-info statt .crd-hcard-error.
   ─────────────────────────────────────────────────────────────────────────── */
.crd-hcard-info              { display: inline-flex; align-items: flex-start; gap: 9px; text-align: left; }
.crd-hcard-info-icon         { width: 30px; height: 30px; min-width: 30px; border-radius: 7px;
                                background: transparent; border: 1px solid var(--border-soft);
                                display: flex; align-items: center; justify-content: center;
                                color: var(--text-muted); flex-shrink: 0; }
.crd-hcard-info-icon svg     { width: 13px; height: 13px; }
.crd-hcard-info-body         { min-width: 0; }
.crd-hcard-info-title        { font-size: 12px; font-weight: 600; color: var(--text-secondary);
                                line-height: 1.35; margin-bottom: 2px; }
.crd-hcard-info-sub          { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.crd-hcard-name-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 1px;
}
.crd-hcard-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.crd-hcard-disclosure-icon {
  margin-top: -2px;
}
.crd-hcard-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.crd-hbadge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.6;
  text-transform: uppercase;
}
.crd-hbadge-type {
  background: rgba(var(--accent-ui-rgb),.08);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-ui-rgb),.18);
}
.crd-hbadge-disc {
  background: rgba(13,148,136,.08);
  color: var(--badge-teal-text);
  border: 1px solid rgba(13,148,136,.2);
}
.crd-hcard-meta-muted { color: var(--text-muted); }
.crd-hcard-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crd-hcard-meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.crd-hcard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.09);
}
.crd-hcard-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.crd-hcard-change svg { width: 11px; height: 11px; }
.crd-hcard-change[hidden] { display: none !important; }
.crd-hcard-change.is-pending {
  color: var(--accent);
}
.crd-hcard-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: rgba(5,150,105,.08);
  border: 1px solid rgba(5,150,105,.2);
  border-radius: 999px;
  padding: 2px 8px 2px 5px;
}
.crd-hcard-pending-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.crd-hcard-selected {
  margin-top: 6px;
}
.crd-hcard-selected-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.crd-hcard-selected-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.crd-hcard-selected-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}
.crd-save-banner-stamm {
  margin-bottom: 16px;
}
.crd-inline-input {
  width: 100%;
  padding: 5px 9px;
  border-radius: 9px;
  border: 1px solid rgba(var(--text-muted-rgb),.22);
  background: rgba(255,255,255,.75);
  font: 13px var(--font-mono);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.crd-inline-input:focus {
  border-color: rgba(var(--accent-ui-rgb),.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.07);
}
.crd-inline-input.mono { font-family: monospace; }

/* Skeleton */
.crd-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skel-row {
  height: 14px;
  background: rgba(var(--text-muted-rgb),.15);
  border-radius: 6px;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skel-w60 { width: 60%; }
.skel-w40 { width: 40%; }
@keyframes skelPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Fehler */
.crd-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 16px;
  color: #e11d48;
  text-align: center;
}
.crd-error svg { width: 30px; height: 30px; flex-shrink: 0; opacity: .75; }
.crd-err-title { font-size: 14px; font-weight: 600; }
.crd-err-msg   { font-size: 12px; color: var(--text-muted); }

/* ── Systemvorgabe: Fehlermeldungen ──────────────────────────────────────────
   Alle Fehler (Validierung, Server-Response, Netzwerk) werden systemweit als
   Toast-Nachricht ausgegeben:

   JS-Muster:
     if (window.Feedback) Feedback.toast('error', Titel, Nachricht, { note, detail });

   Inline-Fehlermeldungen im DOM sind NICHT zu verwenden (außer Login/2FA).
   ─────────────────────────────────────────────────────────────────────────── */

/* Suchformular im Panel */
.crd-search-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.crd-search-chip-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crd-sf-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(var(--text-muted-rgb),.22);
  background: rgba(255,255,255,.75);
  font: 13px var(--font-mono);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}
.crd-sf-input:focus {
  border-color: rgba(var(--accent-ui-rgb),.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.07);
}

.crd-search-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0 6px;
}

/* Suchergebnisse */
.crd-search-results {
  overflow-y: auto;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crd-result-item {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(var(--text-muted-rgb),.15);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.crd-result-item:hover {
  border-color: rgba(var(--accent-ui-rgb),.28);
  background: rgba(var(--accent-ui-rgb),.04);
}
.crd-result-item.selected {
  border-color: rgba(var(--accent-ui-rgb),.45);
  background: rgba(var(--accent-ui-rgb),.07);
}
.crd-ri-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.crd-ri-top .contact-type-pill {
  padding: 2px 7px;
  font-size: 10px;
}
.crd-ri-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.crd-ri-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.crd-ri-name-primary {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}
.crd-ri-subcity {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.crd-ri-org {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.crd-ri-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.crd-ri-meta svg { width: 10px; height: 10px; flex-shrink: 0; }
.crd-ri-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 0;
  white-space: nowrap;
}

/* Erstellen-Formular im Panel */
.crd-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crd-fg { display: flex; flex-direction: column; gap: 2px; }
.crd-flabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.crd-req { color: #e11d48; }
.crd-fg-half { /* used in pairs */ }
.crd-create-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,148,136,.08);
  border: 1px solid rgba(13,148,136,.20);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--badge-teal-text);
  margin-bottom: 10px;
}
.crd-create-success svg { width: 14px; height: 14px; flex-shrink: 0; }
.crd-create-error {
  background: rgba(225,29,72,.06);
  border: 1px solid rgba(225,29,72,.15);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: #e11d48;
  margin-top: 8px;
}

/* Notify-Grid */
.crd-notify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
}
.crd-toggle-block,
.crd-email-block {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(var(--text-muted-rgb),.14);
  border-radius: 12px;
  padding: 14px 16px;
}
.crd-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.07);
}
.crd-toggle-item:last-child { border-bottom: none; padding-bottom: 0; }
.crd-toggle-name  { font-size: 13px; font-weight: 600; }
.crd-toggle-desc  { font-size: 11.5px; color: var(--text-muted); }
/* Toggle-Switch */
.crd-toggle-sw {
  position: relative;
  width: 38px; height: 22px;
  flex-shrink: 0;
  background: rgba(var(--text-muted-rgb),.25);
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  appearance: none;
  -webkit-appearance: none;
}
.crd-toggle-sw::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.crd-toggle-sw.on { background: var(--badge-teal-text); }
.crd-toggle-sw.on::after { transform: translateX(16px); }

/* Options-Toggle: Inline-Save (Spinner) + nicht änderbar (locked) */
.crd-toggle-name { display: inline-flex; align-items: center; gap: 6px; }
.opt-lock { display: inline-flex; color: var(--text-muted); }
.opt-lock[hidden] { display: none; }
.opt-lock svg { width: 12px; height: 12px; }
.opt-ctrl { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.opt-spin {
  width: 13px; height: 13px;
  border: 1.5px solid rgba(var(--text-muted-rgb),.35);
  border-top-color: var(--badge-teal-text);
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
  flex-shrink: 0;
}
.crd-toggle-sw:disabled { cursor: default; }
.crd-toggle-sw.is-locked { opacity: .45; cursor: not-allowed; }
.crd-toggle-item:has(.crd-toggle-sw.is-locked) .crd-toggle-name { color: var(--text-muted); }

/* Auto-Renew 3er-Segment (Aktiv / Aus / Rückgabe) – nur für TLDs mit
   disabled_release-Support. Ersetzt in dieser Zeile den Toggle-Switch.
   Die Komponente selbst liegt in components/segmented.css; hier bleibt nur
   die seitenspezifische Verknüpfung mit der Toggle-Zeile. */
.crd-toggle-item:has(.opt-seg.is-locked) .crd-toggle-name { color: var(--text-muted); }

/* ── Stammdaten 2-Spalten-Layout ──────────────────────────────────────────── */
.crd-stamm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.crd-copyable { display:inline-flex; align-items:center; gap:6px; }
.crd-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0; border: none; background: transparent; cursor: pointer;
  color: rgba(100,116,139,.55);
  border-radius: 5px;
  /* Einzige Quelle für Größe/Radius/Farbe/Transition dieses Buttons – auch
     in Tabellenzellen, wo er mit .dns-zone-copy kombiniert wird (diese
     Klasse liefert dort nur noch das opacity 0→1 bei tr:hover, siehe
     table-cells.css). opacity .12s hier mit aufgenommen, damit das
     Einblenden nicht ruckartig wirkt. color/background ebenfalls auf .12s
     (statt .15s), damit der Hover-Farbwechsel exakt so schnell ist wie beim
     direkt danebenliegenden Copy++-Button (.dns-zone-clip) – zentral
     identisch für alle Tabellen. */
  transition: opacity .12s, color .12s, background .12s;
  flex-shrink: 0;
}
.crd-copy-btn:hover { color: var(--accent); background: rgba(var(--accent-ui-rgb),.08); }
.crd-copy-btn svg { width: 13px; height: 13px; }
.crd-copy-btn.is-copied { color: var(--accent); }
.crd-copy-btn--lg { width: 34px; height: 34px; border-radius: 8px; }
.crd-copy-btn--lg svg { width: 19px; height: 19px; }
.crd-stamm-lower {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .crd-stamm-lower { grid-template-columns: 1fr; }
}
/* Vertriebsansprechpartner-Card */
.crd-sales-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.crd-sales-avatar {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(var(--accent-ui-rgb),.10);
  border: 2px solid rgba(var(--accent-ui-rgb),.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crd-sales-avatar svg {
  width: 30px; height: 30px;
  stroke: var(--accent);
}
.crd-sales-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  display: block;
}
.crd-sales-fields { flex: 1; min-width: 0; }

/* ── Finanzen Stat-Row (4 Karten) ─────────────────────────────────────────── */
.crd-fin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 20px 0;
}
.crd-fin-stat {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(var(--text-muted-rgb),.14);
  border-radius: 14px;
  padding: 14px 16px;
}
.crd-fin-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.crd-fin-value { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.crd-fin-note  { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.crd-fin-stat.crd-fin-accent .crd-fin-value { color: var(--accent); }
.crd-fin-stat.crd-fin-teal   .crd-fin-value { color: var(--badge-teal-text); }

/* ── Finanzen Info-Grid (2-Spalten) ──────────────────────────────────────── */
.crd-fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

/* ── Vereinbarungen Liste ─────────────────────────────────────────────────── */
.crd-agree-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Scrollbar */
.crd-agree-list::-webkit-scrollbar       { width: 5px; }
.crd-agree-list::-webkit-scrollbar-track { background: transparent; }
.crd-agree-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-ui-rgb),.20); border-radius: 99px; }
.crd-agree-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-ui-rgb),.38); }
.crd-agree-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(var(--text-muted-rgb),.15);
  border-radius: 14px;
  padding: 14px 16px;
}
.crd-agree-item--active { border-color: rgba(var(--accent-ui-rgb),.45) !important; box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.10) !important; background: rgba(var(--accent-ui-rgb),.04) !important; }
.crd-agree-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(var(--accent-ui-rgb),.09);
  border: 1px solid rgba(var(--accent-ui-rgb),.20);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crd-agree-icon svg { width: 16px; height: 16px; color: var(--accent); }
.crd-agree-body  { flex: 1; min-width: 0; }
.crd-agree-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.crd-agree-head  { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.crd-agree-head .crd-agree-title { margin-bottom: 0; }
.crd-agree-doc-id {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(var(--text-muted-rgb),.13);
  border: 1px solid rgba(var(--text-muted-rgb),.22);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.crd-agree-date  { font-size: 11.5px; color: var(--text-muted); margin-bottom: 5px; }
.crd-agree-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 8px;
}
/* status-* / badge-pill+badge-teal/-gray/-amber: konsolidiert in components/badges.css (TPL-05).
   Mapping: status-active/badge-teal -> badge-active, status-completed -> badge-success,
   status-pending/badge-amber -> badge-expiring, status-failed -> badge-danger, badge-gray -> badge-neutral.
   Shape-Klasse .badge-pill siehe components/badges.css. */

/* ── Benachrichtigungen: Info-Hinweis ─────────────────────────────────────── */
.crd-info-hint {
  background: rgba(13,148,136,.05);
  border: 1px solid rgba(13,148,136,.15);
  border-radius: 12px;
  padding: 12px 14px;
}
.crd-info-hint-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--badge-teal-text);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.crd-info-hint-title svg { width: 12px; height: 12px; flex-shrink: 0; }
.crd-info-hint-text { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

/* ── Save-Banner (Benachrichtigungen) ─────────────────────────────────────── */
.crd-save-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(var(--accent-ui-rgb),.06);
  border: 1px solid rgba(var(--accent-ui-rgb),.15);
  border-radius: 14px;
  padding: 12px 16px;
}
.crd-save-hint { font-size: 12.5px; color: var(--text-secondary); }
.crd-save-hint strong { color: var(--accent); }

/* ── Notify-Modified Zeile ────────────────────────────────────────────────── */
.crd-notify-modified {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 0 20px 16px;
}


/* Kontakt-Kopf im Detail-Panel (zuvor inline). */
.crd-contact-avatar {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 4px 14px rgba(var(--accent-ui-rgb), .28);
}
.crd-contact-name   { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.crd-contact-handle { color: var(--accent-ui); font-family: var(--font-mono); font-size: 15px; font-weight: 700; }


/* ── public/assets/css/pages/contract-fin.css ── */
/* ══════════════════════════════════════════════════════════════════════════
   CFP – Contract Form Pages (Zahlungsart, Kreditlimit)
   ══════════════════════════════════════════════════════════════════════════ */
.cfp-wrap { max-width: 720px; }

/* ── Card-Layout ─────────────────────────────────────────────────────────── */
.cfp-card-hd { border-bottom: 1px solid var(--border-soft); }
.cfp-card-body { padding: 20px 20px 20px; }

/* ── Form Grid ───────────────────────────────────────────────────────────── */
.cfp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.cfp-full  { grid-column: 1 / -1; }
.cfp-half  { /* half column */ }

/* ── Segmented Control (Zahlungsart) ─────────────────────────────────────────
   Nutzt die Systemkomponente `.opt-seg` / `.opt-seg-btn`
   (components/segmented.css).
   Hier nur die Icon-Größe, da die Zahlungsart-Segmente ein Icon führen. */
.cfp-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cfp-seg-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Bankfelder deaktiviert ──────────────────────────────────────────────── */
.cfp-bank-section { margin-top: 8px; }
.cfp-bank-disabled {
  opacity: .45;
  pointer-events: none;
}

/* ── Monospace / Uppercase Input ─────────────────────────────────────────── */
.cfp-mono  { font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: .04em; }
.cfp-upper { text-transform: uppercase; }

/* ── Prefix-Input (€ Symbol) ─────────────────────────────────────────────── */
.cfp-input-prefix { position: relative; display: flex; align-items: center; }
.cfp-prefix-sym {
  position: absolute; left: 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted); pointer-events: none; z-index: 1;
}
.cfp-has-prefix { padding-left: 28px !important; }

/* ── Toggle Row ──────────────────────────────────────────────────────────── */
.cfp-toggle-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cfp-toggle-label { font-size: 13px; color: var(--text-secondary); }

/* ── Field Hints ─────────────────────────────────────────────────────────── */
.cfp-field-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* ── Global Hint Box ─────────────────────────────────────────────────────── */
.cfp-hint {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(var(--accent-ui-rgb),.04);
  border: 1px solid rgba(var(--accent-ui-rgb),.12);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  margin-top: 4px; margin-bottom: 4px;
}
.cfp-hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* ── Kreditlimit Formel ──────────────────────────────────────────────────── */
.cfp-hint-formula {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 9px 0 9px 2px;
  padding: 10px 12px;
  background: rgba(15,23,42,.04);
  border-radius: 7px;
  font-size: 12px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.cfp-formula-row { display: block; padding: 1px 0; color: var(--text-secondary); }
.cfp-formula-pos    { color: #16a34a; }
.cfp-formula-neg    { color: #dc2626; }
.cfp-formula-sep    { border-top: 1px solid rgba(15,23,42,.10); margin-top: 4px; padding-top: 5px; color: var(--text-secondary); }
.cfp-formula-result { border-top: 2px solid rgba(15,23,42,.15); margin-top: 4px; padding-top: 5px; font-weight: 700; color: var(--text-primary); }

/* ── Action Row ──────────────────────────────────────────────────────────── */
.cfp-subblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(var(--text-muted-rgb),.14);
}
.cfp-subblock-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-secondary);
}
.cfp-subblock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .cfp-subblock-grid { grid-template-columns: 1fr; }
}

.cfp-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}

/* ── Success / Confirmation Card ─────────────────────────────────────────── */
.cfp-success-card {
  max-width: 480px; margin: 40px auto; padding: 48px 40px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cfp-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(34,197,94,.10);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.cfp-success-icon svg { width: 30px; height: 30px; stroke: #16a34a; }
.cfp-success-title { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.cfp-success-body  { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.cfp-success-ref   { font-size: 12px; color: var(--text-muted); font-family: monospace; margin-top: 4px; }
.cfp-success-btn   { margin-top: 16px; }

/* ── Contact Drawer (list-rich overlay – scoped to #contact-drawer) ─────── */
#contact-drawer.contact-drawer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  transform: none;
}
#contact-drawer .contact-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.28);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#contact-drawer.contact-drawer.is-open .contact-drawer-overlay { opacity: 1; pointer-events: auto; }
#contact-drawer .contact-drawer-panel {
  position: relative;
  width: 420px;
  max-width: 96vw;
  height: 100%;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(var(--text-muted-rgb),.18);
  box-shadow: -12px 0 48px rgba(15,23,42,.14);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#contact-drawer.contact-drawer.is-open .contact-drawer-panel { transform: translateX(0); }
#contact-drawer .contact-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.14);
  flex-shrink: 0;
}
#contact-drawer .contact-drawer-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
#contact-drawer .contact-drawer-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}
#contact-drawer .contact-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(var(--text-muted-rgb),.18);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
#contact-drawer .contact-drawer-close:hover { background: rgba(var(--text-muted-rgb),.12); color: var(--text-primary); }
#contact-drawer .contact-drawer-close svg { width: 15px; height: 15px; }
#contact-drawer .contact-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}
.contact-drawer-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px 0;
}
.cdw-view { display: flex; flex-direction: column; gap: 4px; }

/* ── Sprung-Buttons (Kontakt-Sidepanel & Verwaltungs-Card) ─────────────────
   Design analog "Sprung zur Historie" (Domain-Details > Geändert). */
.cdw-jumps,
.crd-jumps {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.cdw-jumps { margin-bottom: 12px; }
.crd-jumps { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
/* Die Sprung-Buttons selbst sind `.icon-btn.icon-btn--accent` (zentrale Komponente). */

.cdw-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cdw-name { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.cdw-disc-icon { margin-top: -2px; flex-shrink: 0; }
.cdw-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}
.cdw-fields { display: flex; flex-direction: column; gap: 0; }
.cdw-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.10);
  font-size: 13.5px;
}
.cdw-row:last-child { border-bottom: none; }
.cdw-key { font-weight: 700; color: var(--text-muted); }
.cdw-val { color: var(--text-primary); word-break: break-word; }
.cdw-copy-form { display: flex; flex-direction: column; gap: 14px; }
.cdw-source-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-ui-rgb),.06);
  border: 1px solid rgba(var(--accent-ui-rgb),.12);
}
.cdw-input { width: 100%; }
.cdw-orig-hint {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 3px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .15s ease, max-height .15s ease;
}
.cdw-orig-hint.show { opacity: 1; max-height: 18px; }
.cdw-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.14);
}
.crd-fg-2col {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
}
.crd-create-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Contact-Drawer: Verifikations-Block ────────────────────────────────── */
.cdw-verif-section {
  margin-top: 2px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.14);
  padding-top: 12px;
}
.cdw-verif-heading {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cdw-verif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
}
.cdw-verif-row + .cdw-verif-row {
  border-top: 1px solid rgba(var(--text-muted-rgb),.08);
}
.cdw-verif-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.cdw-verif-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cdw-verif-badge--ok      { background: rgba(16,185,129,.12); color: #059669; }
.cdw-verif-badge--pending { background: rgba(245,158,11,.12);  color: #d97706; }
.cdw-verif-badge--failed  { background: rgba(239,68,68,.12);   color: #dc2626; }
.cdw-verif-badge--unknown { background: rgba(100,116,139,.10); color: var(--badge-neutral-text); border: 1px solid rgba(100,116,139,.20); height: 22px; padding-top: 0; padding-bottom: 0; }
.cdw-verif-meta {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  padding: 1px 0 4px;
}
.cdw-verif-meta-key { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.cdw-verif-meta-val { color: var(--text-primary); word-break: break-all; }

/* ── Contact-Drawer: Neuen Kontakt erstellen CTA ──────────────────────────── */
.cdw-or-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cdw-or-divider::before,
.cdw-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(var(--text-muted-rgb),.15);
}
.cdw-create-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1.5px dashed rgba(var(--accent-ui-rgb),.28);
  background: rgba(var(--accent-ui-rgb),.04);
  cursor: pointer;
  transition: background .14s;
}
.cdw-create-cta:hover { background: rgba(var(--accent-ui-rgb),.09); }
.cdw-create-cta-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(var(--accent-ui-rgb),.1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent-ui);
}
.cdw-create-cta-icon svg { width: 14px; height: 14px; }
.cdw-create-cta-title { font-size: 12px; font-weight: 700; color: var(--accent-ui); }
.cdw-create-cta-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Handle-ID CTA (gleiche Form wie cdw-create-cta, teal) ── */
.cdw-handle-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1.5px dashed rgba(13,148,136,.28);
  background: rgba(13,148,136,.04);
  cursor: pointer;
  transition: background .14s;
  margin-top: 8px;
}
.cdw-handle-cta:hover { background: rgba(13,148,136,.09); }
.cdw-handle-cta-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(13,148,136,.10);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #0d9488;
}
.cdw-handle-cta-icon svg { width: 14px; height: 14px; }
.cdw-handle-cta-title { font-size: 12px; font-weight: 700; color: #0d9488; }
.cdw-handle-cta-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Handle-ID input panel ── */
.cdw-handle-input-panel {
  display: none;
  flex-direction: column;
  gap: 11px;
  padding: 13px;
  border-radius: 11px;
  border: 1.5px solid rgba(13,148,136,.20);
  background: rgba(240,253,250,.60);
  margin-top: 8px;
}
.cdw-handle-input-panel.open { display: flex; }
.cdw-hip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cdw-hip-title {
  font-size: 12px;
  font-weight: 800;
  color: #0d9488;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cdw-hip-back {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(var(--text-muted-rgb),.18);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .14s, color .14s;
}
.cdw-hip-back:hover {
  background: rgba(var(--text-muted-rgb),.12);
  color: var(--text-primary);
}
.cdw-hip-row { display: flex; gap: 7px; align-items: center; }
.cdw-hip-input {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  border: 1.5px solid rgba(13,148,136,.25);
  background: rgba(255,255,255,.92);
  padding: 0 11px;
  font: 500 13px inherit;
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cdw-hip-input:focus { border-color: rgba(13,148,136,.50); box-shadow: 0 0 0 3px rgba(13,148,136,.10); }
.cdw-hip-input.has-value { border-color: rgba(13,148,136,.40); background: rgba(240,253,250,.95); }
.cdw-hip-paste {
  height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1.5px solid rgba(13,148,136,.20);
  background: rgba(255,255,255,.85);
  color: var(--text-secondary);
  font: 600 11.5px inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: all .14s;
}
.cdw-hip-paste:hover { background: #fff; border-color: rgba(13,148,136,.36); color: #0d9488; }
.cdw-hip-preview {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,148,136,.16);
}
.cdw-hip-preview.visible { display: flex; }
.cdw-hip-preview-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(13,148,136,.10);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #0d9488;
}
.cdw-hip-preview-id   { font: 700 12.5px var(--font-mono); color: #0d9488; letter-spacing: .03em; }
.cdw-hip-preview-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.cdw-hip-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }

/* ── Finanzdaten aendern (contract-fin-edit) ───────────────────────────────
   Aus dem Inline-<style> des Templates hierher verschoben (TPL-02). Regeln
   unveraendert uebernommen, nur die Einrueckung normalisiert. */
.cfpe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .cfpe-row { grid-template-columns: 1fr; }
}
/* Kreditformel */
.cfpe-formula {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(var(--text-muted-rgb),.15);
  font-size: 12px;
  margin-top: 4px;
}
.cfpe-formula-row { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.cfpe-formula-row.pos .cfpe-sym { color: var(--accent-teal); }
.cfpe-formula-row.neg .cfpe-sym { color: var(--color-rose); }
.cfpe-formula-row.sep { border-top: 1px solid rgba(var(--text-muted-rgb),.15); padding-top: 4px; margin-top: 2px; }
.cfpe-formula-row.result { font-weight: 700; color: var(--text-primary); }
.cfpe-sym { font-weight: 700; width: 14px; flex-shrink: 0; text-align: center; }


/* ── public/assets/css/pages/contact-swap.css ── */
/* ══════════════════════════════════════════════════════════════════════
   CONTACT SWAP PAGE  –  Kontakt austauschen
   ══════════════════════════════════════════════════════════════════════ */
.cs-wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 48px; }

.cs-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(var(--accent-ui-rgb),.05);
  border: 1px solid rgba(var(--accent-ui-rgb),.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 24px;
}
.cs-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }

/* Glass container wrapping stage + action bar */
.cs-glass {
  padding: 28px 28px 0;
  margin-bottom: 0;
}

/* Stage: two cards + arrow */
.cs-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 18px;
}

/* Card label row */
.cs-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cs-card-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-card-dot--from { background: var(--badge-neutral-text); }
.cs-card-dot--to   { background: var(--accent); }

/* Right card border accent */
.cs-card-target {
  border-color: rgba(var(--accent-ui-rgb),.22);
  background: rgba(var(--accent-ui-rgb),.02);
}

/* Loading / error inside card */
.cs-card-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 18px 0 10px;
}
.cs-card-err {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: #e11d48;
  padding: 10px 0;
}
.cs-card-err svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Arrow */
.cs-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 60px;
  flex-shrink: 0;
}
.cs-arrow svg {
  width: 42px; height: 42px;
  color: var(--accent);
  filter: drop-shadow(0 2px 6px rgba(var(--accent-ui-rgb),.22));
}
.cs-arrow-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  text-align: center;
}

/* Search row */
.cs-search-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.cs-search-input {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-family: 'JetBrains Mono','Fira Mono',monospace;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  outline: none;
  transition: border-color .12s;
}
.cs-search-input:focus { border-color: var(--accent); }
.cs-search-input::placeholder { color: var(--text-muted); font-weight: 400; font-family: inherit; }

/* Clear btn */
.cs-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 0 0;
  transition: color .12s;
}
.cs-clear-btn:hover { color: var(--text-secondary); }
.cs-clear-btn svg { width: 12px; height: 12px; }

/* Action bar */
.cs-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 640px) {
  .cs-stage { grid-template-columns: 1fr; }
  .cs-arrow  { padding-top: 0; flex-direction: row; justify-content: center; }
  .cs-arrow svg { transform: rotate(90deg); }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT-SWAP MODAL  (.csm-*)
   z-index 800/3000 → below contact-drawer (4000) so drawer slides above
   ══════════════════════════════════════════════════════════════════════ */

/* Overlay */
.csm-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(15,23,42,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: csm-in .18s ease both;
}
.csm-overlay[hidden] { display: none; }
@keyframes csm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.csm-overlay.csm-out { animation: csm-out .15s ease forwards; }
@keyframes csm-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Box */
.csm-box {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: csm-box-in .2s cubic-bezier(.22,1,.36,1) both;
}
/* Breiten-Varianten – ersetzen die zuvor inline gesetzten `max-width`-Werte
   in account-panels.js (`width:100%` liefert bereits `.csm-box`). */
.csm-box--w460 { max-width: 460px; }
.csm-box--w560 { max-width: 560px; }
.csm-box--w620 { max-width: 620px; }
.csm-box--w860 { max-width: 860px; }
.csm-box--w930 { max-width: 930px; }
.csm-box--w940 { max-width: 940px; }
@keyframes csm-box-in {
  from { transform: translateY(16px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Accent stripe */
.csm-stripe {
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--accent-ui) 0%, #2563eb 60%, #0d9488 100%);
}

/* Header */
.csm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 13px;
  border-bottom: 1px solid rgba(var(--text-muted-rgb),.14);
}
.csm-head-left { display: flex; align-items: center; gap: 10px; }
.csm-icon {
  width: 34px; height: 34px;
  background: rgba(var(--accent-ui-rgb),.09);
  border: 1px solid rgba(var(--accent-ui-rgb),.16);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.csm-icon svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-ui); }
.csm-title   { font-size: 14px; font-weight: 800; color: var(--text-primary); letter-spacing: -.2px; }
.csm-subtitle { display: flex; align-items: center; gap: 0; font-size: 12.5px; margin-top: 2px; color: var(--text-muted); }
.csm-sub-label { color: var(--text-muted); }
.csm-sub-value { color: var(--accent-ui); font-weight: 700; margin-left: 4px; }
/* Variante-D Titel-Chip: kontextgebundener Bezeichner direkt im Modal-Header */
.csm-title-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.csm-title-sep { font-size: 13px; color: var(--border-strong); font-weight: 300; }
.csm-title-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #0d9488; font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace; background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.2); border-radius: 5px; padding: 3px 8px; line-height: 1.3; }
.csm-close {
  width: 28px; height: 28px;
  background: rgba(var(--badge-neutral-rgb),.12);
  border: none; border-radius: 7px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.csm-close:hover { background: rgba(var(--badge-neutral-rgb),.22); color: var(--text-secondary); }
.csm-close svg { width: 13px; height: 13px; }

/* Body */
.csm-body { padding: 20px 20px 4px; }

/* Note (reuse cs-note styles but scoped) */
.csm-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(var(--accent-ui-rgb),.05);
  border: 1px solid rgba(var(--accent-ui-rgb),.12);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}
.csm-note svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--accent-ui); margin-top: 1px; }

/* Stage grid (same as .cs-stage) */
.csm-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}
.csm-right-side { display: flex; flex-direction: column; }

/* Arrow (same proportions as .cs-arrow but smaller padding for modal) */
.csm-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 52px;
  flex-shrink: 0;
}
.csm-arrow svg {
  width: 38px; height: 38px;
  fill: none;
  stroke: var(--accent-ui);
  filter: drop-shadow(0 2px 5px rgba(var(--accent-ui-rgb),.2));
}
.csm-arrow-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  text-align: center;
}

/* Footer */
.csm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(var(--text-muted-rgb),.14);
  margin-top: 20px;
}
.csm-foot-hint    { font-size: 11.5px; color: var(--text-muted); }
.csm-foot-actions { display: flex; gap: 8px; align-items: center; }
/* Fuß ohne Hinweistext: Aktionen rechts (ersetzt inline `justify-content`). */
.csm-foot--end { justify-content: flex-end; }
.csm-foot--end-gap { justify-content: flex-end; align-items: center; gap: 12px; }
.csm-note-green {
  background: rgba(13,148,136,.06);
  color: #0f766e;
  border-color: transparent;
}
.csm-note-green svg { stroke: #0d9488; }

/* ── 2FA-Setup-Modal ── */
#setup2fa-overlay.csm-overlay {
  z-index: 3000;
  background: rgba(15,23,42,.55);
}
.setup2fa-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 18px;
}
.setup2fa-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
}
.setup2fa-step.active { color: var(--accent-ui); }
.setup2fa-step.done   { color: #0d9488; }
.setup2fa-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid currentColor; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.setup2fa-step.active .setup2fa-step-num { background: var(--accent-ui); border-color: var(--accent-ui); color: #fff; }
.setup2fa-step.done   .setup2fa-step-num { background: #0d9488; border-color: #0d9488; color: #fff; }
.setup2fa-step-line   { flex: 1; height: 2px; background: var(--border); margin: 0 8px; }
.setup2fa-step-line.done { background: #0d9488; }

.setup2fa-qr-row  { display: flex; gap: 18px; align-items: flex-start; }
.setup2fa-qr-box  {
  flex-shrink: 0; width: 148px; height: 148px;
  border: 2px solid var(--border); border-radius: 14px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 8px; box-shadow: var(--shadow-sm);
}
.setup2fa-qr-box img, .setup2fa-qr-box canvas { width: 128px !important; height: 128px !important; display: block; }
.setup2fa-qr-side  { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.setup2fa-field-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px;
}
.setup2fa-secret-wrap { position: relative; }
.setup2fa-secret {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--text-primary); background: var(--color-bg-2);
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 9px 36px 9px 12px; line-height: 1.7;
  user-select: all; word-break: break-all;
}
.setup2fa-copy-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
}
.setup2fa-uri-hint {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}
.setup2fa-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 16px; padding: 10px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; font-size: 12px; line-height: 1.5;
}

/* Token-Eingabe Schritt 2 */
.setup2fa-token-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 4px; }
.setup2fa-digits     { width: 100%; display: flex; justify-content: center; }
.setup2fa-digit-input {
  width: 180px; height: 56px;
  border: 2px solid var(--border); border-radius: 12px;
  background: var(--color-bg-2); text-align: center;
  font: 800 26px/1 'JetBrains Mono', monospace;
  color: var(--text-primary); letter-spacing: .22em;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.setup2fa-digit-input:focus {
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.12);
}
.setup2fa-digit-input.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.setup2fa-token-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; }
.setup2fa-token-hint.error { color: #ef4444; }

/* Abgeschlossen-State */
.setup2fa-done-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 12px 0 8px; text-align: center;
}
.setup2fa-done-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(5,150,105,.14), rgba(13,148,136,.10));
  display: flex; align-items: center; justify-content: center;
}
.setup2fa-done-title { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.setup2fa-done-sub   { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.btn-success {
  background: linear-gradient(160deg, #0fa876 0%, #059669 45%, #0d9488 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,.25), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.btn-success:hover {
  box-shadow: 0 6px 18px rgba(13,148,136,.38), 0 0 0 1px rgba(255,255,255,.14) inset;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
  .csm-stage { grid-template-columns: 1fr; }
  .csm-arrow { padding-top: 0; flex-direction: row; justify-content: center; }
  .csm-arrow svg { transform: rotate(90deg); }
  .csm-box { max-width: 100%; border-radius: 16px; }
  .setup2fa-qr-row { flex-direction: column; align-items: center; }
}



/* ── public/assets/css/pages/tasks.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Aufgabenliste – Task-spezifische Zelltypen
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Eskalations-Indikator (kompakter Dot statt Badge) ─── */
.task-esc-dot-td { width: 44px; text-align: center; }
.task-esc-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  border: 2px solid transparent;
}
.task-esc-dot--0 {
  background: rgba(100,116,139,.10);
  color: var(--badge-neutral-text);
  border-color: rgba(100,116,139,.22);
}
.task-esc-dot--1 {
  background: rgba(217,119,6,.12);
  color: #b45309;
  border-color: rgba(217,119,6,.3);
}
.task-esc-dot--2 {
  background: rgba(234,88,12,.13);
  color: #c2410c;
  border-color: rgba(234,88,12,.35);
}
.task-esc-dot--3 {
  background: rgba(225,29,72,.12);
  color: #be123c;
  border-color: rgba(225,29,72,.3);
  animation: task-esc3-pulse 1.6s ease-in-out infinite;
}
@keyframes task-esc3-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.0); }
  50%       { box-shadow: 0 0 0 4px rgba(225,29,72,.18); }
}

/* ── Objekt-Zelle (Domain + object_id) ────────────────── */
.task-obj-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.task-obj-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-obj-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12.5px;
}
.task-obj-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ── Attribut-Pill ─────────────────────────────────────── */
.task-attr-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(var(--text-muted-rgb),.12);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Typ-Badge ─────────────────────────────────────────── */
.task-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.task-type-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.task-type-badge--email {
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
}
.task-type-badge--name {
  background: rgba(13,148,136,.08);
  color: #0f766e;
}
.task-type-badge--document {
  background: rgba(217,119,6,.08);
  color: #b45309;
}

/* ── Ablauf-Zelle ──────────────────────────────────────── */
.task-expire-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}
.task-expire-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.task-expire-remaining {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.task-expire--ok     { color: #16a34a; }
.task-expire--warn   { color: #d97706; }
.task-expire--crit   { color: #e11d48; }
.task-expire--overdue { color: #be123c; }
.task-expire-bar-wrap {
  width: 80px;
  height: 3px;
  background: rgba(var(--text-muted-rgb),.18);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.task-expire-bar { height: 100%; border-radius: 2px; transition: width .3s; }
.task-expire-bar--ok      { background: #22c55e; }
.task-expire-bar--warn    { background: #f59e0b; }
.task-expire-bar--crit    { background: #e11d48; }
.task-expire-bar--overdue { background: #be123c; }

/* ── approval-btn-cell / approval-none (cell_type: approval-btn) ─────────── */
.approval-btn-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; font-size: 11px;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
  cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s;
}
.approval-btn-cell:hover { background: #fde68a; border-color: #fbbf24; }

.approval-none {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  color: var(--border-strong); cursor: default;
}

/* ── task-reason-cell (cell_type: reason) ──────────────────────────────── */
.task-reason-cell   { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.task-reason-main   { font-size: 13px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-reason-detail { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.task-reason-detail:hover { color: var(--accent); }
.billing-ref-icon { display:inline-flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .12s;cursor:default; }
.billing-ref-icon:hover { opacity:1; }

/* ── Help-Trigger (Hilfe-Icon · zentrales Symbol für alle Tooltip-Hilfen)
   Alle Zustände hier definiert – keine Inline-Styles in Templates.
   ─────────────────────────────────────────────────────────────────────── */
.help-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(var(--text-muted-rgb),.35);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px; font-weight: 800; line-height: 1;
  cursor: pointer; vertical-align: middle; flex-shrink: 0;
  transition: border-color .12s, color .12s, background .12s;
  outline: none; font-family: inherit; padding: 0; user-select: none;
  margin-left: 5px;
  opacity: .55;
  /* Optische Korrektur: Icon sitzt sonst 1–2px zu tief neben dem Label */
  transform: translateY(-1.5px);
}
.help-trigger:hover,
.help-trigger:focus-visible {
  border-color: rgba(var(--accent-ui-rgb),.40);
  color: var(--accent-ui);
  background: rgba(var(--accent-ui-rgb),.08);
  opacity: 1;
}

/* Vereinheitlichter Mauszeiger für Help-Trigger-Buttons */
.help-trigger,
button[data-help-key] {
  cursor: pointer;
}

/* Nur explizit klickbare Elemente mit data-ui-tooltip zeigen Hand-Cursor */
a[data-ui-tooltip],
button[data-ui-tooltip] {
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Dashboard – Task-KPI-Zeile (3 stat-cards nebeneinander)
   ══════════════════════════════════════════════════════════════════════════════ */
.task-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  animation: fadeUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.task-stat-card {
  cursor: pointer;
  position: relative;
}
/* Klickbarer Link über die gesamte Karte */
.stat-card-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
/* Ladezustand: Skeleton-Puls im Wert-Slot */
.task-kpi-skeleton {
  display: inline-block;
  width: 56px;
  height: 28px;
  border-radius: 6px;
  background: rgba(var(--text-muted-rgb),0.18);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@media (max-width: 700px) {
  .task-stat-row { grid-template-columns: 1fr; }
}



/* ── public/assets/css/pages/date-picker-v2.css ── */
/* ══════════════════════════════════════════════════════
   Variant-B Date-Range-Picker (light glassmorphism)
   ══════════════════════════════════════════════════════ */
.dp-wrap { position: relative; }

.dp-pill {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(var(--text-muted-rgb),0.22);
  border-radius: 8px; padding: 6px 9px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--text-primary); font-family: inherit;
  text-align: left; transition: border-color 0.15s, background 0.15s;
}
.dp-pill:hover { border-color: rgba(var(--accent-ui-rgb),0.35); background: rgba(255,255,255,0.90); }
.dp-pill.open {
  border-color: rgba(var(--accent-ui-rgb),0.50); background: rgba(var(--accent-ui-rgb),0.04);
  border-radius: 8px 8px 0 0; border-bottom-color: transparent;
}
.dp-pill-icon { color: var(--text-muted); flex-shrink: 0; }
.dp-pill-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-pill-clear {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; line-height: 1; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; transition: color 0.12s, background 0.12s;
}
.dp-pill-clear:hover { color: var(--text-secondary); background: rgba(var(--text-muted-rgb),0.15); }

.dp-popup {
  position: fixed; z-index: 99999;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--text-muted-rgb),0.22);
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.06);
  display: none; overflow: hidden; min-width: 510px;
}
.dp-popup.open { display: block; }
.dp-popup-inner { display: flex; }

.dp-presets {
  width: 130px; flex-shrink: 0;
  border-right: 1px solid rgba(var(--text-muted-rgb),0.12);
  padding: 10px 6px; display: flex; flex-direction: column; gap: 1px;
}
.dp-presets-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 8px 7px;
}
.dp-preset {
  display: block; width: 100%; padding: 6px 10px; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; transition: background 0.1s, color 0.1s;
}
.dp-preset.active { background: rgba(var(--accent-ui-rgb),0.09); color: var(--accent-ui); font-weight: 600; }
.dp-preset:hover:not(.active) { background: rgba(var(--text-muted-rgb),0.10); color: var(--text-primary); }

.dp-right { flex: 1; display: flex; flex-direction: column; }
.dp-cals { display: flex; gap: 0; padding: 14px 14px 4px; }
.dp-cal { width: 172px; flex-shrink: 0; }
.dp-cal + .dp-cal { border-left: 1px solid rgba(var(--text-muted-rgb),0.12); margin-left: 14px; padding-left: 14px; }
.dp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-nav {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(var(--text-muted-rgb),0.20); background: rgba(255,255,255,0.80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--badge-neutral-text); transition: border-color 0.12s, color 0.12s; flex-shrink: 0;
}
.dp-nav:hover { border-color: rgba(var(--accent-ui-rgb),0.35); color: var(--accent-ui); }
.dp-nav-hidden { opacity: 0; pointer-events: none; }
.dp-cal-month { font-size: 11.5px; font-weight: 700; color: var(--text-primary); word-spacing: 5px; white-space: nowrap; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.dp-dow { text-align: center; font-size: 9px; font-weight: 700; color: var(--text-muted); padding: 3px 0 5px; letter-spacing: 0.04em; }
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; color: var(--text-secondary); border-radius: 5px;
  cursor: pointer; position: relative; transition: background 0.08s; user-select: none;
}
.dp-day:hover:not(.dp-day-other):not(.dp-day-start):not(.dp-day-end) { background: rgba(var(--accent-ui-rgb),0.09); color: var(--accent-ui); }
.dp-day-other { color: var(--border-strong); cursor: default; }
.dp-day-today { color: var(--accent-ui); font-weight: 700; }
.dp-day-today::after { content: ''; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-ui); }
.dp-day-in-range { background: rgba(var(--accent-ui-rgb),0.08); border-radius: 0; color: var(--accent-ui-strong); }
.dp-day-start { background: var(--accent-ui); color: #fff; font-weight: 700; border-radius: 5px 0 0 5px; z-index: 1; }
.dp-day-end { background: var(--accent-ui); color: #fff; font-weight: 700; border-radius: 0 5px 5px 0; z-index: 1; }
.dp-day-start.dp-day-end { border-radius: 5px; }

.dp-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px 12px; border-top: 1px solid rgba(var(--text-muted-rgb),0.10); margin-top: 6px; gap: 8px;
}
.dp-footer-info { font-size: 11px; color: var(--badge-neutral-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-footer-info strong { color: var(--text-primary); font-weight: 600; }
.dp-footer-btns { display: flex; gap: 5px; flex-shrink: 0; }
.dp-ghost {
  padding: 4px 11px; border-radius: 6px; border: 1px solid rgba(var(--text-muted-rgb),0.22);
  background: transparent; font-size: 11px; font-weight: 600; color: var(--badge-neutral-text);
  cursor: pointer; font-family: inherit; transition: border-color 0.12s, color 0.12s;
}
.dp-ghost:hover { border-color: rgba(var(--text-muted-rgb),0.40); color: var(--text-primary); }
.dp-primary {
  padding: 4px 11px; border-radius: 6px; border: none; background: var(--accent-ui);
  font-size: 11px; font-weight: 700; color: #fff; cursor: pointer;
  font-family: inherit; transition: background 0.12s;
}
.dp-primary:hover { background: var(--accent-ui-strong); }



/* ── public/assets/css/pages/dns-zone.css ── */
/* ════════════════════════════════════════════════════════════════
   DNS Zone Detail — Bearbeitungs-Layout
   ════════════════════════════════════════════════════════════════ */

/* KPI row (5 cards) */
.dzep-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .dzep-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dzep-kpi-row { grid-template-columns: 1fr 1fr; } }
.dzep-kpi-value { font-size: 26px; font-weight: 900; letter-spacing: -1px; margin-top: 6px; margin-bottom: 2px; color: var(--text-primary); }
.dzep-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); }
.dzep-kpi-note  { font-size: 11px; color: var(--text-muted); }

/* Record-Namens-Zelle: gekürzt mit Ellipsis, per Klick voll ausklappbar.
   Statt Browser-Tooltip signalisiert ein Chevron-Icon die Ausklappbarkeit
   (nur sichtbar, wenn der Name tatsächlich abgeschnitten ist).
   Spalte bekommt eine feste `width` (nicht nur `max-width`): bei reinem
   max-width kann die Tabelle (table-layout:auto) die Spalte im Ist-Zustand
   breiter berechnen, als der abgeschnittene Text braucht (Flex-Kind ohne
   min-width:0 erzwingt sonst die volle, nicht umgebrochene Textbreite) und
   beim Ausklappen wieder auf die eigentliche Breite "kollabieren". Feste
   Breite + min-width:0 auf den Flex-Container verhindert das. */
#dzep-rec-table th:first-child,
.dzep-name-cell {
  width: 200px;
  max-width: 200px;
}
.dzep-name-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.dzep-name-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dzep-name-ic {
  display: none;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: transform .15s ease, color .15s ease;
}
.dzep-name-ic svg { width: 100%; height: 100%; }
.dzep-name-cell.is-truncated { cursor: pointer; }
.dzep-name-cell.is-truncated .dzep-name-ic { display: inline-flex; }
.dzep-name-cell.is-truncated:hover .dzep-name-ic { color: var(--accent); }
.dzep-name-cell.dzep-name-expand { cursor: pointer; }
.dzep-name-cell.dzep-name-expand .dzep-name-inner {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.dzep-name-cell.dzep-name-expand .dzep-name-txt {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.dzep-name-cell.dzep-name-expand .dzep-name-ic { transform: rotate(180deg); }

/* Pending bar */
.dzep-pending-bar[hidden], #dzep-staging-card[hidden], .dzep-serial-note[hidden] { display: none !important; }
.dzep-pending-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.dzep-pending-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  box-shadow: none;
  animation: none;
  flex-shrink: 0;
}
@keyframes dzep-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217,119,6,.18); }
  50%       { box-shadow: 0 0 0 7px rgba(217,119,6,.06); }
}
.dzep-pending-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.dzep-pending-pills { display: none; }
.dzep-pending-pill  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.dzep-pp-mod { background: rgba(217,119,6,.12); color: #B45309; border: 1px solid rgba(217,119,6,.20); }
.dzep-pp-new { background: rgba(22,163,74,.12);  color: #15803D; border: 1px solid rgba(22,163,74,.20); }
.dzep-pp-del { background: rgba(225,29,72,.12);  color: #BE123C; border: 1px solid rgba(225,29,72,.20); }
.dzep-pending-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#dzep-save-btn { flex: none; width: fit-content; }

/* Teal publish button */
.btn-teal {
  background: linear-gradient(135deg, #0D9488, #0891B2);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(13,148,136,.32);
  border: none;
}
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,.40); }
.btn-teal:disabled { opacity: .6; transform: none; }
.btn-blue {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.30);
  border: none;
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.40); }
.btn-blue:disabled { opacity: .6; transform: none; }

/* Record row states */
.dzep-tr-group > td {
  padding: 8px 24px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 8%, transparent) !important;
}
.dzep-tr-group td span { display: inline-block; background: rgba(255,255,255,.8); border: 1px solid var(--border); border-radius: 5px; padding: 1px 7px; margin-left: 5px; font-size: 10px; }
.dzep-tr-mod { background: linear-gradient(90deg, rgba(217,119,6,.05) 0%, transparent 60%); }
.dzep-tr-mod > td:first-child { border-left: 3px solid #D97706; padding-left: 13px !important; }
.dzep-tr-new { background: linear-gradient(90deg, rgba(22,163,74,.05) 0%, transparent 60%); }
.dzep-tr-new > td:first-child { border-left: 3px solid #16A34A; padding-left: 13px !important; }
.dzep-tr-del { background: linear-gradient(90deg, rgba(225,29,72,.04) 0%, transparent 60%); opacity: .65; }
.dzep-tr-del > td:first-child { border-left: 3px solid #E11D48; padding-left: 13px !important; }
.dzep-tr-del > td { text-decoration: line-through; color: var(--text-muted) !important; }
/* Gelöschte Einzelwerte in der Zeile – ersetzt den zuvor in dns-zone-pages.js
   inline zusammengesetzten `delStyle`-String. */
.dzep-tr-del .is-deleted { text-decoration: line-through; opacity: .5; }

/* Diff value display */
.dzep-val-old   { color: #B45309; text-decoration: line-through; font-size: 11px; margin-right: 2px; }
.dzep-val-new   { color: #15803D; font-weight: 700; }
#dzep-info-masterip .dzep-val-old { font-size: inherit; }
.dzep-val-arrow { color: var(--text-muted); margin: 0 3px; font-size: 11px; }

/* Staging diff table */
.dzep-diff-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dzep-diff-table th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.dzep-diff-table td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 7%, transparent); }
.dzep-diff-table tr:last-child td { border-bottom: none; }
.dzep-op-icon { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; }
.dzep-op-mod { background: rgba(217,119,6,.12); color: #B45309; }
.dzep-op-new { background: rgba(22,163,74,.12);  color: #15803D; }
.dzep-op-del { background: rgba(225,29,72,.12);  color: #BE123C; }

/* Serial note */
.dzep-serial-note {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 9px;
  background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.13);
  font-size: 12px; color: #1D4ED8; font-weight: 600;
  margin-bottom: 12px;
}
.dzep-serial-old { text-decoration: line-through; opacity: .6; font-family: monospace; }
.dzep-serial-new { font-weight: 800; font-family: monospace; }

/* Record type badges */
.dzep-rtp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  font-family: monospace;
}
.dzep-rt-a     { background: rgba(37,99,235,.12);  color: #1D4ED8; }
.dzep-rt-aaaa  { background: rgba(37,99,235,.12);  color: #1D4ED8; }
.dzep-rt-cname { background: rgba(var(--accent-ui-rgb),.12); color: var(--accent-ui-strong); }
.dzep-rt-mx    { background: rgba(217,119,6,.12);  color: #B45309; }
.dzep-rt-ns    { background: rgba(5,150,105,.12);  color: #047857; }
.dzep-rt-txt   { background: rgba(51,65,85,.10);   color: var(--text-strong); }
.dzep-rt-soa   { background: rgba(239,68,68,.10);  color: #B91C1C; }
.dzep-rt-srv   { background: rgba(236,72,153,.10); color: #BE185D; }
.dzep-rt-caa   { background: rgba(16,185,129,.10); color: #065F46; }
.dzep-rt-ptr   { background: rgba(99,102,241,.10); color: var(--color-info-dark); }

/* Zone params list */
.dzep-params-list { display: flex; flex-direction: column; }
.dzep-param-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 8%, transparent); }
.dzep-param-row:last-child { border-bottom: none; }
.dzep-param-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); flex-shrink: 0; }
.dzep-param-val   { font-size: 12px; font-weight: 600; color: var(--text-primary); font-family: monospace; text-align: right; word-break: break-all; }

/* Secondary zone: Card 2 field visibility */
#dzep-root[data-zone-type="secondary"] .dzep-soa-fields { display: none; }
#dzep-root:not([data-zone-type="secondary"]) .dzep-secondary-fields { display: none; }

/* Convert-button hover */
#dzep-convert-btn {
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
#dzep-convert-btn:hover {
  background: rgba(220,38,38,.18) !important;
  color: #B91C1C !important;
  border-color: rgba(220,38,38,.45) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220,38,38,0.14);
}

/* ══════════════════════════════════════════════════════════════════════
   DNS-Zone erstellen (dns-zone-create)
   ══════════════════════════════════════════════════════════════════════ */
.zone-type-selector { display: flex; gap: 10px; }
.zone-type-card {
  flex: 1; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
  background: rgba(255,255,255,.55);
  transition: all .18s;
  display: flex; align-items: flex-start; gap: 12px;
}
.zone-type-card:hover {
  border-color: rgba(var(--accent-ui-rgb),.30);
  background: rgba(var(--accent-ui-rgb),.06);
  transform: translateY(-1px);
}
.zone-type-card.active {
  border-color: var(--primary-600);
  background: rgba(var(--accent-ui-rgb),.08);
}
.zone-type-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent); flex-shrink: 0;
  transition: background .18s;
}
.zone-type-card.active .zone-type-icon { background: rgba(var(--accent-ui-rgb),.14); }
.zone-type-icon svg { width: 16px; height: 16px; color: var(--text-muted); }
.zone-type-card.active .zone-type-icon svg { color: var(--accent-ui); }
.zone-type-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); transition: color .18s; }
.zone-type-card.active .zone-type-label { color: var(--accent-ui-strong); }
.zone-type-desc  { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
/* Optik der Auswahlanzeige kommt aus `components/type-check.css`; hier nur die
   Platzierung in der Kachel. */
.zone-type-card .ui-type-check { margin-left: auto; margin-top: 1px; }

#dzcr-create-btn:disabled,
#dztp-submit:disabled {
  opacity: 1 !important;
}

#dzcr-root[data-zone-type="secondary"] #dzcr-managed-area,
#dzcr-root[data-zone-type="secondary"] #dzcr-rec-card,
#dzcr-root[data-zone-type="secondary"] #dzcr-form-card {
  display: none !important;
}

.dzc-domain-wrap { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.dzc-domain-input-wrap { flex: 1; position: relative; }
.dzc-uplabel {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted) !important;
  margin-bottom: 5px; display: block;
}
.dzc-domain-inp {
  width: 100%; height: 40px; padding: 0 14px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent);
  background: rgba(255,255,255,.75); font-size: 14px; font-weight: 600;
  font-family: var(--font-mono); color: var(--text-primary);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.dzc-domain-inp:focus {
  border-color: rgba(var(--accent-ui-rgb),.45);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.10);
}
.dzc-domain-inp::placeholder { font-weight: 400; color: var(--text-muted); }

.dzc-zt-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(37,99,235,.05); border: 1px solid rgba(37,99,235,.13);
  margin-top: 12px;
}
.dzc-zt-notice[hidden] { display: none; }
.dzc-zt-notice svg { width: 14px; height: 14px; color: #2563EB; flex-shrink: 0; margin-top: 1px; }
.dzc-zt-notice-text { font-size: 12px; color: #1D4ED8; line-height: 1.5; }

.dzc-action-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 0; margin-top: 4px;
}
.dzc-hint {
  font-size: 11px; color: var(--text-muted); flex: 1;
  display: flex; align-items: center; gap: 5px;
}
.dzc-hint svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Domain registrieren (domain-register-rich) ───────────────────────── */
.dreg-card-action-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 0 0; margin-top: 16px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
/* Sammel-Chip an der alten Chip-Position: setzt Tech-C, Bill-C und die
   Nameserver des letzten Auftrags in einem Schritt. */
/* Im Ruhezustand neutral-grau, erst beim Hover violett – dasselbe Muster wie
   der Aliasse-/Inhaber-Chip (.count-badge-link / .domain-owner-pill). Grund:
   der Chip steht in derselben Aktionszeile wie der violette Primärbutton;
   zwei violette Flächen teilten dort den Blick. */
.dreg-pref-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: auto; padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid var(--badge-neutral-border);
  background: var(--badge-neutral-bg);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.dreg-pref-all svg { width: 13px; height: 13px; flex-shrink: 0; }
.dreg-pref-all .k {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .8;
}
.dreg-pref-all .parts { display: inline-flex; align-items: center; gap: 4px; }
.dreg-pref-all .part {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 10.5px; padding: 1px 7px; border-radius: 20px; background: rgba(255,255,255,.85);
}
.dreg-pref-all .part-role { font-weight: 800; letter-spacing: .03em; }
.dreg-pref-all .part-handle { font-family: var(--font-mono); opacity: .85; }
.dreg-pref-all .part--techc { color: var(--badge-teal-text); }
.dreg-pref-all .part--billc { color: var(--badge-warning-text); }
.dreg-pref-all .part--dns   { color: var(--badge-info-text); }
.dreg-pref-all:hover,
.dreg-pref-all:focus-visible {
  background: rgba(var(--accent-ui-rgb),0.09);
  border-color: rgba(var(--accent-ui-rgb),0.20);
  color: var(--accent-ui);
}
/* Fokus-Ring wie bei .badge-action / .chip / .xf-qchip. */
.dreg-pref-all:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }

/* Klick-Quittung für die Vorlage-Chips (Sammel-Chip „Wie letzter Auftrag" und
   die Pref-Pillen im Kontakt-Vorrat): ein einmaliger Ring-Puls, sonst nichts.
   Bewusst OHNE Farb-, Text- oder Größenwechsel – der Chip bleibt im Ruhezustand,
   die Aktionszeile springt nicht und ein zweiter Klick ist sofort möglich.
   Die Pulsfarbe kommt über --chip-pulse: Default ist die Eigenfarbe des Chips
   (currentColor). Da beim Klick immer :hover oder :focus-visible aktiv ist,
   ist das die violette Interaktionsfarbe – nicht der neutrale Ruheton.
   Für eine Theme-Kontrastfarbe genügt ein Override, z. B.
   .dreg-pref-all { --chip-pulse: var(--accent-ui-light); } */
.dreg-pref-all,
.dreg-pool-card--pref { --chip-pulse: currentColor; }
.dreg-pref-all.is-pulse,
.dreg-pool-card--pref.is-pulse { animation: chip-pulse .72s ease-out; }
/* Ein Keyframe-Satz für beide: der jeweilige Ruhe-Schatten kommt über
   --chip-rest herein und bleibt so während der Animation erhalten
   (Sammel-Chip mit Schatten, Vorrats-Pillen ohne). */
.dreg-pref-all       { --chip-rest: var(--shadow-sm); }
.dreg-pool-card      { --chip-rest: 0 0 #0000; }
@keyframes chip-pulse {
  0%   { box-shadow: var(--chip-rest), 0 0 0 0    color-mix(in srgb, var(--chip-pulse) 42%, transparent); }
  100% { box-shadow: var(--chip-rest), 0 0 0 10px color-mix(in srgb, var(--chip-pulse) 0%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .dreg-pref-all.is-pulse,
  .dreg-pool-card--pref.is-pulse { animation: none; }
  .xf-instr-wrap .xf-instr,
  .xf-instr-wrap::after,
  .xf-instr-toggle svg { transition: none; }
}
/* Kontakt-Vorrat über den Rollen-Karten: ziehbare Handle-Pillen aus dem
   letzten Auftrag bzw. in dieser Maske erstellte Handles. Sie werden nach der
   Verwendung bewusst NICHT gedimmt oder deaktiviert – nach dem Leeren einer
   Rolle muss derselbe Kontakt sofort wieder setzbar sein. */
/* Zweispaltig: die Pillen umbrechen innerhalb ihrer Spalte, der Button bleibt
   dadurch rechts oben stehen statt nach unten zu rutschen. */
.dreg-pool {
  display: flex; align-items: flex-start; gap: 10px;
  flex-wrap: nowrap; padding: 12px 24px 0;
}
/* display:flex überschreibt [hidden] – explizit ausblenden. */
.dreg-pool[hidden] { display: none; }
/* Innerhalb eines Info-Blocks (z. B. Vertragsdaten) ohne Card-Innenabstand. */
.dreg-pool--inline { padding: 0 0 12px; }
.dreg-pool-items {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}
.dreg-pool-card {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 4px; border-radius: 999px;
  border: 1px solid var(--badge-neutral-border);
  background: var(--badge-neutral-bg);
  color: var(--text-secondary);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  cursor: grab; max-width: 250px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
/* Pref-Pillen sind zusätzlich klickbar (setzen ihre ursprüngliche Rolle),
   allgemeine Kontakt-Pillen werden ausschließlich per Drag & Drop verteilt.
   Der Cursor bleibt bewusst bei 'grab': Drag ist die mächtigere Interaktion
   (beliebige Rolle statt nur der Ursprungsrolle) und wurde von einem
   cursor:pointer-Override zuvor unsichtbar gemacht. Den Klick erklärt der
   title-Tooltip am Element. */
.dreg-pool-card .k {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; opacity: .8; white-space: nowrap;
}
.dreg-pool-card .v {
  font-family: var(--font-mono); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dreg-pool-grip { width: 12px; height: 14px; flex-shrink: 0; opacity: .55; }
.dreg-pool-card:hover,
.dreg-pool-card:focus-visible {
  background: rgba(var(--accent-ui-rgb),0.09);
  border-color: rgba(var(--accent-ui-rgb),0.20);
  color: var(--accent-ui);
  box-shadow: var(--shadow-sm);
}
/* Fokus-Ring analog .dreg-pref-all – der Schatten allein reicht bei
   Tastaturbedienung nicht als Positionsanzeige. */
.dreg-pool-card:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
.dreg-pool-card:active { cursor: grabbing; }
.dreg-pool-card.is-dragging { opacity: .45; box-shadow: none; }
/* Herkunft farblich unterscheiden: Handles aus dem letzten Auftrag tragen die
   Farbe ihrer damaligen Funktion, in dieser Maske neu erstellte Handles die
   Akzentfarbe der Oberfläche. Der violette Hover bleibt davon unberührt –
   .dreg-pool-card:hover hat mit 0,2,0 die höhere Spezifität als die
   Herkunfts-Modifikatoren (0,1,0). */
.dreg-pool-card--techc {
  background: var(--badge-teal-bg); border-color: var(--badge-teal-border); color: var(--badge-teal-text);
}
.dreg-pool-card--billc {
  background: var(--badge-warning-bg); border-color: var(--badge-warning-border); color: var(--badge-warning-text);
}
.dreg-pool-card--new {
  background: rgba(var(--accent-ui-rgb),0.09);
  border-color: rgba(var(--accent-ui-rgb),0.20);
  color: var(--accent-ui);
}
/* Sekundäraktion (weiß) analog "Vorlage laden" – Stile aus .btn.btn-ghost */
.dreg-pool-new { flex: 0 0 auto; margin-left: auto; align-self: flex-start; }

.dreg-ns-head-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dreg-tld-extract {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin-top: 8px;
}
.dreg-tld-extract .tld-tag {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 6px; font-size: 12px; font-weight: 800;
  font-family: var(--font-mono);
  background: rgba(var(--accent-ui-rgb),.09);
  color: var(--accent-ui);
  border: 1px solid rgba(var(--accent-ui-rgb),.18);
}
.dreg-ns-row { margin-bottom: 10px; }
.dreg-ns-main { display: flex; gap: 9px; align-items: center; }
.dreg-ns-main .dreg-ns-input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.dreg-ns-glue-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 38px; padding: 0 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--accent-ui-rgb),.09);
  border: 1px solid rgba(var(--accent-ui-rgb),.18);
  color: var(--accent-ui); font-size: 12px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.dreg-ns-glue-chip svg { width: 13px; height: 13px; }
.dreg-ns-glue-chip.is-open {
  background: var(--accent-ui); color: #fff; border-color: var(--accent-ui);
}
.dreg-ns-glue-chip.is-disabled, .dreg-ns-glue-chip:disabled {
  cursor: not-allowed; opacity: .45;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}
.dreg-ns-glue {
  margin: 9px 0 2px 0; padding: 12px 12px 12px 14px;
  border-left: 2px solid rgba(var(--accent-ui-rgb),.18);
  background: rgba(var(--accent-ui-rgb),.05);
  border-radius: 0 10px 10px 0;
  display: grid; grid-template-columns: 160px 1fr; gap: 10px;
}
.dreg-ns-glue[hidden] { display: none; }
.dreg-ns-glue-field { display: flex; flex-direction: column; gap: 5px; }
.dreg-ns-glue-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.dreg-ns-glue .dreg-ns-ip, .dreg-ns-glue .dreg-ns-ipv6 { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 640px) { .dreg-ns-glue { grid-template-columns: 1fr; } }
/* Der Entfernen-Button der Nameserver-Zeilen teilt sich seine Definition mit
   dem der SAN-Zeilen aus SSL-Erstellen – s. `.xf-san-remove, .dreg-ns-del`
   weiter unten in dieser Datei. Zuvor stand hier eine eigene Fassung, die
   auseinandergelaufen war: 34px statt 30px, dazu `--border` und `--surface-2`
   (beides Glas-Tokens mit nahezu weißem Wert), wodurch der Button auf hellem
   Grund fast rahmenlos wirkte, und ein Hover ohne die rote Tönung. */
/* Zeile-hinzufügen-Button – eine Definition für alle Vorkommen: Nameserver
   im Domain-Einzelauftrag und im Transfer-Agenten sowie SAN-Namen in
   SSL-Erstellen. Randloser Text-Button in der Akzentfarbe, wie es die
   Button-Vorgaben für sekundäre Aktionen verlangen (Kap. 7): keine eigenen
   Rahmen-, Flächen- oder Farbwerte, damit Themes automatisch greifen. */
.dreg-ns-add,
.xf-san-add {
  font-size: 12px; font-weight: 600; color: var(--accent-ui);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  /* -4px gleichen das eigene `padding-bottom` aus, damit die Beschriftung
     genauso weit über der Containerkante endet wie der Rahmen eines
     Eingabefeldes. Den eigentlichen Abstand nach unten liefert der Container
     (24px), nicht der Button. */
  margin-bottom: -4px;
  padding: 4px 8px; margin-left: -8px; border-radius: 7px;
  border: none; background: none; font-family: inherit;
  transition: color .15s ease, background-color .15s ease;
  /* Der Button steht teils in Spalten-Flex-Containern (z. B. `.ta-ns-rows` im
     Transfer-Agenten). Ohne `align-self` würde ihn deren `align-items: stretch`
     auf die volle Containerbreite ziehen – Klickfläche und Hover-Tönung reichten
     dann bis an den Modalrand. In Nicht-Flex-Kontexten ist die Angabe wirkungslos. */
  align-self: flex-start;
}
.dreg-ns-add:hover,
.xf-san-add:hover {
  color: var(--accent-ui-strong);
  background-color: color-mix(in srgb, var(--accent-ui) 12%, transparent);
}
.dreg-ns-add svg,
.xf-san-add svg { width: 13px; height: 13px; stroke-width: 2.4; stroke-linecap: round; }

/* SSL-Erstellen: Der SAN-Block ist durchgehend in Teal gehalten (Zähler-Index,
   Chips, Limit-Hinweise), deshalb trägt der Button dort die Teal-Variante –
   Geometrie und Verhalten bleiben identisch zur Domain-Fassung. Teal ist ein
   vollwertiges Token mit eigenen Theme-Werten (`--badge-teal-rgb`:
   Standard 13,148,136 · calm 95,140,125 · reseller 14,124,107), die Färbung
   folgt dem Theme also mit.
   `margin-top` wird hier zusätzlich auf 8px angehoben (statt der geteilten
   4px): `.xf-san-list` liefert nur 4px `margin-bottom` als Zeilenabstand,
   während `.dreg-ns-row` (Nameserver) 10px `margin-bottom` je Zeile trägt.
   Ohne die 4px Zuschlag stünde "+ Name hinzufügen" näher am letzten
   Eingabefeld als "+ Nameserver hinzufügen". */
.xf-san-add { color: rgb(var(--badge-teal-rgb)); margin-top: 8px; }
.xf-san-add:hover {
  color: rgb(var(--badge-teal-rgb));
  background-color: rgba(var(--badge-teal-rgb), .12);
}
.xf-san-add[disabled] { opacity: .4; cursor: default; }
.xf-san-add[disabled]:hover { color: rgb(var(--badge-teal-rgb)); background-color: transparent; }
.dreg-submit-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}
.dreg-submit-hint {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.dreg-submit-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.dreg-tld-sec {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); padding: 14px 24px 6px;
}
.tld-info-table { width: 100%; border-collapse: collapse; }
.tld-info-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 8px 24px; width: 46%; vertical-align: top; white-space: nowrap;
}
.tld-info-table td { font-size: 13px; color: var(--text-primary); padding: 8px 24px; font-weight: 500; }
.tld-info-table tr { border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 10%, transparent); }
.tld-info-table tr:last-child { border-bottom: none; }
.tld-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; }
/* Ja/Nein-Symbol aus PageHelpers.boolBadge() – nimmt die Textfarbe des Badges. */
.tld-badge svg { flex-shrink: 0; }
.tld-badge-yes { background: var(--badge-success-bg); color: var(--badge-success-text); border: 1px solid var(--badge-success-border); }
.tld-badge-no { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); border: 1px solid var(--badge-neutral-border); height: 22px; padding-top: 0; padding-bottom: 0; }
.tld-badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); border: 1px solid var(--badge-danger-border); }
.tld-badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); border: 1px solid var(--badge-info-border); }
.tld-code {
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(var(--badge-neutral-rgb),.08); padding: 1px 6px; border-radius: 5px;
}
.tld-link { color: var(--accent-ui); font-size: 12px; word-break: break-all; text-decoration: none; }
.tld-link:hover { text-decoration: underline; }

/* ── TLD-Info Panel (domain-register, an Hilfe > TLDs angelehnt) ──────── */
.dreg-tld-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px 16px; }
.dreg-tld-dot {
  font-size: 30px; font-weight: 800; line-height: 1;
  font-family: var(--font-mono);
  color: var(--accent-ui); flex-shrink: 0;
}
.dreg-tld-head-meta { min-width: 0; }
.dreg-tld-usage { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 7px; line-height: 1.35; }
.dreg-tld-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tld-type-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.tld-type-badge--teal   { background: rgba(20,184,166,.12); color: #0d9488; }
.tld-type-badge--purple { background: rgba(var(--accent-ui-light-rgb),.12); color: var(--accent-ui); }
.tld-type-badge--slate  { background: rgba(var(--badge-neutral-rgb),.10); color: var(--badge-neutral-text); border: 1px solid rgba(var(--badge-neutral-rgb),.20); }
.tld-badge-instant { background: rgba(22,163,74,.12); color: #16a34a; }

/* Operationen-Pillen */
.dreg-op-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 24px 14px; }
.dreg-op-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.dreg-op-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.dreg-op-pill--yes { background: var(--badge-success-bg); color: var(--badge-success-text); }
.dreg-op-pill--no  { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); border: 1px solid var(--badge-neutral-border); height: 22px; padding-top: 0; padding-bottom: 0; }

/* Registrierung-Box */
.dreg-create-box { margin: 0 24px 14px; border: 1px solid rgba(var(--accent-ui-rgb),.16); background: rgba(var(--accent-ui-rgb),.045); border-radius: 10px; padding: 12px 14px; }
.dreg-create-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-secondary); padding: 4px 0; }
.dreg-create-row span:first-child { font-weight: 600; }
.dreg-create-note { margin-top: 8px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--text-muted) 25%, transparent); font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

/* Abwicklung / Bearbeitungszeit – kompakt (Variante A) */
.dreg-wf-box { margin: 0 24px 14px; border: 1px solid rgba(var(--accent-ui-rgb),.16); background: rgba(var(--accent-ui-rgb),.045); border-radius: 10px; padding: 2px 14px; }
.dreg-wf-item { padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent); }
.dreg-wf-item:first-child { border-top: 0; }
.dreg-wf-head { display: flex; align-items: center; gap: 10px; }
.dreg-wf-name { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; }
.dreg-wf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(2,132,199,.1); color: #0284c7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dreg-wf-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.dreg-wf-chip--instant { background: rgba(22,163,74,.12); color: #16a34a; }
.dreg-wf-desc { margin: 5px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.dreg-wf-desc--empty { color: var(--text-muted); font-style: italic; }
/* Flache Liste direkt im glass-card-Body (Hilfe-Seiten, kein Box-in-Box) */
.dreg-wf-list { padding: 4px 20px 8px; }
.dreg-wf-list .dreg-wf-item { padding: 13px 0; }
.glass-card-count { font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: rgba(var(--badge-neutral-rgb),.09); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* Besondere Parameter – Gruppen-Karten (Variante 1), geteilt von Domain & SSL */
.sp-groups { padding: 4px 20px 14px; }
.sp-group { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.sp-group:first-child { margin-top: 4px; }
.sp-ghead { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-left: 3px solid transparent; font-weight: 700; font-size: 13px; }
.sp-gcount { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(var(--badge-neutral-rgb),.1); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.sp-param { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 16px; padding: 11px 14px; border-top: 1px solid var(--border-soft); }
.sp-param:first-of-type { border-top: 0; }
.sp-pname { align-self: start; min-width: 0; word-break: break-word; }
.sp-pdesc { color: var(--text-secondary); line-height: 1.55; font-size: 12.5px; }
.sp-pdesc--empty { color: var(--text-muted); font-style: italic; }
.sp-sep { color: var(--text-muted); margin: 0 3px; font-weight: 400; }
.sp-group--c0 .sp-ghead { background: var(--badge-purple-bg);  border-left-color: var(--badge-purple-border); color: var(--color-purple-700); }
.sp-group--c1 .sp-ghead { background: var(--badge-teal-bg);    border-left-color: var(--badge-teal-border);   color: var(--color-success-so); }
.sp-group--c2 .sp-ghead { background: var(--badge-info-bg);    border-left-color: var(--badge-info-border);   color: var(--color-info-dark); }
.sp-group--c3 .sp-ghead { background: var(--badge-warning-bg); border-left-color: var(--badge-warning-border);color: var(--color-amber-dark); }
.sp-group--c4 .sp-ghead { background: var(--badge-danger-bg);  border-left-color: var(--badge-danger-border); color: var(--color-rose-dark); }
@media (max-width: 640px) { .sp-param { grid-template-columns: 1fr; gap: 5px; } }

/* Richtlinien & Voraussetzungen */
.dreg-req-wrap { padding: 4px 24px 16px; }
.dreg-req-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dreg-req-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(217,119,6,.1); color: #b45309; border: 1px solid rgba(217,119,6,.2); }
.dreg-req-empty { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.dreg-spec-block { margin-top: 12px; }
.dreg-spec-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 5px; }
.dreg-spec-body { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* Weiterführend-Button */
.dreg-tld-more { padding: 4px 24px 20px; }
.dreg-tld-more .btn { width: 100%; justify-content: center; }

/* ── TLD-spezifische Zusatzfelder (TldExtraFields) ─────────────────────── */
.xf-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  overflow: hidden;
}
.xf-card + .xf-card { margin-top: 18px; }
.xf-card--flat { box-shadow: none; }
/* Waagerechtes Kartenpolster 24px wie im übrigen Projekt (`.u-pad-card`,
   `.dreg-tld-head`, `.ta-list-head`). Vorher 18px – dadurch standen SAN-Zeilen
   und der Hinzufügen-Button 6px weiter links als die Nameserver-Entsprechung
   in der Domain-Maske. */
.xf-card-head {
  display: flex; align-items: center; gap: 13px; padding: 15px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
  background: linear-gradient(180deg, rgba(var(--accent-ui-rgb),.05), transparent);
}
.xf-card-ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  flex: 0 0 auto; color: #fff;
  background: linear-gradient(135deg, var(--accent-ui-strong), var(--accent-ui));
  box-shadow: 0 6px 14px rgba(var(--accent-ui-rgb),.26);
}
.xf-card-ic.admin { background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 6px 14px rgba(13,148,136,.26); }
.xf-card-ic.gen { background: linear-gradient(135deg, var(--badge-neutral-text), var(--text-muted)); box-shadow: 0 6px 14px rgba(var(--badge-neutral-rgb),.24); }
.xf-card-meta { min-width: 0; }
.xf-card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
.xf-card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.xf-req-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #b45309;
  background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.25);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}

/* ── Extra-Felder: Priorisierung ── */
.xf-priority-section {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent-ui-alt);
  border-radius: 8px;
}
.xf-priority-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ui-alt);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.xf-priority-label::before {
  content: '★';
  font-size: 12px;
}
.xf-secondary-label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  margin-top: 8px;
  padding-left: 12px;
}

.xf-field { padding: 24px; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent); }
.xf-field:last-child { border-bottom: 0; }
.xf-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xf-field-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.xf-field-name svg { color: var(--accent-ui); flex: 0 0 auto; }
.xf-star { color: #e11d48; }
.xf-field-path {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.xf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.xf-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-muted) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent); padding: 3px 8px; border-radius: 999px;
}
.xf-chip b { color: var(--text-primary); font-weight: 700; }
.xf-chip--opt { color: var(--text-muted); }
.xf-chip--req { color: #b45309; background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.22); }
.xf-chip--def { color: var(--accent-ui-strong); background: rgba(var(--accent-ui-rgb),.08); border-color: rgba(var(--accent-ui-rgb),.20); }
/* Info-Familie über das Basiston-Tripel statt fester rgba-Werte – Pflicht laut
   Farb-Palette (dev.md Kap. 7): nur so folgt die Box den Themes. */
.xf-instr {
  margin-top: 11px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
  background: rgba(var(--badge-info-rgb),.06); border: 1px solid rgba(var(--badge-info-rgb),.16);
  border-radius: 9px; padding: 9px 12px; white-space: pre-line;
}
/* Absätze statt Leerzeilen: "\n\n" der Backend-Note wird in instrHtml()
   (tld-/ssl-extra-fields.js) zu <p>-Blöcken – kleiner Abstand statt einer
   vollen Leerzeile je Absatz. Einzelne "\n" bricht pre-line weiterhin um. */
.xf-instr p { margin: 0; }
.xf-instr p + p { margin-top: 0.5em; }

/* Lange Hinweise: ab der 3. Zeile gekürzt (Fade-Vorschau), der Schalter sitzt
   als Chip-Pille mittig auf der Unterkante (Mockup-Variante V3). Ruhefarben
   kommen aus .badge.badge-info, das Chevron ist ein eigenes Inline-SVG
   (gl-ico-xf-chevron) – bewusst OHNE .badge-action: dessen ::after-Chevron
   stünde doppelt daneben, und sein transparenter Hover-Ton ließe die
   Rahmenlinie durch den Kreis laufen. Den Interaktionszustand definiert
   deshalb .xf-instr-toggle:hover unten selbst, mit den Werten aus badges.css.
   Aufgeklappt deckelt ~14 Zeilen mit Scroll (der .es-Hint führt 77 Zeilen).
   Den Aufbau übernimmt enhanceInstructions() in tld-/ssl-extra-fields.js NACH
   dem Rendern: erst im DOM ist messbar, ob der Text wirklich über zwei Zeilen
   läuft; kurze Hinweise bleiben unangetastet. */
.xf-instr-wrap { margin-top: 11px; position: relative; margin-bottom: 13px; }
.xf-instr-wrap .xf-instr {
  margin-top: 0;
  max-height: calc(2 * 1.55em + 18px);
  overflow: hidden;
  padding-bottom: 12px;
  transition: max-height .25s ease;
}
/* Ausblendung zum exakten Boxton: 6% Info-Ton über der Kartenfläche. Sitzt am
   Wrapper (nicht in der Box), damit overflow:hidden sie nicht mitscrollt;
   inset 1px hält den Boxrahmen sichtbar. Beim Öffnen blendet sie weich aus
   (Deckkraft statt content: none), synchron zum Höhen-Übergang. */
.xf-instr-wrap::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 1.9em;
  border-radius: 0 0 8px 8px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, rgb(var(--badge-info-rgb)) 6%, var(--surface)));
  transition: opacity .25s ease;
}
/* Geometrie: Kreis 26px, Symbol zentriert; Farben liefert .badge-info.
   Der Chevron dreht im offenen Zustand – Muster wie .dzep-name-ic.

   Eine Ausnahme zur Geometrie: der Kreis schwebt auf der Boxkante, mit dem
   halbtransparenten Badge-Ton liefe die Rahmenlinie sichtbar durch ihn
   hindurch. Deshalb liegt der Badge-Ton hier über einer deckenden
   Kartenfläche – beides Tokens, die Badge-Optik bleibt je Theme identisch. */
.xf-instr-toggle {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  z-index: 1; cursor: pointer;
  width: 26px; height: 26px; padding: 0;
  justify-content: center; border-radius: 50%;
  background: linear-gradient(var(--badge-info-bg), var(--badge-info-bg)), var(--surface);
  transition: background .15s, border-color .15s, color .15s;
}
/* Interaktionszustand analog .badge-action (badges.css): Akzent-Tönung und
   -Rand, hier über deckender Kartenfläche statt transparent (s. o.). Das
   Chevron folgt über stroke="currentColor" automatisch. */
.xf-instr-toggle:hover,
.xf-instr-toggle:focus-visible {
  background: linear-gradient(rgba(var(--accent-ui-rgb),.09), rgba(var(--accent-ui-rgb),.09)), var(--surface);
  color: var(--accent-ui);
  border-color: rgba(var(--accent-ui-rgb),.20);
}
.xf-instr-toggle svg { transition: transform .25s ease; }
.xf-instr-wrap.open .xf-instr-toggle svg { transform: rotate(180deg); }
.xf-instr-wrap.open .xf-instr {
  max-height: calc(14 * 1.55em + 18px);
}
/* Der Scrollbalken des 14-Zeilen-Deckels kommt erst nach dem Ausrollen:
   .settled setzt xf-instr.js nach Ablauf der Übergangszeit. Während der
   Animation bliebe overflow-y: auto sonst als flackernder Balken sichtbar. */
.xf-instr-wrap.open.settled .xf-instr { overflow-y: auto; }
.xf-instr-wrap.open::after { opacity: 0; }

.xf-lbl { display: block; font-size: 12px; font-weight: 650; color: var(--text-secondary); margin: 13px 0 6px; }
.xf-composite {
  display: flex; align-items: stretch; border: 1px solid var(--border-soft);
  border-radius: 11px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s;
  /* Grundschatten wie die Einzelfelder (feedback.css, Einheits-Regel) – der
     Kasten ist ein div und faellt aus deren Selektor; ohne diese Zeile stand
     er flach neben schattierten Nachbarfeldern. Die :focus-within-Regel
     mischte die Komponente schon immer mit ein. */
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
/* Fokus wie bei jedem anderen Feld: nur der Ring, der Rand bleibt weich.
   feedback.css erzwingt für Eingabefelder `border: 1px solid var(--border-soft)`
   mit !important – deren border-color bei :focus greift also gar nicht, sie
   zeigen ausschließlich den Ring. Der Kasten ist ein div und von der Regel nicht
   betroffen; färbte er seinen Rand deckend, stünde neben den weichen
   Einzelfeldern eine harte Linie. Werte deshalb wie dort: 3px/0.18. */
.xf-composite:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.18), 0 1px 3px rgba(15,23,42,.06); }
.xf-composite select {
  border: 0; background: rgba(var(--accent-ui-rgb),.08); color: var(--accent-ui-strong); font: inherit; font-weight: 650; font-size: 13px;
  padding: 0 30px 0 12px; cursor: pointer; outline: 0; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.xf-composite .xf-sep { display: grid; place-items: center; padding: 0 3px; color: var(--text-muted); font-weight: 800; font-size: 15px; background: rgba(var(--accent-ui-rgb),.08); }
.xf-composite input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; padding: 11px 13px; background: transparent; color: var(--text-primary); }
.xf-select { position: relative; }
.xf-select select {
  width: 100%; height: 44px; border: 1.5px solid color-mix(in srgb, var(--text-muted) 30%, transparent); border-radius: 11px; background: #fff;
  font: inherit; font-size: 14px; padding: 0 38px 0 13px; color: var(--text-primary);
  -webkit-appearance: none; appearance: none; cursor: pointer; outline: 0; transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
.xf-select select:focus { border-color: var(--accent-ui); box-shadow: 0 0 0 4px rgba(var(--accent-ui-rgb),.12); }
.xf-text-input {
  width: 100%; height: 44px; border: 1.5px solid color-mix(in srgb, var(--text-muted) 30%, transparent); border-radius: 11px; background: #fff;
  font: inherit; font-size: 14px; padding: 0 13px; color: var(--text-primary); outline: 0; transition: border-color .15s, box-shadow .15s;
}
.xf-text-input:focus { border-color: var(--accent-ui); box-shadow: 0 0 0 4px rgba(var(--accent-ui-rgb),.12); }
.xf-field--error .xf-composite,
.xf-field--error .xf-select select,
.xf-field--error .xf-text-input { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.12); }

.xf-qpick { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.xf-qlab { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .03em; }
.xf-qchip {
  border: 1px solid color-mix(in srgb, var(--text-muted) 28%, transparent); background: #fff; border-radius: 999px; padding: 5px 10px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: .12s;
}
.xf-qchip:hover { border-color: var(--accent-ui); color: var(--accent-ui-strong); background: rgba(var(--accent-ui-rgb),.07); }
/* Tastatur-Fokus im etablierten transparent-violetten Chip-Ton (V4). */
.xf-qchip:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; background: rgba(var(--accent-ui-rgb),.09); color: var(--accent-ui); border-color: rgba(var(--accent-ui-rgb),.20); }
/* Aktiv-Zustand am Muster der .chip-Familie. Zuvor die einzige Volltonfüllung
   im Projekt (weißer Text auf vollflächigem Akzent) – der gewählte Wert steht
   zusätzlich im <select> direkt daneben, die Information ist doppelt codiert. */
.xf-qchip.is-active { background: rgba(var(--accent-ui-rgb),.09); border-color: rgba(var(--accent-ui-rgb),.22); color: var(--accent-ui); }

.xf-preview-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.xf-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.xf-preview {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 700; color: #0d9488; background: rgba(13,148,136,.08);
  border: 1px solid rgba(13,148,136,.22); padding: 4px 10px; border-radius: 8px;
}
.xf-preview .k { color: var(--text-muted); font-weight: 600; }

.xf-examples { display: grid; gap: 8px; margin-top: 11px; }
.xf-example { border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.xf-example-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.xf-example-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; border: 1px solid rgba(13,148,136,.25);
  background: rgba(13,148,136,.07); border-radius: 8px; padding: 4px 6px 4px 10px; cursor: pointer; transition: .12s;
}
.xf-example-chip:hover { border-color: #0d9488; background: rgba(13,148,136,.12); }
.xf-example-code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #0d9488; }
.xf-example-use { font-size: 10.5px; font-weight: 700; color: #fff; background: #0d9488; padding: 2px 7px; border-radius: 6px; }

/* ── SSL-Sonderfelder (SslExtraFields, page=ssl-create) ── */
.xf-card-ic.san { background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 6px 14px rgba(13,148,136,.26); }
.xf-composite3 {
  display: grid; grid-template-columns: 76px 1fr 1.4fr; align-items: stretch;
  border: 1px solid var(--border-soft); border-radius: 11px; overflow: hidden;
  background: #fff; transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);   /* s. .xf-composite */
}
.xf-composite3:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.18), 0 1px 3px rgba(15,23,42,.06); }
.xf-composite3 input {
  border: 0; outline: 0; font: inherit; font-size: 14px; padding: 11px 13px; background: transparent; min-width: 0;
}
.xf-composite3 .xf-place-cc {
  background: rgba(var(--accent-ui-rgb),.08); color: var(--accent-ui-strong); font-weight: 700; text-transform: uppercase; text-align: center;
  font-family: var(--font-mono); letter-spacing: .06em;
}
.xf-field--error .xf-composite3 { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.12); }

/* Die Felder in einem zusammengesetzten Feld bleiben rand- und ringlos.
   feedback.css (~Z. 1003/1013) gibt jedem input/select ohne .field-input mit
   !important einen 1px-Rand, einen Grundschatten und beim Fokus einen 3px-Ring.
   Das trifft auch die Felder *innerhalb* von .xf-composite/.xf-composite3 – dort
   entstand dadurch ein harter, eckiger Ring im abgerundeten Kasten, während der
   Kasten daneben seinen eigenen zeichnet. Zwei Ringe für einen Fokus.

   Gleiche Spezifität wie die Regeln dort (die :not()-Argumente zählen mit);
   entschieden wird über die Reihenfolge – diese Datei lädt nach feedback.css.
   Das Muster wiederholt die dortigen :not() deshalb bewusst mit. */
.xf-composite input:not(.field-input):not(.field-select),
.xf-composite select:not(.field-input):not(.field-select),
.xf-composite3 input:not(.field-input):not(.field-select) {
  border: 0 !important;
  box-shadow: none !important;
}
.xf-composite input:not(.field-input):not(.field-select):focus,
.xf-composite select:not(.field-input):not(.field-select):focus,
.xf-composite3 input:not(.field-input):not(.field-select):focus {
  box-shadow: none !important;
}
/* Die Trennlinie zwischen den drei Feldern. Muss die :not() der Regel darüber
   spiegeln, sonst gewinnt deren `border: 0` – gegen drei Klassen reicht ein
   Nachbar-Selektor mit einer Klasse auch mit !important nicht an. */
.xf-composite3 input + input:not(.field-input):not(.field-select) {
  border-left: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent) !important;
}
.xf-san-count {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #0d9488;
  background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.22);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono);
}
/* Vorlauf zum Hinzufügen-Button: 4px wie im Domain-Einzelauftrag, wo der
   Button seinen Abstand über `margin-top` selbst mitbringt. Größere Werte
   wirkten zusammen mit dem 24px-Polster von `.xf-field` unten zu luftig. */
/* Container der manuellen Nameserver in der Domain-Maske: 24px Polster wie in
   allen Karten – der Hinzufügen-Button liefert seinen Abstand nicht selbst. */
.dreg-ns-manual { padding: 18px 24px 24px; }

.xf-san-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; margin-bottom: 4px; }
.xf-san-list:empty { margin-top: 0; margin-bottom: 0; }
/* Beim Laden zeigt die Maske immer mindestens eine SAN-Zeile; leer wird die
   Liste nur, wenn alle Zeilen entfernt wurden. Dann rückt der Button an den
   Hinweistext heran – dieser Abstand ersetzt den fehlenden Listenabstand. */
.xf-san-list:empty + .xf-san-add { margin-top: 12px; }
.xf-san-row { display: flex; align-items: center; gap: 8px; }
.xf-san-idx {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: #0d9488;
  background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.20);
}
.xf-san-row .xf-text-input { flex: 1; height: 40px; }
/* Entfernen-Button einer Formularzeile – eine Definition für alle Vorkommen:
   SAN-Zeilen (SSL-Erstellen), Nameserver-Zeilen im Domain-Einzelauftrag und
   im Transfer-Agenten (dort per `.dreg-ns-del` mitgenutzt). Diese Optik ist
   die ursprüngliche; die Domain-Variante hatte sich davon entfernt. */
.xf-san-remove,
.dreg-ns-del {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent); background: #fff; color: var(--text-muted); cursor: pointer; transition: .12s;
}
.xf-san-remove:hover,
.dreg-ns-del:hover {
  border-color: rgb(var(--badge-danger-rgb));
  color: rgb(var(--badge-danger-rgb));
  background: rgba(var(--badge-danger-rgb), .06);
}
/* Strichstärke und runde Enden hier statt in den Icon-Templates: `ta-ico-x`
   wird im Transfer-Agenten auch vom Modal-Schließen-Button genutzt und darf
   sich dadurch nicht mitverändern. */
.xf-san-remove svg,
.dreg-ns-del svg { width: 13px; height: 13px; stroke-width: 2.4; stroke-linecap: round; }
/* `.xf-san-add` teilt sich seine Definition mit `.dreg-ns-add` (weiter oben in
   dieser Datei). Zuvor stand hier eine eigene Fassung mit gestricheltem Rahmen
   und eigener Teal-Färbung – beides außerhalb der Button-Vorgaben und ohne
   Theme-Anbindung. */
.xf-san-row.err .xf-text-input { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.1); }
.xf-san-errhint { font-size: 11.5px; color: #e11d48; font-weight: 600; margin-top: 6px; }

/* ── Vorlage-Sidebar (Domain als Vorlage übernehmen) ── */
.dreg-tpl-drawer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.dreg-tpl-drawer[hidden] { display: none; }
.dreg-tpl-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.28);
  backdrop-filter: blur(2px);
  animation: dregTplFade 0.2s ease;
}
@keyframes dregTplFade { from { opacity: 0; } to { opacity: 1; } }
.dreg-tpl-drawer-panel {
  position: relative;
  width: 440px;
  max-width: 96vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  border-radius: 16px 0 0 16px;
  box-shadow: -12px 0 48px rgba(15,23,42,0.14);
  overflow: hidden;
  animation: dregTplSlide 0.28s cubic-bezier(0.22,1,0.36,1);
}
@keyframes dregTplSlide {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.dreg-tpl-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
  flex-shrink: 0;
}
.dreg-tpl-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.dreg-tpl-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.dreg-tpl-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.dreg-tpl-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.dreg-tpl-close svg { width: 15px; height: 15px; }
.dreg-tpl-close:hover { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-primary); }
.dreg-tpl-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dreg-tpl-searchform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-soft);
}
.dreg-tpl-searchform .crd-fg,
.dreg-tpl-searchform #dreg-tpl-userscope,
.dreg-tpl-searchform #dreg-tpl-userscope .sf-user-scope-wrap,
.dreg-tpl-searchform #dreg-tpl-userscope .sf-user-scope-text { width: 100%; }
.dreg-tpl-searchbtn { width: 50%; justify-content: center; margin-top: 2px; }
.dreg-tpl-searchbtn .dreg-tpl-search-ic { width: 15px; height: 15px; }
.dreg-tpl-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(13,148,136,0.06);
  border: 1px solid rgba(13,148,136,0.18);
}
.dreg-tpl-results { display: flex; flex-direction: column; gap: 6px; }
.dreg-tpl-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.dreg-tpl-count b {
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-ui-rgb),0.09);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
}
.dreg-tpl-userpill {
  font-size: 10px;
  font-weight: 700;
  color: var(--badge-teal-text);
  background: rgba(13,148,136,0.09);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: 999px;
  padding: 1px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dreg-tpl-userpill svg { width: 10px; height: 10px; }

/* Farbige TLD-Pille in der Vorlage-Trefferliste (rechtsbündig) */
.dreg-tpl-results .crd-ri-handle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dreg-tpl-tldpill {
  margin-left: auto;
  flex-shrink: 0;
  max-width: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: rgba(var(--accent-ui-rgb),0.10);
  border: 1px solid rgba(var(--accent-ui-rgb),0.22);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* Typ-Gruppenzeile in der Record-Tabelle (zuvor 2× inline). */
.dzep-optgroup {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(var(--badge-neutral-rgb), .04);
}

/* Danger-Zone im Zonen-Panel (zuvor inline). */
.dzep-danger-zone { border-top: 1px solid rgba(var(--badge-danger-rgb), .15); margin-top: 4px; padding-top: 12px; }
.dzep-danger-title { font-size: 12px; font-weight: 600; color: var(--color-danger); margin-bottom: 2px; }
.btn-danger-soft {
  background: var(--badge-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(var(--badge-danger-rgb), .25);
  flex-shrink: 0;
}
/* Monospace-Werte im Zonen-Panel. */
.dzep-val-ip   { color: var(--color-info-dark); font-family: var(--font-mono); }
.dzep-val-tsig { color: var(--color-purple-900); font-family: var(--font-mono); word-break: break-all; }


/* ── public/assets/css/pages/bulk-order.css ── */
/* ============================================================
   Massenauftrag-Wizard (bulk-order) – Namespace .bo-
   ============================================================ */
.bo-wrap{max-width:1400px}
/* Stepper and the step cards (input boxes 1-3, summary 5) keep their original width;
   only the status step (4) widens to host the order-data box on its right. */
.bo-stepper{max-width:1000px}
.bo-panel > .glass-card{max-width:1000px}
.bo-note{display:flex;gap:9px;align-items:flex-start;padding:12px 16px;border-radius:12px;
  background:var(--color-info-soft);border:1px solid var(--color-info);
  color:var(--text-secondary);font-size:13px;line-height:1.55;margin-bottom:18px}
.bo-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--color-info)}
.bo-note code{font-family:'JetBrains Mono',monospace;background:rgba(37,99,235,.12);padding:1px 6px;border-radius:5px;font-size:12px}

/* Stepper */
.bo-stepper{display:flex;align-items:flex-start;margin-bottom:22px}
.bo-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.bo-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:calc(50% + 18px);right:calc(-50% + 18px);
  height:2px;background:var(--border-soft)}
.bo-step.done::after{background:var(--accent-ui)}
.bo-dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--surface);
  color:var(--text-muted);position:relative;z-index:1}
.bo-step.active .bo-dot{border-color:var(--accent-ui);color:var(--accent-ui)}
.bo-step.done .bo-dot{border-color:var(--accent-ui);background:var(--accent-ui);color:#fff}
.bo-step-label{font-size:11px;font-weight:700;text-align:center;line-height:1.3;color:var(--text-muted)}
.bo-step.active .bo-step-label{color:var(--text-primary)}
.bo-step.done .bo-step-label{color:var(--accent-ui)}

/* Panels */
.bo-panel{display:none}
.bo-panel.active{display:block}
.bo-card{margin-bottom:18px;overflow:hidden}
.bo-card-head{padding:16px 22px;border-bottom:1px solid var(--border-soft)}
.bo-card-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.bo-card-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.bo-card-body{padding:20px 22px}

/* Status step: status box keeps old (input-box) width, order-data box hangs to the right */
.bo-status-layout{display:grid;grid-template-columns:minmax(0,1000px) minmax(280px,360px);gap:20px;align-items:start}
.bo-status-card.glass-card{margin-bottom:0;max-width:none;padding-bottom:0}
.bo-order-card{padding:20px 22px;align-self:start}
.bo-order-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;
  color:var(--text-primary);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}
.bo-order-head svg{width:17px;height:17px;color:currentColor}
.bo-order-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0}
.bo-order-key{font-size:12px;color:var(--text-muted);flex-shrink:0}
.bo-order-val{font-size:13px;font-weight:700;color:var(--text-secondary);text-align:right;word-break:break-all}
.bo-order-val.bo-mono{font-family:'JetBrains Mono',monospace}
.bo-order-val code{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent-ui)}
.bo-order-val.is-ok{color:#16a34a}
.bo-order-val.is-err{color:#dc2626}
.bo-order-sep{height:1px;background:var(--border-soft);margin:8px 0}

/* Service-Kontakt-Picker (Benutzer erstellen/bearbeiten): Hover-Feedback für die inline-gestylten Buttons */
#ucp-servicec-pick,#ume-sc-pick{transition:background .15s,border-color .15s}
#ucp-servicec-pick:hover,#ume-sc-pick:hover{background:rgba(var(--accent-ui-rgb),.14)!important;border-color:rgba(var(--accent-ui-rgb),.28)!important}
.bo-btn[hidden]{display:none !important}
@media (max-width:1180px){.bo-status-layout{grid-template-columns:1fr}}

/* Selection tiles */
.bo-tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:720px){.bo-tile-grid{grid-template-columns:1fr}}
.bo-tile{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;cursor:pointer;
  border:2px solid rgba(var(--text-muted-rgb),.20);background:rgba(255,255,255,.55);transition:all .18s}
.bo-tile:not(.disabled):not(.selected):hover{border-color:rgba(var(--accent-ui-rgb),.30);background:rgba(var(--accent-ui-rgb),.06);
  transform:translateY(-1px)}
.bo-tile.selected{border-color:var(--accent-ui);background:rgba(var(--accent-ui-rgb),.08)}
.bo-tile.selected:hover{transform:translateY(-1px)}
.bo-tile.disabled{opacity:.55;cursor:default}
.bo-tile-ico{width:34px;height:34px;border-radius:9px;background:rgba(var(--text-muted-rgb),.12);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s}
.bo-tile.selected .bo-tile-ico{background:rgba(var(--accent-ui-rgb),.14);color:var(--accent-ui)}
.bo-tile-ico svg{width:16px;height:16px}
.bo-tile-body{flex:1;min-width:0}
.bo-tile-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--text-secondary)}
.bo-tile.selected .bo-tile-title{color:var(--accent-ui-strong)}
.bo-tile-desc{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.4}
.bo-tile-api{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-ui);margin-top:6px}
/* Auswahlanzeige: `components/type-check.css`, hier nur die Platzierung. */
.bo-tile .ui-type-check{margin-top:1px}
.bo-badge-danger{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
  border-radius:6px;background:rgba(220,38,38,.12);color:#dc2626}

/* Gefahren-Auftragsarten (Löschen/Release): roter Akzent */
.bo-tile.danger:not(.disabled):not(.selected):hover{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.05)}
.bo-tile.danger.selected{border-color:#dc2626;background:rgba(220,38,38,.07)}
.bo-tile.danger.selected .bo-tile-ico{background:rgba(220,38,38,.13);color:#dc2626}
.bo-tile.danger.selected .bo-tile-title{color:#b91c1c}
.bo-tile.danger .bo-tile-api{color:#dc2626}

/* Schritt 3: auftragsspezifische Dateneingabe-Panels */
.bo-fields-panel[hidden]{display:none !important}

/* Tabs */
.bo-tabs{display:inline-flex;background:rgba(var(--text-muted-rgb),.12);border-radius:11px;padding:4px;gap:4px;margin-bottom:16px}
.bo-tab{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-secondary);
  cursor:pointer;border:none;background:none;font-family:inherit}
.bo-tab.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* Inputs */
.bo-label{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:7px}
/* Eingabefelder nutzen den System-Standard .field-input/.field-textarea
   (layout/app-shell.css): gleiche Höhe, Radius, Fläche, Schatten und – wichtig
   für die Active-Markierung – derselbe Fokus-Ring. Hier bleiben nur die
   layoutspezifischen Ergänzungen. */
.bo-area{min-height:170px;resize:vertical;line-height:1.7}
.bo-mono,.mono{font-family:'JetBrains Mono','Fira Mono',monospace;font-size:13px}
.bo-field-row{max-width:380px;margin-bottom:8px}
.bo-hint{font-size:11.5px;color:var(--text-muted);margin-top:7px;display:flex;align-items:center;gap:5px;line-height:1.5}
.bo-hint svg{width:13px;height:13px;flex-shrink:0}
.bo-hint code{font-family:'JetBrains Mono',monospace}

/* Übernahme aus der virtuellen Zwischenablage (Objektsammler).
   Optik wie der Info-Kasten .bo-confirm-info (Akzent-Tönung), damit die
   Akzent-Aktion darin nicht mit einer zweiten Farbfamilie konkurriert. */
.bo-clip{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 15px;border-radius:12px;
  background:rgba(var(--accent-ui-rgb),.06);border:1px solid rgba(var(--accent-ui-rgb),.25)}
.bo-clip[hidden]{display:none}
.bo-clip-ico{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-ui-rgb),.10);color:var(--accent-ui)}
.bo-clip-ico svg{width:17px;height:17px}
.bo-clip-body{min-width:0}
.bo-clip-body b{font-size:12.5px;color:var(--text-primary)}
.bo-clip-body p{font-size:11.5px;color:var(--text-secondary);margin-top:2px;line-height:1.45}
.bo-clip-actions{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
/* Buttons: globale Klassen .btn .btn-ghost .btn-sm bzw. .btn .btn-accent .btn-sm */

/* Dropzone */
.bo-dropzone{display:block;border:2px dashed var(--border-soft);border-radius:14px;
  padding:32px 20px;text-align:center;color:var(--text-muted);background:var(--surface-2);cursor:pointer}
.bo-dropzone.drag{border-color:var(--accent-ui);background:rgba(var(--accent-ui-rgb),.06)}
.bo-dropzone svg{width:30px;height:30px;margin-bottom:10px;opacity:.7}
.bo-dropzone b{display:block;color:var(--text-secondary);font-size:13.5px}
.bo-dropzone p{font-size:12px;margin-top:5px}
.bo-csv-hint{margin-top:12px;font-size:11.5px;color:var(--text-muted);background:rgba(15,23,42,.03);
  border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;font-family:'JetBrains Mono',monospace}

/* Chips */
.bo-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bo-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font-size:12px;font-weight:700;border:1px solid}
.bo-chip[hidden]{display:none !important}
.bo-chip.total{background:rgba(37,99,235,.08);color:var(--color-info);border-color:rgba(37,99,235,.2)}
.bo-chip.ok{background:rgba(22,163,74,.08);color:var(--color-success);border-color:rgba(22,163,74,.2)}
.bo-chip.err{background:rgba(225,29,72,.08);color:var(--color-rose);border-color:rgba(225,29,72,.2)}

/* Flow summary */
.bo-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:14px;
  background:rgba(var(--accent-ui-rgb),.07);border:1px solid rgba(var(--accent-ui-rgb),.18);margin-top:22px}
.bo-flow-box{flex:1;min-width:150px}
.bo-flow-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ui);margin-bottom:4px}
.bo-flow-val{font-size:15px;font-weight:800;color:var(--text-primary);font-family:'JetBrains Mono',monospace}
.bo-flow-arrow{color:var(--accent-ui);flex-shrink:0}
.bo-flow-arrow svg{width:22px;height:22px}

/* Status table */
.bo-run-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.bo-progress{height:8px;background:var(--border-soft);border-radius:99px;overflow:hidden;flex:1;min-width:200px}
.bo-progress-bar{height:100%;border-radius:99px;background:var(--grad-primary);width:0;transition:width .3s ease}
.bo-progress-meta{font-size:12.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.bo-table-wrap{overflow:auto}
.bo-table{width:100%;border-collapse:collapse}
.bo-table .bo-statcell{text-align:center;width:108px}
.bo-table .bo-objcell{white-space:nowrap;width:1px;max-width:70ch;overflow:hidden;text-overflow:ellipsis}
.bo-table td.bo-receipt{white-space:normal;word-break:break-word}
.bo-table thead th{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  text-align:left;padding:9px 14px;border-bottom:1px solid var(--border-soft)}
.bo-table tbody td{padding:10px 14px;font-size:12.5px;border-bottom:1px solid rgba(var(--text-muted-rgb),.1);vertical-align:middle}
.bo-idx{color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-size:11.5px;width:42px}
.bo-table .bo-strong{font-weight:700;color:var(--text-primary)}
.bo-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted)}
.bo-code.is-ok{color:var(--color-success)}
.bo-code.is-err{color:var(--color-rose)}
.bo-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.bo-badge.wait{background:rgba(100,116,139,.10);color:var(--badge-neutral-text);border:1px solid rgba(100,116,139,.20);height:22px;padding-top:0;padding-bottom:0}
.bo-badge.run{background:rgba(37,99,235,.1);color:var(--color-info)}
.bo-badge.ok{background:rgba(22,163,74,.1);color:var(--color-success)}
.bo-badge.err{background:rgba(225,29,72,.1);color:var(--color-rose)}
.bo-spinner{display:block;width:14px;height:14px;border-radius:50%;margin:0 auto;
  border:2px solid rgba(37,99,235,.25);border-top-color:var(--color-info);
  animation:ui-spin .7s linear infinite}

/* Result tiles */
.bo-hero{text-align:center;padding:12px 0 4px}
.bo-hero-ico{width:54px;height:54px;border-radius:17px;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 24px rgba(var(--accent-ui-rgb),.3)}
.bo-hero-ico svg{width:26px;height:26px;stroke:#fff}
.bo-hero-title{font-size:19px;font-weight:800;color:var(--text-primary);margin-bottom:5px}
.bo-hero-sub{font-size:13px;color:var(--text-secondary)}
.bo-result-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 18px}
@media(max-width:620px){.bo-result-tiles{grid-template-columns:1fr}}
.bo-rt{border-radius:14px;padding:16px 18px;border:1px solid;text-align:center}
.bo-rt.total{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.18)}
.bo-rt.ok{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.18)}
.bo-rt.err{background:rgba(225,29,72,.07);border-color:rgba(225,29,72,.18)}
.bo-rt-count{font-size:26px;font-weight:900;line-height:1}
.bo-rt.total .bo-rt-count{color:var(--color-info)}
.bo-rt.ok .bo-rt-count{color:var(--color-success)}
.bo-rt.err .bo-rt-count{color:var(--color-rose)}
.bo-rt-label{font-size:12px;font-weight:700;color:var(--text-secondary);margin-top:4px}
.bo-warn{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(217,119,6,.08);
  border:1px solid rgba(217,119,6,.2);margin-bottom:18px;font-size:12.5px;color:var(--text-secondary);line-height:1.5}
.bo-warn svg{width:16px;height:16px;stroke:var(--color-amber);flex-shrink:0;margin-top:1px}
.bo-warn[hidden]{display:none !important}

/* Buttons + footer */
.bo-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;
  border-top:1px solid var(--border-soft)}
.bo-foot-actions{display:flex;gap:10px;flex-wrap:wrap}
.bo-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;
  border:none;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.bo-btn svg{width:14px;height:14px;flex-shrink:0}
/* .btn-Primary/Ghost/Danger (modal-userpwd.css) liefern Farben/Hover/Themes;
   .bo-btn dient nur noch als Groessen-Anker. */
.bo-btn-danger{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
  box-shadow:0 4px 14px rgba(220,38,38,.30)}
.bo-btn-danger:hover{box-shadow:0 6px 20px rgba(220,38,38,.42);transform:translateY(-1px)}
.bo-btn-danger:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}

/* Gefahren-Bestätigung (Schritt 4, destruktive Auftragsarten) */
.bo-confirm-danger{display:flex;gap:11px;align-items:flex-start;margin:0 22px 16px;padding:14px 16px;border-radius:12px;
  background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.25)}
.bo-confirm-danger[hidden]{display:none !important}
.bo-confirm-danger > svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;stroke:#dc2626}
.bo-confirm-danger-body{flex:1;font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
.bo-confirm-danger-body b{color:#b91c1c;display:block;margin-bottom:2px}
.bo-confirm-danger-check{display:flex;gap:9px;align-items:flex-start;margin-top:10px;cursor:pointer;font-weight:700;
  color:var(--text-primary)}
.bo-confirm-danger-check input{width:16px;height:16px;flex-shrink:0;margin-top:1px;accent-color:#dc2626;cursor:pointer}

/* Neutrale Info-Bestätigung (Schritt 3, nicht-destruktive Auftragsarten) */
.bo-confirm-info{display:flex;gap:11px;align-items:flex-start;margin:0 22px 16px;padding:14px 16px;border-radius:12px;
  background:rgba(var(--accent-ui-rgb),.06);border:1px solid rgba(var(--accent-ui-rgb),.25)}
.bo-confirm-info > svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;stroke:var(--accent-ui)}
.bo-confirm-info-body{flex:1;font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
.bo-confirm-info-body b{color:var(--text-primary);display:block;margin-bottom:2px}
.bo-fields-panel .bo-confirm-info{margin:0 0 6px;max-width:640px}

/* ── Verification Bars ──────────────────────────────────────────────────── */
.verification-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.verification-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(var(--text-muted-rgb), 0.18);
  background: rgba(var(--text-muted-rgb), 0.05);
  transition: all 0.2s ease;
}

/* Status-Farbvarianten */
.verification-bar--pending {
  border-left: 4px solid #d97706;
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.18);
}

.verification-bar--locked {
  border-left: 4px solid #dc2626;
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.18);
}

.verification-bar--failed {
  border-left: 4px solid #dc2626;
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.18);
}

.verification-bar--verified {
  border-left: 4px solid #059669;
  background: rgba(5, 150, 105, 0.05);
  border-color: rgba(5, 150, 105, 0.18);
}

.verification-bar--neutral {
  border-left: 4px solid var(--badge-neutral-text);
  background: rgba(100, 116, 139, 0.05);
  border-color: rgba(100, 116, 139, 0.18);
}

/* Icon */
.verification-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
}

.verification-bar--pending .verification-bar__icon {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

.verification-bar--locked .verification-bar__icon {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.verification-bar--failed .verification-bar__icon {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.verification-bar--verified .verification-bar__icon {
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
}

.verification-bar--neutral .verification-bar__icon {
  background: rgba(100, 116, 139, 0.15);
  color: var(--badge-neutral-text);
}

.verification-bar__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Content */
.verification-bar__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verification-bar__type {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.verification-bar__status {
  font-size: 13px;
  color: var(--text-muted);
}

.verification-bar__status-value {
  font-weight: 500;
  color: var(--text-primary);
}

/* Details (Methode/Referenz – nur gerendert, wenn Werte vorhanden) */
.verification-bar__details {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.verification-bar__detail-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  margin-bottom: 6px;
}

.verification-bar__detail-label {
  color: var(--text-muted);
  font-weight: 500;
}

.verification-bar__detail-value {
  color: var(--text-primary);
  word-break: break-word;
  white-space: normal;
}

/* Action area (Button-Integration folgt; leerer Bereich erzeugt keine Trennlinie) */
.verification-bar__action {
  display: flex;
  align-items: center;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(var(--text-muted-rgb), 0.1);
}

.verification-bar__action:empty {
  display: none;
}

/* Responsive */
@media (max-width: 640px) {
  .verification-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .verification-bar__icon {
    width: 28px;
    height: 28px;
  }

  .verification-bar__action {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--text-muted-rgb), 0.1);
  }

  .verification-bar__detail-item {
    grid-template-columns: 80px 1fr;
    gap: 8px;
    font-size: 11px;
  }
}

/* Kompakte Variante (Kontakt-Detail, schmale Info-Karte) */
.verification-bars--compact { gap: 8px; }
.verification-bars--compact .verification-bar { padding: 8px 10px; gap: 9px; border-radius: 7px; }
.verification-bars--compact .verification-bar__icon { width: 26px; height: 26px; min-width: 26px; border-radius: 5px; }
.verification-bars--compact .verification-bar__icon svg { width: 15px; height: 15px; }
.verification-bars--compact .verification-bar__type { font-size: 12.5px; }
.verification-bars--compact .verification-bar__status { font-size: 11.5px; }
.verification-bars--compact .verification-bar__details { margin-top: 6px; padding-top: 6px; font-size: 11px; }
.verification-bars--compact .verification-bar__detail-item { grid-template-columns: 68px 1fr; gap: 8px; margin-bottom: 4px; }

/* ── Panel "domain-register" (Massen-Domainregistrierung) ── */
.bo-dr-section{margin-bottom:22px;min-width:0}
.bo-dr-section-title{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 10px}
/* Abschnittskopf: Titel links, "Vorlage laden"-Button rechtsbündig abgesetzt
   (geringerer Bottom-Abstand, da der Button den Kopf bereits höher macht) */
.bo-dr-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 2px}
.bo-dr-section-head .bo-dr-section-title{margin:0}
.bo-dr-hint{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.45;
  color:var(--text-secondary);margin:0 0 12px}
.bo-dr-hint svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;opacity:.7}
/* Kontaktkarten (ContactDetailBox) oben verteilend: 2 Spalten, schmal 1 Spalte */
.bo-dr-handles .crd-handle-grid{grid-template-columns:1fr 1fr}
@media (max-width:760px){.bo-dr-handles .crd-handle-grid{grid-template-columns:1fr}}
.bo-dr-ns-section{border-top:1px solid var(--border-soft);padding-top:18px;max-width:520px}
.bo-dr-ns{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
/* Abstand unter dem Hinzufügen-Button liefert der Abschnitt, nicht der Button. */
.bo-dr-ns-section{padding-bottom:12px}
.bo-dr-ns-row{display:flex;align-items:center;gap:8px}
.bo-dr-ns-row .bo-dr-ns-input{flex:1}
.bo-dr-ns-rm{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border-radius:9px;border:1px solid var(--border-soft);background:rgba(255,255,255,.65);
  color:var(--text-secondary);cursor:pointer;transition:all .15s ease}
.bo-dr-ns-rm:hover{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.06)}
.bo-dr-ns-rm svg{width:15px;height:15px}
.bo-dr-tld{border-top:1px solid var(--border-soft);padding-top:18px}
.bo-dr-tldgroups{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.bo-dr-tldgroup{border:1px solid var(--border-soft);border-radius:12px;
  background:rgba(255,255,255,.5);overflow:hidden}
.bo-dr-tldgroup-title{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:700;
  color:var(--accent-ui);padding:9px 14px;background:rgba(var(--accent-ui-rgb),.06);
  border-bottom:1px solid var(--border-soft)}
.bo-dr-tldgroup-body{padding:14px;font-size:12.5px;color:var(--text-secondary)}

/* Handle-Pille in der Auftragsdaten-Sidebar (Design 1:1 Transfer-Agent-Tabelle) */
.bo-handle-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:3px 10px;border-radius:99px;cursor:help;
  background:rgba(var(--accent-ui-light-rgb),.12);color:var(--accent-ui-strong);
  font-family:'JetBrains Mono',monospace}
.bo-handle-chip svg{width:11px;height:11px}


/* ── Panel "autorenew" (Options-Cards: gemeinsame zone-type-card-Styles) ── */
.bo-ar-options{max-width:640px}
@media (max-width:640px){.bo-ar-options{flex-direction:column}}

/* ── Panel "domain-modify": Keep-Toggles "Altdaten unverändert übernehmen" ── */
/* Der Block nutzt die System-Klassen .crd-info-block/.crd-block-title
   (contract-rich.css) – hier nur der Außenabstand und der Reset des inneren
   Listen-Abstands, damit die Optik zu allen anderen eingebundenen Blöcken passt. */
.bo-keep-block{margin:0 0 16px}
.bo-keep-block .bo-keep-list{margin:0}
/* Kontakt-Bar direkt unter dem Block bzw. dem Hinweis */
.bo-dr-handles .dreg-pool{padding:0 0 12px}
.bo-keep-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0 0 14px}
.bo-dr-ns-section .bo-keep-list{grid-template-columns:1fr}
@media (max-width:760px){.bo-keep-list{grid-template-columns:1fr}}
.bo-keep-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  border:1px solid var(--border-soft);border-radius:10px;
  background:rgba(255,255,255,.5);padding:8px 12px;transition:border-color .15s ease}
.bo-keep-toggle:hover{border-color:var(--accent-ui)}
.bo-keep-switch{position:relative;display:inline-block;width:34px;height:19px;flex-shrink:0}
.bo-keep-switch input{position:absolute;opacity:0;width:0;height:0}
.bo-keep-slider{position:absolute;inset:0;border-radius:99px;background:rgba(var(--text-muted-rgb),.45);
  transition:background .15s ease}
.bo-keep-slider::before{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease}
.bo-keep-switch input:checked + .bo-keep-slider{background:var(--accent-ui)}
.bo-keep-switch input:checked + .bo-keep-slider::before{transform:translateX(15px)}
.bo-keep-text{display:flex;flex-direction:column;min-width:0}
.bo-keep-label{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.bo-keep-hint{font-size:11px;color:var(--text-secondary)}
/* Hinweis "mindestens ein Merkmal ändern" (No-Op-Schutz) */
.bo-keep-noop{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;
  color:#b45309;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.35);
  border-radius:10px;padding:10px 12px;margin:0 0 16px}
.bo-keep-noop svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.bo-keep-noop[hidden]{display:none}

/* ── Panel "confirm-danger" (Schritt-3-Hinweis, ohne seitliche Margins) ── */
.bo-fields-panel .bo-confirm-danger{margin:0 0 6px;max-width:640px}


/* ── public/assets/css/pages/tools-transfer-agent.css ── */
/* ============================================================
   Tools: Transfer Agent (Registrar-Verbindung, Domainliste,
   Transfer-Modal mit Ablauf, Fehler-Editierung und Erfolg)
   ============================================================ */

.ta-card { padding:20px 22px; }
.ta-card + .ta-card { margin-top:24px; }
.ta-card-title { font-size:15px; font-weight:700; display:flex; align-items:center; gap:9px; color:var(--text-primary); }
.ta-step-no { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:2px solid var(--accent-ui); background:var(--surface); color:var(--accent-ui); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.ta-card-sub { font-size:12.5px; color:var(--text-secondary); margin-top:4px; margin-left:39px; }
.ta-req { color:#ef4444; }
.ta-field-hint { font-size:11.5px; color:var(--text-muted); }

/* Custom-Registrar-Dropdown (Badges in nativen <option> nicht möglich) */
.ta-regdd { position:relative; }
.ta-regdd-trigger { display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer; background-image:none; }
.ta-regdd-trigger[disabled] { opacity:.55; cursor:not-allowed; }
.ta-regdd-value { display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0; }
.ta-regdd-value.ta-regdd-ph { color:var(--text-muted); }
.ta-regdd-caret { width:14px; height:14px; flex-shrink:0; color:var(--text-muted); }
.ta-regdd-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:var(--surface); border:1px solid rgba(var(--text-muted-rgb),.28); border-radius:10px; box-shadow:0 12px 32px rgba(15,23,42,.14); padding:4px; }
.ta-regdd-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:8px 10px; border:none; background:none; border-radius:7px; font-size:13px; color:var(--text-primary); cursor:pointer; text-align:left; }
.ta-regdd-item:hover:not(.is-disabled) { background:rgba(var(--accent-ui-rgb),.10); color:var(--accent-ui); }
.ta-regdd-item.is-selected { background:rgba(var(--accent-ui-rgb),.10); color:var(--accent-ui); font-weight:700; }
.ta-regdd-item.is-disabled { color:var(--text-muted); cursor:default; }
.ta-reg-badge { flex-shrink:0; }
.ta-reg-badge svg { width:10px; height:10px; stroke-width:3.5; }
/* Verified-Siegel als reines Symbol (Solid-Stil: gefülltes Siegel, weißer Haken) */
.ta-reg-verified { flex-shrink:0; display:inline-flex; color:#059669; }
.ta-reg-verified svg { width:16px; height:16px; }
.ta-reg-verified svg path:first-child { fill:currentColor; stroke:none; }
.ta-reg-verified svg path:last-child { fill:none; stroke:#fff; stroke-width:2.4; }
.ta-reg-grid { display:grid; grid-template-columns:320px 1fr; gap:26px; margin-top:18px; }
@media (max-width:860px) { .ta-reg-grid { grid-template-columns:1fr; } }
.ta-cred-panel { border:1.5px dashed rgba(var(--accent-ui-rgb),.30); border-radius:12px; padding:16px 18px; background:rgba(var(--accent-ui-light-rgb),.04); }
.ta-cred-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:13.5px; }
.ta-cred-logo { width:30px; height:30px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,#0ea5e9,#2563eb); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.ta-cred-fields { display:grid; grid-template-columns:1fr; gap:14px; max-width:calc(50% - 7px); }
@media (max-width:860px) { .ta-cred-fields { max-width:none; } }
.ta-cred-actions { display:flex; gap:10px; margin-top:14px; }
.ta-cred-actions .btn { gap:8px; }
.ta-cred-note { display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:11.5px; color:var(--text-secondary); line-height:1.55; }
.ta-cred-note svg { flex-shrink:0; color:#2563eb; margin-top:1px; }
.ta-cred-file { padding:7px 10px; font-size:12px; cursor:pointer; }
.ta-cred-file::file-selector-button { margin-right:10px; padding:4px 12px; border:1.5px solid rgba(var(--accent-ui-rgb),.30); border-radius:7px; background:rgba(var(--accent-ui-light-rgb),.08); color:var(--accent-ui-strong); font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; }
.ta-cred-file::file-selector-button:hover { background:rgba(var(--accent-ui-light-rgb),.14); }
.ta-list-card { padding:0; }
.ta-list-head { display:flex; align-items:center; gap:12px; padding:18px 24px 14px; flex-wrap:wrap; }
.ta-spacer { flex:1; }
.ta-conn-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px; background:rgba(22,163,74,.12); color:#16a34a; }
.ta-conn-dot { width:7px; height:7px; border-radius:50%; background:#16a34a; }
.ta-search-mini { width:220px; padding-top:8px; padding-bottom:8px; }
.ta-refresh-btn { gap:7px; }
.ta-table-wrap { overflow-x:auto; }
.ta-table { width:100%; border-collapse:collapse; font-size:13px; }
.ta-table thead th { text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--text-muted); padding:10px 14px; border-bottom:1px solid rgba(var(--text-muted-rgb),.22); background:rgba(var(--bg-2-rgb),.7); }
.ta-table thead th:first-child { padding-left:24px; }
.ta-table thead th:last-child { padding-right:24px; text-align:center; }
.ta-table tbody td { padding:12px 14px; border-bottom:1px solid rgba(var(--text-muted-rgb),.10); vertical-align:middle; }
.ta-table tbody td:first-child { padding-left:24px; }
.ta-table tbody td:last-child { padding-right:24px; text-align:center; }
.ta-table tbody tr:hover { background:rgba(var(--accent-ui-light-rgb),.035); }
.ta-dom { font-family:"SF Mono",Menlo,monospace; font-weight:600; font-size:13px; }
.ta-dt { white-space:nowrap; color:var(--text-secondary); }
.ta-dt b { color:var(--text-primary); font-weight:600; }
.ta-dt-none { color:var(--text-muted); }
.ta-handle-chip, .ta-ns-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; cursor:help; }
.ta-handle-chip { background:rgba(var(--accent-ui-light-rgb),.12); color:var(--accent-ui-strong); }
.ta-ns-chip { background:rgba(13,148,136,.10); color:#0d9488; }
.ta-handle-chip svg, .ta-ns-chip svg { width:11px; height:11px; }
/* Nur Groessen-Abweichung vom globalen .btn.btn-primary – Farben/Hover/Themes
   kommen aus der Basisklasse (kein themespezifischer Override noetig). */
.ta-btn-transfer { gap:6px; font-size:12px; padding:7px 14px; border-radius:8px; }
.ta-btn-transfer svg { width:13px; height:13px; }
.ta-btn-transfer.muted { opacity:.45; cursor:default; box-shadow:none; filter:grayscale(.35); pointer-events:none; }
.ta-done-check { width:30px; height:30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#16a34a,#059669); box-shadow:0 4px 12px rgba(22,163,74,.30); animation:ta-pop-in .35s cubic-bezier(.34,1.56,.64,1); cursor:help; }
.ta-done-check svg { width:15px; height:15px; stroke:#fff; stroke-width:2.5; }
@keyframes ta-pop-in { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.ta-empty { padding:26px 24px; font-size:13px; color:var(--text-muted); text-align:center; }

/* ── Transfer-Modal (Ablauf, Fehler-Editierung, Erfolg) ── */
.ta-modal-backdrop { position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding:7vh 20px 40px; overflow-y:auto; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); }
.ta-modal { width:560px; max-width:100%; background:#fff; border-radius:16px; box-shadow:0 24px 64px rgba(15,23,42,.22); overflow:hidden; }
.ta-modal-stripe { height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,var(--accent-ui) 0%,#2563eb 60%,#0d9488 100%); }
.ta-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 13px; border-bottom:1px solid rgba(var(--text-muted-rgb),.14); }
.ta-modal-head-left { display:flex; align-items:center; gap:10px; }
.ta-modal-icon { width:34px; height:34px; background:rgba(var(--accent-ui-rgb),.09); border:1px solid rgba(var(--accent-ui-rgb),.16); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ta-modal-icon svg { width:15px; height:15px; fill:none; stroke:var(--accent-ui); }
.ta-modal-title { font-size:14px; font-weight:800; color:var(--text-primary); letter-spacing:-.2px; margin:0; }
.ta-modal-sub { display:flex; align-items:center; font-size:12.5px; margin-top:2px; color:var(--text-muted); }
.ta-modal-dom { color:var(--accent-ui); font-weight:700; margin-left:4px; }
.ta-modal-close { width:28px; height:28px; background:rgba(var(--text-muted-rgb),.12); border:none; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:background .12s,color .12s; flex-shrink:0; }
.ta-modal-close:hover:not([disabled]) { background:rgba(var(--text-muted-rgb),.22); color:var(--text-secondary); }
.ta-modal-close svg { width:13px; height:13px; }
.ta-modal-close[disabled] { opacity:.35; cursor:not-allowed; }
/* Chrome-Maße wie `.csm-body` / `.csm-foot` (pages/contact-swap.css) – die
   Modal-Schale ist systemweit identisch aufgebaut. */
.ta-modal-body { padding:20px 20px 4px; }
.ta-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid rgba(var(--text-muted-rgb),.14); }
/* Die Fortschritts-Schrittliste kommt zentral aus
   components/progress-steps.css (.ui-steps / .ui-step-ic / .ui-step-txt). */
/* Hinweiskasten in Akzent-Tönung wie `.csm-note` statt eigener Blau-Variante. */
.ta-modal-note { margin:12px 0 6px; padding:10px 13px; border-radius:10px; background:rgba(var(--accent-ui-rgb),.05); border:1px solid rgba(var(--accent-ui-rgb),.12); font-size:12px; color:var(--text-secondary); display:flex; gap:8px; line-height:1.5; }
.ta-modal-note svg { width:14px; height:14px; flex-shrink:0; color:var(--accent-ui); margin-top:1px; }
.ta-err-banner { display:flex; gap:10px; align-items:flex-start; background:var(--badge-danger-bg); border:1px solid var(--badge-danger-border); border-radius:10px; padding:11px 14px; margin-bottom:16px; font-size:12.5px; line-height:1.55; color:var(--badge-danger-text); }
.ta-err-banner svg { width:16px; height:16px; flex-shrink:0; color:var(--color-danger); margin-top:1px; }
.ta-err-banner b { display:block; font-size:13px; }
/* Monospace-Werte sind laut Typografie-Vorgabe 400 – das umgebende <b> der
   Fehlermeldung darf sich nicht auf den Detailcode vererben. */
.ta-err-banner code { font-family:var(--font-mono); font-weight:400; font-size:11.5px; background:rgba(var(--badge-danger-rgb),.09); border-radius:5px; padding:1px 6px; }
.ta-err-detail { display:block; margin:6px 0; }
/* Abschnittstitel: Werte wie `.acp-sec-title` (components/account-panels.css). */
.ta-edit-sec-title { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin:16px 0 10px; display:flex; align-items:center; gap:7px; }
.ta-edit-sec-title svg { width:13px; height:13px; }
.ta-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:11px; }
.ta-edit-grid:first-of-type { margin-top:0; }
.ta-edit-grid .full { grid-column:1 / -1; }
.ta-edit-grid-3 { display:grid; grid-template-columns:90px 1fr 90px; gap:11px; margin-top:11px; }
/* Formularelemente: Werte identisch zum Modal-Standard `.acp-label` /
   `.acp-input` (components/account-panels.css) – dort liegt die Referenz für
   Eingaben in Overlays. Bewusst keine eigenen Abweichungen (vorher: Label
   11,5 px, Eingabe 600 fett, 1-px-Rahmen, eigener Fokus-Ring). */
.ta-f-label { display:block; font-size:12px; font-weight:700; color:var(--color-muted-2); margin-bottom:5px; }
.ta-f-req { color:var(--color-danger); }
.ta-f-input {
  width:100%; padding:9px 12px; border-radius:8px;
  border:1.5px solid rgba(var(--badge-neutral-rgb),.35);
  background:#fff; color:var(--text-primary);
  font-size:13px; font-family:inherit; outline:none; box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
select.ta-f-input { cursor:pointer; }
.ta-f-input:focus { border-color:var(--accent-ui); box-shadow:0 0 0 3px rgba(var(--accent-ui-rgb),.1); }
.ta-f-input.invalid { border-color:var(--color-danger); box-shadow:0 0 0 3px rgba(var(--badge-danger-rgb),.1); }
/* Der Hinzufügen-Button steckt in dieser Liste; sein Abstand nach unten kommt
   aus dem Container, nicht aus dem Button selbst. */
.ta-ns-rows { display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.ta-ns-row { display:flex; gap:8px; align-items:center; }
.ta-ns-row .ta-f-input { font-family:var(--font-mono); font-size:12.5px; }
/* Hinzufügen-/Entfernen-Buttons nutzen .dreg-ns-add/.dreg-ns-del aus dem Domain-Einzelauftrag (dns-zone.css, global). */
.ta-ok-hero { text-align:center; padding:10px 0 6px; }
.ta-ok-hero-ico { width:54px; height:54px; border-radius:17px; background:linear-gradient(135deg,#16a34a,#059669); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 8px 24px rgba(22,163,74,.3); animation:ta-pop-in .35s cubic-bezier(.34,1.56,.64,1); }
.ta-ok-hero-ico svg { width:26px; height:26px; stroke:#fff; stroke-width:2.5; }
.ta-ok-hero-title { font-size:17px; font-weight:800; margin-bottom:5px; }
.ta-ok-hero-sub { font-size:12.5px; color:var(--text-secondary); }
.ta-ok-hero-detail { display:block; margin-top:7px; }
.ta-ok-hero-sub code { font-family:"SF Mono",Menlo,monospace; font-size:11.5px; background:rgba(22,163,74,.10); color:#16a34a; border-radius:5px; padding:1px 6px; }
.ta-ok-autoclose { font-size:11.5px; color:var(--text-muted); margin-top:12px; }
.ta-ok-autoclose b { color:var(--text-secondary); }

/* ── Transfer-Optionen ── */
.ta-opt-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 24px; border-top:1px dashed rgba(var(--text-muted-rgb),.35); background:rgba(var(--accent-ui-light-rgb),.03); font-size:12px; }
.ta-opt-sum-label { font-weight:800; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--text-muted); }
.ta-opt-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; background:rgba(var(--accent-ui-light-rgb),.12); color:var(--accent-ui-strong); }
.ta-opt-chip.teal { background:rgba(13,148,136,.10); color:#0d9488; }
.ta-opt-chip.gray { background:rgba(100,116,139,.10); color:var(--text-muted); }
.ta-opt-chip svg { width:11px; height:11px; }
.ta-opt-sum-edit { margin-left:auto; background:none; border:none; color:var(--accent-ui-strong); font-weight:700; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
.ta-opt-sum-edit svg { width:12px; height:12px; }
.ta-opt-radio { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1.5px solid var(--border-mid); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s; }
.ta-opt-radio + .ta-opt-radio { margin-top:8px; }
.ta-opt-radio input { margin-top:2px; accent-color:var(--accent-ui); }
.ta-opt-radio.checked { border-color:rgba(var(--accent-ui-rgb),.45); background:rgba(var(--accent-ui-rgb),.04); }
.ta-opt-radio b { display:block; font-size:13px; }
.ta-opt-radio small { display:block; color:var(--text-muted); font-size:11.5px; margin-top:2px; line-height:1.5; }
.ta-opt-sub { margin:10px 0 4px 34px; }
.ta-opt-sub.disabled { opacity:.45; pointer-events:none; }
.ta-opt-handle { max-width:260px; font-family:"SF Mono",Menlo,monospace; font-size:12.5px; }
.ta-opt-check { display:flex; gap:10px; align-items:flex-start; padding:8px 2px; cursor:pointer; }
.ta-opt-check input { margin-top:2px; accent-color:var(--accent-ui); }
.ta-opt-check b { display:block; font-size:13px; font-weight:600; }
.ta-opt-check small { display:block; color:var(--text-muted); font-size:11.5px; margin-top:1px; line-height:1.5; }
.ta-opt-foot { align-items:center; }

/* Debug-Ausgabe der Original-Rückmeldung (analog api-xml-konsole .xcon-raw) */
.ta-raw { font-family:monospace; font-size:11.5px; line-height:1.6; white-space:pre-wrap; word-break:break-all;
  overflow:auto; max-height:280px; padding:14px 16px; margin:14px 0 0; border-radius:10px;
  color:#c9d3e3; background:#0f1729; }
.ta-raw[hidden] { display:none; }
.ta-modal-foot [data-act="toggle-raw"] { margin-right:auto; }


/* ── public/assets/css/pages/auto-zone-orders.css ── */
/* ══════════════════════════════════════════════════════════════════════
   Auto-Zone (Domain-Masken: Nameserver-Box Toggle, Panel, Records-Modal)
   ══════════════════════════════════════════════════════════════════════ */
.az-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.az-toggle-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .01em;
}
/* Bewusst keine Akzentfarbe auf dem Label im Ein-Zustand: den Zustand zeigt
   die Schiene, wie bei allen anderen Schaltern des Projekts (anycast-,
   crd-, bo-keep-, dfs-Toggle – deren Beschriftungen bleiben neutral). Die
   frühere var(--accent)-Färbung war der einzige Ausreißer und verdoppelte
   das Zustandssignal. */
.az-switch {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: rgba(var(--text-muted-rgb),0.35);
  transition: background .18s ease;
  flex-shrink: 0;
}
.az-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.25);
  transition: transform .18s ease;
}
.az-toggle.on .az-switch { background: var(--grad-primary); }
.az-toggle.on .az-switch::after { transform: translateX(17px); }

.az-panel {
  padding: 16px 24px 22px;
  animation: az-fade .16s ease;
}
@keyframes az-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.az-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(var(--accent-ui-rgb),0.07);
  border: 1px solid rgba(var(--accent-ui-rgb),0.16);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 18px;
}
.az-intro svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.az-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 4px 0 10px;
}
.az-nslist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.az-nschip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-primary);
}
.az-nschip svg { width: 13px; height: 13px; color: var(--accent-teal); }
.az-ipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.az-iphint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
@media (max-width: 640px) { .az-ipgrid { grid-template-columns: 1fr; } }

/* Records-Modal Inhalt (Container = Standard csm-Modal) */
.az-rec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.az-rec-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.az-rec-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
  vertical-align: top;
  word-break: break-word;
}
.az-rec-table td.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.az-rec-table tr:last-child td { border-bottom: none; }
.az-rec-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
}

/* ══ Offene Aufträge (orders) ══════════════════════════════════════════ */
/* Objekttyp-Segment-Switch */
.orders-seg-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 14px 14px 14px;
  border-radius: 12px;
  background: rgba(var(--text-muted-rgb),0.10);
  border: 1px solid rgba(var(--text-muted-rgb),0.16);
  flex-wrap: wrap;
}
.orders-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.orders-seg svg { width: 15px; height: 15px; }
.orders-seg:hover:not(.active) {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent);
}
.orders-seg.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}

/* Gesperrter Status-Hinweis */
.orders-locked-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(217,119,6,0.07);
  border: 1px solid rgba(217,119,6,0.22);
}
.orders-locked-hint .olh-ico {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,119,6,0.14); color: #b45309;
}
.orders-locked-hint .olh-ico svg { width: 14px; height: 14px; }
.orders-locked-hint .olh-text { font-size: 12px; color: #92400e; }
.orders-locked-hint .olh-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  background: rgba(217,119,6,0.13); color: #b45309;
  border: 1.5px solid rgba(217,119,6,0.30);
  white-space: nowrap;
}
.orders-locked-hint .olh-pill svg { width: 11px; height: 11px; }

/* Top-Filterleiste: Segment-Switch + Filter in einer Toolbar vereint */
.domain-split.orders-top { display: flex; flex-direction: column; }
.domain-split.orders-top .quick-card-body { order: 2; }
.domain-split.orders-top .orders-toolbar { order: 1; }

.orders-toolbar {
  margin: 14px 14px 14px;
  border-radius: 14px;
  background: rgba(var(--text-muted-rgb),0.10);
  border: 1px solid rgba(var(--text-muted-rgb),0.16);
  overflow: hidden;
}
/* Segment-Switch als weiße Pill-Gruppe innerhalb der Toolbar */
.orders-toolbar .orders-seg-bar {
  margin: 0;
  padding: 3px;
  border: none;
  border-radius: 11px;
  background: rgba(255,255,255,0.60);
}
.orders-toolbar .orders-seg { padding: 8px 13px; }
/* Fallback: Seg-Bar direkt in der Toolbar (Seiten ohne api_filters) */
.orders-toolbar > .orders-seg-bar { margin: 10px 12px; }
/* vertikaler Trenner zwischen Segmenten und Filtern */
.ot-div {
  width: 1px;
  align-self: stretch;
  min-height: 26px;
  background: rgba(var(--text-muted-rgb),0.28);
}

/* Filter-Form: zweizeilige Toolbar (Zeile 1: Tabs + Suche + Anwenden,
   Zeile 2: gruppierte Filter + Zuruecksetzen) */
.orders-top-filters {
  display: flex !important;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.orders-top-filters .dfs-section { padding: 0; border: none; margin: 0; display: flex; align-items: center; }
.orders-top-filters .dfs-section--toggle { border-top: none; margin-top: 0; }
.orders-top-filters .dfs-footer { padding: 0; margin: 0; align-self: center; }
.orders-top-filters .dfs-footer .btn { width: auto; padding: 9px 18px; }

/* Zeile 1: Navigation & Suche */
.ot-row1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 12px;
}
.ot-row1 .dfs-section { flex: 1 1 240px; }
.ot-row1 .dfs-label { display: none; }
.ot-row1 .sf-input { width: 100%; min-width: 200px; height: 38px; }
.ot-row1 .dfs-footer { margin-left: auto; }

/* Zeile 2: Filterleiste mit beschrifteten Gruppen */
.ot-row2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
  padding: 9px 12px;
  border-top: 1px solid rgba(var(--text-muted-rgb),0.16);
  background: rgba(255,255,255,0.45);
}
.ot-row2 .dfs-section {
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid rgba(var(--text-muted-rgb),0.25);
}
.ot-row2 .dfs-section:first-child { padding-left: 2px; }
.ot-row2 .dfs-section:last-of-type { border-right: none; }
.ot-row2 .dfs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}
.ot-row2 .sf-input { height: 32px; min-width: 130px; }
.ot-row2 .chip-wrap { flex-wrap: wrap; }
.ot-row2 .dfs-clear { display: none; }


/* ── Billing-Preise: Listen-Zellen ─────────────────────────────────────── */
.pricing-product-cell { display: flex; align-items: center; gap: 11px; }
.pricing-product-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pricing-product-ico svg { width: 13px; height: 13px; }
.pricing-product-ico--domain { background: var(--badge-info-bg); color: var(--accent-ui-alt); border: 1px solid rgba(var(--accent-ui-alt-rgb),.15); }
.pricing-product-ico--account { background: #ecfeff; color: #0891b2; border: 1px solid rgba(8,145,178,.15); }
.pricing-product-main { min-width: 0; }
.pricing-product-name { font-weight: 600; color: #1e293b; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.pricing-product-id { font-size: 11.5px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.pricing-promo-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px 2px 5px; border-radius: 20px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; }
.pricing-promo-badge svg { width: 11px; height: 11px; }
/* Angekündigte Preisänderung (forecast=true): verlinkter Chip zur
   Preisänderungs-Liste. Farben, Hover/Fokus und Chevron kommen komplett aus
   .badge badge-info badge-action (components/badges.css); hier nur die
   Link- und Icon-Eigenheiten, die die Badge-Klassen nicht abdecken. */
.pricing-forecast-badge { text-decoration: none; }
.pricing-forecast-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Bedeutungs-Zeile der pricing-change-Zelle: gleicher rechter Einzug wie
   .table-amount (52px), damit Betrag und Zusatz bündig stehen. */
.pricing-change-note { display: inline-block; padding-right: 52px; }
.pricing-group-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.pricing-action-pill { text-transform: none; }
.pricing-action-dot { margin: 0 4px; color: var(--text-muted); font-weight: 700; }
.pricing-group-pill--domain { background: var(--badge-info-bg); color: var(--color-info-dark); }
.pricing-group-pill--account { background: #ecfeff; color: #0e7490; }
.billing-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: var(--color-bg-1); color: var(--text-secondary); user-select: none; }
/* Dot: zentral via .badge-dot (components/badges.css, currentColor); die früheren
   .billing-status-pill__dot-Duplikate mit Fixfarben sind entfernt (TPL-05). */
.billing-status-pill--success { background: #ecfdf5; color: #047857; }
.billing-status-pill--neutral { background: var(--color-bg-1); color: var(--badge-neutral-text); }
.billing-status-pill--processing { background: #fffbeb; color: #b45309; }
.billing-status-pill--failed { background: #fef2f2; color: #dc2626; }
.billing-status-pill--locked { animation: verif-locked-pulse 1.4s ease-in-out infinite; }
.billing-status-pill[title], .warn-pill[title] { cursor: pointer; }
.billing-status-pill svg { width: 12px; height: 12px; flex: 0 0 auto; pointer-events: none; }
/* Verifizierungs-Badge (Kontaktliste) – Systemvorgaben: Farben wie .cdw-verif-badge, Textdicke 700 */
.billing-status-pill--verif { font-weight: 700; }
.billing-status-pill--verif.billing-status-pill--success { background: rgba(16,185,129,.12); color: #059669; }
.billing-status-pill--verif.billing-status-pill--processing { background: rgba(245,158,11,.12); color: #d97706; }
.billing-status-pill--verif.billing-status-pill--failed { background: rgba(239,68,68,.12); color: #dc2626; }

/* ── Billing-Preise: Detail-Modal ──────────────────────────────────────── */
.prc-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 4000; opacity: 0; transition: opacity .18s ease; padding: 24px; }
.prc-overlay.prc-open { opacity: 1; }
.prc-modal { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); transform: translateY(10px) scale(.98); transition: transform .18s ease; }
.prc-overlay.prc-open .prc-modal { transform: translateY(0) scale(1); }
.prc-stripe { height: 4px; background: linear-gradient(90deg, var(--accent-ui-alt), var(--accent-ui-light), #ec4899); flex: 0 0 auto; }
.prc-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid #eef2f7; }
.prc-head-left { display: flex; gap: 13px; align-items: center; }
.prc-ico { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prc-ico svg { width: 22px; height: 22px; }
.prc-ico--domain { background: var(--badge-info-bg); color: var(--accent-ui-alt); }
.prc-ico--account { background: #ecfeff; color: #0891b2; }
.prc-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.prc-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.prc-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--color-bg-1); color: var(--text-secondary); }
.prc-pill--domain { background: var(--badge-info-bg); color: var(--color-info-dark); }
.prc-pill--account { background: #ecfeff; color: #0e7490; }
.prc-pill--id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-bg-2); color: var(--badge-neutral-text); }
.prc-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.prc-status--ok { background: #ecfdf5; color: #047857; }
.prc-status--neutral { background: var(--color-bg-1); color: var(--badge-neutral-text); }
.prc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.prc-x { border: none; background: var(--color-bg-1); color: var(--badge-neutral-text); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prc-x:hover { background: var(--border-mid); color: var(--text-strong); }
.prc-x svg { width: 16px; height: 16px; }
.prc-body { padding: 20px 22px 22px; overflow-y: auto; }
.prc-loading, .prc-error, .prc-empty { text-align: center; color: var(--text-muted); padding: 32px 0; font-size: 13.5px; }
.prc-error { color: #dc2626; }
.prc-loading-wrap { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.prc-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.prc-meta-box { background: var(--color-bg-2); border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px; }
.prc-meta-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.prc-meta-val { font-size: 13.5px; color: #1e293b; font-weight: 600; margin-top: 3px; word-break: break-word; }
.prc-sect-title { font-size: 12.5px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.prc-table { width: 100%; border-collapse: collapse; }
.prc-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid #eef2f7; }
.prc-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-bg-1); font-size: 13px; color: var(--text-strong); vertical-align: top; }
.prc-table .prc-r { text-align: right; }
.prc-table .prc-c { text-align: center; }
.prc-attr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--badge-neutral-text); }
.prc-price { font-weight: 700; color: var(--text-primary); }
.prc-price--free { color: #047857; font-weight: 600; }
.prc-promo-inline { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; margin-left: 8px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #b45309; background: linear-gradient(135deg,rgba(217,119,6,.14),rgba(245,158,11,.14)); border: 1px solid rgba(217,119,6,.3); }
.prc-promo-inline svg { width: 11px; height: 11px; }
.prc-promo-detail { margin-top: 14px; border-radius: 10px; padding: 12px 14px; background: linear-gradient(135deg,rgba(217,119,6,.06),rgba(245,158,11,.05)); border: 1px solid rgba(217,119,6,.22); }
.prc-promo-detail + .prc-promo-detail { margin-top: 10px; }
.prc-promo-detail .prc-pd-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #b45309; margin-bottom: 6px; }
.prc-promo-detail .prc-pd-h svg { width: 14px; height: 14px; }
.prc-promo-detail .prc-pd-row { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; color: #92400e; }
.prc-promo-detail .prc-pd-row b { color: #78350f; }
.prc-unit { font-size: 12px; color: var(--badge-neutral-text); }
.prc-dash { color: var(--border-strong); }
@media (max-width: 640px) { .prc-meta-grid { grid-template-columns: 1fr; } .prc-promo-detail .prc-pd-row { flex-direction: column; gap: 4px; } }

/* ── Billing-Preise: SSL-Gruppe (sslcert) ──────────────────────────────── */
.pricing-product-ico--ssl { background: #fdf2f8; color: #db2777; border: 1px solid rgba(219,39,119,.15); }
.pricing-group-pill--ssl { background: #fdf2f8; color: #be185d; }
.prc-ico--ssl { background: #fdf2f8; color: #db2777; }
.prc-pill--ssl { background: #fdf2f8; color: #be185d; }

/* Preisdetail-Modal auf csm-Design: gruppengefärbtes Icon im csm-Header */
.csm-icon.prc-ico { width: 34px; height: 34px; border-radius: 10px; }
.csm-icon.prc-ico svg { width: 16px; height: 16px; stroke: currentColor; }
.prc-box .prc-meta { margin-top: 4px; }

/* ── Preisdetail-Tabelle · Variante C (gruppiert nach Preistyp) ── */
.prc-group { margin-bottom: 16px; }
.prc-group:last-child { margin-bottom: 0; }
.prc-glabel { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px 2px; }
.prc-glabel::after { content: ""; flex: 1; height: 1px; background: rgba(var(--text-muted-rgb),.22); }
.prc-item { background: var(--color-bg-2); border: 1px solid rgba(var(--text-muted-rgb),.14); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 7px; }
.prc-item:last-child { margin-bottom: 0; }
.prc-item--promo { background: linear-gradient(180deg, rgba(217,119,6,.05), #fff 70%); border-color: rgba(217,119,6,.32); }
.prc-item--free { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.18); }
.prc-op { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.prc-op svg { width: 13px; height: 13px; }
.prc-op--create { color: #059669; }
.prc-op--modify { color: #d97706; }
.prc-op--delete { color: #dc2626; }
.prc-item-head { display: flex; align-items: center; gap: 11px; }
.prc-item-main { min-width: 0; }
.prc-item-name { font-weight: 700; font-size: 12.5px; color: #1e293b; }
.prc-item-attr { font-size: 11px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.prc-item-spacer { flex: 1; }
.prc-hero { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.prc-strike { font-size: 11px; color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.prc-price--free { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: #047857; background: rgba(16,185,129,.1); padding: 3px 10px; border-radius: 20px; }
.prc-item-promo { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px;
  border-radius: 8px; font-size: 11px; font-weight: 600; color: #b45309;
  background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.2); }
.prc-item-promo svg { width: 11px; height: 11px; flex: 0 0 auto; }
.prc-item-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.prc-item-foot .prc-item-promo { margin-top: 0; }
.prc-qty { font-size: 10.5px; font-weight: 700; color: var(--badge-neutral-text); font-variant-numeric: tabular-nums; }
.prc-item-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 11px;
  line-height: 1.5; color: var(--badge-neutral-text); }
.prc-item-note svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; color: var(--text-muted); }
.prc-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px;
  border-radius: 10px; background: var(--color-bg-2); border: 1px solid var(--border-mid);
  font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.prc-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--text-muted); }
.prc-note--warn svg { color: #d97706; }
.prc-item-note--warn svg { color: #d97706; }
.prc-ai { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; }
.prc-ai svg { width: 15px; height: 15px; }
.prc-ai--create   { background: rgba(13,148,136,.12);  color: #0f766e; border: 1px solid rgba(13,148,136,.2); }
.prc-ai--renew    { background: rgba(37,99,235,.12);    color: #1d4ed8; border: 1px solid rgba(37,99,235,.2); }
.prc-ai--transfer { background: rgba(var(--accent-ui-alt-rgb),.12);   color: var(--accent-ui-alt); border: 1px solid rgba(var(--accent-ui-alt-rgb),.2); }
.prc-ai--modify   { background: rgba(var(--accent-ui-rgb),.12);   color: var(--accent-ui); border: 1px solid rgba(var(--accent-ui-rgb),.2); }
.prc-ai--delete   { background: rgba(225,29,72,.1);     color: #be123c; border: 1px solid rgba(225,29,72,.2); }
.prc-ai--restore  { background: rgba(217,119,6,.12);    color: #b45309; border: 1px solid rgba(217,119,6,.2); }



/* ── public/assets/css/pages/ssl-create.css ── */
/* ══════════════════════════════════════════════════════════════════════
   SSL-Zertifikat beantragen (ssl-create-rich) – Produktkacheln, CSR,
   Approver-Radios, produktspezifische Zusatzfelder.
   ══════════════════════════════════════════════════════════════════════ */
.sslc-product-grid {
  display: grid; gap: 10px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sslc-tile {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 15px; border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(var(--text-muted-rgb),.20);
  transition: all .18s;
}
.sslc-tile:hover {
  border-color: rgba(var(--accent-ui-rgb),.30);
  background: rgba(var(--accent-ui-rgb),.06);
  transform: translateY(-1px);
}
.sslc-tile.is-active {
  border-color: var(--primary-600);
  background: rgba(var(--accent-ui-rgb),.08);
}
.sslc-tile-name { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); }
.sslc-tile.is-active .sslc-tile-name { color: var(--primary-600); }
.sslc-tile-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sslc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 5px; text-transform: uppercase;
  background: rgba(100,116,139,.12); color: var(--text-secondary);
}
.sslc-tag-dv { background: rgba(13,148,136,.13); color: #0f766e; }
.sslc-tag-ov { background: rgba(37,99,235,.13); color: #1d4ed8; }
.sslc-tag-ev { background: rgba(var(--accent-ui-rgb),.14); color: var(--accent-ui-strong); }
/* Auswahlanzeige: `components/type-check.css`, hier nur die Platzierung in der
   Kachelecke. */
.sslc-tile .ui-type-check { position: absolute; top: 11px; right: 11px; }

.sslc-cn-wrap { display: flex; gap: 14px; align-items: flex-end; }
.sslc-cn-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.sslc-csr { min-height: 150px; resize: vertical; line-height: 1.5; }

/* CSR-Prüfung: Label-Row, CN-Darstellung (readonly) und Status-Zeile */
.sslc-cn-labelrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sslc-cn-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
  color: var(--accent-ui-strong); background: rgba(var(--accent-ui-rgb),.12);
  border: 1px solid rgba(var(--accent-ui-rgb),.24);
}
.sslc-cn-value {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 700; line-height: 1.3; word-break: break-all;
  color: var(--accent);
}
.sslc-cn-value.is-empty {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted);
}

/* Approver-Werte als Radio-Liste (statt Dropdown) */
.sslc-approver-choices { display: flex; flex-direction: column; gap: 8px; }
.sslc-approver-ph { font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.sslc-approver-radio {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 13px; border-radius: 10px;
  background: var(--surface-2);
  border: 1.5px solid rgba(15,23,42,.09);
  transition: border-color .15s, background .15s;
}
.sslc-approver-radio:hover { border-color: rgba(var(--accent-ui-rgb),.35); }
.sslc-approver-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.sslc-approver-radio-box {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(15,23,42,.25); position: relative; transition: border-color .15s;
}
.sslc-approver-radio input:checked ~ .sslc-approver-radio-box { border-color: var(--primary-600); }
.sslc-approver-radio input:checked ~ .sslc-approver-radio-box::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary-600);
}
.sslc-approver-radio:has(input:checked) { border-color: var(--primary-600); background: rgba(var(--accent-ui-rgb),.06); }
.sslc-approver-radio-txt {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--text-secondary); word-break: break-all;
}

.sslc-approver-methods { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sslc-radio {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 11px;
  background: var(--surface-2);
  border: 1.5px solid rgba(15,23,42,.09);
  transition: border-color .15s, background .15s;
}
.sslc-radio:hover { border-color: rgba(var(--accent-ui-rgb),.35); }
.sslc-radio.is-disabled { cursor: not-allowed; opacity: .45; background: var(--surface-2); border-color: rgba(15,23,42,.09); }
.sslc-radio.is-disabled:hover { border-color: rgba(15,23,42,.09); }
.sslc-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.sslc-radio-box {
  flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(15,23,42,.25); position: relative; transition: border-color .15s;
}
.sslc-radio input:checked ~ .sslc-radio-box { border-color: var(--primary-600); }
.sslc-radio input:checked ~ .sslc-radio-box::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary-600);
}
.sslc-radio:has(input:checked) { border-color: var(--primary-600); background: rgba(var(--accent-ui-rgb),.06); }
.sslc-radio-txt { display: flex; flex-direction: column; gap: 2px; }
.sslc-radio-lbl { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.sslc-radio-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

.sslc-xf-row { margin-bottom: 16px; }
.sslc-xf-row:last-child { margin-bottom: 0; }
.sslc-fbadge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; margin-left: 6px;
  background: rgba(100,116,139,.13); color: var(--badge-neutral-text);
}
.sslc-fbadge-req { background: rgba(220,38,38,.12); color: #dc2626; }
.field-input.field-error, textarea.field-input.field-error {
  border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* ── SSL-Detail: gruppierte, read-only Sonderfelder (ssl-pages.js _renderExtraGroups) ── */
.sxd-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.sxd-groups .xf-card + .xf-card { margin-top: 0; }
.sxd-groups .xf-card-head .crd-copy-btn { margin-left: auto; flex-shrink: 0; }
.xf-card-ic.approval { background: linear-gradient(135deg, #b45309, #f59e0b); box-shadow: 0 6px 14px rgba(245,158,11,.26); }
.xf-card-ic.csr { background: linear-gradient(135deg, #1d4ed8, #3b82f6); box-shadow: 0 6px 14px rgba(59,130,246,.26); }
.xf-card-ic.cert { background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 6px 14px rgba(34,197,94,.26); }
.sxd-pem-body {
  margin: 12px 16px 14px; max-height: 220px; overflow: auto; padding: 12px 14px;
  border-radius: 10px; background: var(--surface-2);
  border: 1px solid rgba(15,23,42,.08);
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all;
  color: var(--text-secondary);
}
.sxd-mono { font-family: var(--font-mono); word-break: break-all; }
/* Karteninhalt bündig zum Kartenkopf (`.xf-card-head`, 24px) und mit demselben
   unteren Abstand wie die Eingabefelder der Erstellen-Maske (`.xf-field`, 24px).
   Vorher 16px seitlich / 10px unten – der Inhalt stand dadurch links neben dem
   Kopf und lag unten enger an der Kartenkante als in allen anderen Karten.
   Oben bleiben 4px, weil die Zeilen (`.sxd-row`) ihren Abstand selbst mitbringen. */
.sxd-body { padding: 4px 24px 24px; }
.sxd-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid rgba(var(--text-muted-rgb),.14);
}
.sxd-row:last-child { border-bottom: 0; }
.sxd-k { font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; }
.sxd-v { font-weight: 600; text-align: right; word-break: break-word; }
.sxd-cc {
  font-family: var(--font-mono); font-size: 12px; margin-right: 6px;
  background: var(--surface-2); border: 1px solid rgba(15,23,42,.08);
  border-radius: 5px; padding: 1px 6px;
}
.sxd-badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(var(--accent-ui-rgb),.10); color: var(--accent-ui);
}
.sxd-san-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 4px; }
.sxd-san-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(13,148,136,.08); border: 1px solid rgba(13,148,136,.20); color: #0f766e;
  border-radius: 8px; padding: 5px 10px;
}
.sxd-san-chip .n {
  font-size: 10.5px; font-weight: 700; color: #0d9488; background: #fff;
  border-radius: 4px; padding: 0 5px;
}

/* ── SSL-Detail: DCV per DNS – TXT-Record in die eigene Zone schreiben ──
   Aktionsleiste in der Validierungskarte + Inhalte des Overlays
   (ssl-pages.js, Abschnitt "DCV per DNS"). Das Modal selbst nutzt
   unverändert die System-Chrome .csm-* (Overlay, Box, Stripe, Head, Body,
   Foot) – hier stehen nur Bausteine, die es dort noch nicht gibt. */
.sdcv-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 16px 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed var(--border-soft);
}
.sdcv-txt { flex: 1; min-width: 170px; }
.sdcv-txt b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.sdcv-txt small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Ergebnis-Einfärbung der System-Icon-Kachel im Kopf (Default = Accent) */
.csm-icon.sdcv-icon--ok {
  background: rgba(var(--badge-success-rgb), .10); border-color: var(--badge-success-border);
}
.csm-icon.sdcv-icon--ok svg { stroke: var(--color-success); }
.csm-icon.sdcv-icon--error {
  background: rgba(var(--badge-danger-rgb), .10); border-color: var(--badge-danger-border);
}
.csm-icon.sdcv-icon--error svg { stroke: var(--color-danger); }
.csm-icon.sdcv-icon--info {
  background: rgba(var(--badge-neutral-rgb), .10); border-color: var(--badge-neutral-border);
}
.csm-icon.sdcv-icon--info svg { stroke: var(--text-secondary); }

.sdcv-prev {
  border: 1.5px solid rgba(var(--accent-ui-rgb), .20);
  background: rgba(var(--accent-ui-rgb), .04);
  border-radius: 10px; padding: 13px 15px;
}
.sdcv-grid {
  display: grid; grid-template-columns: 140px 1fr;
  row-gap: 9px; column-gap: 10px; font-size: 12.5px;
}
.sdcv-grid .k { color: var(--text-muted); font-weight: 700; }
.sdcv-grid .v { font-family: var(--font-mono); word-break: break-all; color: var(--text-primary); }
.sdcv-hint {
  font-size: 11px; color: var(--text-muted); margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(var(--accent-ui-rgb), .12);
}

/* Die Fortschritts-Schrittliste kommt zentral aus
   components/progress-steps.css (.ui-steps) – hier bewusst keine Kopie. */

/* Ergebnis-Hinweis: Basis ist die System-Klasse .csm-note (Abstände, Radius,
   Typografie); hier nur die Einfärbung je Ausgang. Die Fehlerfarbe hat .csm-note
   selbst nicht – Accent (Default) und Grün (.csm-note-green) sind vorhanden. */
.csm-note.sdcv-note--ok {
  background: var(--badge-warning-bg); border-color: var(--badge-warning-border);
  color: var(--color-amber-darkbg);
}
.csm-note.sdcv-note--err {
  background: var(--badge-danger-bg); border-color: var(--badge-danger-border);
  color: var(--color-rose-dark);
}
.csm-note.sdcv-note--info {
  background: var(--badge-neutral-bg); border-color: var(--badge-neutral-border);
  color: var(--text-secondary);
}


/* Icon-Kachel im SSL-Kopfbereich und Trennlinie (zuvor inline in ssl-pages.js). */
.ssl-hero-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(var(--accent-ui-rgb), .08);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ui);
}
.ssl-sep-top { border-top: 1px solid rgba(var(--badge-neutral-rgb), .15); padding-top: 12px; }


/* ── public/assets/css/pages/ssl-one-click.css ── */
/* ══════════════════════════════════════════════════════════════════════
   One-Click-SSL (?page=ssl, Modal soc-overlay)

   Nutzt die System-Chrome (.csm-*, s. contact-swap.css) und die
   Fortschritts-Timeline (.ui-steps, s. components/progress-steps.css);
   hier liegen nur die modul-eigenen Bausteine (Präfix soc-):
   Eingabefelder, Datenkontroll-Karten und der Copy-Block des Fallbacks.
   ══════════════════════════════════════════════════════════════════════ */

.soc-field { margin-bottom: 13px; }
.soc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* CSR-Eingabe: Monospace-Textarea im .field-input-Look */
.soc-area {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: 9px;
  padding: 9px 12px;
}
.soc-area:focus {
  outline: none;
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb), .12);
}

/* Datenkontrolle: akzentuierte Karte (CSR-Ergebnis) + neutrale Karte (Antragsteller) */
.soc-prev {
  border: 1.5px solid rgba(var(--accent-ui-rgb), .2);
  background: rgba(var(--accent-ui-rgb), .04);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 12px;
}
.soc-prev--plain {
  border-color: var(--border-soft);
  background: rgba(var(--badge-neutral-rgb), .05);
}
.soc-grid {
  display: grid;
  grid-template-columns: 132px 1fr;
  row-gap: 9px;
  column-gap: 10px;
  font-size: 12.5px;
  align-items: baseline;
}
.soc-grid .k { color: var(--text-muted); font-weight: 700; }
.soc-grid .v { font-weight: 600; color: var(--text-primary); word-break: break-word; }
.soc-grid .v.mono {
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 500;
}
.soc-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--accent-ui-rgb), .12);
}

/* Ergebnis-Notizen unter der Timeline (Erfolg grün, Fallback amber) */
.csm-note.soc-note-ok {
  margin-top: 14px;
  background: rgba(var(--badge-success-rgb), .07);
  border-color: rgba(var(--badge-success-rgb), .22);
}
.csm-note.soc-note-ok svg { stroke: var(--color-success); }
.csm-note.soc-note-warn {
  margin-top: 14px;
  background: rgba(var(--badge-expiring-rgb), .08);
  border-color: rgba(var(--badge-expiring-rgb), .28);
}
.csm-note.soc-note-warn svg { stroke: var(--color-warning); }

/* Copy-Block: TXT-Record zum manuellen Setzen */
.soc-copy-card {
  border: 1px solid var(--border-soft);
  background: rgba(var(--badge-neutral-rgb), .05);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
}
.soc-copy-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.soc-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--badge-neutral-rgb), .14);
}
.soc-copy-row:last-child { border-bottom: none; }
.soc-copy-row .k {
  flex-shrink: 0;
  width: 78px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.soc-copy-row .mono {
  flex: 1;
  font-family: 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
  font-size: 11.8px;
  word-break: break-all;
  color: var(--text-primary);
}
/* Copy-Button ist der System-Standard .crd-copy-btn (contract-rich.css,
   einzige Quelle fuer Groesse/Farbe/Zustaende) -- hier bewusst keine eigene
   Definition; das Zeilen-Layout liefert .soc-copy-row (flex + gap). */


/* ── public/assets/css/pages/admin-tools.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Admin-Werkzeuge – Feld-Mapping und Spec-Import
   ──────────────────────────────────────────────────────────────────────────────
   Ersetzt die zuvor inline gesetzten Styles in
   `templates/pages/admin-field-mapping.php` und `admin-spec-import.php`.
   Alle Farben aus den Tokens in base/tokens-reset.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Kennzahlen-Kopf ──────────────────────────────────────────────────────── */
.adm-kpis {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 14px;
}
.adm-kpi-big   { font-size: 30px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.adm-kpi-unit  { font-size: 16px; color: var(--text-muted); }
.adm-kpi-note  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.adm-kpi-group { display: flex; gap: 16px; }
.adm-kpi-num   { font-size: 18px; font-weight: 700; color: var(--color-success-dkb); }
.adm-kpi-num--muted { color: var(--text-muted); }
.adm-kpi-lbl   { font-size: 11px; color: var(--text-muted); }

/* Fortschrittsbalken (Abdeckung). Die Breite kommt als Inline-Wert aus PHP –
   das ist ein Datenwert, kein Design-Wert. */
.adm-bar     { height: 8px; border-radius: 6px; background: var(--border-soft); overflow: hidden; }
.adm-bar-fill{ height: 100%; background: var(--grad-primary); border-radius: 6px; transition: width .3s ease; }

/* ── Filterzeile ──────────────────────────────────────────────────────────── */
.adm-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}
/* Segmented Control – Zustandsklasse `.active` wie bei allen Segmented Controls. */
.adm-seg {
  display: inline-flex;
  gap: 4px;
  background: var(--border-soft);
  border-radius: 8px;
  padding: 3px;
}
.adm-seg-btn {
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
}
.adm-seg-btn:hover { color: var(--accent-ui); }
.adm-seg-btn.active {
  background: var(--surface);
  font-weight: 600;
  color: var(--text-primary);
}
.adm-search { flex: 1; min-width: 180px; max-width: 320px; font-size: 13px; padding: 6px 12px; }

/* ── Tabelle ──────────────────────────────────────────────────────────────── */
.adm-table-wrap { overflow-x: auto; }
.adm-table      { font-size: 12px; width: 100%; }
.adm-num        { text-align: right; }
.adm-num--nowrap{ text-align: right; white-space: nowrap; }
.adm-muted      { color: var(--text-muted); }
.adm-muted-11   { color: var(--text-muted); font-size: 11px; }

/* Status-Pille in der Zeile (abgedeckt / offen). */
.adm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  color: var(--color-success-dkb);
  background: var(--badge-teal-bg);
}
.adm-pill--off { color: var(--text-muted); background: var(--border-soft); }
.adm-pill-dot  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm-pill--off .adm-pill-dot { opacity: .5; }

/* Mono-Chip für Feldnamen/Spec-Kürzel. */
.adm-chip {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px 2px 0;
  color: var(--accent-ui-strong);
  background: rgba(var(--accent-ui-rgb), .08);
}
.adm-chip--ok { color: var(--color-success-dkb); background: var(--badge-teal-bg); }

.adm-link-sm { text-decoration: none; font-size: 11px; padding: 3px 10px; }

/* ── Spec-Import: Upload-Zeilen ───────────────────────────────────────────── */
.adm-imp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-imp-file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface);
}
.adm-imp-file:hover { border-color: rgba(var(--accent-ui-rgb), .30); color: var(--accent-ui); }
.adm-imp-file input[type="file"] { display: none; }
.adm-imp-name   { font-size: 10px; font-family: var(--font-mono); }
.adm-imp-status { display: none; align-items: center; gap: 6px; }
.adm-imp-input  { width: 150px; font-size: 13px; padding: 5px 10px; }
.adm-imp-ico    { margin-right: 6px; vertical-align: -2px; }
.adm-imp-hint   { font-size: 12px; color: var(--text-muted); margin-left: 8px; }

/* Umschalt-Chip im Spec-Import (`.spec-opt-chip`) – zuvor dreimal inline. */
.spec-opt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  font-size: 12px;
  background: none;
  font-family: inherit;
  color: var(--text-secondary);
}
.spec-opt-chip:hover { border-color: rgba(var(--accent-ui-rgb), .30); color: var(--accent-ui); }
.spec-opt-chip.active {
  background: rgba(var(--accent-ui-rgb), .09);
  border-color: rgba(var(--accent-ui-rgb), .22);
  color: var(--accent-ui);
}



/* ── public/assets/css/pages/reports.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Reports (page=reports-*)
   Ausgelagert aus layout/app-shell.css (TPL-03: layout/ = App-Shell,
   pages/ = seitenspezifisch). Beim Umzug bereinigt:
   - eigenes `@keyframes report-spin` entfernt (war zeichengleich mit dem
     zentralen `ui-spin`); der Spinner ist jetzt `.table-spinner.spinner-xs`
   - Farbliterale (#059669, #dc2626, rgba(255,255,255,.68), rgba(var(--text-muted-rgb),…))
     durch --badge-*- bzw. --surface-Token ersetzt; dadurch konnte auch der
     Sonder-Override `html.theme-calm .report-card` entfallen
   - die Button-Klassen tragen nur noch Geometrie, die Farbe kommt aus
     .btn/.btn-primary/.btn-ghost (Kap. 7 „Custom-Button-Klassen")
   - toter Code entfernt: .report-tabs/.report-tab/.report-tab-icon (kein
     Markup nutzte sie) und .report-status--error (Fehler laufen über Toast)
   ══════════════════════════════════════════════════════════════════════════════ */

.report-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: rgba(var(--accent-ui-rgb),0.07);
  border: 1px solid rgba(var(--accent-ui-rgb),0.15);
  color: var(--accent);
  font-size: 12px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}

.report-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: box-shadow 0.18s;
}
.report-card:hover { box-shadow: 0 4px 24px rgba(var(--accent-ui-rgb),0.10); }

.report-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.report-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--accent-ui-rgb),0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.report-icon svg { width: 18px; height: 18px; }

.report-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.report-card-desc  { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }

/* Format-Umschalter: System-Segment-Switch `.opt-seg` / `.opt-seg-btn`
   (components/segmented.css) – dieselbe Komponente wie bei der Zahlungsart,
   ohne Zusätze. Ein Ausrichtungs-Anker ist hier nicht nötig: die Komponente
   bringt `width: fit-content` mit und wird deshalb vom `align-items: stretch`
   der Karte nicht auf Kartenbreite gezogen.
   Vorher stand hier eine dritte Segment-Variante (Pillen auf `.btn`-Basis mit
   `.btn-accent`). Sie brauchte zusätzlich eine `:not(.btn-accent)`-Abgrenzung
   und den Verzicht auf `.btn-ghost`, weil `pages/` nach `components/` lädt und
   `html.theme-calm .btn-ghost` die Tönung überschrieb – mit der
   Systemkomponente entfallen beide Klimmzüge, da sie außerhalb der
   `.btn`-Kaskade liegt. */

.report-status-area { display: flex; flex-direction: column; gap: 0; }

.report-status {
  border-radius: 9px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.report-status[hidden] { display: none !important; }
.report-status--idle {
  background: rgba(var(--badge-neutral-rgb),0.07);
  border: 1px dashed rgba(var(--badge-neutral-rgb),0.35);
  color: var(--text-muted);
}
.report-status--cached {
  background: var(--badge-success-bg);
  border: 1px solid var(--badge-success-border);
  color: var(--badge-success-text);
}
.report-status--loading {
  background: rgba(var(--accent-ui-rgb),0.08);
  border: 1px solid rgba(var(--accent-ui-rgb),0.18);
  color: var(--accent);
}
/* Der Spinner nutzt die zentrale Größenvariante `.table-spinner--sm`
   (components/feedback.css); die frühere Sonderregel an dieser Stelle ist
   entfallen. */

.report-status-body { flex: 1; min-width: 0; }
.report-status-line1 { font-weight: 600; }
.report-status-line2 { font-size: 11px; opacity: 0.75; }

.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Reine Größenanker – Farbe/Hover/Disabled kommen aus den globalen
   Button-Klassen, damit Themes automatisch greifen. */
.btn-report-fetch,
.btn-report-download,
.btn-report-refresh {
  gap: 6px;
  border-radius: 999px;
  white-space: nowrap;
}


/* ── public/assets/css/base/accessibility.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility & Motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Globaler :focus-visible Ring – überschreibt alle outline:none */
:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-ui-rgb),.12);
}

/* Für Elemente, die keinen Offset vertragen, kompakter Ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),.14);
}



/* ── public/assets/css/components/verification.css ── */
/* =========================================================================
 * Verification-UI (zentral) – siehe DESIGN.md §24 + page-helpers.js veri.*
 * Banner (.veri-bar) fuer Domain-Detail (gross) & Kontakt-Detail (--mini),
 * kompakte Liste (.veri-slist) fuer den Kontakt-Drawer.
 * Status-Modifier: --pending / --verified / --failed / --locked / --neutral
 * ====================================================================== */
.veri-bars { display: flex; flex-direction: column; gap: 10px; }

.veri-bar {
  position: relative;
  border: 1px solid rgba(var(--text-muted-rgb),.18);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.veri-bar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--text-muted);
}
.veri-bar--pending::before  { background: #d97706; }
.veri-bar--verified::before { background: #059669; }
.veri-bar--failed::before   { background: #dc2626; }
.veri-bar--locked::before   { background: #e11d48; }

.veri-bar__head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.veri-bar__ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px; border-radius: 10px;
  background: rgba(100,116,139,.12); color: var(--badge-neutral-text);
}
.veri-bar__ico svg { width: 19px; height: 19px; }
.veri-bar--pending  .veri-bar__ico { background: rgba(217,119,6,.12);  color: #d97706; }
.veri-bar--verified .veri-bar__ico { background: rgba(5,150,105,.12);  color: #059669; }
.veri-bar--failed   .veri-bar__ico { background: rgba(220,38,38,.12);  color: #dc2626; }
.veri-bar--locked   .veri-bar__ico { background: rgba(225,29,72,.12); color: #e11d48; }

.veri-bar__titles { flex: 1; min-width: 0; }
.veri-bar__type {
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.veri-bar__typekey {
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 5px; background: rgba(100,116,139,.1);
}
.veri-bar__context { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.veri-badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(100,116,139,.12); color: var(--badge-neutral-text);
}
.veri-badge svg { width: 12px; height: 12px; }
.veri-badge--pending  { background: rgba(217,119,6,.12); color: #d97706; }
.veri-badge--verified { background: rgba(5,150,105,.12); color: #059669; }
.veri-badge--failed   { background: rgba(220,38,38,.12); color: #dc2626; }
.veri-badge--locked   { background: rgba(225,29,72,.12); color: #e11d48; }

.veri-bar__meta {
  border-top: 1px dashed rgba(var(--text-muted-rgb),.28);
  margin: 0 15px; padding: 10px 0 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
}
.veri-bar__mkey { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.veri-bar__mval { font-size: 11.5px; color: var(--text-primary); word-break: break-word; }

/* Meta-Zeilen und Aktions-Button nebeneinander: Meta links (verkürzt),
   Button rechtsbündig auf gleicher Höhe. Trennlinie liegt am Wrapper. */
.veri-bar__body {
  border-top: 1px dashed rgba(var(--text-muted-rgb),.28);
  margin: 0 15px; padding: 10px 0 12px;
  display: flex; align-items: flex-end; gap: 14px;
}
.veri-bar__body .veri-bar__meta { border-top: 0; margin: 0; padding: 0; flex: 1; min-width: 0; }
.veri-bar__body .veri-bar__actions { border-top: 0; margin: 0; padding: 0; flex-shrink: 0; }

.veri-mbadge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent-ui-alt-rgb),.12); color: var(--accent-ui-alt);
}

.veri-bar__actions { margin: 0 15px 13px; display: flex; justify-content: flex-end; }
/* Folgt die Aktionszeile direkt auf den Kopf (keine Meta-Zeilen, z. B. type=email),
   dieselbe dünne Trennlinie wie beim Meta-Block rendern – Boxen sehen damit
   unabhängig vom Verifizierungstyp gleich aus. */
.veri-bar__head + .veri-bar__actions {
  border-top: 1px dashed rgba(var(--text-muted-rgb),.28);
  padding-top: 11px;
}
.veri-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-ui-alt);
  background: rgba(var(--accent-ui-alt-rgb),.08); border: 1px solid rgba(var(--accent-ui-alt-rgb),.24);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.veri-btn svg { width: 13px; height: 13px; flex: none; }
.veri-btn:hover { background: rgba(var(--accent-ui-alt-rgb),.15); border-color: rgba(var(--accent-ui-alt-rgb),.38); }
.veri-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Mini-Variante (Kontakt-Detail, schmale Info-Karte) ---- */
.veri-bar--mini .veri-bar__head { padding: 10px 12px; gap: 10px; }
.veri-bar--mini .veri-bar__ico { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; }
.veri-bar--mini .veri-bar__ico svg { width: 15px; height: 15px; }
.veri-bar--mini .veri-bar__type { font-size: 13px; }
.veri-bar--mini .veri-bar__context { font-size: 10.5px; }
.veri-bar--mini .veri-badge { font-size: 10px; padding: 3px 8px; }
.veri-bar--mini .veri-bar__meta { margin: 0 12px; padding: 8px 0 10px; }

/* ---- Sidebar-Variante (Kontakt-Drawer) ---- */
.veri-slist { display: flex; flex-direction: column; margin-top: 16px; }
.veri-slist__heading {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: 10px;
}
.veri-sitem { padding: 9px 0; }
.veri-sitem + .veri-sitem { border-top: 1px solid rgba(var(--text-muted-rgb),.12); }
.veri-sitem__top { display: flex; align-items: center; gap: 9px; }
.veri-sitem__ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-width: 26px; border-radius: 7px;
  background: rgba(100,116,139,.12); color: var(--badge-neutral-text);
}
.veri-sitem__ico svg { width: 14px; height: 14px; }
.veri-sitem__ico--pending  { background: rgba(217,119,6,.12); color: #d97706; }
.veri-sitem__ico--verified { background: rgba(5,150,105,.12); color: #059669; }
.veri-sitem__ico--failed   { background: rgba(220,38,38,.12); color: #dc2626; }
.veri-sitem__ico--locked   { background: rgba(225,29,72,.12); color: #e11d48; }
.veri-sitem__type { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.veri-sitem__badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(100,116,139,.12); color: var(--badge-neutral-text);
}
.veri-sitem__badge--pending  { background: rgba(217,119,6,.12); color: #d97706; }
.veri-sitem__badge--verified { background: rgba(5,150,105,.12); color: #059669; }
.veri-sitem__badge--failed   { background: rgba(220,38,38,.12); color: #dc2626; }
.veri-sitem__badge--locked   { background: rgba(225,29,72,.12); color: #e11d48; }
.veri-sitem__meta { display: flex; flex-direction: column; gap: 4px; margin: 7px 0 0 35px; }
.veri-chip {
  font-size: 11px; color: var(--text-muted);
}
.veri-chip b { color: var(--text-muted); font-weight: 600; margin-right: 4px; }



/* ── public/assets/css/components/coachmark.css ── */
/* ============================================================================
   Coachmark / Hinweis (window.Coachmark) – zentral wiederverwendbar
   Spotlight ueber vier Scrim-Panels (keine box-shadow-Abhaengigkeit -> auch im
   "Ruhig"-Theme voll funktionsfaehig).
   ========================================================================== */
.coachmark-open { overflow: hidden; }

.coachmark-overlay { position: fixed; inset: 0; z-index: 12000; pointer-events: none; }
.coachmark-scrim {
  position: fixed;
  background: rgba(15, 23, 42, .55);
  pointer-events: auto;
  cursor: pointer;
  animation: coachmarkFade .2s ease both;
}

.coachmark-ring {
  position: fixed;
  z-index: 12001;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 14px;
}

@keyframes coachmarkFade { from { opacity: 0; } to { opacity: 1; } }

.coachmark-callout {
  position: fixed;
  z-index: 12002;
  width: 328px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
  padding: 18px 18px 16px;
  animation: coachmarkIn .28s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes coachmarkIn {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.coachmark-beak {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 3px;
}
.coachmark-callout[data-beak="left"]   .coachmark-beak { left: -8px;  border-right: 0; border-top: 0; }
.coachmark-callout[data-beak="right"]  .coachmark-beak { right: -8px; border-left: 0;  border-bottom: 0; }
.coachmark-callout[data-beak="top"]    .coachmark-beak { top: -8px;   border-right: 0; border-bottom: 0; }
.coachmark-callout[data-beak="bottom"] .coachmark-beak { bottom: -8px; border-left: 0; border-top: 0; }

.coachmark-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-ui-rgb), .10);
  border: 1px solid rgba(var(--accent-ui-rgb), .18);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.coachmark-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.coachmark-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text-primary);
}
.coachmark-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.coachmark-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.coachmark-link {
  margin-right: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.coachmark-link:hover { text-decoration: underline; }
.coachmark-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  padding: 9px 18px;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 8px 20px rgba(var(--accent-ui-rgb), .30);
}
.coachmark-btn:hover { filter: brightness(1.05); }



/* ── public/assets/css/components/tooltips.css ── */
/* ── Zentrales Tooltip-System ─────────────────────────────────────────── */
.ui-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--text-primary);
  color: var(--color-bg-1);
  font-size: 12px;
  line-height: 1.55;
  font-family: inherit;
  padding: 9px 13px;
  border-radius: 9px;
  max-width: 360px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .12), 0 12px 28px rgba(0, 0, 0, .32);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.ui-tooltip.visible { opacity: 1; }

.ui-tooltip::before {
  content: '';
  position: absolute;
  left: var(--tip-arrow, 14px);
  transform: translateX(-50%);
  /* 1px Überlappung ins Rechteck: verhindert Subpixel-Haarlinie zwischen
     Pfeil und Rechteck bei aktiver Skalierung (zoom 0.9). */
  top: -6px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--text-primary);
}

.ui-tooltip.tip-above::before {
  top: auto;
  bottom: -6px;
  border-bottom: none;
  border-top: 7px solid var(--text-primary);
}

.ui-tooltip-title {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.ui-tooltip-body {
  display: block;
  white-space: pre-line;
}

.ui-tooltip-sub {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
  white-space: pre-line;
}

/* ── public/assets/css/components/geo-autocomplete.css ── */
/**
 * geo-autocomplete.css
 *
 * Vorschlagsliste für PLZ-, Orts- und ISO-Länderfelder (geo-autocomplete.js).
 * Optik am bestehenden Datepicker-Popup (date-picker-v2.css) orientiert.
 */

.geo-ac-popup {
  position: fixed;
  z-index: 99998;
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
  max-width: 420px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--text-muted-rgb), 0.22);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.13), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.geo-ac-popup[hidden] { display: none; }

.geo-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.geo-ac-item:hover,
.geo-ac-item.is-active {
  background: rgba(var(--accent-ui-rgb), 0.09);
  color: var(--text-primary);
}

.geo-ac-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.geo-ac-main {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-ac-sub {
  color: var(--badge-neutral-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flaggen (css/components/flags.css) im Popup etwas größer als der Text. */
.geo-ac-item .fi {
  font-size: 13px;
}

.geo-ac-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* Bundesland vor dem ISO-Code: zurückhaltender als der Ländercode (Farbe wird
   von .geo-ac-meta geerbt). Lange Namen werden gekürzt, damit die Zeilenbreite
   stabil bleibt. */
.geo-ac-state {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0;
}


/* ── public/assets/css/components/flags.css ── */
/**
 * flags.css
 *
 * Länderflaggen als CSS-Hintergrundbilder (flag-icons 7.5.0, MIT).
 * Quelle der SVGs: public/assets/vendor/flags/4x3/ – siehe dort VERSION.txt.
 *
 * Verwendung:
 *   <span class="fi fi-de"></span>            Flagge in Textgröße
 *   <span class="fi fi-de fi--lg"></span>     etwas größer
 *
 * Der Klassenname ist der ISO-3166-1-alpha-2-Code in Kleinbuchstaben. Erzeugt
 * wird das Markup zentral über window.UiFlag(iso) aus country-flags.js – damit
 * gibt es genau eine Stelle, die den ISO-Code auf eine Klasse abbildet.
 *
 * Bewusst Hintergrundbilder statt Inline-SVG oder Emoji:
 *  - Der Browser lädt nur die Flaggen, die tatsächlich im Layout auftauchen;
 *    die Klassen unten kosten also keine 271 Requests.
 *  - Emoji-Flaggen (Unicode Regional Indicator) werden unter Windows von
 *    Segoe UI Emoji nicht gerendert, dort erschienen nur zwei Buchstaben.
 *    Deshalb existiert kein Emoji-Fallback mehr.
 *
 * Aufbau: Die Basisklasse .fi legt nur das Verhalten fest, aber keine Box.
 * Größe und Rahmen kommen aus der generierten Sammel-Regel, die ausschließlich
 * die tatsächlich vorhandenen Flaggen aufführt. Ein unbekannter Code (z. B.
 * "XY" während des Tippens) erzeugt damit gar keine Darstellung statt eines
 * leeren Kästchens – und das ohne zweite Pflegeliste im JavaScript.
 *
 * Beide generierten Blöcke entstehen aus dem Dateibestand von
 * public/assets/vendor/flags/4x3/ (eine Zeile bzw. ein Selektor je Datei).
 */

/* Basis: nur Verhalten – absichtlich ohne width/height, siehe Kopfkommentar. */
.fi {
  display: inline-block;
  vertical-align: -0.1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* ── Generiert (1/2): Box nur für vorhandene Flaggen ──────────────────────── */
.fi-ad,
.fi-ae,
.fi-af,
.fi-ag,
.fi-ai,
.fi-al,
.fi-am,
.fi-ao,
.fi-aq,
.fi-ar,
.fi-arab,
.fi-as,
.fi-asean,
.fi-at,
.fi-au,
.fi-aw,
.fi-ax,
.fi-az,
.fi-ba,
.fi-bb,
.fi-bd,
.fi-be,
.fi-bf,
.fi-bg,
.fi-bh,
.fi-bi,
.fi-bj,
.fi-bl,
.fi-bm,
.fi-bn,
.fi-bo,
.fi-bq,
.fi-br,
.fi-bs,
.fi-bt,
.fi-bv,
.fi-bw,
.fi-by,
.fi-bz,
.fi-ca,
.fi-cc,
.fi-cd,
.fi-cefta,
.fi-cf,
.fi-cg,
.fi-ch,
.fi-ci,
.fi-ck,
.fi-cl,
.fi-cm,
.fi-cn,
.fi-co,
.fi-cp,
.fi-cr,
.fi-cu,
.fi-cv,
.fi-cw,
.fi-cx,
.fi-cy,
.fi-cz,
.fi-de,
.fi-dg,
.fi-dj,
.fi-dk,
.fi-dm,
.fi-do,
.fi-dz,
.fi-eac,
.fi-ec,
.fi-ee,
.fi-eg,
.fi-eh,
.fi-er,
.fi-es-ct,
.fi-es-ga,
.fi-es-pv,
.fi-es,
.fi-et,
.fi-eu,
.fi-fi,
.fi-fj,
.fi-fk,
.fi-fm,
.fi-fo,
.fi-fr,
.fi-ga,
.fi-gb-eng,
.fi-gb-nir,
.fi-gb-sct,
.fi-gb-wls,
.fi-gb,
.fi-gd,
.fi-ge,
.fi-gf,
.fi-gg,
.fi-gh,
.fi-gi,
.fi-gl,
.fi-gm,
.fi-gn,
.fi-gp,
.fi-gq,
.fi-gr,
.fi-gs,
.fi-gt,
.fi-gu,
.fi-gw,
.fi-gy,
.fi-hk,
.fi-hm,
.fi-hn,
.fi-hr,
.fi-ht,
.fi-hu,
.fi-ic,
.fi-id,
.fi-ie,
.fi-il,
.fi-im,
.fi-in,
.fi-io,
.fi-iq,
.fi-ir,
.fi-is,
.fi-it,
.fi-je,
.fi-jm,
.fi-jo,
.fi-jp,
.fi-ke,
.fi-kg,
.fi-kh,
.fi-ki,
.fi-km,
.fi-kn,
.fi-kp,
.fi-kr,
.fi-kw,
.fi-ky,
.fi-kz,
.fi-la,
.fi-lb,
.fi-lc,
.fi-li,
.fi-lk,
.fi-lr,
.fi-ls,
.fi-lt,
.fi-lu,
.fi-lv,
.fi-ly,
.fi-ma,
.fi-mc,
.fi-md,
.fi-me,
.fi-mf,
.fi-mg,
.fi-mh,
.fi-mk,
.fi-ml,
.fi-mm,
.fi-mn,
.fi-mo,
.fi-mp,
.fi-mq,
.fi-mr,
.fi-ms,
.fi-mt,
.fi-mu,
.fi-mv,
.fi-mw,
.fi-mx,
.fi-my,
.fi-mz,
.fi-na,
.fi-nc,
.fi-ne,
.fi-nf,
.fi-ng,
.fi-ni,
.fi-nl,
.fi-no,
.fi-np,
.fi-nr,
.fi-nu,
.fi-nz,
.fi-om,
.fi-pa,
.fi-pc,
.fi-pe,
.fi-pf,
.fi-pg,
.fi-ph,
.fi-pk,
.fi-pl,
.fi-pm,
.fi-pn,
.fi-pr,
.fi-ps,
.fi-pt,
.fi-pw,
.fi-py,
.fi-qa,
.fi-re,
.fi-ro,
.fi-rs,
.fi-ru,
.fi-rw,
.fi-sa,
.fi-sb,
.fi-sc,
.fi-sd,
.fi-se,
.fi-sg,
.fi-sh-ac,
.fi-sh-hl,
.fi-sh-ta,
.fi-sh,
.fi-si,
.fi-sj,
.fi-sk,
.fi-sl,
.fi-sm,
.fi-sn,
.fi-so,
.fi-sr,
.fi-ss,
.fi-st,
.fi-sv,
.fi-sx,
.fi-sy,
.fi-sz,
.fi-tc,
.fi-td,
.fi-tf,
.fi-tg,
.fi-th,
.fi-tj,
.fi-tk,
.fi-tl,
.fi-tm,
.fi-tn,
.fi-to,
.fi-tr,
.fi-tt,
.fi-tv,
.fi-tw,
.fi-tz,
.fi-ua,
.fi-ug,
.fi-um,
.fi-un,
.fi-us,
.fi-uy,
.fi-uz,
.fi-va,
.fi-vc,
.fi-ve,
.fi-vg,
.fi-vi,
.fi-vn,
.fi-vu,
.fi-wf,
.fi-ws,
.fi-xk,
.fi-xx,
.fi-ye,
.fi-yt,
.fi-za,
.fi-zm,
.fi-zw {
  width: 1.3333em;          /* 4:3 bei 1em Höhe */
  height: 1em;
  border-radius: 2px;
  /* Hairline, damit überwiegend weiße Flaggen (JP, PL) auf hellem Grund
     nicht mit dem Untergrund verschmelzen. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

/* Größenvarianten – müssen nach der Sammel-Regel stehen, damit sie greifen. */
.fi--lg { width: 1.6667em; height: 1.25em; }
.fi--xl { width: 2.1333em; height: 1.6em;  }

/* ── Wert mit nachgestellter Flagge (z. B. "DE" + Flagge) ─────────────────────
   Für Detail-/Info-Zeilen, in denen der ISO-Code der eigentliche Wert ist und
   die Flagge nur die visuelle Zugabe. */
.val-with-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Eingabefeld mit Live-Flagge ──────────────────────────────────────────────
   Markup-Konvention aus country-flags.js (window.UiFlagSync): der Wrapper
   enthält das Eingabefeld und einen Slot, dessen Inhalt beim Tippen
   ausgetauscht wird. */
.country-inp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Zwei Zeichen brauchen kein Feld über die volle Spaltenbreite. */
.country-inp-wrap > input {
  width: 5em;
  flex: 0 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
}

.country-inp-flag {
  display: inline-flex;
  align-items: center;
  font-size: 17px;         /* Flaggenhöhe = 1em */
  margin-left: 0.2em;      /* zusätzlich zum gap des Wrappers */
}

/* Leerer Slot: kein Platzhalter, kein Gap. */
.country-inp-flag:empty { display: none; }

/* ── Generiert (2/2): Hintergrundbild je Flagge ───────────────────────────── */
.fi-ad { background-image: url("../css/components/../../vendor/flags/4x3/ad.svg"); }
.fi-ae { background-image: url("../css/components/../../vendor/flags/4x3/ae.svg"); }
.fi-af { background-image: url("../css/components/../../vendor/flags/4x3/af.svg"); }
.fi-ag { background-image: url("../css/components/../../vendor/flags/4x3/ag.svg"); }
.fi-ai { background-image: url("../css/components/../../vendor/flags/4x3/ai.svg"); }
.fi-al { background-image: url("../css/components/../../vendor/flags/4x3/al.svg"); }
.fi-am { background-image: url("../css/components/../../vendor/flags/4x3/am.svg"); }
.fi-ao { background-image: url("../css/components/../../vendor/flags/4x3/ao.svg"); }
.fi-aq { background-image: url("../css/components/../../vendor/flags/4x3/aq.svg"); }
.fi-ar { background-image: url("../css/components/../../vendor/flags/4x3/ar.svg"); }
.fi-arab { background-image: url("../css/components/../../vendor/flags/4x3/arab.svg"); }
.fi-as { background-image: url("../css/components/../../vendor/flags/4x3/as.svg"); }
.fi-asean { background-image: url("../css/components/../../vendor/flags/4x3/asean.svg"); }
.fi-at { background-image: url("../css/components/../../vendor/flags/4x3/at.svg"); }
.fi-au { background-image: url("../css/components/../../vendor/flags/4x3/au.svg"); }
.fi-aw { background-image: url("../css/components/../../vendor/flags/4x3/aw.svg"); }
.fi-ax { background-image: url("../css/components/../../vendor/flags/4x3/ax.svg"); }
.fi-az { background-image: url("../css/components/../../vendor/flags/4x3/az.svg"); }
.fi-ba { background-image: url("../css/components/../../vendor/flags/4x3/ba.svg"); }
.fi-bb { background-image: url("../css/components/../../vendor/flags/4x3/bb.svg"); }
.fi-bd { background-image: url("../css/components/../../vendor/flags/4x3/bd.svg"); }
.fi-be { background-image: url("../css/components/../../vendor/flags/4x3/be.svg"); }
.fi-bf { background-image: url("../css/components/../../vendor/flags/4x3/bf.svg"); }
.fi-bg { background-image: url("../css/components/../../vendor/flags/4x3/bg.svg"); }
.fi-bh { background-image: url("../css/components/../../vendor/flags/4x3/bh.svg"); }
.fi-bi { background-image: url("../css/components/../../vendor/flags/4x3/bi.svg"); }
.fi-bj { background-image: url("../css/components/../../vendor/flags/4x3/bj.svg"); }
.fi-bl { background-image: url("../css/components/../../vendor/flags/4x3/bl.svg"); }
.fi-bm { background-image: url("../css/components/../../vendor/flags/4x3/bm.svg"); }
.fi-bn { background-image: url("../css/components/../../vendor/flags/4x3/bn.svg"); }
.fi-bo { background-image: url("../css/components/../../vendor/flags/4x3/bo.svg"); }
.fi-bq { background-image: url("../css/components/../../vendor/flags/4x3/bq.svg"); }
.fi-br { background-image: url("../css/components/../../vendor/flags/4x3/br.svg"); }
.fi-bs { background-image: url("../css/components/../../vendor/flags/4x3/bs.svg"); }
.fi-bt { background-image: url("../css/components/../../vendor/flags/4x3/bt.svg"); }
.fi-bv { background-image: url("../css/components/../../vendor/flags/4x3/bv.svg"); }
.fi-bw { background-image: url("../css/components/../../vendor/flags/4x3/bw.svg"); }
.fi-by { background-image: url("../css/components/../../vendor/flags/4x3/by.svg"); }
.fi-bz { background-image: url("../css/components/../../vendor/flags/4x3/bz.svg"); }
.fi-ca { background-image: url("../css/components/../../vendor/flags/4x3/ca.svg"); }
.fi-cc { background-image: url("../css/components/../../vendor/flags/4x3/cc.svg"); }
.fi-cd { background-image: url("../css/components/../../vendor/flags/4x3/cd.svg"); }
.fi-cefta { background-image: url("../css/components/../../vendor/flags/4x3/cefta.svg"); }
.fi-cf { background-image: url("../css/components/../../vendor/flags/4x3/cf.svg"); }
.fi-cg { background-image: url("../css/components/../../vendor/flags/4x3/cg.svg"); }
.fi-ch { background-image: url("../css/components/../../vendor/flags/4x3/ch.svg"); }
.fi-ci { background-image: url("../css/components/../../vendor/flags/4x3/ci.svg"); }
.fi-ck { background-image: url("../css/components/../../vendor/flags/4x3/ck.svg"); }
.fi-cl { background-image: url("../css/components/../../vendor/flags/4x3/cl.svg"); }
.fi-cm { background-image: url("../css/components/../../vendor/flags/4x3/cm.svg"); }
.fi-cn { background-image: url("../css/components/../../vendor/flags/4x3/cn.svg"); }
.fi-co { background-image: url("../css/components/../../vendor/flags/4x3/co.svg"); }
.fi-cp { background-image: url("../css/components/../../vendor/flags/4x3/cp.svg"); }
.fi-cr { background-image: url("../css/components/../../vendor/flags/4x3/cr.svg"); }
.fi-cu { background-image: url("../css/components/../../vendor/flags/4x3/cu.svg"); }
.fi-cv { background-image: url("../css/components/../../vendor/flags/4x3/cv.svg"); }
.fi-cw { background-image: url("../css/components/../../vendor/flags/4x3/cw.svg"); }
.fi-cx { background-image: url("../css/components/../../vendor/flags/4x3/cx.svg"); }
.fi-cy { background-image: url("../css/components/../../vendor/flags/4x3/cy.svg"); }
.fi-cz { background-image: url("../css/components/../../vendor/flags/4x3/cz.svg"); }
.fi-de { background-image: url("../css/components/../../vendor/flags/4x3/de.svg"); }
.fi-dg { background-image: url("../css/components/../../vendor/flags/4x3/dg.svg"); }
.fi-dj { background-image: url("../css/components/../../vendor/flags/4x3/dj.svg"); }
.fi-dk { background-image: url("../css/components/../../vendor/flags/4x3/dk.svg"); }
.fi-dm { background-image: url("../css/components/../../vendor/flags/4x3/dm.svg"); }
.fi-do { background-image: url("../css/components/../../vendor/flags/4x3/do.svg"); }
.fi-dz { background-image: url("../css/components/../../vendor/flags/4x3/dz.svg"); }
.fi-eac { background-image: url("../css/components/../../vendor/flags/4x3/eac.svg"); }
.fi-ec { background-image: url("../css/components/../../vendor/flags/4x3/ec.svg"); }
.fi-ee { background-image: url("../css/components/../../vendor/flags/4x3/ee.svg"); }
.fi-eg { background-image: url("../css/components/../../vendor/flags/4x3/eg.svg"); }
.fi-eh { background-image: url("../css/components/../../vendor/flags/4x3/eh.svg"); }
.fi-er { background-image: url("../css/components/../../vendor/flags/4x3/er.svg"); }
.fi-es-ct { background-image: url("../css/components/../../vendor/flags/4x3/es-ct.svg"); }
.fi-es-ga { background-image: url("../css/components/../../vendor/flags/4x3/es-ga.svg"); }
.fi-es-pv { background-image: url("../css/components/../../vendor/flags/4x3/es-pv.svg"); }
.fi-es { background-image: url("../css/components/../../vendor/flags/4x3/es.svg"); }
.fi-et { background-image: url("../css/components/../../vendor/flags/4x3/et.svg"); }
.fi-eu { background-image: url("../css/components/../../vendor/flags/4x3/eu.svg"); }
.fi-fi { background-image: url("../css/components/../../vendor/flags/4x3/fi.svg"); }
.fi-fj { background-image: url("../css/components/../../vendor/flags/4x3/fj.svg"); }
.fi-fk { background-image: url("../css/components/../../vendor/flags/4x3/fk.svg"); }
.fi-fm { background-image: url("../css/components/../../vendor/flags/4x3/fm.svg"); }
.fi-fo { background-image: url("../css/components/../../vendor/flags/4x3/fo.svg"); }
.fi-fr { background-image: url("../css/components/../../vendor/flags/4x3/fr.svg"); }
.fi-ga { background-image: url("../css/components/../../vendor/flags/4x3/ga.svg"); }
.fi-gb-eng { background-image: url("../css/components/../../vendor/flags/4x3/gb-eng.svg"); }
.fi-gb-nir { background-image: url("../css/components/../../vendor/flags/4x3/gb-nir.svg"); }
.fi-gb-sct { background-image: url("../css/components/../../vendor/flags/4x3/gb-sct.svg"); }
.fi-gb-wls { background-image: url("../css/components/../../vendor/flags/4x3/gb-wls.svg"); }
.fi-gb { background-image: url("../css/components/../../vendor/flags/4x3/gb.svg"); }
.fi-gd { background-image: url("../css/components/../../vendor/flags/4x3/gd.svg"); }
.fi-ge { background-image: url("../css/components/../../vendor/flags/4x3/ge.svg"); }
.fi-gf { background-image: url("../css/components/../../vendor/flags/4x3/gf.svg"); }
.fi-gg { background-image: url("../css/components/../../vendor/flags/4x3/gg.svg"); }
.fi-gh { background-image: url("../css/components/../../vendor/flags/4x3/gh.svg"); }
.fi-gi { background-image: url("../css/components/../../vendor/flags/4x3/gi.svg"); }
.fi-gl { background-image: url("../css/components/../../vendor/flags/4x3/gl.svg"); }
.fi-gm { background-image: url("../css/components/../../vendor/flags/4x3/gm.svg"); }
.fi-gn { background-image: url("../css/components/../../vendor/flags/4x3/gn.svg"); }
.fi-gp { background-image: url("../css/components/../../vendor/flags/4x3/gp.svg"); }
.fi-gq { background-image: url("../css/components/../../vendor/flags/4x3/gq.svg"); }
.fi-gr { background-image: url("../css/components/../../vendor/flags/4x3/gr.svg"); }
.fi-gs { background-image: url("../css/components/../../vendor/flags/4x3/gs.svg"); }
.fi-gt { background-image: url("../css/components/../../vendor/flags/4x3/gt.svg"); }
.fi-gu { background-image: url("../css/components/../../vendor/flags/4x3/gu.svg"); }
.fi-gw { background-image: url("../css/components/../../vendor/flags/4x3/gw.svg"); }
.fi-gy { background-image: url("../css/components/../../vendor/flags/4x3/gy.svg"); }
.fi-hk { background-image: url("../css/components/../../vendor/flags/4x3/hk.svg"); }
.fi-hm { background-image: url("../css/components/../../vendor/flags/4x3/hm.svg"); }
.fi-hn { background-image: url("../css/components/../../vendor/flags/4x3/hn.svg"); }
.fi-hr { background-image: url("../css/components/../../vendor/flags/4x3/hr.svg"); }
.fi-ht { background-image: url("../css/components/../../vendor/flags/4x3/ht.svg"); }
.fi-hu { background-image: url("../css/components/../../vendor/flags/4x3/hu.svg"); }
.fi-ic { background-image: url("../css/components/../../vendor/flags/4x3/ic.svg"); }
.fi-id { background-image: url("../css/components/../../vendor/flags/4x3/id.svg"); }
.fi-ie { background-image: url("../css/components/../../vendor/flags/4x3/ie.svg"); }
.fi-il { background-image: url("../css/components/../../vendor/flags/4x3/il.svg"); }
.fi-im { background-image: url("../css/components/../../vendor/flags/4x3/im.svg"); }
.fi-in { background-image: url("../css/components/../../vendor/flags/4x3/in.svg"); }
.fi-io { background-image: url("../css/components/../../vendor/flags/4x3/io.svg"); }
.fi-iq { background-image: url("../css/components/../../vendor/flags/4x3/iq.svg"); }
.fi-ir { background-image: url("../css/components/../../vendor/flags/4x3/ir.svg"); }
.fi-is { background-image: url("../css/components/../../vendor/flags/4x3/is.svg"); }
.fi-it { background-image: url("../css/components/../../vendor/flags/4x3/it.svg"); }
.fi-je { background-image: url("../css/components/../../vendor/flags/4x3/je.svg"); }
.fi-jm { background-image: url("../css/components/../../vendor/flags/4x3/jm.svg"); }
.fi-jo { background-image: url("../css/components/../../vendor/flags/4x3/jo.svg"); }
.fi-jp { background-image: url("../css/components/../../vendor/flags/4x3/jp.svg"); }
.fi-ke { background-image: url("../css/components/../../vendor/flags/4x3/ke.svg"); }
.fi-kg { background-image: url("../css/components/../../vendor/flags/4x3/kg.svg"); }
.fi-kh { background-image: url("../css/components/../../vendor/flags/4x3/kh.svg"); }
.fi-ki { background-image: url("../css/components/../../vendor/flags/4x3/ki.svg"); }
.fi-km { background-image: url("../css/components/../../vendor/flags/4x3/km.svg"); }
.fi-kn { background-image: url("../css/components/../../vendor/flags/4x3/kn.svg"); }
.fi-kp { background-image: url("../css/components/../../vendor/flags/4x3/kp.svg"); }
.fi-kr { background-image: url("../css/components/../../vendor/flags/4x3/kr.svg"); }
.fi-kw { background-image: url("../css/components/../../vendor/flags/4x3/kw.svg"); }
.fi-ky { background-image: url("../css/components/../../vendor/flags/4x3/ky.svg"); }
.fi-kz { background-image: url("../css/components/../../vendor/flags/4x3/kz.svg"); }
.fi-la { background-image: url("../css/components/../../vendor/flags/4x3/la.svg"); }
.fi-lb { background-image: url("../css/components/../../vendor/flags/4x3/lb.svg"); }
.fi-lc { background-image: url("../css/components/../../vendor/flags/4x3/lc.svg"); }
.fi-li { background-image: url("../css/components/../../vendor/flags/4x3/li.svg"); }
.fi-lk { background-image: url("../css/components/../../vendor/flags/4x3/lk.svg"); }
.fi-lr { background-image: url("../css/components/../../vendor/flags/4x3/lr.svg"); }
.fi-ls { background-image: url("../css/components/../../vendor/flags/4x3/ls.svg"); }
.fi-lt { background-image: url("../css/components/../../vendor/flags/4x3/lt.svg"); }
.fi-lu { background-image: url("../css/components/../../vendor/flags/4x3/lu.svg"); }
.fi-lv { background-image: url("../css/components/../../vendor/flags/4x3/lv.svg"); }
.fi-ly { background-image: url("../css/components/../../vendor/flags/4x3/ly.svg"); }
.fi-ma { background-image: url("../css/components/../../vendor/flags/4x3/ma.svg"); }
.fi-mc { background-image: url("../css/components/../../vendor/flags/4x3/mc.svg"); }
.fi-md { background-image: url("../css/components/../../vendor/flags/4x3/md.svg"); }
.fi-me { background-image: url("../css/components/../../vendor/flags/4x3/me.svg"); }
.fi-mf { background-image: url("../css/components/../../vendor/flags/4x3/mf.svg"); }
.fi-mg { background-image: url("../css/components/../../vendor/flags/4x3/mg.svg"); }
.fi-mh { background-image: url("../css/components/../../vendor/flags/4x3/mh.svg"); }
.fi-mk { background-image: url("../css/components/../../vendor/flags/4x3/mk.svg"); }
.fi-ml { background-image: url("../css/components/../../vendor/flags/4x3/ml.svg"); }
.fi-mm { background-image: url("../css/components/../../vendor/flags/4x3/mm.svg"); }
.fi-mn { background-image: url("../css/components/../../vendor/flags/4x3/mn.svg"); }
.fi-mo { background-image: url("../css/components/../../vendor/flags/4x3/mo.svg"); }
.fi-mp { background-image: url("../css/components/../../vendor/flags/4x3/mp.svg"); }
.fi-mq { background-image: url("../css/components/../../vendor/flags/4x3/mq.svg"); }
.fi-mr { background-image: url("../css/components/../../vendor/flags/4x3/mr.svg"); }
.fi-ms { background-image: url("../css/components/../../vendor/flags/4x3/ms.svg"); }
.fi-mt { background-image: url("../css/components/../../vendor/flags/4x3/mt.svg"); }
.fi-mu { background-image: url("../css/components/../../vendor/flags/4x3/mu.svg"); }
.fi-mv { background-image: url("../css/components/../../vendor/flags/4x3/mv.svg"); }
.fi-mw { background-image: url("../css/components/../../vendor/flags/4x3/mw.svg"); }
.fi-mx { background-image: url("../css/components/../../vendor/flags/4x3/mx.svg"); }
.fi-my { background-image: url("../css/components/../../vendor/flags/4x3/my.svg"); }
.fi-mz { background-image: url("../css/components/../../vendor/flags/4x3/mz.svg"); }
.fi-na { background-image: url("../css/components/../../vendor/flags/4x3/na.svg"); }
.fi-nc { background-image: url("../css/components/../../vendor/flags/4x3/nc.svg"); }
.fi-ne { background-image: url("../css/components/../../vendor/flags/4x3/ne.svg"); }
.fi-nf { background-image: url("../css/components/../../vendor/flags/4x3/nf.svg"); }
.fi-ng { background-image: url("../css/components/../../vendor/flags/4x3/ng.svg"); }
.fi-ni { background-image: url("../css/components/../../vendor/flags/4x3/ni.svg"); }
.fi-nl { background-image: url("../css/components/../../vendor/flags/4x3/nl.svg"); }
.fi-no { background-image: url("../css/components/../../vendor/flags/4x3/no.svg"); }
.fi-np { background-image: url("../css/components/../../vendor/flags/4x3/np.svg"); }
.fi-nr { background-image: url("../css/components/../../vendor/flags/4x3/nr.svg"); }
.fi-nu { background-image: url("../css/components/../../vendor/flags/4x3/nu.svg"); }
.fi-nz { background-image: url("../css/components/../../vendor/flags/4x3/nz.svg"); }
.fi-om { background-image: url("../css/components/../../vendor/flags/4x3/om.svg"); }
.fi-pa { background-image: url("../css/components/../../vendor/flags/4x3/pa.svg"); }
.fi-pc { background-image: url("../css/components/../../vendor/flags/4x3/pc.svg"); }
.fi-pe { background-image: url("../css/components/../../vendor/flags/4x3/pe.svg"); }
.fi-pf { background-image: url("../css/components/../../vendor/flags/4x3/pf.svg"); }
.fi-pg { background-image: url("../css/components/../../vendor/flags/4x3/pg.svg"); }
.fi-ph { background-image: url("../css/components/../../vendor/flags/4x3/ph.svg"); }
.fi-pk { background-image: url("../css/components/../../vendor/flags/4x3/pk.svg"); }
.fi-pl { background-image: url("../css/components/../../vendor/flags/4x3/pl.svg"); }
.fi-pm { background-image: url("../css/components/../../vendor/flags/4x3/pm.svg"); }
.fi-pn { background-image: url("../css/components/../../vendor/flags/4x3/pn.svg"); }
.fi-pr { background-image: url("../css/components/../../vendor/flags/4x3/pr.svg"); }
.fi-ps { background-image: url("../css/components/../../vendor/flags/4x3/ps.svg"); }
.fi-pt { background-image: url("../css/components/../../vendor/flags/4x3/pt.svg"); }
.fi-pw { background-image: url("../css/components/../../vendor/flags/4x3/pw.svg"); }
.fi-py { background-image: url("../css/components/../../vendor/flags/4x3/py.svg"); }
.fi-qa { background-image: url("../css/components/../../vendor/flags/4x3/qa.svg"); }
.fi-re { background-image: url("../css/components/../../vendor/flags/4x3/re.svg"); }
.fi-ro { background-image: url("../css/components/../../vendor/flags/4x3/ro.svg"); }
.fi-rs { background-image: url("../css/components/../../vendor/flags/4x3/rs.svg"); }
.fi-ru { background-image: url("../css/components/../../vendor/flags/4x3/ru.svg"); }
.fi-rw { background-image: url("../css/components/../../vendor/flags/4x3/rw.svg"); }
.fi-sa { background-image: url("../css/components/../../vendor/flags/4x3/sa.svg"); }
.fi-sb { background-image: url("../css/components/../../vendor/flags/4x3/sb.svg"); }
.fi-sc { background-image: url("../css/components/../../vendor/flags/4x3/sc.svg"); }
.fi-sd { background-image: url("../css/components/../../vendor/flags/4x3/sd.svg"); }
.fi-se { background-image: url("../css/components/../../vendor/flags/4x3/se.svg"); }
.fi-sg { background-image: url("../css/components/../../vendor/flags/4x3/sg.svg"); }
.fi-sh-ac { background-image: url("../css/components/../../vendor/flags/4x3/sh-ac.svg"); }
.fi-sh-hl { background-image: url("../css/components/../../vendor/flags/4x3/sh-hl.svg"); }
.fi-sh-ta { background-image: url("../css/components/../../vendor/flags/4x3/sh-ta.svg"); }
.fi-sh { background-image: url("../css/components/../../vendor/flags/4x3/sh.svg"); }
.fi-si { background-image: url("../css/components/../../vendor/flags/4x3/si.svg"); }
.fi-sj { background-image: url("../css/components/../../vendor/flags/4x3/sj.svg"); }
.fi-sk { background-image: url("../css/components/../../vendor/flags/4x3/sk.svg"); }
.fi-sl { background-image: url("../css/components/../../vendor/flags/4x3/sl.svg"); }
.fi-sm { background-image: url("../css/components/../../vendor/flags/4x3/sm.svg"); }
.fi-sn { background-image: url("../css/components/../../vendor/flags/4x3/sn.svg"); }
.fi-so { background-image: url("../css/components/../../vendor/flags/4x3/so.svg"); }
.fi-sr { background-image: url("../css/components/../../vendor/flags/4x3/sr.svg"); }
.fi-ss { background-image: url("../css/components/../../vendor/flags/4x3/ss.svg"); }
.fi-st { background-image: url("../css/components/../../vendor/flags/4x3/st.svg"); }
.fi-sv { background-image: url("../css/components/../../vendor/flags/4x3/sv.svg"); }
.fi-sx { background-image: url("../css/components/../../vendor/flags/4x3/sx.svg"); }
.fi-sy { background-image: url("../css/components/../../vendor/flags/4x3/sy.svg"); }
.fi-sz { background-image: url("../css/components/../../vendor/flags/4x3/sz.svg"); }
.fi-tc { background-image: url("../css/components/../../vendor/flags/4x3/tc.svg"); }
.fi-td { background-image: url("../css/components/../../vendor/flags/4x3/td.svg"); }
.fi-tf { background-image: url("../css/components/../../vendor/flags/4x3/tf.svg"); }
.fi-tg { background-image: url("../css/components/../../vendor/flags/4x3/tg.svg"); }
.fi-th { background-image: url("../css/components/../../vendor/flags/4x3/th.svg"); }
.fi-tj { background-image: url("../css/components/../../vendor/flags/4x3/tj.svg"); }
.fi-tk { background-image: url("../css/components/../../vendor/flags/4x3/tk.svg"); }
.fi-tl { background-image: url("../css/components/../../vendor/flags/4x3/tl.svg"); }
.fi-tm { background-image: url("../css/components/../../vendor/flags/4x3/tm.svg"); }
.fi-tn { background-image: url("../css/components/../../vendor/flags/4x3/tn.svg"); }
.fi-to { background-image: url("../css/components/../../vendor/flags/4x3/to.svg"); }
.fi-tr { background-image: url("../css/components/../../vendor/flags/4x3/tr.svg"); }
.fi-tt { background-image: url("../css/components/../../vendor/flags/4x3/tt.svg"); }
.fi-tv { background-image: url("../css/components/../../vendor/flags/4x3/tv.svg"); }
.fi-tw { background-image: url("../css/components/../../vendor/flags/4x3/tw.svg"); }
.fi-tz { background-image: url("../css/components/../../vendor/flags/4x3/tz.svg"); }
.fi-ua { background-image: url("../css/components/../../vendor/flags/4x3/ua.svg"); }
.fi-ug { background-image: url("../css/components/../../vendor/flags/4x3/ug.svg"); }
.fi-um { background-image: url("../css/components/../../vendor/flags/4x3/um.svg"); }
.fi-un { background-image: url("../css/components/../../vendor/flags/4x3/un.svg"); }
.fi-us { background-image: url("../css/components/../../vendor/flags/4x3/us.svg"); }
.fi-uy { background-image: url("../css/components/../../vendor/flags/4x3/uy.svg"); }
.fi-uz { background-image: url("../css/components/../../vendor/flags/4x3/uz.svg"); }
.fi-va { background-image: url("../css/components/../../vendor/flags/4x3/va.svg"); }
.fi-vc { background-image: url("../css/components/../../vendor/flags/4x3/vc.svg"); }
.fi-ve { background-image: url("../css/components/../../vendor/flags/4x3/ve.svg"); }
.fi-vg { background-image: url("../css/components/../../vendor/flags/4x3/vg.svg"); }
.fi-vi { background-image: url("../css/components/../../vendor/flags/4x3/vi.svg"); }
.fi-vn { background-image: url("../css/components/../../vendor/flags/4x3/vn.svg"); }
.fi-vu { background-image: url("../css/components/../../vendor/flags/4x3/vu.svg"); }
.fi-wf { background-image: url("../css/components/../../vendor/flags/4x3/wf.svg"); }
.fi-ws { background-image: url("../css/components/../../vendor/flags/4x3/ws.svg"); }
.fi-xk { background-image: url("../css/components/../../vendor/flags/4x3/xk.svg"); }
.fi-xx { background-image: url("../css/components/../../vendor/flags/4x3/xx.svg"); }
.fi-ye { background-image: url("../css/components/../../vendor/flags/4x3/ye.svg"); }
.fi-yt { background-image: url("../css/components/../../vendor/flags/4x3/yt.svg"); }
.fi-za { background-image: url("../css/components/../../vendor/flags/4x3/za.svg"); }
.fi-zm { background-image: url("../css/components/../../vendor/flags/4x3/zm.svg"); }
.fi-zw { background-image: url("../css/components/../../vendor/flags/4x3/zw.svg"); }


/* ── public/assets/css/base/utilities.css ── */
/* ══════════════════════════════════════════════════════════════════════════════
   Utility-Klassen (TPL-02) – Ersatz für wiederkehrende Inline-Styles
   ══════════════════════════════════════════════════════════════════════════════ */
/* Sichtbarkeit – wird per JS getoggelt (reports.js, contact-swap.js,
   widget-filter.js). Lag vorher mitten im Reports-Block von
   layout/app-shell.css, obwohl die Klasse global genutzt wird. */
.hidden { display: none !important; }
/* Icon-Größen */
.u-ic-12 { width: 12px; height: 12px; }
.u-ic-13 { width: 13px; height: 13px; }
.u-ic-14 { width: 14px; height: 14px; }
.u-ic-15 { width: 15px; height: 15px; }
.u-ic-16 { width: 16px; height: 16px; }
/* Abstände */
.u-mb-0  { margin-bottom: 0; }
.u-mt-0  { margin-top: 0; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mt-6  { margin-top: 6px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
/* Flex-Helfer */
.u-flex-end     { display: flex; gap: 8px; justify-content: flex-end; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-flex-g6      { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.u-flex-g10     { display: flex; align-items: center; gap: 10px; }
.u-flex-g14     { display: flex; align-items: center; gap: 14px; }
.u-stack-11     { display: flex; flex-direction: column; gap: 11px; }
.u-jc-end       { justify-content: flex-end; }
.u-jc-center    { justify-content: center; }
.u-shrink-0     { flex-shrink: 0; }
.u-flex-1       { flex: 1; }
.u-min-w-0      { min-width: 0; }
/* Text */
.u-ta-center  { text-align: center; }
.u-break-all  { word-break: break-all; }
.u-note       { font-size: 11px; color: var(--text-muted); }
.u-muted-13   { color: var(--text-muted); font-size: 13px; }
.u-note-220   { font-size: 13px; max-width: 220px; }
.u-op-60      { opacity: .6; }
/* Leerzustand (mittig, kompakt) */
.u-empty-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-muted); }
.u-empty-pad  { padding: 42px 24px; }
/* Skeleton-Balken */
.u-skl     { height: 13px; }
.u-skl-btn { height: 32px; border-radius: 8px; }
.u-w-full  { width: 100%; }
.u-w-96p   { width: 96%; }
.u-w-92p   { width: 92%; }
.u-w-88p   { width: 88%; }
.u-w-74p   { width: 74%; }
.u-w-30    { width: 30px; }
.u-w-64    { width: 64px; }
.u-w-65    { width: 65px; }
.u-w-80    { width: 80px; }
.u-w-110   { width: 110px; }
.u-w-140   { width: 140px; }
.u-w-160   { width: 160px; }
/* Monospace ohne Größenvorgabe (".mono" setzt zusätzlich font-size:13px) */
.u-mono { font-family: var(--font-mono); }
/* Varianten für DNS-/Log-Tabellen – ersetzen inline gesetzte Mono-Blöcke. */
.u-mono-12   { font-family: var(--font-mono); font-size: 12px; }
.u-mono-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); }
.u-mono-val  { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); display: block; word-break: break-all; overflow-wrap: anywhere; }
.u-mono-path { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.u-pad-card { padding: 18px 24px 22px; }
/* Textfarben – ersetzen inline gesetzte Literale (#94a3b8, #64748b, …). */
.u-muted      { color: var(--text-muted); }
.u-muted-2    { color: var(--text-secondary); }
.u-faint      { color: var(--border-soft); }
.u-warn       { color: var(--color-amber); }
.u-danger     { color: var(--color-danger); }
.u-note-10    { font-size: 10.5px; color: var(--text-muted); }
/* Zentrierter Leerzustand in Tabellen/Listen. */
.u-empty-center    { text-align: center; padding: 24px; color: var(--text-muted); }
.u-empty-center-lg { text-align: center; padding: 36px 12px; color: var(--text-muted); }
/* Ladezustand mit Spinner (nutzt die zentrale ui-spin-Animation). */
.u-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 0; color: var(--text-muted); font-size: 13px;
}
.u-spin {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(var(--badge-neutral-rgb), .35);
  border-top-color: var(--accent-ui);
  animation: ui-spin .7s linear infinite;
}
.u-empty-60 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; text-align: center; }
.u-mt-2 { margin-top: 2px; }

/* Skeleton-Fläche (Maße kommen als Inline-Wert, weil sie je Feld variieren). */
.u-skel { border-radius: 8px; background: rgba(var(--badge-neutral-rgb), .18); }
.u-faint-bg { background: rgba(var(--badge-neutral-rgb), .30); }

/* 5-px-Punkt in Status-Pillen (Farbe erbt vom Elternteil). */
.u-dot-5 { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 4px; flex-shrink: 0; }
/* Button ohne eigene Optik (reiner Klick-Bereich). */
.u-btn-reset { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }


/* ── public/assets/css/theme-calm.css ── */
/* ============================================================================
   Alternatives Farbschema "Ruhig" (theme-calm)
   ----------------------------------------------------------------------------
   Aktivierung: <html class="theme-calm"> (Toggle im Konto-Menü, drei Punkte).
   Nur beim Standard-Login verfügbar; Hosts mit fest zugewiesenem Profil
   (z. B. Reseller) haben keine Switch-Möglichkeit.
   Design-Referenz: mockups/theme-calm-color.html

   Charakter (vollständige Farb-Alternative, nicht nur Flatten-Modifikator):
   - gedämpftes Salbei-Teal (#5f8c7d) als Akzent statt Violett
   - warmes Stein-Neutral (#f5f4f1) statt kühlem Slate
   - keine Schatten, keine Glas-/Blur-Effekte, keine Hintergrund-Blobs
   - ruhige, deckende Flächen; Fokus über flachen Umriss

   Architektur: Ein Theme = reine Token-Overrides unter html.theme-calm.
   Komponenten-CSS liest nur var(--…). Ausnahmen: globaler Schatten-Killer
   (Teil des Ruhig-Charakters), Blob-Ausblendung, Data-URI-SVG.
   ========================================================================== */

/* ── 1. Design-Tokens ─────────────────────────────────────────────────────── */
html.theme-calm {
  /* Flächen: warmes Stein-Neutral, deckend */
  --base:        #f5f4f1;
  --surface:     #ffffff;
  --surface-2:   #f8f7f5;
  --border:      #e4e2dd;
  --border-soft: #e9e7e2;

  /* Schatten komplett deaktivieren */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Text: warm getönte Grautöne */
  --text-primary:   #2b3230;
  --text-secondary: #5a6663;
  --text-muted:     #96a19d;
  --text-muted-rgb: 150, 161, 157;

  /* Primärakzent: gedämpftes Salbei-Teal statt Violett/Blau */
  --primary-600:  #5f8c7d;
  --accent:       #5f8c7d;
  --grad-primary: linear-gradient(135deg, #5f8c7d 0%, #4d7568 100%);
  --accent-teal:  #4d7568;

  /* UI-Akzent: Salbei-Teal (Fokus-Ringe, aktive Kacheln, Pillen etc.) */
  --accent-ui: #5f8c7d;
  --accent-ui-rgb: 95, 140, 125;
  --accent-ui-strong: #4d7568;
  --accent-ui-deep: #3d5f54;
  --accent-ui-light: #7ba393;
  --accent-ui-light-rgb: 123, 163, 147;
  --accent-ui-alt: #6b9788;
  --accent-ui-alt-rgb: 107, 151, 136;
  --accent-ui-soft: #a3c1b5;
  --accent-ui-pale: #cbddd4;
  --accent-ui-faint: #e9f1ed;

  /* Struktur: ruhige weiße Sidebar/Topbar, ohne Blur/Schatten */
  --sidebar-bg:          #ffffff;
  --sidebar-blur:        none;
  --sidebar-border:      var(--border);
  --sidebar-shadow:      none;
  --sidebar-text:        var(--text-secondary);
  --sidebar-text-dim:    var(--text-muted);
  --sidebar-hover-bg:    #f0efec;
  --sidebar-hover-text:  var(--text-primary);
  --sidebar-active-bg:   var(--accent-ui-faint);
  --sidebar-active-text: var(--accent-ui-strong);
  --sidebar-sub-border:  var(--border-soft);
  --topbar-bg:           #ffffff;
  --topbar-blur:         none;
  --topbar-border:       var(--border-soft);

  /* Segmented Control: gedämpfte Töne */
  --seg-active:   #4d7568;
  --seg-disabled: #7d8985;
  --seg-release:  #b08948;

  /* Fokus-Ring */
  --focus-ring-color: #5f8c7d;

  /* Badges: gedämpft abgestimmt */
  --badge-success-rgb:    77, 117, 104;
  --badge-success-bg:     rgba(var(--badge-success-rgb),0.10);
  --badge-success-text:   #4d7568;
  --badge-success-border: rgba(var(--badge-success-rgb),0.22);
  --badge-info-rgb:       90, 124, 148;
  --badge-info-bg:        rgba(var(--badge-info-rgb),0.10);
  --badge-info-text:      #4a6b85;
  --badge-info-border:    rgba(var(--badge-info-rgb),0.22);
  --badge-warning-rgb:    176, 137, 72;
  --badge-warning-bg:     rgba(var(--badge-warning-rgb),0.12);
  --badge-warning-text:   #96702f;
  --badge-warning-border: rgba(var(--badge-warning-rgb),0.25);
  --badge-danger-rgb:     178, 90, 90;
  --badge-danger-bg:      rgba(var(--badge-danger-rgb),0.10);
  --badge-danger-text:    #a35252;
  --badge-danger-border:  rgba(var(--badge-danger-rgb),0.22);
  --badge-neutral-rgb:    122, 133, 129;
  --badge-neutral-bg:     rgba(var(--badge-neutral-rgb),0.10);
  --badge-neutral-text:   #5a6663;
  --badge-neutral-border: rgba(var(--badge-neutral-rgb),0.22);
  --badge-teal-rgb:       95, 140, 125;
  --badge-teal-bg:        rgba(var(--badge-teal-rgb),0.10);
  --badge-teal-text:      #4d7568;
  --badge-teal-border:    rgba(var(--badge-teal-rgb),0.20);
  --badge-purple-rgb:     95, 140, 125;
  --badge-purple-bg:      rgba(var(--badge-purple-rgb),0.10);
  --badge-purple-text:    #4d7568;
  --badge-purple-border:  rgba(var(--badge-purple-rgb),0.20);
}

/* ── 2. Schatten global entfernen (Ruhig-Charakter: flach) ────────────────── */
/* Gezielt auf Elemente mit Klasse eingeschränkt (statt reinem Universal-
   Selektor `*`), damit einzelne Komponenten via `.theme-calm-shadow-allow`
   wieder einen gezielten Schatten erhalten können. */
html.theme-calm [class] {
  box-shadow: none !important;
}
html.theme-calm [class].theme-calm-shadow-allow {
  box-shadow: revert !important;
}
/* Fokus bleibt sichtbar – flacher Umriss statt Schatten-Ring */
html.theme-calm :focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}
/* Eingabefelder behalten den Fokus-Glow auch in calm: Die Einheits-Felder aus
   feedback.css (~Z. 1013) schlagen den Schatten-Killer ohnehin über
   Spezifität + !important und glühen bereits salbeifarben. .field-input-Felder
   (von der Einheitsregel ausgenommen, z. B. .dreg-ns-input) und die
   zusammengesetzten xf-Kästen (divs – :focus-visible greift dort nicht, der
   Umriss des inneren Inputs wird von overflow:hidden beschnitten) verloren
   ihren Ring an den Killer und fielen auf den harten 2px-Umriss bzw. auf gar
   nichts zurück. Werte exakt wie feedback.css/app-shell.css. */
/* Die Einheits-Felder (feedback.css) behalten ihren Grundschatten auch hier –
   ihre Selektoren schlagen den Schatten-Killer per Spezifität. Die xf-Kästen
   (divs) und die .field-*-Familie (Grundschatten in app-shell.css ohne
   !important) verlieren ihn; damit sie nicht flach neben schattierten
   Einheits-Feldern stehen, wird derselbe Wert gezielt wiederhergestellt. */
html.theme-calm .xf-composite,
html.theme-calm .xf-composite3,
html.theme-calm .field-input,
html.theme-calm .field-select,
html.theme-calm .field-textarea {
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
html.theme-calm .field-input:focus,
html.theme-calm .field-select:focus,
html.theme-calm .field-textarea:focus,
html.theme-calm .xf-composite:focus-within,
html.theme-calm .xf-composite3:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-ui-rgb),0.18), 0 1px 3px rgba(15,23,42,0.06) !important;
}

/* ── 3. Nicht tokenisierbare Ausnahmen ────────────────────────────────────── */

/* Glas-/Blur-Flächen auf ruhige, deckende Flächen umstellen */
html.theme-calm .section-nav,
html.theme-calm .language-menu,
html.theme-calm .sidebar-account-menu,
html.theme-calm .card,
html.theme-calm .stat-card,
html.theme-calm .report-card,
html.theme-calm .btn-ghost,
html.theme-calm #contact-drawer .contact-drawer-panel,
html.theme-calm .dreg-tpl-drawer-panel {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.theme-calm .card,
html.theme-calm .stat-card,
html.theme-calm .report-card {
  border: 1px solid var(--border);
}

/* Hintergrund-Blobs ausblenden (flacher, ruhiger Hintergrund) */
html.theme-calm .bg-mesh {
  background: var(--base);
}
html.theme-calm .bg-mesh::before,
html.theme-calm .bg-mesh::after,
html.theme-calm .bg-blob-3,
html.theme-calm .bg-blob-4 {
  display: none;
}

/* Interaktions-Zustände flach halten */
html.theme-calm .nav-item:hover,
html.theme-calm .nav-sub-item:hover,
html.theme-calm .btn-primary:hover,
html.theme-calm .btn-danger:hover,
html.theme-calm .btn-ghost:hover,
html.theme-calm .btn-special-neu:hover,
html.theme-calm .btn-special-streif:hover {
  transform: none;
}
html.theme-calm .btn-ghost {
  border: 1px solid var(--border);
}

/* Zeilen-Icon-Buttons: kein Lift/Schatten, Feedback über Farbe. */
html.theme-calm .icon-btn:hover,
html.theme-calm .icon-btn--accent:hover {
  transform: none;
  box-shadow: none;
  background: rgba(var(--accent-ui-rgb),0.16);
  border-color: rgba(var(--accent-ui-rgb),0.30);
  color: var(--accent-ui-strong);
}
html.theme-calm .icon-btn.danger:hover {
  background: rgba(225,29,72,0.10);
  border-color: rgba(225,29,72,0.24);
  color: #E11D48;
}

/* Hover-Feedback ohne Schatten/Transform: leichte Verdunklung aus der Palette */
/* Deckende Fläche statt Gradient: verhindert Flackern beim Hover-Übergang
   (background-image kann nicht faden, background-color schon). */
html.theme-calm .btn-primary {
  background: var(--accent-ui);
}
html.theme-calm .btn-primary:hover {
  background: var(--accent-ui-strong);
}
html.theme-calm .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-primary);
}
html.theme-calm .btn-danger:hover,
html.theme-calm .btn-warning:hover {
  filter: brightness(0.92);
}

/* Sub-Nav-Hover analog Segment-Switch (Offene Aufträge): Salbei-Tint */
html.theme-calm .nav-sub-item:hover {
  background: rgba(var(--accent-ui-rgb),0.10);
  color: var(--accent);
}

/* Data-URI-Pfeil (kann kein var() nutzen): Salbei-Teal statt Violett */
html.theme-calm .xf-composite select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235f8c7d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>");
}



/* ── public/assets/css/theme-cps.css ── */
/* ============================================================================
   Alternatives Farbschema "CPS" (theme-cps)
   ----------------------------------------------------------------------------
   Aktivierung: <html class="theme-cps"> (Theme-Wahlschalter im Konto-Menü,
   drei Punkte). Nur beim Standard-Login verfügbar; Hosts mit fest
   zugewiesenem Profil (z. B. Reseller) haben keine Switch-Möglichkeit.
   Design-Referenz: documentation/mockups/ui-redesign-cps-brand*.html.
   Farbwerte direkt aus dem Live-Theme von www.cps-datensysteme.de übernommen.

   Charakter (Stufe 1 = Farb-/Struktur-Tokens, Stufe 2 = Formensprache:
   enge Radien, deckende Flächen, Tabellenraster – siehe Abschnitt 6):
   - Markengrün als Akzent statt Violett. Für Text/Fokus/Buttons kommt die
     dunklere Markenvariante (#4c8503) zum Einsatz – das helle #7eab09
     erreicht mit weißer Schrift nur ca. 2,6:1 Kontrast und taugt daher nur
     als Fläche/Highlight, nicht als Textfarbe.
   - marineblaue Sidebar (#0d2457) statt heller Glas-Fläche
   - deckende, flache Flächen statt Glas-/Blur-Effekten und Schatten
   - zweiter Marken-Akzent Blau (#277cea) für Segmented-Control & Teal-Badges
   - Grün bleibt bewusst auf die Marke beschränkt: Erfolgs-/Status-Badges
     (components/feedback.css) werden nicht verändert, damit "Erfolg" und
     Markenfarbe unterscheidbar bleiben.

   Architektur: Ein Theme = reine Token-Overrides unter html.theme-cps.
   Komponenten-CSS liest nur var(--…). Ausnahmen: globaler Schatten-Killer,
   Glas-/Blur-Flächen, dunkle Sidebar-Dekoration (Logo/Badge/Nutzerkarte),
   Data-URI-SVG.
   ========================================================================== */

/* ── 1. Design-Tokens ─────────────────────────────────────────────────────── */
html.theme-cps {
  /* Eckenradius der Formensprache (Stufe 2). Die Website arbeitet mit
     0.3em ≈ 4px an Buttons; 3px hält Kacheln und Pillen gleichermaßen ruhig. */
  --r-cps: 3px;

  /* Flächen: neutral, deckend */
  --base:        #eeeeee;
  --surface:     #ffffff;
  --surface-2:   #f5f5f5;
  --border:      #dddddd;
  --border-soft: #e4e4e4;
  --border-strong: #c9cccd;
  --border-mid:    #e4e6e6;
  --border-strong-rgb: 201, 204, 205;
  --border-mid-rgb:    228, 230, 230;
  --bg-1-rgb:          238, 238, 238;
  --bg-2-rgb:          245, 245, 245;

  /* Neutrale Grau-Familie: vormals fest verdrahtete Schiefertöne. Ohne diese
     Overrides bliebe die Konsole im CPS-Theme an Zählern, Trennern und
     Leerzuständen blaustichig. */
  --badge-neutral-rgb: 157, 166, 168;
  --badge-neutral-text: #6e7679;
  --color-muted-1: #9da6a8;
  --color-muted-2: #6e7679;
  --color-muted-3: #5b5e61;
  --color-bg-1:    #eeeeee;
  --color-bg-2:    #f5f5f5;

  /* Schatten komplett deaktivieren (flache Flächen) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Text: CPS-Anthrazit */
  --text-primary:   #3b3d40;
  --text-secondary: #5b5e61;
  --text-strong:    #4a4d50;
  --text-muted:     #9da6a8;
  --text-muted-rgb: 157, 166, 168;

  /* Primärakzent: dunkleres Markengrün (Kontrast-sicher für Text/Buttons) */
  --primary-600:  #4c8503;
  --accent:       #4c8503;
  --grad-primary: linear-gradient(135deg, #4c8503 0%, #3b6a02 100%);
  --accent-teal:  #277cea;

  /* UI-Akzent (Fokus-Ringe, aktive Kacheln, Pillen etc.) */
  --accent-ui: #4c8503;
  --accent-ui-rgb: 76, 133, 3;
  --accent-ui-strong: #3b6a02;
  --accent-ui-deep: #2f5502;
  --accent-ui-light: #7eab09;
  --accent-ui-light-rgb: 126, 171, 9;
  --accent-ui-alt: #277cea;
  --accent-ui-alt-rgb: 39, 124, 234;
  --accent-ui-soft: #a8c96b;
  --accent-ui-pale: #d3e6ab;
  --accent-ui-faint: #eef5df;

  /* Struktur: marineblaue Sidebar statt heller Glas-Fläche. Rand- und Textöne
     sind aus dem Grundton abgeleitet, damit die Fläche geschlossen wirkt; der
     aktive Eintrag bleibt beim Markengrün. */
  --sidebar-bg:          #0d2457;
  --sidebar-blur:        none;
  --sidebar-border:      #1c3a72;
  --sidebar-shadow:      none;
  --sidebar-text:        #c3cddf;
  --sidebar-text-dim:    #95a3c0;
  --sidebar-hover-bg:    rgba(255,255,255,0.08);
  --sidebar-hover-text:  #ffffff;
  --sidebar-active-bg:   rgba(126,171,9,0.18);
  --sidebar-active-text: #a8d928;
  --sidebar-sub-border:  rgba(255,255,255,0.08);
  --topbar-bg:           #ffffff;
  --topbar-blur:         none;
  --topbar-border:       var(--border);

  /* Segmented Control: zweiter Marken-Akzent (Blau) statt Grün, damit sich
     der Zustand vom Primärakzent unterscheidet */
  --seg-active:   #277cea;
  --seg-disabled: #9da6a8;
  --seg-release:  #b45309;

  /* Fokus-Ring */
  --focus-ring-color: #4c8503;

  /* Badges: an Grün/Blau angelehnt (Status-Semantik bleibt unangetastet –
     nur die Töne folgen dem neuen Akzent) */
  --badge-success-rgb:    76, 133, 3;
  --badge-success-bg:     rgba(var(--badge-success-rgb),0.10);
  --badge-success-text:   #4c8503;
  --badge-success-border: rgba(var(--badge-success-rgb),0.20);
  --badge-info-rgb:       39, 124, 234;
  --badge-info-bg:        rgba(var(--badge-info-rgb),0.09);
  --badge-info-text:      #1d63c4;
  --badge-info-border:    rgba(var(--badge-info-rgb),0.18);
  --badge-warning-rgb:    217, 119, 6;
  --badge-warning-bg:     rgba(var(--badge-warning-rgb),0.10);
  --badge-warning-text:   #d97706;
  --badge-warning-border: rgba(var(--badge-warning-rgb),0.18);
  --badge-danger-rgb:     225, 29, 72;
  --badge-danger-bg:      rgba(var(--badge-danger-rgb),0.10);
  --badge-danger-text:    #e11d48;
  --badge-danger-border:  rgba(var(--badge-danger-rgb),0.18);
  --badge-neutral-rgb:    91, 94, 97;
  --badge-neutral-bg:     rgba(var(--badge-neutral-rgb),0.10);
  --badge-neutral-text:   #5b5e61;
  --badge-neutral-border: rgba(var(--badge-neutral-rgb),0.20);
  --badge-teal-rgb:       39, 124, 234;
  --badge-teal-bg:        rgba(var(--badge-teal-rgb),0.10);
  --badge-teal-text:      #1d63c4;
  --badge-teal-border:    rgba(var(--badge-teal-rgb),0.18);
  --badge-purple-rgb:     126, 171, 9;
  --badge-purple-bg:      rgba(var(--badge-purple-rgb),0.12);
  --badge-purple-text:    #4c8503;
  --badge-purple-border:  rgba(var(--badge-purple-rgb),0.18);
}

/* ── 2. Schatten global entfernen (flacher Charakter) ─────────────────────── */
/* Gezielt auf Elemente mit Klasse eingeschränkt (statt reinem Universal-
   Selektor `*`), damit einzelne Komponenten via `.theme-cps-shadow-allow`
   wieder einen gezielten Schatten erhalten können. */
html.theme-cps [class] {
  box-shadow: none !important;
}
html.theme-cps [class].theme-cps-shadow-allow {
  box-shadow: revert !important;
}
/* Fokus bleibt sichtbar – flacher Umriss statt Schatten-Ring */
html.theme-cps :focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}

/* ── 3. Nicht tokenisierbare Ausnahmen ────────────────────────────────────── */

/* Glas-/Blur-Flächen auf ruhige, deckende Flächen umstellen */
html.theme-cps .section-nav,
html.theme-cps .language-menu,
html.theme-cps .sidebar-account-menu,
html.theme-cps .card,
html.theme-cps .stat-card,
html.theme-cps .report-card,
html.theme-cps .btn-ghost,
html.theme-cps #contact-drawer .contact-drawer-panel,
html.theme-cps .dreg-tpl-drawer-panel {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.theme-cps .card,
html.theme-cps .stat-card,
html.theme-cps .report-card {
  border: 1px solid var(--border);
}

/* Hintergrund-Blobs ausblenden (flacher Hintergrund statt Farbverlauf) */
html.theme-cps .bg-mesh {
  background: var(--base);
}
html.theme-cps .bg-mesh::before,
html.theme-cps .bg-mesh::after,
html.theme-cps .bg-blob-3,
html.theme-cps .bg-blob-4 {
  display: none;
}

/* Logo, Badge & Nutzerkarte auf dunklem Sidebar-Grund: die Standardfarben
   (dunkler Text/Akzent) sind auf hellen Sidebars gedacht und wären auf der
   dunklen CPS-Sidebar kaum lesbar – daher helle Gegenstücke. */
html.theme-cps .logo-text {
  background: linear-gradient(135deg, #a8d928 0%, #7eab09 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html.theme-cps .logo-badge {
  color: #c8e878;
  background: rgba(126,171,9,0.18);
  border-color: rgba(126,171,9,0.30);
}
/* Trenner unter dem Logo: app-shell.css nutzt --border-soft, das für helle
   Flächen gedacht ist und auf dem dunklen Panel als harte helle Kante steht.
   Der Sidebar-eigene Randton zieht bei Theme-Wechseln automatisch mit. */
html.theme-cps .sidebar-logo {
  border-bottom-color: var(--sidebar-border);
}

html.theme-cps .sidebar .user-name {
  color: #f1f2f2;
}
html.theme-cps .sidebar .user-role {
  color: var(--sidebar-text-dim);
}
html.theme-cps .sidebar .sidebar-more-btn {
  color: var(--sidebar-text-dim);
}
html.theme-cps .sidebar .sidebar-more-btn:hover {
  color: #ffffff;
}
html.theme-cps .session-bar {
  background: linear-gradient(90deg, var(--accent-ui), #277cea);
}

/* Interaktions-Zustände flach halten */
html.theme-cps .nav-item:hover,
html.theme-cps .nav-sub-item:hover,
html.theme-cps .btn-primary:hover,
html.theme-cps .btn-danger:hover,
html.theme-cps .btn-ghost:hover,
html.theme-cps .btn-special-neu:hover,
html.theme-cps .btn-special-streif:hover {
  transform: none;
}
html.theme-cps .btn-ghost {
  border: 1px solid var(--border);
}

/* Deckende Fläche statt Gradient: verhindert Flackern beim Hover-Übergang
   (background-image kann nicht faden, background-color schon). */
html.theme-cps .btn-primary {
  background: var(--accent-ui);
}
html.theme-cps .btn-primary:hover {
  background: var(--accent-ui-strong);
}
html.theme-cps .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-primary);
}
html.theme-cps .btn-danger:hover,
html.theme-cps .btn-warning:hover {
  filter: brightness(0.92);
}

/* Zeilen-Icon-Buttons: kein Lift/Schatten, Feedback über Farbe. */
html.theme-cps .icon-btn:hover,
html.theme-cps .icon-btn--accent:hover {
  transform: none;
  box-shadow: none;
  background: rgba(var(--accent-ui-rgb),0.14);
  border-color: rgba(var(--accent-ui-rgb),0.28);
  color: var(--accent-ui-strong);
}
html.theme-cps .icon-btn.danger:hover {
  background: rgba(225,29,72,0.10);
  border-color: rgba(225,29,72,0.24);
  color: #E11D48;
}

/* Suchfeld-Fokus in der Markenfarbe */
html.theme-cps .topbar-search input:focus {
  border-color: rgba(76,133,3,0.40);
}

/* ── 7. Fokus auf Formularfeldern ─────────────────────────────────────────────
   Der Schatten-Killer aus Abschnitt 2 trägt !important und löscht damit auch
   die Fokus-Ringe, die app-shell.css als box-shadow baut. Übrig blieb nur der
   generische :focus-visible-Umriss – ein harter, um 1px abgesetzter Rahmen,
   der neben dem Feldrand wie ein zweiter Rahmen wirkt.

   Formularfelder bekommen deshalb den Ring zurück (mit !important, um den
   Killer zu schlagen) und verzichten im Gegenzug auf den Umriss. Buttons und
   Links behalten den :focus-visible-Umriss aus Abschnitt 2. Werte wie im
   Mockup: gefärbter Rand plus 2px-Ring in der Markenfarbe. */
html.theme-cps input:focus,
html.theme-cps select:focus,
html.theme-cps textarea:focus,
html.theme-cps .field-input:focus,
html.theme-cps .field-select:focus,
html.theme-cps .field-textarea:focus,
/* feedback.css legt für alle Felder ohne .field-input dieselbe Optik mit
   !important und höherer Spezifität fest (Zeile ~1013). Ohne Spiegelung des
   Selektors behielten jene Felder den 3px-Ring, während .field-input-Felder
   (z. B. die Nameserver-Zeilen) bereits auf 2px standen – sichtbar
   unterschiedliche Fokus-Ringe auf derselben Seite. */
html.theme-cps input[type="text"]:not(.field-input):not(.field-select):focus,
html.theme-cps input[type="email"]:not(.field-input):focus,
html.theme-cps input[type="password"]:not(.field-input):focus,
html.theme-cps input[type="number"]:not(.field-input):focus,
html.theme-cps input[type="url"]:not(.field-input):focus,
html.theme-cps input[type="search"]:not(.field-input):focus,
html.theme-cps select:not(.field-input):not(.field-select):focus,
html.theme-cps textarea:not(.field-input):not(.field-textarea):focus {
  outline: none !important;
  border-color: var(--accent-ui) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-ui-rgb),0.18) !important;
}

/* Ausnahme: zusammengesetzte Sonderfelder tragen den Fokus am Rahmen, nicht am
   Eingabefeld. .xf-composite und .xf-composite3 fassen mehrere randlose Felder
   in einem Kasten zusammen und zeichnen den Ring per :focus-within außen
   (dns-zone.css). Die Regel darüber trifft die inneren Felder aber ebenfalls –
   sie sind input[type="text"] ohne .field-input – und legte ihnen mit
   !important einen zweiten, eckigen 2px-Ring *innerhalb* des Kastens um. Hier
   also beides zurücknehmen; den sichtbaren Ring liefert weiterhin der Rahmen.

   Gleiche Spezifität wie die Regel darüber (die :not()-Argumente zählen mit),
   entschieden wird über die Reihenfolge – dieselbe Mechanik wie bei den
   Kreis-Ausnahmen in Abschnitt 6. */
/* Grundschatten der xf-Kästen und der .field-*-Familie wie bei den
   Einheits-Feldern (die schlagen den Schatten-Killer per Spezifität; die
   div-Kästen und die .field-*-Regeln aus app-shell.css nicht – s. theme-calm). */
html.theme-cps .xf-composite,
html.theme-cps .xf-composite3,
html.theme-cps .field-input,
html.theme-cps .field-select,
html.theme-cps .field-textarea {
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
html.theme-cps .xf-composite input:not(.field-input):not(.field-select):focus,
html.theme-cps .xf-composite select:not(.field-input):not(.field-select):focus,
html.theme-cps .xf-composite3 input:not(.field-input):not(.field-select):focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* … und der Rahmen bekommt den Fokus des Themes. Zwei Gründe für die Regel:
   der Schatten-Killer aus Abschnitt 2 trifft auch :focus-within, und
   dns-zone.css setzt Ring wie Randfarbe dort ohne !important.

   Werte wie in Abschnitt 7, denn der Kasten soll aussehen wie ein Feld. Anders
   als im Grundzustand gehört hier auch die Randfarbe dazu: die Sammelregel dort
   färbt Eingabefelder bei Fokus deckend in der Markenfarbe – im flachen
   CPS-Charakter ist die harte Kante die Hausform. Ohne sie stünde der
   Registerort mit grauem Rand neben der Registernummer mit grünem.
   In den übrigen Themes ist es umgekehrt: dort erzwingt feedback.css einen
   weichen Rand, und der Kasten lässt seinen deshalb ebenfalls weich. */
html.theme-cps .xf-composite:focus-within,
html.theme-cps .xf-composite3:focus-within {
  border-color: var(--accent-ui) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-ui-rgb),0.18) !important;
}

/* Data-URI-Pfeil (kann kein var() nutzen): Markengrün statt Violett */
html.theme-cps .xf-composite select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234c8503' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>");
}

/* ── 6. Stufe 2: Formensprache (Radien, Flächen, Tabellenraster) ──────────────
   Die Konsole setzt Radien nicht über ein Token, sondern an ~570 Stellen als
   feste Pixelwerte (10–20px Karten, 999px Pillen). Ein Token-Override greift
   dort nicht. Statt jede Komponentendatei einzeln nachzuziehen, arbeitet die
   Stufe wie der Schatten-Killer aus Stufe 1 mit einer flächigen Regel auf
   [class] – analog zur Mockup-Variante B, die alles auf --r:3px stellt.

   Die Regel ist bewusst nicht !important: Komponenten dürfen mit höherer
   Spezifität abweichen (siehe Kreis-Ausnahmen direkt darunter). Pseudo-
   Elemente (Toggle-Knöpfe wie .toggle::after) trifft sie ohnehin nicht,
   weil sie nur auf Elementen mit class-Attribut wirkt. */
html.theme-cps [class] {
  border-radius: var(--r-cps);
}

/* Runde Elemente bleiben rund: Status-Punkte, Spinner, Schalter-Knöpfe,
   Schritt-Kreise und Avatar-Kreise. Die Namensmuster decken den Großteil ab,
   die restlichen Klassen stehen einzeln dahinter.

   Tabellenzellen sind ausgenommen: Die Muster greifen auf den Klassen-Namen,
   nicht auf die Form. `<td class="task-esc-dot-td">` in der Aufgabenliste
   enthält "dot" und bekam dadurch border-radius:50% – beim Zeilen-Hover wurde
   die Tönung der ersten Zelle zur Ellipse statt zum Rechteck, der Rest der
   Zeile blieb rechteckig. Der Kreis darin (.task-esc-dot) ist ein <span> und
   bleibt unberührt. Eine Zelle ist nie ein Kreis, deshalb der Ausschluss
   strukturell statt per Umbenennung der einen Klasse. */
html.theme-cps [class*="dot"]:not(td):not(th),
html.theme-cps [class*="spin"]:not(td):not(th),
html.theme-cps [class*="thumb"]:not(td):not(th),
html.theme-cps .ta-step-no,
html.theme-cps .help-trigger,
html.theme-cps .cfp-success-icon,
html.theme-cps .system-status-indicator,
html.theme-cps .xf-instr-toggle,
html.theme-cps .bo-dot {
  border-radius: 50%;
}

/* Der Schließer der Kontakt-Schublade ist kein Kreis: contact-drawer.css legt
   ihn zwar als 28px-Kreis an, contract-fin.css definiert ihn per ID-Selektor
   aber als 36px-Quadrat mit 10px Radius – und gewinnt damit die Kaskade.
   Die ID muss deshalb ebenfalls per ID geschlagen werden. */
html.theme-cps #contact-drawer .contact-drawer-close {
  border-radius: var(--r-cps);
}

/* Bedienelemente ohne class-Attribut trifft die Flächenregel oben nicht, weil
   sie an [class] hängt – etwa das Topbar-Suchfeld, das nur eine id trägt.
   Radios bleiben davon ausgenommen, die müssen rund bleiben. */
html.theme-cps input:not([class]),
html.theme-cps select:not([class]),
html.theme-cps textarea:not([class]),
html.theme-cps button:not([class]) {
  border-radius: var(--r-cps);
}
html.theme-cps input[type="radio"] {
  border-radius: 50%;
}

/* Deckende Flächen statt Glas: Stufe 1 hat Schatten entfernt, hier fallen die
   Blur-Ebenen und die halbtransparenten Weißtöne der Kacheln weg. */
html.theme-cps .stat-card,
html.theme-cps .quick-card,
html.theme-cps .chart-card,
html.theme-cps .person-card,
html.theme-cps .dash-promo-item,
html.theme-cps .glass-card,
html.theme-cps .mockup-kpi,
html.theme-cps .summary-item,
html.theme-cps .icon-btn,
html.theme-cps .record-chevron,
html.theme-cps .subtle-chip,
html.theme-cps .info-badge,
html.theme-cps .language-switcher,
html.theme-cps .system-status-btn,
html.theme-cps .topbar-search input,
html.theme-cps .topbar-search-results,
html.theme-cps .list-note {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--border);
}

/* Kacheln ohne Hover-Lift – die Fläche bleibt ruhig, das Feedback liefert
   der Rahmen. */
html.theme-cps .stat-card:hover,
html.theme-cps .dash-promo-item:hover,
html.theme-cps .system-status-btn:hover {
  transform: none;
  box-shadow: none;
}
html.theme-cps .stat-card:hover {
  border-color: rgba(var(--accent-ui-rgb),0.35);
}

/* Akzentbalken der Kennzahl-Kacheln: deckende Markenfarbe statt Verlauf,
   oben bündig zum engeren Radius. */
html.theme-cps .stat-card::before {
  border-radius: var(--r-cps) var(--r-cps) 0 0;
}
html.theme-cps .stat-card.purple::before { background: var(--accent-ui); }
/* Restliche Kachel-Töne: deckend statt Verlauf, damit die Oberkanten zur
   flachen Formensprache passen (Variante B variiert Grün/Blau/Anthrazit/Amber). */
html.theme-cps .stat-card.teal::before  { background: var(--accent-ui-alt); }
html.theme-cps .stat-card.blue::before  { background: var(--color-info); }
html.theme-cps .stat-card.amber::before { background: var(--color-amber); }
html.theme-cps .stat-card.rose::before  { background: var(--color-rose); }
html.theme-cps .stat-card.green::before { background: var(--color-success); }
html.theme-cps .stat-card.slate::before { background: var(--sidebar-bg); }

/* Akzentstreifen des Modals ebenfalls deckend statt Verlauf. */
html.theme-cps .ui-modal-box {
  --uim-tone-stripe: var(--accent-ui);
  --uim-tone-grad: var(--accent-ui);
}
html.theme-cps .ui-modal-box--warn {
  --uim-tone-stripe: var(--color-amber);
  --uim-tone-grad: var(--color-amber);
}

/* Führende Zeilensymbole ohne Kasten: Variante B stellt die Symbole frei auf
   die Zeile, statt sie in eine getönte Kachel mit Rahmen zu setzen. Fläche und
   Rahmen entfallen, die Symbolfarbe der jeweiligen Modifier-Klasse bleibt.
   Die Maße bleiben unverändert, damit die Spalten nicht verspringen.
   Die Liste deckt alle Zell-Typen ab, die eine Liste mit einem Symbol
   eröffnen – s. CELL_RENDERERS in list-cells.js. Nicht dabei sind die beiden,
   die statt eines Symbols Text tragen: .domain-favicon (Kürzel aus Buchstaben)
   und .task-esc-dot (Eskalationsstufe als Ziffer). Ohne Fläche stünde dort nur
   loser Text in der Zeile, und beim Eskalations-Kreis trüge die Fläche zusätzlich
   die Farbcodierung der Stufe. Aus der Service-Liste verliert deshalb nur die
   Symbol-Variante (.service-favicon--icon) ihre Kachel.

   .ha-icon greift in Historie, Offenen Aufträgen und Nachrichten erst, seit die
   Statusfarbe dort nicht mehr inline als background/border im Markup steht,
   sondern als --ha-*-Tripel – s. table-cells.css und widget-list.js. */
html.theme-cps .ha-icon,
html.theme-cps .dns-zone-ico,
html.theme-cps .contact-type-badge,
html.theme-cps .user-av,
html.theme-cps .alias-av,
html.theme-cps .alias-badge-av,
html.theme-cps .pricing-product-ico,
html.theme-cps .service-favicon--icon {
  background: transparent;
  border-color: transparent;
}

/* Tabellenraster nach Website-Vorbild: grau hinterlegter Kopf, Zebra-Zeilen
   und ein Hover-Ton in der Markenfarbe. */
html.theme-cps .domain-table th {
  background: var(--base);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
html.theme-cps .domain-table tbody tr:nth-child(even) td {
  background: #fafbfa;
}
html.theme-cps .domain-table tbody tr:hover td {
  background: rgba(var(--accent-ui-rgb),0.07);
}
/* Aufklapp- und Detailzeilen behalten ihren eigenen Hintergrund, sonst
   flackert die Zebra-Regel in die aufgeklappte Zeile hinein. */
html.theme-cps .domain-table tbody .txn-step-row:nth-child(even) td,
html.theme-cps .domain-table tbody .txn-step-detail-row:nth-child(even) td,
html.theme-cps .domain-table tbody .record-detail-row:nth-child(even) td {
  background: inherit;
}
/* … und auch keinen Hover-Ton: die Hover-Regel oben (0,3,4) überstimmt die
   themenneutrale Unterdrückung aus modal-userpwd.css (0,3,2). Ohne diese
   Regel bekämen UNGERADE Aufklapp-Zeilen den Marken-Hover, gerade nicht –
   dort gewinnt zufällig die nth-child(even)-Regel darüber. */
html.theme-cps .domain-table tbody .txn-step-row:hover td,
html.theme-cps .domain-table tbody .txn-step-detail-row:hover td,
html.theme-cps .domain-table tbody .record-detail-row:hover td {
  background: inherit;
}

/* Sub-Navigation (.section-nav) als Unterstrich-Reiter statt Pillen-Leiste –
   so führt die Website ihre Reiter, und die Reiter binden sich optisch an den
   Inhalt darunter statt als schwebende Kapsel darüber zu liegen.
   Muss nach der Radius-Flächenregel stehen: gleiche Spezifität, späterer
   Eintrag gewinnt. */
/* Die Linie sitzt am Zeilencontainer, nicht an der Reiterleiste – dadurch
   läuft sie wie im Mockup über die volle Breite bis unter die Aktionsknöpfe
   rechts. Die Reiter ragen per negativem Rand 2px darüber und überdecken sie
   an der aktiven Stelle. */
html.theme-cps .page-nav-actions-row {
  border-bottom: 2px solid var(--border);
  align-items: flex-end;
  /* Konstante Zeilenhöhe in Höhe der Header-Aktionsknöpfe (36px): Durch
     align-items: flex-end bestimmt sonst das höchste Kind die Lage der
     Reiter – Seiten ohne page_actions (z. B. Inhaberwechsel) sässen ein
     paar Pixel höher als domain-detail. */
  min-height: 36px;
}
html.theme-cps .section-nav {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
}
html.theme-cps .section-tab {
  border-radius: 0;
  padding: 9px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
html.theme-cps .section-tab:hover:not(.active) {
  background: transparent;
  color: var(--accent-ui);
  border-bottom-color: rgba(var(--accent-ui-rgb),0.35);
}
html.theme-cps .section-tab.active {
  background: transparent;
  color: var(--accent-ui);
  border-bottom-color: var(--accent-ui-light);
  box-shadow: none;
}
html.theme-cps .section-tab .tab-badge {
  border-radius: var(--r-cps);
}

/* ── 8. Schalter (Toggles) ────────────────────────────────────────────────────
   Zwei Korrekturen an einer Stelle:

   Form: Die Radius-Flächenregel aus Abschnitt 6 macht die Schienen eckig, die
   Knöpfe sitzen aber als ::after/::before-Pseudoelemente darin und bleiben
   rund – eine runde Kugel in einem eckigen Schlitz. Auch Variante B führt den
   Schalter als Pille mit rundem Knopf, deshalb bekommen die Schienen ihre
   Pillenform zurück, statt die Knöpfe eckig zu machen.

   Farbe: Der Aus-Zustand war über die Komponenten hinweg nie einheitlich –
   rgba(muted,.25) bei .toggle und .crd-toggle-sw, rgba(muted,.45) bei
   .bo-keep-slider, rgba(muted,.35) bei .az-switch (Auto-Zone in den
   Domain-Masken), --border-strong bei .anycast-track und .dfs-switch-track.
   Im hellen CPS-Grau fielen die .25-Varianten fast weg. Alle nutzen jetzt
   denselben deckenden Ton. */
html.theme-cps .toggle,
html.theme-cps .crd-toggle-sw,
html.theme-cps .bo-keep-slider,
html.theme-cps .anycast-track,
html.theme-cps .az-switch,
html.theme-cps .dfs-switch-track {
  border-radius: 999px;
  background: var(--border-strong);
}

/* Eingeschaltet: deckende Markenfarbe statt Verlauf (flache Formensprache). */
html.theme-cps .toggle.on,
html.theme-cps .crd-toggle-sw.on,
html.theme-cps .bo-keep-switch input:checked + .bo-keep-slider,
html.theme-cps .az-toggle.on .az-switch,
html.theme-cps .dfs-switch input:checked + .dfs-switch-track {
  background: var(--accent-ui);
}