/* =============================================
   CSS Variables & Reset
   ============================================= */
:root {
  /* Colors (lupenRhein CI) */
  --rot: #D0021B;
  --rot-dark: #A00015;
  --rot-light: #FF1A33;
  --rot-bg: rgba(208,2,27,0.06);
  --rot-border: rgba(208,2,27,0.15);
  --weiss: #FFFFFF;
  --grau: #F2F2F0;
  --grau-mid: #E0DDD8;
  --grau-muted: #AAAAAA;
  --text: #404040;
  --success: #22C55E;
  --success-bg: #DCFCE7;
  --warning: #F59E0B;
  --warning-bg: #FEF9C3;

  /* Layout */
  --sidebar-w: 260px;
  --header-h: 56px;

  /* Spacing Scale */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;

  /* Elevation */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

  /* Motion */
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--grau);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; font-weight: 400; }
ul { list-style: none; }

/* =============================================
   Layout: Header + Sidebar + Main
   ============================================= */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--text); color: var(--weiss); z-index: 100;
  display: flex; align-items: center; padding: 0 1.5rem;
  justify-content: space-between;
}
.app-header-left { display: flex; align-items: center; gap: 1rem; }
.app-logo { font-family: 'DM Sans', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; }
.app-logo span:first-child { color: var(--weiss); }
.app-logo span:last-child { color: var(--rot); }
.header-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.15); }
.header-product { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.app-header-right { display: flex; align-items: center; gap: 1.2rem; }
.header-notification {
  position: relative; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; transition: background var(--transition);
}
.header-notification:hover { background: rgba(255,255,255,0.1); }
.header-notification svg { width: 18px; height: 18px; fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 1.8; }
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: var(--rot);
  border-radius: 50%; font-size: 0.6rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--text);
}
.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: -8px;
  width: 340px; max-height: 420px; background: var(--weiss);
  border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 120; overflow: hidden; flex-direction: column;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--grau-mid);
}
.notif-dropdown-header strong { font-size: 0.82rem; color: var(--text); }
.notif-mark-all {
  font-size: 0.68rem; color: var(--rot); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; background: none; border: none;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-dropdown-list { overflow-y: auto; max-height: 360px; }
.notif-item {
  display: flex; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--grau);
  cursor: pointer; transition: background var(--transition); font-size: 0.82rem;
}
.notif-item:hover { background: var(--grau); }
.notif-item:last-child { border-bottom: none; }
.notif-item-unread { background: rgba(208,2,27,0.03); }
.notif-item-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
  flex-shrink: 0; margin-top: 0.35rem;
}
.notif-item-read .notif-item-dot { background: transparent; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 500; color: var(--text); line-height: 1.4; }
.notif-item-msg { font-size: 0.75rem; color: var(--grau-muted); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-time { font-size: 0.65rem; color: var(--grau-muted); margin-top: 0.2rem; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--grau-muted); font-size: 0.82rem; }

@media (max-width: 480px) {
  .notif-dropdown { width: calc(100vw - 2rem); right: -4rem; }
}
.header-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: 20px; transition: background var(--transition); }
.header-user:hover { background: rgba(255,255,255,0.1); }
.header-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--rot);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600; color: #fff;
}
.header-username { font-size: 0.8rem; color: rgba(255,255,255,0.8); }
.header-logout { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(255,255,255,0.6); transition: all var(--transition); }
.header-logout:hover { background: rgba(255,255,255,0.1); color: var(--weiss); }
.hamburger-btn {
  display: none; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 50%; transition: background var(--transition);
}
.hamburger-btn:hover { background: rgba(255,255,255,0.1); }
.hamburger-btn span { display: block; width: 18px; height: 1.5px; background: #fff; position: relative; }
.hamburger-btn span::before, .hamburger-btn span::after {
  content: ''; position: absolute; width: 100%; height: 100%; background: #fff; left: 0;
}
.hamburger-btn span::before { top: -6px; }
.hamburger-btn span::after { top: 6px; }

/* Sidebar */
.app-sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--weiss); border-right: 1px solid var(--grau-mid); z-index: 90;
  overflow-y: auto; padding: 1.2rem 0; transition: transform 0.3s ease;
}
.sidebar-section { padding: 0 1rem; margin-bottom: 0.5rem; }
.sidebar-label {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grau-muted); font-weight: 600; padding: 0.8rem 0.8rem 0.4rem; display: block;
}
.sidebar-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem;
  border-radius: var(--radius); font-size: 0.85rem; color: var(--text);
  transition: all var(--transition); cursor: pointer; position: relative;
}
.sidebar-item:hover { background: var(--grau); }
.sidebar-item.active { background: var(--grau); color: var(--rot); font-weight: 500; }
.sidebar-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: var(--rot); border-radius: 0 2px 2px 0;
}
.sidebar-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; }
.sidebar-item.active .sidebar-icon { opacity: 1; }
.sidebar-badge {
  margin-left: auto; background: var(--rot); color: #fff; font-size: 0.6rem;
  font-weight: 700; padding: 0.15em 0.5em; border-radius: 8px; min-width: 18px; text-align: center;
}
.sidebar-status {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.status-active { background: #22C55E; }
.status-paused { background: var(--grau-muted); }
.status-config { background: #F59E0B; }
.sidebar-divider { height: 1px; background: var(--grau-mid); margin: 0.8rem 1rem; }

/* Main Content */
.app-main {
  margin-left: var(--sidebar-w); margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h)); padding: 2rem;
  display: flex; flex-direction: column;
}
.app-main > .view { flex: 1; }

/* Footer */
.app-footer {
  margin-top: auto; padding: var(--sp-xl) 0 var(--sp-md);
  border-top: 1px solid var(--grau-mid);
}
.app-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-sm);
}
.app-footer-copy { font-size: 0.72rem; color: var(--grau-muted); }
.app-footer-nav { display: flex; gap: var(--sp-lg); flex-wrap: wrap; }
.app-footer-nav a {
  font-size: 0.72rem; color: var(--grau-muted); text-decoration: none;
  transition: color var(--transition);
}
.app-footer-nav a:hover { color: var(--rot); }

@media (max-width: 480px) {
  .app-footer-inner { flex-direction: column; text-align: center; }
  .app-footer-nav { justify-content: center; }
}

/* =============================================
   Shared Components
   ============================================= */
.view { display: none; }
.view.active { display: block; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.page-title { font-size: 2rem; color: var(--text); }
.page-subtitle { font-size: 0.85rem; color: var(--grau-muted); margin-top: 0.2rem; font-weight: 300; }
.breadcrumb { font-size: 0.72rem; color: var(--grau-muted); margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.breadcrumb span { color: var(--rot); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.4rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius); transition: all var(--transition);
}
.btn-red { background: var(--rot); color: #fff; }
.btn-red:hover { background: var(--rot-dark); }
.btn-outline-dark { border: 1px solid var(--grau-mid); color: var(--text); background: var(--weiss); }
.btn-outline-dark:hover { border-color: var(--rot); color: var(--rot); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.7rem; }
.btn-green { background: #22C55E; color: #fff; }
.btn-green:hover { background: #16A34A; }
.btn-success { background: #22C55E; color: #fff; }
.btn-success:hover { background: #16A34A; }
.btn-ghost { color: var(--grau-muted); }
.btn-ghost:hover { color: var(--rot); }
.btn-outline-light { border: 1px solid rgba(255,255,255,0.35); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }

/* Cards */
.card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.5rem; transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: #ccc; box-shadow: var(--shadow-md); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-title { font-size: 1.2rem; }

/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.kpi-card { background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.kpi-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grau-muted); font-weight: 600; margin-bottom: 0.5rem; }
.kpi-value { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.02em; color: var(--text); line-height: 1; }
.kpi-change { font-size: 0.72rem; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.kpi-up { color: #22C55E; }
.kpi-down { color: var(--rot); }

/* Tab Navigation */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--grau-mid); margin-bottom: 2rem; }
.tab-btn {
  padding: 0.8rem 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grau-muted); position: relative;
  transition: color var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--rot); }
.tab-btn.active::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--rot);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Status Badges (M4: Semantik-Uebersicht)
   badge-active  = Gruen:  Aktiv, OK, Freigegeben, Online
   badge-success = Gruen:  Erfolg, Gebucht (Alias fuer active)
   badge-pending = Gelb:   Wartend, Zur Freigabe, Trial, Onboarding
   badge-warning = Orange: Warnung, Laeuft aus, Achtung
   badge-danger  = Rot:    Fehler, Gekuendigt, Abgelehnt
   badge-info    = Blau:   Info, Hinweis, Bundle-Rabatt
   badge-draft   = Grau:   Entwurf, Inaktiv, Kategorie-Label
   badge-paused  = Grau:   Pausiert, Deaktiviert
*/
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 0.2em 0.7em; border-radius: 2px; }
.badge-active, .badge-success { background: #DCFCE7; color: #166534; }
.badge-pending { background: #FEF9C3; color: #854D0E; }
.badge-paused { background: var(--grau); color: var(--grau-muted); }
.badge-danger { background: #FEE2E2; color: #991B1B; }
.badge-info { background: #DBEAFE; color: #1E40AF; }

/* Tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.data-table th {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--grau-muted); font-weight: 600; padding: 0.8rem 1rem; text-align: left;
  border-bottom: 2px solid var(--grau-mid);
}
.data-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--grau); font-size: 0.88rem; }
.data-table tr:hover td { background: var(--grau); }
/* M6: Sortierbare Spalten */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--rot); }
.sortable::after { content: ' ⇅'; font-size: 0.55rem; opacity: 0.4; }
.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--rot); }
.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--rot); }

/* Forms */
.form-group { margin-bottom: 1.2rem; }
.form-label { display: block; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grau-muted); font-weight: 600; margin-bottom: 0.4rem; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--grau-mid); border-radius: var(--radius);
  background: var(--grau); transition: all var(--transition); font-size: 0.9rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: 2px solid var(--rot); outline-offset: -1px; border-color: var(--rot); background: var(--weiss); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Form Validation (K3) */
.form-input-error { border-color: var(--rot) !important; background: rgba(208,2,27,0.03) !important; }
.form-error { color: var(--rot); font-size: 0.72rem; margin-top: 0.25rem; }

/* Progress Bar */
.progress-bar { height: 6px; background: var(--grau); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--rot); border-radius: 3px; transition: width 0.6s ease; }

/* Toast */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; background: var(--text); color: #fff;
  padding: 1rem 1.5rem; border-radius: var(--radius); font-size: 0.85rem;
  box-shadow: var(--shadow-md); transform: translateY(120%); transition: transform 0.3s ease;
  z-index: 200; display: flex; align-items: center; gap: 0.8rem;
}
.toast.show { transform: translateY(0); }
.toast-icon { color: #22C55E; font-size: 1.1rem; }
.toast-error .toast-icon { color: var(--rot); }
.toast-error { border-left: 3px solid var(--rot); }
.toast-close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; opacity: 0.6; padding: 0 0 0 0.5rem; line-height: 1; }
.toast-close:hover { opacity: 1; }

/* K6: Focus-Visible fuer alle interaktiven Elemente */
.btn:focus-visible, .sidebar-item:focus-visible, .tab-btn:focus-visible, .sub-tab-btn:focus-visible,
.header-help-btn:focus-visible, .header-notification:focus-visible, .header-user:focus-visible, .header-logout:focus-visible,
.hamburger-btn:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Loading-State fuer Buttons (K1) */
.btn-loading { opacity: 0.7; cursor: wait; }

/* Cookie Banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
  background: var(--text); color: #fff; padding: 1rem 1.5rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  transform: translateY(0); transition: transform 0.4s ease;
}
.cookie-banner.hidden { transform: translateY(110%); }
.cookie-banner-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.cookie-banner p { font-size: 0.82rem; line-height: 1.6; margin: 0; }
.cookie-banner a { color: var(--rot); text-decoration: underline; }
.cookie-banner .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; gap: 0.8rem; text-align: center; }
}

/* Skeleton Loading */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.skeleton { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.5rem 0; }
.skeleton-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; }
.skeleton-line {
  height: 0.75rem; border-radius: 4px; background: var(--grau-mid);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line-sm { width: 40%; }
.skeleton-line-md { width: 65%; }
.skeleton-line-lg { width: 90%; }
.skeleton-line-full { width: 100%; }
.skeleton-circle {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--grau-mid);
  flex-shrink: 0; animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-rect {
  width: 100%; height: 3rem; border-radius: var(--radius); background: var(--grau-mid);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Chart (CSS-based) */
.chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 1rem; }
.chart-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; background: var(--rot); border-radius: 2px 2px 0 0; min-height: 4px; transition: height 0.4s ease; opacity: 0.75; }
.chart-bar:hover { opacity: 1; }
.chart-bar-label { font-size: 0.55rem; color: var(--grau-muted); }
.chart-legend { display: flex; gap: 1.5rem; margin-top: 0.8rem; font-size: 0.7rem; color: var(--grau-muted); }

/* Approval Cards */
.approval-card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.2rem 1.5rem; margin-bottom: 0.8rem; display: flex; align-items: flex-start;
  gap: 1rem; transition: all var(--transition);
}
.approval-card.approved { opacity: 0.5; border-color: #22C55E; }
.approval-card.rejected { opacity: 0.4; border-color: var(--rot); text-decoration: line-through; }
.approval-checkbox { flex-shrink: 0; margin-top: 0.2rem; }
.approval-checkbox input { width: 16px; height: 16px; accent-color: var(--rot); }
.approval-body { flex: 1; }
.approval-meta { font-size: 0.7rem; color: var(--grau-muted); margin-top: 0.3rem; }
.approval-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Module Grid (Dashboard) */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.module-card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.5rem; cursor: pointer; transition: all var(--transition); position: relative;
}
.module-card:hover { border-color: var(--rot); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.module-card-nr { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rot); font-weight: 600; margin-bottom: 0.5rem; }
.module-card-title { font-size: 1.3rem; margin-bottom: 0.6rem; }
.module-card-kpi { display: flex; gap: 1.5rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--grau); }
.module-card-kpi-item .kpi-label { margin-bottom: 0.2rem; }
.module-card-kpi-item .kpi-value { font-size: 1.4rem; }

/* Freigabe Queue (Dashboard) */
.queue-card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 2rem;
}
.queue-list { margin-top: 1rem; }
.queue-item {
  display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0;
  border-bottom: 1px solid var(--grau); font-size: 0.88rem;
}
.queue-item:last-child { border-bottom: none; }
.queue-item-left { display: flex; align-items: center; gap: 0.8rem; }
.queue-dot { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; flex-shrink: 0; }

/* Decision Cards */
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.decision-card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.5rem; transition: all var(--transition);
}
.decision-card:hover { border-color: var(--rot); }
.decision-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.decision-card p { font-size: 0.85rem; color: var(--grau-muted); line-height: 1.6; margin-bottom: 1rem; }

/* Sequence/Pipeline */
.pipeline { display: flex; gap: 0; margin: 1.5rem 0; }
.pipeline-stage {
  flex: 1; text-align: center; padding: 0.8rem 0.5rem; position: relative;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.pipeline-stage::after {
  content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-left: 8px solid; z-index: 1;
}
.pipeline-stage:last-child::after { display: none; }
.ps-1 { background: var(--rot); color: #fff; }
.ps-1::after { border-left-color: var(--rot); }
.ps-2 { background: #F59E0B; color: #fff; }
.ps-2::after { border-left-color: #F59E0B; }
.ps-3 { background: var(--grau-mid); color: var(--text); }
.ps-3::after { border-left-color: var(--grau-mid); }
.ps-4 { background: var(--grau); color: var(--grau-muted); }
.pipeline-count { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; margin-bottom: 0.2rem; letter-spacing: 0; }

/* Section within a view */
.view-section { margin-bottom: 2.5rem; }
.view-section-title { font-size: 1.1rem; color: var(--text); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }

/* Inline tag */
.tag { display: inline-block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 0.15em 0.6em; border-radius: 2px; background: var(--grau); color: var(--text); }

/* =============================================
   Login Page
   ============================================= */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  background: var(--weiss);
  padding: 3rem 2.5rem;
  max-width: 400px;
  width: 100%;
  margin: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.login-badge {
  display: inline-block;
  background: var(--rot);
  color: var(--weiss);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  margin-top: 0.8rem;
}
.login-container h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.5rem;
}
.login-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--grau-muted);
  margin-bottom: 2rem;
  font-weight: 300;
}
.login-container label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--grau-mid);
  background: var(--grau);
  font-size: 0.95rem;
  font-weight: 300;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  margin-bottom: 1.2rem;
}
.login-container input:focus {
  border-color: var(--rot);
  background: var(--weiss);
}
.btn-login {
  width: 100%;
  padding: 0.9rem;
  background: var(--rot);
  color: var(--weiss);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-login:hover {
  background: var(--rot-dark);
}
/* Password toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 2.8rem; }
.pw-toggle {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 0.3rem;
  color: var(--grau-muted); transition: color 0.2s;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-hint { font-size: 0.75rem; color: var(--grau-muted); margin: 0.3rem 0 0.8rem; }

/* Register Page */
.register-container { max-width: 480px; }
.reg-row { display: flex; gap: 0.8rem; margin-bottom: 0; }
.reg-col { flex: 1; }
.reg-col-salutation { flex: 0 0 100px; }
.reg-select {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--grau-mid);
  background: var(--grau); font-size: 0.95rem; font-weight: 300;
  transition: border-color 0.2s, background 0.2s; outline: none; margin-bottom: 1.2rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AAAAAA' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center;
}
.reg-select:focus { border-color: var(--rot); background-color: var(--weiss); }
.required { color: var(--rot); }

.tos-checkbox {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.82rem; color: var(--text); line-height: 1.5;
  margin: 1.2rem 0 1.5rem; cursor: pointer;
}
.tos-checkbox input { accent-color: var(--rot); margin-top: 0.15rem; flex-shrink: 0; width: 16px; height: 16px; }
.tos-checkbox a { color: var(--rot); text-decoration: underline; }
.tos-checkbox a:hover { text-decoration: none; }

.register-link {
  display: block; text-align: center; font-size: 0.88rem;
  color: var(--rot); font-weight: 600; margin-top: 1rem;
  padding: 0.6rem; border: 1px solid var(--rot); transition: all 0.2s;
}
.register-link:hover { background: var(--rot); color: var(--weiss); }

.login-legal-links {
  display: flex; justify-content: center; gap: 1.2rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--grau-mid);
}
.login-legal-links a { font-size: 0.72rem; color: var(--grau-muted); }
.login-legal-links a:hover { color: var(--rot); }

@media (max-width: 480px) {
  .reg-row { flex-direction: column; gap: 0; }
  .reg-col-salutation { flex: auto; }
}

.error-msg {
  background: #FFF0F0;
  color: var(--rot);
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1.2rem;
  display: none;
}
.error-msg.visible { display: block; }
.success-msg {
  background: #DCFCE7; color: #166534; font-size: 0.82rem;
  padding: 0.7rem 1rem; margin-bottom: 1.2rem; display: none;
  border-radius: 4px;
}
.success-msg.visible { display: block; }
.pw-forgot {
  display: block; text-align: center; font-size: 0.82rem;
  color: var(--rot); margin-top: 1rem; margin-bottom: 0.5rem;
}
.pw-forgot:hover { text-decoration: underline; }
.back-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--grau-muted);
  text-decoration: none;
}
.back-link:hover {
  color: var(--rot);
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .decision-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-sidebar { transform: translateX(-100%); width: 100%; }
  .app-sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
  .app-main { margin-left: 0; }
  .hamburger-btn { display: flex; }
  .header-username { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .pipeline { flex-direction: column; }
  .pipeline-stage::after { display: none; }
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; padding: 0.8rem 1rem; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .app-main { padding: 1rem; }
  .page-title { font-size: 1.6rem; }

  /* M31: Responsive Cards statt Tabellen auf Mobile */
  .data-table.responsive-cards { min-width: unset; }
  .data-table.responsive-cards thead { display: none; }
  .data-table.responsive-cards tr { display: block; padding: 0.8rem; margin-bottom: 0.5rem; border: 1px solid var(--grau-mid); border-radius: var(--radius); }
  .data-table.responsive-cards td { display: flex; justify-content: space-between; padding: 0.3rem 0; border: none; font-size: 0.82rem; }
  .data-table.responsive-cards td::before { content: attr(data-label); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau-muted); }
}

/* Sidebar overlay on mobile */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 85;
}
.sidebar-overlay.show { display: block; }

/* =============================================
   Approval Card: Expand & Edit
   ============================================= */
.approval-text {
  font-size: 0.85rem; color: var(--text); margin-top: 0.5rem; line-height: 1.7;
  background: var(--grau); padding: 0.8rem 1rem; border-radius: var(--radius);
  max-height: 4.5em; overflow: hidden; position: relative;
  transition: max-height 0.3s ease;
}
.approval-text.expanded { max-height: none; }
.approval-text:not(.expanded)::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2em; background: linear-gradient(transparent, var(--grau)); pointer-events: none;
}
.approval-text-toggle {
  font-size: 0.72rem; color: var(--rot); cursor: pointer; margin-top: 0.3rem;
  display: inline-block; font-weight: 600; letter-spacing: 0.05em;
}
.approval-text-toggle:hover { text-decoration: underline; }
.approval-edit-area {
  width: 100%; min-height: 120px; font-size: 0.85rem; line-height: 1.7;
  padding: 0.8rem 1rem; border: 2px solid var(--rot); border-radius: var(--radius);
  background: var(--weiss); resize: vertical; display: none; margin-top: 0.5rem;
}
.approval-card.editing .approval-text { display: none; }
.approval-card.editing .approval-text-toggle { display: none; }
.approval-card.editing .approval-edit-area { display: block; }
.approval-edit-actions { display: none; gap: 0.5rem; margin-top: 0.5rem; }
.approval-card.editing .approval-edit-actions { display: flex; }
.approval-card.editing .approval-actions { display: none; }

/* =============================================
   Experiment Detail Panel
   ============================================= */
.experiment-row { cursor: pointer; }
.experiment-row:hover td { background: var(--grau); }
.experiment-detail {
  display: none; background: var(--grau); border-bottom: 1px solid var(--grau-mid);
}
.experiment-detail.open { display: table-row; }
.experiment-detail td { padding: 1.2rem 1.5rem; }
.experiment-detail-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.experiment-variant {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.experiment-variant h5 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.experiment-variant .variant-metrics { display: flex; gap: 1.5rem; margin-top: 0.8rem; font-size: 0.82rem; }
.variant-winner { border-color: #22C55E; }

/* =============================================
   Modal / Overlay
   ============================================= */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 150; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--weiss); border-radius: var(--radius); padding: 2rem;
  max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
/* M2: Modal-Groessen */
.modal-sm { max-width: 400px; }
.modal-md { max-width: 550px; }
.modal-lg { max-width: 700px; }
/* M3: Einheitliches Modal-Pattern */
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-header h3 { margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--grau-muted); padding: 0; line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal-body { margin-bottom: 1rem; }
.modal-footer { display: flex; gap: 0.8rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--grau); }
.modal h3 { margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.8rem; margin-top: 1.5rem; justify-content: flex-end; }

/* =============================================
   Preview: HTML Layout (iframe)
   ============================================= */
.approval-html-preview {
  margin-top: 0.8rem; border: 1px solid var(--grau-mid); border-radius: var(--radius);
  overflow: hidden;
}
.approval-html-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.8rem; background: var(--grau); border-bottom: 1px solid var(--grau-mid);
}
.approval-iframe {
  width: 100%; min-height: 350px; border: none; background: #fff;
  pointer-events: none;
}

/* =============================================
   Preview: Bilder / Banner
   ============================================= */
.approval-image-grid {
  display: flex; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap;
}
.approval-image-wrap {
  position: relative; border: 1px solid var(--grau-mid); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; flex: 1; min-width: 150px; max-width: 400px;
  transition: border-color var(--transition);
}
.approval-image-wrap:hover { border-color: var(--rot); }
.approval-image-wrap img {
  width: 100%; height: auto; display: block;
}
.approval-image-zoom {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 0.4rem;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem; text-align: center;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  opacity: 0; transition: opacity var(--transition);
}
.approval-image-wrap:hover .approval-image-zoom { opacity: 1; }

/* =============================================
   Preview: Page Layout (Desktop + Mobile)
   ============================================= */
.approval-page-preview {
  display: flex; gap: 1.5rem; margin-top: 0.8rem; align-items: flex-start;
}
.approval-device {
  border: 1px solid var(--grau-mid); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; position: relative;
  transition: border-color var(--transition);
}
.approval-device:hover { border-color: var(--rot); }
.approval-device img { width: 100%; height: auto; display: block; }
.device-label {
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; color: var(--grau-muted); padding: 0.4rem 0.8rem;
  background: var(--grau); border-bottom: 1px solid var(--grau-mid);
}
.approval-device-desktop { flex: 3; }
.approval-device-mobile { flex: 1; max-width: 180px; }

/* =============================================
   Preview: Mixed (Text + Bild nebeneinander)
   ============================================= */
.approval-mixed {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem;
}
.approval-mixed-media { display: flex; flex-direction: column; gap: 0.5rem; }
.approval-mixed-media .approval-image-wrap { max-width: none; }

/* =============================================
   Image Modal (Fullscreen Zoom)
   ============================================= */
#imageModal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  z-index: 200; align-items: center; justify-content: center; cursor: zoom-out;
}
#imageModal.open { display: flex; }
#imageModal img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#imageModal .modal-title {
  position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 0.85rem; font-weight: 500; background: rgba(0,0,0,0.5);
  padding: 0.4rem 1.2rem; border-radius: var(--radius);
}
#imageModal .modal-close {
  position: absolute; top: 1.5rem; right: 1.5rem; color: #fff; font-size: 1.5rem;
  cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1);
  transition: background var(--transition);
}
#imageModal .modal-close:hover { background: rgba(255,255,255,0.2); }

/* =============================================
   HTML Preview Modal (Fullscreen iframe)
   ============================================= */
#previewModal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  z-index: 200; flex-direction: column;
}
#previewModal.open { display: flex; }
#previewModal .preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1.5rem; background: var(--text); color: #fff;
}
#previewModal .preview-toolbar h4 { color: #fff; font-size: 1rem; }
#previewModal .preview-devices { display: flex; gap: 0.5rem; }
#previewModal .preview-device-btn {
  padding: 0.3rem 0.8rem; font-size: 0.7rem; color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  transition: all var(--transition);
}
#previewModal .preview-device-btn:hover,
#previewModal .preview-device-btn.active { color: #fff; border-color: var(--rot); background: var(--rot); }
#previewModal .preview-frame-wrap {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 1.5rem; overflow: auto; background: var(--grau);
}
#previewModal .preview-frame {
  background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: width 0.3s ease; width: 100%; max-width: 100%;
}
#previewModal .preview-frame.tablet { max-width: 768px; }
#previewModal .preview-frame.mobile { max-width: 375px; }
#previewModal .preview-frame iframe {
  width: 100%; min-height: 80vh; border: none;
}

/* =============================================
   Revision Request Modal
   ============================================= */
.revision-note {
  width: 100%; min-height: 80px; padding: 0.8rem 1rem; border: 1px solid var(--grau-mid);
  border-radius: var(--radius); font-size: 0.88rem; resize: vertical; margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .approval-mixed { grid-template-columns: 1fr; }
  .approval-page-preview { flex-direction: column; }
  .approval-device-mobile { max-width: 100%; }
}

/* =============================================
   Onboarding Wizard
   ============================================= */
.wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--grau-mid);
}
.wizard-step {
  flex: 1;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--grau-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  transition: color 0.2s;
}
.wizard-step:hover { color: var(--text); }
.wizard-step.active { color: var(--text); }
.wizard-step.current { color: var(--rot); }
.wizard-step.current::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rot);
}
.wizard-step-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grau-mid);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--grau-muted);
}
.wizard-step.active .wizard-step-nr { background: var(--grau-muted); color: #fff; }
.wizard-step.current .wizard-step-nr { background: var(--rot); color: #fff; }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--grau-mid);
}

.form-hint {
  font-size: 0.85rem;
  color: var(--grau-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Color Inputs */
.color-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.color-input-wrap input[type="color"] {
  width: 36px;
  height: 36px;
  border: 1px solid var(--grau-mid);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px;
  background: #fff;
}

.ci-color-preview {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8rem;
  background: var(--grau);
  border-radius: 6px;
}
.ci-preview-swatch {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Tone Options */
.tone-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-top: 0.5rem;
}
.tone-option {
  display: block;
  padding: 1rem;
  border: 1px solid var(--grau-mid);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.tone-option:hover { border-color: var(--rot); }
.tone-option input { accent-color: var(--rot); margin-right: 0.4rem; }
.tone-option span { font-size: 0.78rem; color: var(--grau-muted); }

/* Upload Zones */
.upload-zone-inner {
  border: 2px dashed var(--grau-mid);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 140px;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--grau-muted);
}
.upload-zone-inner:hover { border-color: var(--rot); background: rgba(208,2,27,0.03); }
.upload-zone-inner svg { opacity: 0.4; }
.upload-zone-preview img { border-radius: 4px; }
.upload-zone-inner:has(.upload-zone-preview img) svg,
.upload-zone-inner:has(.upload-zone-preview img) > span { display: none; }

/* Media Section Titles */
.media-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 1.5rem 0 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grau-muted);
}
.media-section-title:first-of-type { margin-top: 0; }

/* Media Upload Row */
.media-upload-row {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.media-upload-row .form-input { flex: 1; }

/* Asset List Items */
.ci-asset-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--grau);
}
.ci-asset-row:last-child { border-bottom: none; }
.ci-asset-list { margin-bottom: 1rem; }

.asset-icon {
  width: 40px;
  height: 40px;
  background: var(--grau);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--grau-muted);
  flex-shrink: 0;
}

/* Competitor / Reference Entry Cards */
.ci-entry-card {
  padding: 0.8rem 1rem;
  border: 1px solid var(--grau-mid);
  border-radius: 6px;
  margin-bottom: 0.8rem;
}
.ci-entry-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.ci-entry-header .btn { margin-left: auto; }

/* Approval Lead Info */
.approval-lead-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.4rem 0 0.6rem; font-size: 0.82rem; }
.approval-lead-name { font-weight: 600; color: var(--text); }
.approval-lead-detail { color: var(--grau-muted); }
.approval-lead-detail::before { content: "\00b7"; margin-right: 0.4rem; }

/* Social-Media Briefing */
.sm-lead-tab { min-height: 100px; }

/* Versand-Tab */
.versand-card { background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 0.75rem; transition: var(--transition); }
.versand-card:hover { box-shadow: var(--shadow-sm); }
.versand-sent { opacity: 0.6; }
.versand-card-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.versand-checkbox { flex-shrink: 0; width: 20px; }
.versand-checkbox input { accent-color: var(--rot); }
.versand-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; flex: 1; min-width: 0; }
.versand-lead-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.versand-lead-detail { font-size: 0.8rem; color: var(--grau-muted); }
.versand-lead-detail::before { content: "\00b7"; margin-right: 0.3rem; }
.versand-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.versand-card-body { padding-left: 28px; }
.versand-text { font-size: 0.85rem; line-height: 1.5; color: var(--text); white-space: pre-line; max-height: 120px; overflow: hidden; position: relative; }
.versand-linkedin-link { display: inline-block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--rot); }

/* Meine Leads */
.ml-message { background: var(--grau); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.5rem; }
.ml-message-sent { opacity: 0.5; }
.ml-message-text { font-size: 0.84rem; line-height: 1.5; white-space: pre-line; max-height: 100px; overflow: hidden; }
.lead-card { transition: var(--transition); }

/* Availability Modal */
.avail-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.avail-day { display: flex; align-items: center; gap: 0.4rem; min-width: 110px; font-size: 0.85rem; font-weight: 500; }
.avail-day input[type="checkbox"] { accent-color: var(--rot); }
.modal-overlay.open { display: flex; }

/* Conversion-Hub Section Toggles */
.ch-section-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: var(--radius);
  background: var(--grau); cursor: pointer; user-select: none;
}
.ch-section-toggle input[type="checkbox"] { accent-color: var(--rot); }

@media (max-width: 768px) {
  .wizard-steps { flex-wrap: wrap; }
  .wizard-step { font-size: 0.75rem; padding: 0.6rem 0.5rem; }
  .tone-options { grid-template-columns: 1fr; }
  .media-upload-row { flex-direction: column; align-items: stretch; }
  .ci-entry-header { flex-direction: column; align-items: flex-start; }
}

/* =============================================
   v2: Campaign Detail
   ============================================= */
.cd-meta { margin-top: 0.5rem; }
.cd-meta-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cd-meta-date { font-size: 0.78rem; color: var(--grau-muted); margin-left: 0.5rem; }
/* Superagent Header (Kampagnen-Detail) */
.cd-superagent-header {
  background: var(--grau); border-left: 4px solid var(--rot); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem; margin-bottom: 1rem;
}
.cd-sa-left {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem;
}
.cd-sa-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--rot); color: var(--weiss);
  display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem; letter-spacing: 0.03em; flex-shrink: 0;
}
.cd-sa-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.03em;
}
.cd-sa-role { font-size: 0.75rem; color: var(--grau-muted); }
.cd-sa-date { margin-left: auto; font-size: 0.75rem; color: var(--grau-muted); }
.cd-sa-report {
  font-size: 0.88rem; line-height: 1.7; color: var(--text);
}
.cd-sa-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1rem;
}
.cd-sa-kpi {
  text-align: center; padding: 0.8rem 0.5rem; background: var(--weiss);
  border: 1px solid var(--grau); border-radius: var(--radius);
}
.cd-sa-kpi-value {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--rot);
}
.cd-sa-kpi-label { font-size: 0.72rem; color: var(--grau-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.cd-sa-team { margin-bottom: 1rem; }
.cd-sa-team-label {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rot);
  font-weight: 600; margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--grau);
}
.cd-sa-team-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.cd-sa-team-member { text-align: center; min-width: 80px; }
.cd-sa-team-dot {
  width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 0.3rem;
}
.cd-sa-team-dot-active { background: var(--rot); }
.cd-sa-team-dot-idle { background: var(--grau-muted); }
.cd-sa-team-name { font-size: 0.78rem; font-weight: 600; }
.cd-sa-team-stat { font-size: 0.72rem; color: var(--grau-muted); }
.cd-sa-alerts { margin-bottom: 1rem; }
.cd-sa-alert {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem;
  font-size: 0.85rem; border-bottom: 1px solid var(--grau);
}
.cd-sa-alert:last-child { border-bottom: none; }
.cd-sa-alert-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cd-sa-alert-red { background: var(--rot); }
.cd-sa-alert-yellow { background: #f0a500; }
.cd-sa-alert-green { background: #4caf50; }

.cd-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cd-module-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0;
  border-bottom: 1px solid var(--grau); font-size: 0.88rem;
}
.cd-module-item:last-child { border-bottom: none; }
.cd-module-status { margin-left: auto; font-size: 0.75rem; color: var(--grau-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Module Pills (Kampagnen-Cards) */
.campaign-card-module-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.module-pill {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem;
  border-radius: 4px; font-size: 0.72rem; font-weight: 500;
}
.module-pill .sidebar-icon { width: 14px; height: 14px; opacity: 1; stroke: var(--rot); }
.module-pill-active { background: rgba(208,2,27,0.06); color: var(--rot); border: 1px solid rgba(208,2,27,0.15); }
.module-pill-muted { background: var(--grau); color: var(--grau-muted); border: 1px solid var(--grau-mid); text-decoration: line-through; }
.campaign-card-desc { font-size: 0.82rem; color: var(--grau-muted); line-height: 1.5; margin-bottom: 0.8rem; }

/* Journey Pipeline (Kampagnen-Detail Uebersicht) */
.cd-journey-pipeline { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.journey-arrow { display: flex; align-items: center; font-size: 1.2rem; color: var(--grau-muted); padding: 0 0.5rem; }
.journey-step {
  flex: 1; min-width: 130px; padding: 0.8rem; border-radius: var(--radius);
  border: 1px solid var(--grau-mid); text-align: center;
}
.journey-active { border-color: var(--rot); background: rgba(208,2,27,0.03); }
.journey-winding { border-color: #F59E0B; background: rgba(245,158,11,0.05); }
.journey-expired { border-color: var(--grau-mid); background: var(--grau); opacity: 0.6; }
.journey-step-name { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.04em; }
.journey-step-status { font-size: 0.68rem; color: var(--grau-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem; }
.journey-step-stats { font-size: 0.72rem; color: var(--text); margin-top: 0.3rem; }

/* Content-Items: Rich-Preview */
.cd-content-module-group { margin-bottom: 2rem; }
.cd-content-module-header { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1rem; }
.cd-content-module-title { font-size: 1.1rem; color: var(--text); padding-bottom: 0.3rem; border-bottom: 2px solid var(--rot); }
.cd-content-module-count { font-size: 0.75rem; color: var(--grau-muted); }
.cd-content-item {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: 1.2rem; margin-bottom: 1rem; transition: all var(--transition);
}
.cd-content-item:hover { border-color: var(--rot); box-shadow: var(--shadow-md); }
.cc-header { display: flex; gap: 0.8rem; align-items: flex-start; }
.cc-media-icon { flex-shrink: 0; width: 2rem; display: flex; align-items: center; justify-content: center; }
.cc-icon { width: 22px; height: 22px; }
.cc-header-text { flex: 1; min-width: 0; }
.cd-content-title { font-size: 1.05rem; margin-bottom: 0.3rem; letter-spacing: 0.02em; }
.cc-header-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cd-content-type { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-muted); font-weight: 500; }
.cc-step { font-size: 0.68rem; color: var(--text); font-weight: 600; background: var(--grau); padding: 0.1em 0.4em; border-radius: 3px; }
.cc-reviewer { font-size: 0.72rem; color: var(--grau-muted); }
.cc-review-note { font-size: 0.78rem; color: var(--rot); margin-top: 0.3rem; font-style: italic; padding: 0.4rem 0.6rem; background: rgba(208,2,27,0.04); border-radius: var(--radius); }
.cc-lead-info { font-size: 0.8rem; color: var(--text); margin: 0.5rem 0 0 2.8rem; padding: 0.4rem 0.6rem; background: var(--grau); border-radius: var(--radius); }
.cc-media-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 0 2.8rem; }
.cc-media-thumb { width: 120px; height: 80px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--grau-mid); position: relative; cursor: pointer; }
.cc-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-media-video, .cc-media-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--grau); font-size: 0.7rem; color: var(--grau-muted); gap: 0.3rem; }
.cc-media-play { font-size: 1.5rem; }
.cc-body-wrap { margin: 0.6rem 0 0 2.8rem; }
.cc-body { font-size: 0.85rem; color: var(--text); line-height: 1.7; font-weight: 300; white-space: pre-line; }
.cc-body-collapsed { max-height: 4.5em; overflow: hidden; position: relative; }
.cc-body-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2em; background: linear-gradient(transparent, var(--weiss)); }
.cc-expand { font-size: 0.75rem; color: var(--rot); cursor: pointer; margin-top: 0.3rem; background: none; border: none; font-weight: 500; }
.cc-expand:hover { text-decoration: underline; }
.cc-cta { margin: 0.6rem 0 0 2.8rem; display: flex; align-items: center; gap: 0.4rem; }
.cc-cta-label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--weiss); background: var(--rot); padding: 0.15em 0.5em; border-radius: 3px; font-weight: 600; }
.cc-cta strong { font-size: 0.85rem; }

/* Content Toolbar + Bulk-Actions */
.cd-content-toolbar { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.cd-bulk-bar {
  display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap;
  background: var(--grau); border-radius: var(--radius); padding: 0.5rem 1rem;
}
.cd-bulk-select-all { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.cd-bulk-count { font-size: 0.78rem; color: var(--grau-muted); font-weight: 500; }
.cc-bulk-check {
  position: absolute; top: 0.8rem; right: 0.8rem; cursor: pointer; z-index: 2;
}
.cc-bulk-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--rot); }
.cd-content-item { position: relative; }

/* Briefing-Form */
.briefing-form { max-width: 720px; }
.briefing-hint { font-size: 0.8rem; color: var(--grau-muted); margin-bottom: var(--sp-md); }
.briefing-field { margin-bottom: var(--sp-lg); }
.briefing-field .form-label { font-weight: 600; margin-bottom: 0.3rem; display: block; }
.briefing-required { color: var(--rot); }
.briefing-help { font-size: 0.78rem; color: var(--grau-muted); margin: 0.2rem 0 0.5rem; }
.briefing-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.briefing-cb-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; cursor: pointer; }
.briefing-cb-label input { accent-color: var(--rot); }
.briefing-actions { margin-top: var(--sp-lg); }
.cd-content-lead { font-size: 0.78rem; color: var(--text); font-style: italic; }

/* CI & Marke Sub-Tabs */
.ci-completeness { margin-bottom: var(--sp-lg); max-width: 500px; }
.ci-completeness-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.ci-completeness-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau-muted); font-weight: 600; }
.ci-completeness-pct { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--rot); }
.ci-completeness-bar { height: 6px; background: var(--grau); border-radius: 3px; overflow: hidden; }
.ci-completeness-fill { height: 100%; background: var(--rot); border-radius: 3px; transition: width 0.4s ease; }
.ci-completeness-hint { font-size: 0.75rem; color: var(--grau-muted); margin-top: 0.3rem; }

.sub-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--grau); margin-bottom: var(--sp-lg); }
.sub-tab-btn {
  padding: 0.6rem 1rem; font-size: 0.82rem; font-weight: 500; color: var(--grau-muted);
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 0.3rem;
}
.sub-tab-btn:hover { color: var(--text); }
.sub-tab-btn.sub-tab-active { color: var(--rot); border-bottom-color: var(--rot); font-weight: 600; }
.sub-tab-count { font-size: 0.68rem; background: var(--grau); padding: 0.1em 0.45em; border-radius: 8px; }
.sub-tab-content { display: none; }
.sub-tab-content.sub-tab-active { display: block; }

.ci-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg); max-width: 900px; }
.ci-field { margin-bottom: 0.8rem; }
.ci-field-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau-muted); font-weight: 600; display: block; margin-bottom: 0.2rem; }
.ci-list { font-size: 0.85rem; padding-left: 1.2rem; margin: 0; line-height: 1.8; }
.ci-color-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.ci-color-box { width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid var(--grau-mid); }
.ci-color-label { font-size: 0.68rem; color: var(--grau-muted); }
.ci-color-hex { font-size: 0.68rem; font-family: monospace; color: var(--text); }
.ci-tag-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ci-tag { font-size: 0.75rem; padding: 0.2em 0.6em; background: var(--grau); border-radius: 12px; color: var(--text); }
.ci-tag-red { background: rgba(208,2,27,0.08); color: var(--rot); }
.ci-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-md); }
.ci-asset-card { background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius); padding: var(--sp-md); }
.ci-competitor-list { max-width: 700px; }
.ci-competitor-item { padding: var(--sp-md); border: 1px solid var(--grau-mid); border-radius: var(--radius); margin-bottom: var(--sp-sm); background: var(--weiss); }
.ci-comp-url { font-size: 0.78rem; color: var(--rot); text-decoration: none; margin-left: 0.5rem; }
.ci-comp-url:hover { text-decoration: underline; }

/* Onboarding-Banner */
.onboarding-banner {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-left: 4px solid var(--rot);
  border-radius: var(--radius); padding: var(--sp-lg); transition: all var(--transition);
}
.onboarding-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-lg); flex-wrap: wrap; }
.onboarding-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; margin-bottom: 0.2rem; }
.onboarding-subtitle { font-size: 0.82rem; color: var(--grau-muted); max-width: 400px; }
.onboarding-progress-wrap { display: flex; align-items: center; gap: var(--sp-sm); min-width: 160px; }
.onboarding-progress { flex: 1; height: 8px; background: var(--grau); border-radius: 4px; overflow: hidden; }
.onboarding-progress-fill { height: 100%; background: var(--rot); border-radius: 4px; transition: width 0.4s ease; }
.onboarding-pct { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--rot); min-width: 2.5rem; text-align: right; }
.onboarding-checklist { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
.onboarding-item {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem;
  background: var(--grau); padding: 0.4rem 0.8rem; border-radius: 20px;
}
.onboarding-item.onboarding-done { opacity: 0.5; }
.onboarding-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--grau-mid);
  display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0;
}
.onboarding-done .onboarding-check { background: var(--success); border-color: var(--success); color: var(--weiss); }
.onboarding-link { font-size: 0.78rem; color: var(--rot); font-weight: 600; text-decoration: none; margin-left: 0.3rem; }
.onboarding-link:hover { text-decoration: underline; }

.cd-content-actions {
  display: flex; gap: 0.5rem; margin: 0.8rem 0 0 2.8rem; padding-top: 0.8rem;
  border-top: 1px solid var(--grau);
}

@media (max-width: 768px) {
  .cd-journey-pipeline { flex-direction: column; }
  .journey-arrow { transform: rotate(90deg); padding: 0.3rem 0; justify-content: center; }
  .journey-step { min-width: unset; }
  .cc-body-wrap, .cc-media-row, .cc-lead-info, .cc-cta, .cd-content-actions { margin-left: 0; }
  .campaign-card-module-pills { gap: 0.3rem; }
  .module-pill { font-size: 0.65rem; padding: 0.2rem 0.4rem; }
}

/* New Campaign Modal: Module Selection */
.nc-module-list { max-height: 300px; overflow-y: auto; }
.nc-adapter-label {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rot); font-weight: 600; padding: 0.8rem 0 0.3rem; margin-top: 0.3rem;
  border-top: 1px solid var(--grau);
}
.nc-adapter-label:first-child { border-top: none; margin-top: 0; }
.nc-module-option {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
  font-size: 0.88rem; cursor: pointer;
}
.nc-module-option input[type="checkbox"] { accent-color: var(--rot); flex-shrink: 0; }
.nc-module-name { font-weight: 500; }
.nc-module-desc { font-size: 0.75rem; color: var(--grau-muted); margin-left: auto; }

/* =============================================
   v2: Lead-Detail Panel (Slide-in)
   ============================================= */
.lead-detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 90vw;
  background: var(--weiss); z-index: 200; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  overflow-y: auto; padding: 1.5rem; transform: translateX(100%);
  transition: transform 0.3s ease;
}
.lead-detail-panel.open { transform: translateX(0); }
.lead-detail-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 199;
}
.lead-detail-panel.open ~ .lead-detail-overlay { display: block; }

.ld-loading { text-align: center; padding: 3rem; color: var(--grau-muted); }
.ld-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.ld-name { font-size: 1.5rem; color: var(--text); }
.ld-company { font-size: 0.85rem; color: var(--grau-muted); margin-top: 0.2rem; }
.ld-close {
  font-size: 1.8rem; color: var(--grau-muted); cursor: pointer; background: none;
  border: none; line-height: 1; padding: 0.2rem 0.5rem;
}
.ld-close:hover { color: var(--rot); }
.ld-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.2rem; }
.ld-score { font-size: 0.78rem; color: var(--text); font-weight: 600; }
.ld-source, .ld-assigned { font-size: 0.78rem; color: var(--grau-muted); }

.ld-campaign-box {
  background: var(--grau); border-left: 3px solid var(--rot); padding: 0.8rem 1rem;
  margin-bottom: 1.2rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.ld-campaign-label {
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rot); font-weight: 600; margin-bottom: 0.2rem;
}
.ld-campaign-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: 0.03em; }
.ld-campaign-desc { font-size: 0.8rem; color: var(--grau-muted); margin-top: 0.2rem; line-height: 1.5; }
.ld-campaign-modules { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

/* Book Module Catalog */
.bm-module-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--grau); font-size: 0.88rem;
}
.bm-module-row:last-child { border-bottom: none; }
.bm-booked { opacity: 0.5; }
.bm-module-info { display: flex; flex-direction: column; gap: 0.15rem; }
.bm-desc { font-size: 0.75rem; color: var(--grau-muted); }
.bm-price { font-size: 0.78rem; color: var(--rot); font-weight: 500; }

/* Department Catalog (Abteilungs-Karten) */
.dept-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.dept-card {
  background: var(--weiss); border: 1px solid var(--grau); border-radius: var(--radius);
  padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.dept-card:hover { border-color: var(--rot); box-shadow: 0 2px 12px rgba(208,2,27,0.08); }
.dept-card.dept-booked { opacity: 0.5; pointer-events: none; }
.dept-card-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.03em;
  color: var(--text);
}
.dept-card-meta { font-size: 0.78rem; color: var(--grau-muted); }
.dept-card-agent {
  font-size: 0.82rem; color: var(--text); font-weight: 500;
  border-top: 1px solid var(--grau); padding-top: 0.5rem; margin-top: auto;
}
.dept-card-price {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--rot);
}
.dept-card-cta {
  background: var(--rot); color: var(--weiss); border: none; border-radius: var(--radius);
  padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  text-align: center; transition: background 0.2s;
}
.dept-card-cta:hover { background: var(--rot-dark, #b00218); }
.dept-card-tagline {
  font-size: 0.78rem; color: var(--grau-muted); font-style: italic; line-height: 1.4;
}
.dept-fallback {
  font-size: 0.82rem; color: var(--grau-muted); text-align: center;
  padding-top: 0.8rem; border-top: 1px solid var(--grau);
}
.dept-fallback a { color: var(--rot); text-decoration: none; font-weight: 500; }
.dept-fallback a:hover { text-decoration: underline; }

/* Department Side-Panel */
.dept-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--weiss); z-index: 210; box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  overflow-y: auto; padding: 1.5rem; transform: translateX(100%);
  transition: transform 0.3s ease;
}
.dept-panel.open { transform: translateX(0); }
.dept-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 209; cursor: pointer;
}
.dept-panel-overlay.open { display: block; }
.dept-panel-close {
  position: absolute; top: 1rem; right: 1rem; font-size: 1.6rem; color: var(--grau-muted);
  cursor: pointer; background: none; border: none; line-height: 1;
}
.dept-panel-close:hover { color: var(--rot); }
.dept-panel-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.dept-panel-tagline {
  font-size: 0.88rem; color: var(--text); line-height: 1.5; margin-bottom: 1.2rem;
  font-style: italic;
}
.dept-panel-section {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rot); font-weight: 600; margin: 1.2rem 0 0.5rem;
}
.dept-panel-agent {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
  font-size: 0.85rem; border-bottom: 1px solid var(--grau);
}
.dept-panel-agent:last-child { border-bottom: none; }
.dept-panel-agent-name { font-weight: 600; }
.dept-panel-agent-role { color: var(--grau-muted); font-size: 0.78rem; }
.dept-panel-agent-orch { color: var(--rot); font-weight: 600; }
.dept-panel-pricing {
  background: var(--grau); border-radius: var(--radius); padding: 1rem;
  margin: 1rem 0;
}
.dept-panel-pricing-total {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--rot);
}
.dept-panel-pricing-detail { font-size: 0.78rem; color: var(--grau-muted); margin-top: 0.3rem; }
.dept-panel-pricing-original {
  text-decoration: line-through; color: var(--grau-muted); font-size: 0.85rem; margin-right: 0.5rem;
}
.dept-panel-book {
  width: 100%; background: var(--rot); color: var(--weiss); border: none; border-radius: var(--radius);
  padding: 0.8rem; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; transition: background 0.2s;
}
.dept-panel-book:hover { background: var(--rot-dark, #b00218); }
.dept-panel-single {
  text-align: center; margin-top: 0.8rem; font-size: 0.82rem;
}
.dept-panel-single a { color: var(--grau-muted); text-decoration: none; }
.dept-panel-single a:hover { color: var(--rot); }

/* Marlene Chat-UI */
.marlene-container { max-width: 720px; }
.marlene-intro { text-align: center; padding: 3rem 1rem; }
.marlene-intro-avatar {
  width: 80px; height: 80px; border-radius: 50%; background: var(--rot); color: var(--weiss);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  font-family: 'Bebas Neue', sans-serif; font-size: 2rem;
}
.marlene-intro-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.marlene-intro-tagline {
  font-size: 0.95rem; color: var(--text); font-style: italic; line-height: 1.5;
  margin-bottom: 1rem;
}
.marlene-intro-desc {
  font-size: 0.85rem; color: var(--grau-muted); line-height: 1.7; max-width: 480px; margin: 0 auto 1.5rem;
}
.marlene-intro-actions { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.marlene-upload-link {
  font-size: 0.82rem; color: var(--grau-muted); cursor: pointer; text-decoration: underline;
}
.marlene-upload-link:hover { color: var(--rot); }

.marlene-chat {
  display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px;
}
.marlene-messages {
  flex: 1; overflow-y: auto; padding: 1rem 0; display: flex; flex-direction: column; gap: 0.8rem;
}
.marlene-msg {
  max-width: 85%; padding: 0.8rem 1rem; border-radius: var(--radius); font-size: 0.88rem; line-height: 1.6;
  animation: marlene-fade-in 0.3s ease;
}
@keyframes marlene-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.marlene-msg-marlene {
  align-self: flex-start; background: var(--grau); border-left: 3px solid var(--rot); color: var(--text);
}
.marlene-msg-kunde {
  align-self: flex-end; background: var(--rot); color: var(--weiss); border-left: none;
}
.marlene-msg-system {
  align-self: center; background: transparent; color: var(--grau-muted); font-size: 0.78rem;
  font-style: italic; padding: 0.3rem 0;
}
.marlene-msg-sender {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 0.3rem; opacity: 0.7;
}
.marlene-typing {
  align-self: flex-start; padding: 0.8rem 1rem; background: var(--grau); border-left: 3px solid var(--rot);
  border-radius: var(--radius); font-size: 0.85rem; color: var(--grau-muted); font-style: italic;
}
.marlene-typing-dots::after {
  content: ''; animation: marlene-dots 1.5s infinite;
}
@keyframes marlene-dots {
  0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; }
}

.marlene-input-area {
  border-top: 1px solid var(--grau); padding-top: 0.8rem; margin-top: auto;
}
.marlene-input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.marlene-input {
  flex: 1; border: 1px solid var(--grau); border-radius: var(--radius); padding: 0.6rem 0.8rem;
  font-size: 0.88rem; font-family: 'DM Sans', sans-serif; resize: none; min-height: 42px;
  max-height: 120px; line-height: 1.5;
}
.marlene-input:focus { outline: none; border-color: var(--rot); }
.marlene-send {
  width: 42px; height: 42px; border-radius: var(--radius); background: var(--rot); color: var(--weiss);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s;
}
.marlene-send:hover { background: var(--rot-dark, #b00218); }
.marlene-send:disabled { background: var(--grau-muted); cursor: default; }
.marlene-input-options {
  display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem;
}
.marlene-upload-btn {
  display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--grau-muted);
  cursor: pointer;
}
.marlene-upload-btn:hover { color: var(--rot); }
.marlene-finish-btn {
  margin-left: auto; background: none; border: 1px solid var(--rot); color: var(--rot);
  border-radius: var(--radius); padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.marlene-finish-btn:hover { background: var(--rot); color: var(--weiss); }

/* Module Detail (aufklappbar) */
.module-detail { display: none; }
.module-detail.open { display: block; }

.lead-campaign-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rot); background: rgba(208,2,27,0.06); padding: 0.15em 0.5em;
  border-radius: 3px; border: 1px solid rgba(208,2,27,0.15);
}

.ld-section { margin-bottom: 1.5rem; }
.ld-section h4 {
  font-size: 0.95rem; color: var(--text); margin-bottom: 0.6rem;
  padding-bottom: 0.3rem; border-bottom: 2px solid var(--rot); display: inline-block;
}
.ld-contact { font-size: 0.85rem; }
.ld-contact > div { padding: 0.3rem 0; }
.ld-label { color: var(--grau-muted); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; display: inline-block; width: 70px; }

/* Timeline */
.ld-timeline { position: relative; padding-left: 1.5rem; }
.ld-timeline::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px; background: var(--grau-mid);
}
.ld-timeline-item { position: relative; margin-bottom: 1.2rem; }
.ld-timeline-dot {
  position: absolute; left: -1.5rem; top: 0.3rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--rot); border: 2px solid var(--weiss);
  box-shadow: 0 0 0 2px var(--grau-mid);
}
.ld-timeline-body { font-size: 0.85rem; }
.ld-timeline-top { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ld-timeline-date { font-size: 0.72rem; color: var(--grau-muted); }
.ld-timeline-action { font-weight: 500; margin-top: 0.15rem; }
.ld-timeline-channel { font-weight: 400; color: var(--grau-muted); font-size: 0.78rem; }
.ld-timeline-content {
  margin-top: 0.4rem; padding: 0.6rem; background: var(--grau); border-radius: var(--radius);
  font-size: 0.82rem; line-height: 1.5;
}
.ld-timeline-content p { color: var(--grau-muted); margin-top: 0.3rem; font-weight: 300; }

@media (max-width: 768px) {
  .lead-detail-panel { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
  .cd-overview-grid { grid-template-columns: 1fr; }
  .cd-meta-badges { gap: 0.3rem; }
  .cd-actions { width: 100%; }
  .cd-actions .btn { width: 100%; justify-content: center; }
  .cd-content-actions { flex-wrap: wrap; }
  .cd-sa-kpis { grid-template-columns: repeat(2, 1fr); }
  .cd-sa-team-list { gap: 0.5rem; }
  .cd-sa-left { flex-wrap: wrap; }
  .cd-sa-date { margin-left: 0; width: 100%; }
  .dept-grid { grid-template-columns: 1fr; }
  .dept-panel { width: 100%; max-width: 100%; }
}

/* =============================================
   v2: Sidebar Additions
   ============================================= */
.sidebar-count {
  margin-left: auto; font-size: 0.72rem; font-weight: 600;
  color: var(--grau-muted); background: var(--grau); padding: 0.1em 0.5em;
  border-radius: 8px; min-width: 18px; text-align: center;
}
.sidebar-count-red { color: var(--rot); background: rgba(208,2,27,0.08); }
.sidebar-sub {
  padding-left: 2.6rem; font-size: 0.78rem; color: var(--grau-muted);
}
.sidebar-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-right: 0.3rem;
}
.sidebar-dot-warning { background: #F59E0B; }
.status-warning { background: #F59E0B; }
.status-cancelled { background: var(--rot); }

/* =============================================
   v2: Campaign Cards (Dashboard + List)
   ============================================= */
.campaign-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.campaign-card {
  background: var(--weiss); border-radius: var(--radius); padding: 1.4rem;
  border: 1px solid var(--grau-mid); cursor: pointer;
  transition: all var(--transition); position: relative;
}
.campaign-card:hover {
  border-color: var(--rot); box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.campaign-card-top {
  display: flex; gap: 0.4rem; margin-bottom: 0.8rem; flex-wrap: wrap;
}
.campaign-card-title {
  font-size: 1.3rem; color: var(--text); margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}
.campaign-card-modules {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem;
}
.campaign-card-stats {
  display: flex; gap: 1.5rem; font-size: 0.78rem; color: var(--grau-muted);
  border-top: 1px solid var(--grau-mid); padding-top: 0.8rem;
}

/* Module Badges (in Campaign Cards) */
.module-badge {
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.2em 0.6em; border-radius: 3px;
  white-space: nowrap;
}
.module-badge-active {
  background: rgba(208,2,27,0.06); color: var(--rot); border: 1px solid rgba(208,2,27,0.15);
}
.module-badge-muted {
  background: var(--grau); color: var(--grau-muted); border: 1px solid var(--grau-mid);
  text-decoration: line-through;
}

/* =============================================
   v2: Badge Additions
   ============================================= */
.badge-warning {
  background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A;
}
.badge-draft {
  background: var(--grau); color: var(--grau-muted); border: 1px solid var(--grau-mid);
}

/* =============================================
   v2: KPI Grid (5 columns for Admin)
   ============================================= */
.kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kpi-grid-5 { grid-template-columns: 1fr 1fr; } }

.kpi-mini-label { font-size: 0.82rem; color: var(--grau-muted); }

/* =============================================
   v2: View Section Headers
   ============================================= */
.view-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}

/* =============================================
   v2: Empty State
   ============================================= */
/* M1: Einheitliche Empty-State-Komponente */
.empty-state {
  text-align: center; padding: 3rem 2rem; color: var(--grau-muted);
  background: var(--weiss); border-radius: var(--radius); border: 1px dashed var(--grau-mid);
}
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.4; }
.empty-state h4 { color: var(--text); font-size: 1rem; margin-bottom: 0.3rem; }
.empty-state p { font-size: 0.85rem; margin-bottom: 0.8rem; }
.empty-state .btn { margin-top: 0.5rem; }

/* =============================================
   v2: Filter Buttons
   ============================================= */
.filter-btn {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 20px;
  background: var(--weiss); color: var(--grau-muted); border: 1px solid var(--grau-mid);
  cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--rot); color: var(--rot); }
.filter-active { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
.filter-active:hover { background: var(--rot-dark); color: var(--weiss); }

/* =============================================
   v2: Responsive (Tablet + Mobile)
   ============================================= */
@media (max-width: 1024px) {
  .campaign-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .campaign-card-stats { flex-wrap: wrap; gap: 0.8rem; }
}
@media (max-width: 768px) {
  .campaign-grid { grid-template-columns: 1fr; }
  .campaign-card-title { font-size: 1.15rem; }
  .campaign-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; }
  .filter-btn { flex-shrink: 0; }
  .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .data-table { font-size: 0.8rem; }
  .data-table th, .data-table td { padding: 0.5rem 0.4rem; }
  .view-section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .page-title-row { flex-direction: column; align-items: flex-start; }
  .queue-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .empty-state { padding: 2rem 1.2rem; }
}
@media (max-width: 480px) {
  .campaign-card { padding: 1rem; }
  .campaign-card-modules { gap: 0.25rem; }
  .module-badge { font-size: 0.58rem; padding: 0.15em 0.45em; }
  .kpi-grid-5 { grid-template-columns: 1fr; }
  .badge { font-size: 0.6rem; padding: 0.15em 0.4em; }
}

/* =============================================
   Dashboard v2: Enhanced KPI Cards
   ============================================= */
.kpi-card {
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--grau-mid); transition: background var(--transition);
}
.kpi-card:hover::after { background: var(--rot); }
.kpi-clickable { cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); }
.kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-trend { font-size: 0.72rem; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.kpi-trend-up { color: var(--success); }
.kpi-trend-down { color: var(--rot); }
.kpi-trend-neutral { color: var(--grau-muted); }
.kpi-sparkline { height: 30px; margin-top: 0.5rem; }

/* =============================================
   Dashboard v2: Chart Containers
   ============================================= */
.chart-card {
  background: var(--weiss); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  padding: var(--sp-lg); transition: border-color var(--transition), box-shadow var(--transition);
}
.chart-card:hover { box-shadow: var(--shadow-md); }
.chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-lg);
}
.chart-card-title { font-size: 1.1rem; color: var(--text); }
.chart-card-subtitle { font-size: 0.72rem; color: var(--grau-muted); letter-spacing: 0.05em; }
.chart-card-actions { display: flex; gap: var(--sp-sm); }
.chart-card-body { position: relative; }
.chart-wrap { position: relative; width: 100%; padding-bottom: 0.5rem; }
.chart-wrap-sm { height: 200px; }
.chart-wrap-md { height: 280px; }
.chart-wrap-lg { height: 340px; }

/* Dashboard Grid Layouts */
.dash-grid { display: grid; gap: var(--sp-lg); margin-bottom: var(--sp-xl); }
.dash-grid-2 { grid-template-columns: 1fr 1fr; }
.dash-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.dash-grid-2-1 { grid-template-columns: 2fr 1fr; }
.dash-grid-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1024px) {
  .dash-grid-3 { grid-template-columns: 1fr 1fr; }
  .dash-grid-2-1, .dash-grid-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-grid-2, .dash-grid-3 { grid-template-columns: 1fr; }
}

/* =============================================
   Dashboard v2: Activity Feed
   ============================================= */
.activity-feed { max-height: 360px; overflow-y: auto; }
.activity-item {
  display: flex; gap: 0.8rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--grau); font-size: 0.85rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 0.4rem;
}
.activity-dot-new { background: var(--rot); }
.activity-dot-success { background: var(--success); }
.activity-dot-warning { background: var(--warning); }
.activity-dot-neutral { background: var(--grau-muted); }
.activity-time { font-size: 0.7rem; color: var(--grau-muted); white-space: nowrap; margin-left: auto; flex-shrink: 0; }
.activity-text { flex: 1; line-height: 1.5; }
.activity-text strong { font-weight: 600; }

/* =============================================
   Dashboard v2: Conversion Funnel
   ============================================= */
.funnel { display: flex; flex-direction: column; gap: var(--sp-xs); }
.funnel-step {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 0.6rem 0;
}
.funnel-bar-wrap { flex: 1; height: 28px; background: var(--grau); border-radius: var(--radius-sm); overflow: hidden; }
.funnel-bar {
  height: 100%; border-radius: var(--radius-sm);
  background: var(--rot); transition: width var(--transition-slow);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 0.5rem; min-width: 2rem;
}
.funnel-bar-value { font-size: 0.72rem; font-weight: 700; color: var(--weiss); }
.funnel-label { font-size: 0.78rem; font-weight: 500; min-width: 120px; color: var(--text); }
.funnel-count { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; min-width: 50px; text-align: right; }

/* Funnel color steps */
.funnel-step:nth-child(1) .funnel-bar { background: var(--rot); }
.funnel-step:nth-child(2) .funnel-bar { background: var(--rot); opacity: 0.8; }
.funnel-step:nth-child(3) .funnel-bar { background: var(--rot); opacity: 0.6; }
.funnel-step:nth-child(4) .funnel-bar { background: var(--rot); opacity: 0.45; }
.funnel-step:nth-child(5) .funnel-bar { background: var(--success); }

/* =============================================
   Dashboard v2: Stat Row (compact metrics)
   ============================================= */
.stat-row { display: flex; gap: var(--sp-xl); flex-wrap: wrap; padding: var(--sp-md) 0; }
.stat-item { display: flex; flex-direction: column; }
.stat-item-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grau-muted); font-weight: 600; }
.stat-item-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; line-height: 1.1; }

/* Stat Row List (vertikale Key-Value-Liste) */
.stat-row-list { display: flex; flex-direction: column; gap: 0; padding: var(--sp-sm) 0; }
.stat-row-list .stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--grau);
  gap: var(--sp-md); flex-wrap: nowrap;
}
.stat-row-list .stat-row:last-child { border-bottom: none; }
.stat-row-list .stat-row span { font-size: 0.88rem; color: var(--text); }
.stat-row-list .stat-row strong { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; }

/* =============================================
   Dashboard v2: Progress Ring (Sachbearbeiter)
   ============================================= */
.progress-ring-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-md);
  padding: var(--sp-xl) 0;
}
.progress-ring { position: relative; width: 140px; height: 140px; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--grau); stroke-width: 8; }
.progress-ring-fill { fill: none; stroke: var(--rot); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset var(--transition-slow); }
.progress-ring-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.progress-ring-value { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; line-height: 1; }
.progress-ring-label { font-size: 0.72rem; color: var(--grau-muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* =============================================
   Dashboard v2: Token Budget Gauge
   ============================================= */
.token-gauge { display: flex; align-items: center; gap: var(--sp-md); padding: 0.5rem 0; }
.token-gauge-bar { flex: 1; height: 10px; background: var(--grau); border-radius: 5px; overflow: hidden; }
.token-gauge-fill { height: 100%; border-radius: 5px; transition: width var(--transition-slow); }
.token-gauge-fill-ok { background: var(--success); }
.token-gauge-fill-warn { background: var(--warning); }
.token-gauge-fill-critical { background: var(--rot); }
.token-gauge-label { font-size: 0.78rem; min-width: 100px; }
.token-gauge-value { font-size: 0.78rem; color: var(--grau-muted); white-space: nowrap; }

/* =============================================
   Dashboard v2: Ranking List
   ============================================= */
.ranking-list { counter-reset: rank; }
.ranking-item {
  display: flex; align-items: center; gap: var(--sp-md); padding: 0.6rem 0;
  border-bottom: 1px solid var(--grau); counter-increment: rank;
}
.ranking-item:last-child { border-bottom: none; }
.ranking-pos {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: var(--grau-muted);
  min-width: 24px; text-align: center;
}
.ranking-pos::before { content: counter(rank); }
.ranking-item:nth-child(-n+3) .ranking-pos { color: var(--rot); }
.ranking-name { flex: 1; font-size: 0.88rem; font-weight: 500; }
.ranking-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.ranking-bar { width: 80px; height: 6px; background: var(--grau); border-radius: 3px; overflow: hidden; }
.ranking-bar-fill { height: 100%; background: var(--rot); border-radius: 3px; }

/* =============================================
   Utility: Spacing & Layout helpers
   ============================================= */
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.text-muted { color: var(--grau-muted); }
.text-rot { color: var(--rot); }
.text-success { color: var(--success); }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }

/* =============================================
   Support FAB + Modal
   ============================================= */
.support-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rot); color: var(--weiss); border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(208,2,27,0.35);
  transition: all var(--transition); cursor: pointer;
}
.support-fab:hover {
  background: var(--rot-dark); transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(208,2,27,0.45);
}
.support-fab svg { stroke: var(--weiss); }

.support-options { display: flex; flex-direction: column; gap: var(--sp-sm); }
.support-option {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md); border: 1px solid var(--grau-mid); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: all var(--transition);
}
.support-option:hover { border-color: var(--rot); background: var(--rot-bg); }
.support-option-icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--grau);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.support-option:hover .support-option-icon { background: rgba(208,2,27,0.1); }
.support-option-icon svg { stroke: var(--text); }
.support-option:hover .support-option-icon svg { stroke: var(--rot); }
.support-option strong { display: block; font-size: 0.88rem; font-weight: 600; }
.support-option span { font-size: 0.78rem; color: var(--grau-muted); }

/* =============================================
   Help Panel (Slide-in from right)
   ============================================= */
.header-help-btn {
  position: relative; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; transition: background var(--transition);
}
.header-help-btn:hover { background: rgba(255,255,255,0.1); }
.header-help-btn svg { stroke: rgba(255,255,255,0.7); }

.help-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw;
  background: var(--weiss); z-index: 210; box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform 0.3s ease;
  display: flex; flex-direction: column;
}
.help-panel.open { transform: translateX(0); }
.help-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 209;
}
.help-panel.open ~ .help-panel-overlay { display: block; }

.help-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-lg); border-bottom: 1px solid var(--grau-mid); flex-shrink: 0;
}
.help-panel-header h3 { margin: 0; font-size: 1.3rem; }

.help-panel-body {
  flex: 1; overflow-y: auto; padding: var(--sp-lg);
}

.help-search-wrap { margin-bottom: var(--sp-lg); }

.help-section { margin-bottom: var(--sp-lg); }
.help-section-title {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rot); font-weight: 600; margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs); border-bottom: 1px solid var(--grau);
}

.help-item {
  border: 1px solid var(--grau-mid); border-radius: var(--radius);
  margin-bottom: var(--sp-sm); overflow: hidden;
  transition: border-color var(--transition);
}
.help-item:hover { border-color: var(--rot-border); }
.help-item.help-hidden { display: none; }

.help-item-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem var(--sp-md); background: none; border: none;
  font-size: 0.88rem; font-weight: 500; color: var(--text); cursor: pointer;
  text-align: left; gap: var(--sp-sm);
}
.help-item-toggle:hover { color: var(--rot); }
.help-chevron { flex-shrink: 0; transition: transform 0.2s ease; stroke: var(--grau-muted); }
.help-item.open .help-chevron { transform: rotate(180deg); stroke: var(--rot); }

.help-item-content {
  display: none; padding: 0 var(--sp-md) var(--sp-md);
  font-size: 0.85rem; color: var(--text); line-height: 1.7;
}
.help-item.open .help-item-content { display: block; }

.help-panel-footer {
  padding: var(--sp-lg); border-top: 1px solid var(--grau-mid);
  text-align: center; flex-shrink: 0;
}
.help-panel-footer p { font-size: 0.82rem; color: var(--grau-muted); margin-bottom: var(--sp-sm); }

@media (max-width: 480px) {
  .help-panel { width: 100%; max-width: 100%; }
  .support-fab { bottom: 1rem; right: 1rem; width: 46px; height: 46px; }
}

/* =============================================
   Layout-Fixes: Gleichmaessige Kachel-Hoehe
   ============================================= */
.kpi-grid { align-items: stretch; }
.kpi-card { display: flex; flex-direction: column; }
.kpi-card .kpi-trend { margin-top: auto; }

.dash-grid { align-items: stretch; }
.chart-card { display: flex; flex-direction: column; }
.chart-card-header + * { flex: 1; }

.campaign-grid { align-items: stretch; }
.campaign-card { display: flex; flex-direction: column; }
.campaign-card-stats { margin-top: auto; }
.campaign-card-module-pills { flex: 1; align-content: flex-start; }
.app-footer-nav a.active { color: var(--rot); font-weight: 600; }

/* =============================================
   Legal Pages (Impressum, Datenschutz, AGB)
   ============================================= */
.legal-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h); background: var(--text); color: var(--weiss);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}
.legal-header-inner { display: flex; align-items: center; gap: 1rem; }

.legal-main {
  max-width: 800px; margin: 0 auto;
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg);
}
.legal-content { flex: 1; }

.legal-title {
  font-size: 2.2rem; color: var(--text); margin-bottom: var(--sp-xs);
  padding-bottom: var(--sp-md); border-bottom: 3px solid var(--rot);
}
.legal-subtitle {
  font-size: 0.88rem; color: var(--grau-muted); margin-bottom: var(--sp-xl);
}

.legal-section { margin-bottom: var(--sp-xl); }
.legal-section h2 {
  font-size: 1.15rem; color: var(--text); margin-bottom: var(--sp-sm);
}
.legal-section p {
  font-size: 0.9rem; line-height: 1.8; color: var(--text); margin-bottom: var(--sp-sm);
}
.legal-section ul {
  padding-left: 1.5rem; margin-bottom: var(--sp-sm);
  list-style: disc;
}
.legal-section li {
  font-size: 0.9rem; line-height: 1.8; color: var(--text); margin-bottom: var(--sp-xs);
}

.legal-notice {
  background: var(--grau); border-left: 3px solid var(--rot);
  padding: var(--sp-md) var(--sp-lg); border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--sp-lg) 0;
}
.legal-notice p {
  font-size: 0.85rem; color: var(--grau-muted); margin: 0; line-height: 1.6;
}

.legal-footer {
  margin-top: var(--sp-2xl); padding-top: var(--sp-md);
  border-top: 1px solid var(--grau-mid);
}

@media (max-width: 768px) {
  .legal-main { padding: var(--sp-lg) var(--sp-md); }
  .legal-title { font-size: 1.6rem; }
}

/* M8: Icon-Picker */
.icon-picker { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.icon-pick { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--grau-mid); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); background: var(--grau); }
.icon-pick:hover { border-color: var(--rot); background: var(--rot-bg); }
.icon-pick-active { border-color: var(--rot); background: var(--rot-bg); box-shadow: 0 0 0 2px var(--rot); }
.icon-pick .sidebar-icon { width: 18px; height: 18px; }

/* N5: Collapsible Sektionen */
.collapsible > *:not(.chart-card-header) { transition: max-height 0.3s ease, opacity 0.2s ease; overflow: hidden; }
.collapsible.collapsed > *:not(.chart-card-header) { max-height: 0; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.collapse-icon { font-size: 0.7rem; transition: transform 0.2s ease; color: var(--grau-muted); }
.collapsed .collapse-icon { transform: rotate(-90deg); }

/* N2: Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --weiss: #1A1A1A;
    --grau: #242424;
    --grau-mid: #3A3A3A;
    --grau-muted: #888888;
    --text: #E8E8E8;
    --rot-bg: rgba(208,2,27,0.12);
    --rot-border: rgba(208,2,27,0.25);
    --success-bg: rgba(34,197,94,0.15);
    --warning-bg: rgba(245,158,11,0.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.3);
  }
  .app-header { background: #111; }
  .badge-active, .badge-success { background: rgba(34,197,94,0.15); color: #4ADE80; }
  .badge-pending { background: rgba(245,158,11,0.15); color: #FBBF24; }
  .badge-danger { background: rgba(208,2,27,0.15); color: #F87171; }
  .badge-info { background: rgba(59,130,246,0.15); color: #60A5FA; }
  .badge-warning { background: rgba(245,158,11,0.15); color: #FBBF24; border-color: rgba(245,158,11,0.3); }
  .badge-draft, .badge-paused { background: #333; color: #888; border-color: #444; }
  .card { background: #1E1E1E; border: 1px solid #333; }
  .form-input, .form-select, .form-textarea { background: #2A2A2A; border-color: #444; color: #E8E8E8; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { background: #1E1E1E; }
  .modal { background: #1E1E1E; }
  .modal-overlay { background: rgba(0,0,0,0.7); }
  .data-table tr:hover td { background: #2A2A2A; }
  .data-table td { border-bottom-color: #333; }
  .app-sidebar { background: #111; }
  .sidebar-item:hover { background: #2A2A2A; }
  .sidebar-item.active { background: var(--rot-bg); }
  .empty-state { background: #1E1E1E; border-color: #444; }
  .toast { background: #333; }
  .kpi-card { background: #1E1E1E; }
  .cookie-banner { background: #333; }
  img, svg { opacity: 0.9; }
}

/* M32: Print-Stylesheet */
@media print {
  .app-sidebar, .app-header, .sidebar-overlay, .toast, .cookie-banner,
  .hamburger-btn, .help-panel, .help-fab, .modal-overlay, .lead-detail-panel,
  #imageModal, #previewModal, #revisionModal { display: none !important; }
  .app-main { margin-left: 0 !important; padding-top: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .btn { display: none; }
  body { font-size: 12pt; color: #000; }
  a { text-decoration: none; color: #000; }
}