/* ============================================================
   Dashboard-Layer (Phase 2) — baut auf css/style.css auf
   ============================================================ */

/* Login-Page */
.dashboard-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg-primary);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.login-card img.login-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background: var(--bg-secondary, var(--surface-2));
}
.login-card img.login-photo:not([src]) { visibility: hidden; }
.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.login-card p.subtle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: -10px 0 6px;
  text-align: center;
}
.login-card form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
}
.login-card input:focus { border-color: var(--text-primary); }
.login-error {
  background: var(--dna-red-tint);
  color: var(--err);
  border-radius: var(--radius-button);
  padding: 10px 14px;
  font-size: 13px;
  display: none;
}
.login-error.show { display: block; }

/* --- Login mit der Marke der Regionaldirektion (Phase 281) ---
   Greift nur über die Zusatz-Klasse .login-marke, also ausschließlich auf
   dashboard/index.html. welcome.html nutzt dieselbe .login-card ohne diese
   Klasse und bleibt dadurch unangetastet. */
.login-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.login-card.login-marke {
  position: relative;
  overflow: visible;
  margin-top: 33px;          /* Platz für das halb überstehende Medaillon */
  padding: 48px 28px 28px;
  gap: 16px;
  border: 1px solid var(--border-light);
}
.login-crest {
  position: absolute;
  top: -33px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
}
.login-crest img {
  display: block;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 3px solid var(--bg-secondary);
  box-shadow: 0 6px 18px rgba(19, 25, 29, 0.18);
}
.login-crest .crest-mark { width: 100%; height: 100%; }
.login-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.login-card.login-marke h1 { font-size: 20px; letter-spacing: -0.01em; }
.login-rd {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}
.login-goldrule { width: 30px; height: 2px; border-radius: 2px; background: var(--accent); }
.login-card.login-marke input { border-radius: 10px; background: #FCFBF9; }
.login-card.login-marke input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-card.login-marke .btn-primary {
  border-radius: 999px;
  padding: 13px;
  font-weight: 600;
}
.login-foot { margin: 0; font-size: 11px; color: var(--ink-soft); text-align: center; }
.login-legal {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.login-legal p { margin: 0; }
.login-legal span { margin: 0 6px; color: var(--hairline-strong); }
.login-legal a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.login-legal a:hover { color: var(--text-primary); border-bottom-color: var(--hairline-strong); }


/* App-Shell (overview / empfehlungen / detail) */
.app-shell {
  min-height: 100vh;
  padding: 0 0 90px;
  background: var(--bg-primary);
}
.app-header {
  background: var(--bg-secondary);
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-header-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  /* Ruhiger Platzhalter, solange das Foto lädt — statt eines leeren Lochs */
  background: var(--bg-secondary, var(--surface-2));
}
/* Ohne Quelle gar nichts zeigen (kein Kaputt-Bild-Symbol) */
.app-header-photo:not([src]) { visibility: hidden; }
.app-header-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}
.app-header-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.1;
}
.btn-logout {
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-hub-back:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
@media (max-width: 480px) {
  .btn-hub-back span.lbl { display: none; }
  .btn-hub-back { padding: 8px 10px; }
}

/* PHASE 26 - Mobile-Nav-Cleanup: auf <540px Header-Logout/Back via Hamburger-Drawer */
@media (max-width: 540px) {
  .app-header { padding-right: 64px; }
  .app-header .btn-logout,
  .app-header .btn-hub-back { display: none !important; }
  .detail-back { font-size: 13px; }
}

.app-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 6px 0 -4px 4px;
}


/* KPI-Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kpi-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.kpi-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.kpi-value.gold { color: var(--accent-gold); }
@media (min-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}


/* Activity feed */
.feed {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.feed-row:hover { background: var(--bg-primary); }
.feed-row:last-child { border-bottom: none; }
.feed-main { flex: 1; min-width: 0; }
.feed-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-arrow {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-size: 18px;
}

.empty-state {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}


/* Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-offen          { background: var(--surface-2); color: var(--ink-muted); }
.badge-anrufwunsch    { background: var(--dna-gold-tint-2); color: var(--accent-hover); }
.badge-kontaktiert    { background: var(--dna-petrol-tint); color: var(--marine); }
.badge-kunde          { background: var(--dna-petrol-tint); color: var(--ok); }
.badge-kein_interesse { background: var(--dna-red-tint); color: var(--err); }

/* Phase 209: Hinweis dort, wo das Admin-Recht mehr zeigt als die eigenen
   Daten. Leise gehalten: Es ist eine Einordnung, keine Warnung. */
.admin-sicht-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(120, 113, 100, 0.07);
  border: 1px solid rgba(120, 113, 100, 0.14);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, var(--ink-muted));
}
.admin-sicht-hinweis::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent-gold, var(--accent));
}

/* Phase 208: Testdatensatz. Bewusst auffällig gestreift, damit man ihn im
   Vorbeigehen erkennt und nicht mit einem echten Vorgang verwechselt. */
.badge-test {
  background: repeating-linear-gradient(
    135deg, var(--dna-gold-tint-2), var(--dna-gold-tint-2) 6px, var(--dna-gold-tint-2) 6px, var(--dna-gold-tint-2) 12px);
  color: var(--accent-hover);
  border: 1px solid var(--accent);
}


/* 7-Tage-Chart */
.chart-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.chart-bar {
  width: 100%;
  background: var(--text-primary);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
}
.chart-bar.zero { background: var(--border-light); }
.chart-val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.chart-labels {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
}


/* Funnel */
.funnel-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.funnel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.funnel-row:last-child { border-bottom: none; }
.funnel-row .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  width: 110px;
  flex-shrink: 0;
}
.funnel-row .bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
}
.funnel-row .bar {
  height: 100%;
  background: var(--text-primary);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.funnel-row .bar.gold { background: var(--accent-gold); }
.funnel-row .value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}
.funnel-row .pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  width: 46px;
  text-align: right;
  flex-shrink: 0;
}

/* Search + filter (Empfehlungen-Liste) */
.search-bar {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.search-bar input {
  width: 100%;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  background: transparent;
  color: var(--text-primary);
}
.filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.filter-tab.active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}


/* Bottom-Nav (overview + empfehlungen) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  display: flex;
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}
.bottom-nav a.active { color: var(--text-primary); }
.bottom-nav a span.icon {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}


/* Detail-Page */
.detail-back {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.detail-headline {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
  word-break: break-word;
}
.detail-info {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 4px 0;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row span.label {
  color: var(--text-secondary);
  font-weight: 600;
}
.detail-row span.value {
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.detail-field {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-field select,
.detail-field textarea {
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  padding: 10px 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  min-height: 90px;
}
.detail-field select { min-height: 0; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%231d1d1f' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.detail-actions .btn { width: 100%; }


.toast-dash {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-button);
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.toast-dash.show { opacity: 1; }

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  border-top-color: var(--text-primary);
  animation: spin 0.7s linear infinite;
  margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* PHASE 13 - GLOBALE APP-NAVIGATION
   Sidebar Desktop (1024px+) - Bottom-Nav Mobile (3 Items) - Hamburger Drawer
*/

.nav-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: 24px 16px;
  display: none;
  flex-direction: column;
  gap: 28px;
  z-index: 80;
}
.nav-brand {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 0 8px;
}
.nav-brand-mark {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.nav-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-brand-name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.035em;
}
.nav-brand-signature {
  font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent-hover);
  letter-spacing: -0.02em;
}
.nav-brand-signature > span {
  display: block;
}
.nav-brand-signature > span:first-child {
  font-size: 9px;
  opacity: 0.84;
}
.nav-brand-signature > span:last-child {
  margin-top: 1px;
  font-size: 10.5px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.nav-group {
  display: flex;
  flex-direction: column;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.nav-item:hover {
  background: rgba(200,170,34,0.07);
  color: var(--ink);
}
.nav-item.active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-hover);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
/* App-Version-Pill in der Sidebar (von nav.js gerendert; muss überall geladen sein, wo die Nav erscheint) */
.nav-version {
  display: block;
  margin: 16px 14px 12px;
  padding: 6px 10px;
  text-align: center;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary, var(--ink-muted));
  background: var(--hairline, rgba(0,0,0,0.04));
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.nav-version:hover {
  background: var(--gold-soft, rgba(200,170,34,0.16));
  color: var(--ink, var(--ink));
}
body.nav-collapsed .nav-version {
  margin: 16px 6px 12px;
  padding: 6px 0;
  font-size: 10px;
}
/* Benachrichtigungs-Badge (z. B. offene Prämien) am Nav-Item */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(190,120,56,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  animation: navBadgePulse 2.6s ease-in-out infinite;
}
@keyframes navBadgePulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(190,120,56,0.40), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0 rgba(200,170,34,0.0); }
  50%      { box-shadow: 0 2px 8px rgba(190,120,56,0.55), inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 4px rgba(200,170,34,0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-badge { animation: none; }
}

/* Phase 211: Neuigkeit statt Aufgabe. Was beim Hinsehen verschwindet, muss
   nicht pulsieren — sonst blinken drei Pillen gleichzeitig um Aufmerksamkeit.
   Der Puls bleibt dem vorbehalten, was wirklich auf Erledigung wartet. */
.nav-badge-neu {
  animation: none;
  background: linear-gradient(135deg, var(--marine) 0%, var(--marine) 100%);
  box-shadow: 0 2px 5px rgba(74,98,130,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
}

body.nav-collapsed .nav-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 0;
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  font-size: 0;
  box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 6px rgba(200,170,34,0.5);
}
.nav-group.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: inherit;
}
.nav-item.active .nav-item-icon { color: var(--accent-hover); }

/* Item-Zeile mit Chevron rechts (nur bei Gruppen mit Unterpunkten) */
.nav-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-item-row .nav-item {
  flex: 1;
  min-width: 0;
}
.nav-sub-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .18s ease, color .18s ease;
}
.nav-sub-toggle:hover { background: rgba(200,170,34,0.12); color: var(--ink); }
.nav-sub-toggle svg { transition: transform .25s cubic-bezier(0.22,1,0.36,1); }
.nav-group.open .nav-sub-toggle svg { transform: rotate(180deg); }

/* Untermenü: weiches Klick-Accordion (Grid-Rows 0fr↔1fr), kein Hover-Aufklappen */
.nav-subs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(0.22,1,0.36,1);
}
.nav-group.open .nav-subs {
  grid-template-rows: 1fr;
}
.nav-subs-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 28px;
}
.nav-group.open .nav-subs-inner {
  padding: 4px 0 2px;
}
.nav-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--transition), background var(--transition);
}
.nav-sub:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.nav-sub-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  color: var(--ink-soft);
}
/* Gesperrter Unterpunkt: steht da, ist aber kein Link (siehe `bald` in
   js/nav.js). Kein Hover-Wechsel, kein Zeigefinger — sonst sieht es aus
   wie ein Link, der nicht funktioniert. */
.nav-sub-bald {
  cursor: default;
  opacity: 0.62;
  gap: 6px;
}
.nav-sub-bald:hover { color: var(--ink-soft); background: transparent; }
.nav-sub-marke {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 8.5px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
}
/* Anmerkung zur schmalen Leiste (200 Pixel, zwischen 1024 und 1280):
   Dort braucht „KIDZ-Konzept" samt Marke 124 Pixel, Platz sind 117. Der
   Punkt steht deshalb zweizeilig — so wie „Sommerfest-Gewinnspiel"
   daneben. Erzwungene Einzeiligkeit (nowrap) liefe über den Rand hinaus,
   deshalb bewusst nicht. */

/* --- Mobile Bottom-Nav: in Phase 37 entfernt, in Phase 165 bewusst
   zurückgeholt (Styles am Dateiende). Die alte !important-Sperre stand
   hier und hat die neue Leiste unsichtbar gemacht — weg damit. --- */
.navbottom-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.navbottom-item.active {
  color: var(--ink);
}
.navbottom-item.active .navbottom-icon {
  color: var(--accent-hover);
}
.navbottom-icon {
  display: inline-flex;
}

/* --- Hamburger (Mobile only) --- */
.nav-hamburger {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 110;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}

/* --- Drawer (Mobile/Tablet only) · Slide-In von links --- */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(19,25,29, 0);
  z-index: 105;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  transition: background .22s ease;
}
.nav-drawer[hidden] { display: none; }
body.nav-drawer-open .nav-drawer {
  background: rgba(19,25,29, 0.45);
  pointer-events: auto;
}
.nav-drawer-panel {
  position: relative;
  width: 85%;
  max-width: 320px;
  background: var(--surface);
  height: 100%;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 88px 16px 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.32,.72,.4,1);
}
body.nav-drawer-open .nav-drawer-panel {
  transform: translateX(0);
}
.nav-drawer .nav-list { flex: 1; }
.nav-drawer .nav-brand {
  position: absolute;
  top: 18px;
  left: 18px;
}
.nav-drawer-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 24px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
}
.nav-drawer-logout:hover { border-color: var(--accent); }
.nav-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}

/* === Phase 37 · Responsive Sidebar System === */

/* Default <1024px: Sidebar hidden, Hamburger sichtbar, Drawer als Slide-In */
.nav-hamburger { display: inline-flex; }
body.has-app-nav { padding-bottom: env(safe-area-inset-bottom); }

/* Laptop ab 1024px: Sidebar persistent 200px */
@media (min-width: 1024px) {
  .nav-sidebar { display: flex; width: 200px; padding: 22px 14px; }
  .nav-hamburger { display: none; }
  body.has-app-nav { padding-left: 200px; }

  .nav-brand-name { font-size: 15.5px; }
  .nav-brand-signature > span:first-child { font-size: 8.5px; }
  .nav-brand-signature > span:last-child { font-size: 9.75px; }
}

/* Desktop ab 1280px: Sidebar persistent 240px */
@media (min-width: 1280px) {
  .nav-sidebar { width: 240px; padding: 24px 16px; }
  body.has-app-nav { padding-left: 240px; }

  .nav-brand-name { font-size: 17px; }
  .nav-brand-signature > span:first-child { font-size: 9px; }
  .nav-brand-signature > span:last-child { font-size: 10.5px; }
}

body.nav-drawer-open { overflow: hidden; }

/* PHASE 13 - Settings Page */
.settings-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 12px;
  letter-spacing: -0.01em;
}
.settings-section-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin: -6px 0 12px;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 6px 18px;
}
.settings-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.settings-row:last-child { border-bottom: none; }
.settings-key {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}
.settings-val {
  font-size: 14px;
  color: var(--ink);
  word-break: break-all;
}
.settings-val.mono { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; }

/* ---------- Phase 302 · Selbstpflege des eigenen Profils ---------- */
/* Bewusst im Raster der Einstellungen (settings-row) und mit denselben
   Tokens wie der Rest: kein zweites Formularbild neben dem bestehenden. */
.profil-feld {
  width: 100%;
  max-width: 420px;
  padding: 8px 11px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
}
.profil-feld:focus {
  outline: none;
  border-color: var(--champagne, #C9B98A);
}
.profil-feld:disabled { opacity: 0.55; cursor: not-allowed; }

.profil-hinweis {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.profil-foto-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profil-foto-vorschau {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
/* Büro- und Teamfoto sind Querformate, kein Porträt. */
.profil-foto-vorschau.breit {
  width: 132px; height: 74px;
  border-radius: 8px;
}
.profil-foto-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.profil-datei-knopf,
.profil-loesch-knopf {
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.profil-datei-knopf:hover,
.profil-loesch-knopf:hover { border-color: var(--ink-soft); }
.profil-loesch-knopf { color: var(--ink-muted); }

.profil-klapp > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  padding: 2px 0;
}
.profil-klapp-inhalt { padding-top: 12px; display: grid; gap: 18px; }
.profil-bild-block { display: grid; gap: 8px; }
.profil-bild-titel { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.settings-val.muted { color: var(--ink-soft); }
.settings-val.ok { color: var(--ok); }
.settings-val.fail { color: var(--err); }

.settings-vorlagen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.settings-vorlagen-2 { grid-template-columns: repeat(2, 1fr); }
.settings-tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--transition), transform var(--transition);
}
.settings-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.settings-tile-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.settings-tile-sub { font-size: 12px; color: var(--ink-muted); }
/* Noch gesperrte Vorschau: sichtbar, aber kein Link (siehe Kommentar im
   Markup). Kein Anheben beim Überfahren, sonst wirkt sie anklickbar. */
.settings-tile-bald { cursor: default; opacity: 0.62; }
.settings-tile-bald:hover { border-color: var(--hairline); transform: none; }

.settings-links {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.settings-links a {
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  transition: background var(--transition);
}
.settings-links a:last-child { border-bottom: none; }
.settings-links a:hover { background: var(--surface-2); color: var(--accent-hover); }

@media (max-width: 720px) {
  .settings-vorlagen { grid-template-columns: 1fr; }
  .settings-vorlagen-2 { grid-template-columns: 1fr; }
  .settings-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Phase 43 · Sidebar Icon-Only-Mode + Chevron-Toggle
   ============================================================ */

.nav-collapse-toggle {
  display: none;
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--surface);
  border: 1px solid rgba(232,229,224,0.6);
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  z-index: 81;
  opacity: 0.7;
  transition: opacity .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-collapse-toggle:hover {
  opacity: 1;
  background: var(--accent-bg);
  color: var(--accent-hover);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nav-collapse-toggle svg { display: block; pointer-events: none; }
.nav-collapse-icon-collapse { display: none; }
body.nav-collapsed .nav-collapse-icon-expand { display: none; }
body.nav-collapsed .nav-collapse-icon-collapse { display: inline-flex; align-items: center; }

@media (min-width: 1024px) {
  .nav-collapse-toggle { display: inline-flex; }

  /* Smooth Sidebar/Padding-Transitions */
  .nav-sidebar,
  .nav-sidebar * {
    transition: width .25s cubic-bezier(.32,.72,.4,1), padding .25s ease;
  }
  body.has-app-nav {
    transition: padding-left .25s cubic-bezier(.32,.72,.4,1);
  }

  /* Icon-Only-Mode: Sidebar wird 72px, Text verschwindet, Icons bleiben */
  body.nav-collapsed .nav-sidebar {
    width: 72px;
    padding: 24px 8px;
  }
  body.nav-collapsed .nav-brand-copy,
  body.nav-collapsed .nav-item-label {
    display: none;
  }
  body.nav-collapsed .nav-item {
    justify-content: center;
    padding: 11px 0;
  }
  body.nav-collapsed .nav-sub-toggle { display: none; }
  body.nav-collapsed .nav-subs { grid-template-rows: 0fr !important; }
  body.has-app-nav.nav-collapsed {
    padding-left: 72px !important;
  }
}

@media (min-width: 1280px) {
  body.nav-collapsed .nav-sidebar { width: 72px; }
  body.has-app-nav.nav-collapsed { padding-left: 72px !important; }
}

/* ============================================================
   Phase 46 · Top-Promotor-Card in Sidebar unten
   ============================================================ */

.nav-top-promoter {
  margin-top: auto;
  margin-bottom: 4px;
  padding: 10px 12px;
  background: rgba(200,170,34,0.06);
  border: 1px solid rgba(200,170,34,0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-top-promoter:hover {
  background: rgba(200,170,34,0.13);
  border-color: rgba(200,170,34,0.3);
}
.nav-tp-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(200,170,34,0.18);
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-tp-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.nav-tp-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
}
.nav-tp-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-tp-points {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-tp-arrow {
  color: var(--ink-muted);
  flex-shrink: 0;
  display: inline-flex;
}

/* Collapsed-Sidebar: nur Trophy-Icon zentriert */
body.nav-collapsed .nav-top-promoter {
  padding: 8px;
  justify-content: center;
  background: transparent;
  border-color: transparent;
}
body.nav-collapsed .nav-tp-text,
body.nav-collapsed .nav-tp-arrow {
  display: none;
}
body.nav-collapsed .nav-tp-icon {
  width: 36px;
  height: 36px;
}

/* ============================================================
   Phase 50a · Detail-Page Lösch-Button (Danger-Zone)
   ============================================================ */

.detail-danger-zone {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(157,34,53,0.12);
}

.btn-danger {
  background: transparent;
  border: 1px solid rgba(157,34,53,0.32);
  color: var(--err);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-danger:hover {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}
.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.detail-danger-hint {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-secondary, var(--ink-muted));
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ---------- Schnell-Menü (Rechtsklick auf eine Empfehlung) ---------- */
.feed-row.ctx-active {
  background: rgba(200,170,34,0.10);
  box-shadow: inset 0 0 0 1px rgba(200,170,34,0.45);
}
.pr-card.ctx-active {
  box-shadow: 0 0 0 1px rgba(200,170,34,0.55), 0 6px 18px rgba(19,25,29,0.08);
}

.ctx-menu {
  position: fixed;
  z-index: 2000;
  min-width: 224px;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--hairline));
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(19,25,29,0.20), 0 2px 8px rgba(19,25,29,0.08);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: ctxIn 0.12s cubic-bezier(0.2,0.8,0.3,1);
  transform-origin: top left;
}
.ctx-menu[hidden] { display: none; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.96) translateY(-2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ctx-head {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-soft));
  padding: 6px 12px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, var(--ink));
  cursor: pointer;
  transition: background 0.1s ease;
}
.ctx-item:hover { background: rgba(200,170,34,0.16); }
.ctx-item.ctx-kunde { font-weight: 600; }
.ctx-item.ctx-open {
  font-size: 12.5px;
  color: var(--ink-muted, var(--ink-muted));
  justify-content: space-between;
}
.ctx-item.is-current { background: rgba(200,170,34,0.10); }
.ctx-item.is-current::after {
  content: '✓';
  margin-left: auto;
  color: var(--accent, var(--terracotta));
  font-weight: 700;
}
.ctx-item.ctx-danger { color: var(--err); }
.ctx-item.ctx-danger:hover { background: rgba(194,71,71,0.12); }
.ctx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
}
.dot-kunde         { background: var(--sage-dark); }
.dot-interessiert  { background: var(--terracotta); }
.dot-anrufwunsch   { background: var(--accent-hover); }
.dot-kontaktiert   { background: var(--marine); }
.dot-kein_interesse{ background: var(--err); }
.dot-offen         { background: var(--hairline-strong); }
.ctx-sep {
  height: 1px;
  background: var(--hairline, var(--hairline));
  margin: 5px 4px;
}

/* ---------- Toast (Schnell-Feedback) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  z-index: 2100;
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(19,25,29,0.30);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2,0.8,0.3,1);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Inline-Bearbeiten-Overlay (Rechtsklick > Bearbeiten) ---------- */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.edit-modal.open { opacity: 1; }
.edit-modal[hidden] { display: none; }
.edit-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(19,25,29,0.42);
  backdrop-filter: blur(2px);
}
.edit-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 32px 80px -16px rgba(19,25,29,0.32);
  transform: translateY(8px) scale(0.985);
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.edit-modal.open .edit-modal-card { transform: translateY(0) scale(1); }
.edit-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, var(--ink));
  margin: 0 0 18px;
}
.edit-field { margin-bottom: 14px; }
.edit-field label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted, var(--ink-muted));
  margin-bottom: 6px;
}
.edit-field input,
.edit-field select,
.edit-field textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink, var(--ink));
  background: var(--surface);
  border: 1px solid var(--hairline, var(--hairline));
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edit-field textarea { resize: vertical; min-height: 64px; }
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  outline: none;
  border-color: var(--accent, var(--terracotta));
  box-shadow: 0 0 0 3px rgba(200,170,34,0.18);
}
.edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.edit-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--hairline, var(--hairline));
  background: var(--surface);
  color: var(--ink, var(--ink));
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.edit-btn:hover { background: var(--ivory, var(--bg)); }
.edit-btn.primary {
  background: var(--ink, var(--ink));
  color: #fff;
  border-color: var(--ink, var(--ink));
}
.edit-btn.primary:hover { opacity: 0.88; background: var(--ink, var(--ink)); }
.edit-btn:disabled { opacity: 0.55; cursor: default; }

/* ============================================================
   Phase 123 · Trennlinie zwischen Tagesgeschäft und Verwaltung
   ------------------------------------------------------------
   Oben steht, was täglich benutzt wird; unter der Linie das, was
   man gelegentlich einrichtet. Die Linie erscheint nur für Admins
   — für alle anderen gibt es unten nichts zu trennen.
   ============================================================ */
.nav-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 0 10px;
}
.nav-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light, var(--hairline));
}
.nav-divider-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, var(--ink-muted));
  opacity: 0.7;
  white-space: nowrap;
}
/* Eingeklappte Sidebar: nur die Linie, kein Text */
body.nav-collapsed .nav-divider-label { display: none; }
body.nav-collapsed .nav-divider { padding: 0 8px; margin: 10px 0 4px; }

/* ============================================================
   Empfehlungen · Premium-Arbeitsliste (Phase 146)
   ============================================================ */
.emp-page .app-shell { background: var(--surface-soft); }
.emp-page .app-content.emp-content {
  max-width: 1180px;
  padding: 44px 32px 72px;
  gap: 0;
}
.ep-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.ep-intro .h-label {
  margin-bottom: var(--sp-2);
  color: var(--accent-hover);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ep-intro h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.ep-intro p { margin: 10px 0 0; color: var(--ink-muted); font-size: 14px; }
.ep-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 8px 22px rgba(19,25,29,.14);
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.ep-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.ep-workbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ep-search {
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink-soft);
}
.ep-search i { display: inline-flex; flex: 0 0 auto; }
.ep-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 13px var(--font-sans);
}
.ep-search input::placeholder { color: var(--ink-soft); }
.ep-filters {
  display: flex;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ep-filters::-webkit-scrollbar { display: none; }
.ep-filters .filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.ep-filters .filter-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 10px;
}
.ep-filters .filter-tab.active span { background: rgba(255,255,255,.16); color: #fff; }
.ep-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 30px 2px 12px;
}
.ep-section-head h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.ep-section-head span { color: var(--ink-soft); font-size: 11px; }
.ep-priority-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ep-lead {
  position: relative;
  overflow: hidden;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ep-lead::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--burnt-orange); }
.ep-lead.interest::before { background: var(--marine); }
.ep-lead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.ep-lead-person { min-width: 0; display: flex; align-items: center; gap: 11px; }
.ep-lead-person > span:last-child { min-width: 0; }
.ep-lead-person strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-lead-person small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.ep-lead-initial,
.ep-initial {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--accent-bg);
  color: var(--accent-hover);
  font-weight: 800;
  letter-spacing: .02em;
}
.ep-lead-initial { width: 42px; height: 42px; font-size: 13px; background: var(--burnt-soft); color: var(--burnt-orange); }
.ep-lead.interest .ep-lead-initial { background: rgba(11,70,80,.10); color: var(--marine); }
.ep-lead-badge {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--burnt-soft);
  color: var(--burnt-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ep-lead.interest .ep-lead-badge { background: rgba(11,70,80,.10); color: var(--marine); }
.ep-lead p { margin: 16px 0; color: var(--ink-muted); font-size: 12px; line-height: 1.55; }
.ep-lead p strong { color: var(--ink); }
.ep-lead-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.ep-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.ep-action.primary {
  border-color: rgba(200,170,34,.55);
  background: var(--accent-bg);
  color: var(--accent-hover);
}
.ep-action.primary svg { color: var(--burnt-orange); }
.ep-action.primary:hover { border-color: var(--accent); background: var(--hairline); }
.ep-list {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ep-row {
  display: grid;
  grid-template-columns: minmax(210px,1.2fr) minmax(155px,.85fr) 125px 105px 34px;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition);
}
.ep-row:last-child { border-bottom: 0; }
.ep-row:hover { background: var(--surface-soft); }
.ep-person { min-width: 0; display: flex; align-items: center; gap: 11px; }
.ep-person > span:last-child { min-width: 0; }
.ep-initial { width: 36px; height: 36px; font-size: 11px; }
.ep-person strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ep-person small,
.ep-topic small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.ep-topic { min-width: 0; overflow: hidden; color: var(--ink-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ep-topic small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-state {
  justify-self: start;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ep-state.kunde { background: var(--sage-soft); color: var(--sage-dark); }
.ep-state.anrufwunsch { background: var(--burnt-soft); color: var(--burnt-orange); }
.ep-state.interessiert { background: rgba(11,70,80,.10); color: var(--marine); }
.ep-state.kein_interesse { background: var(--err-bg); color: var(--err); }
.ep-opened { color: var(--ink-muted); font-size: 10px; white-space: nowrap; }
.ep-opened i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--sage); }
.ep-opened.off i { background: var(--hairline-strong); }
.ep-arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink-soft); }
.ep-hint { display: flex; justify-content: space-between; gap: var(--sp-4); margin: 12px 2px 0; color: var(--ink-soft); font-size: 10px; }
.ep-hint strong { color: var(--ink-muted); }

@media (max-width: 1120px) {
  .ep-workbar { grid-template-columns: 1fr; }
  .ep-row { grid-template-columns: minmax(190px,1.2fr) minmax(140px,.8fr) 120px 34px; }
  .ep-opened { display: none; }
}
@media (max-width: 820px) {
  .emp-page .app-content.emp-content { padding: 32px 20px 64px; }
  .ep-priority-grid { grid-template-columns: 1fr; }
  .ep-row { grid-template-columns: minmax(190px,1fr) 115px 34px; }
  .ep-topic { display: none; }
}
@media (max-width: 540px) {
  .emp-page .app-content.emp-content { padding: 24px 14px 54px; }
  .ep-intro { align-items: flex-start; margin-bottom: 22px; }
  .ep-intro h1 { font-size: 32px; }
  .ep-intro p { max-width: 230px; font-size: 12px; }
  .ep-primary { min-height: 40px; padding: 0 13px; font-size: 11px; }
  .ep-workbar { padding: 10px; }
  .ep-filters { margin-right: -10px; padding-right: 10px; }
  .ep-section-head { margin-top: 24px; }
  .ep-section-head span { display: none; }
  .ep-lead { padding: 16px; }
  .ep-lead-top { flex-direction: column; gap: 10px; }
  .ep-row { grid-template-columns: minmax(0,1fr) auto 30px; gap: 9px; padding: 13px 12px; }
  .ep-person strong { font-size: 12px; }
  /* Phase 165: Nicht mehr abschneiden ("ANRUFWUNS…") — die Pille wird
     kleiner und zeigt das ganze Wort. */
  .ep-state { padding: 5px 7px; font-size: 8.5px; letter-spacing: .02em; }
  .ep-arrow { width: 28px; height: 28px; }
  .ep-hint { justify-content: flex-end; }
  .ep-hint span:first-child { display: none; }
}

/* ============================================================
   Phase 165 · Bottom-Navigation im Portal (bis 767px)
   ------------------------------------------------------------
   Auf dem Handy gab es bisher nur den Hamburger — für die drei
   täglichen Bereiche ist das ein Umweg. Jetzt sitzen Überblick,
   Empfehlungen und Promoter fest am unteren Rand, "Mehr" öffnet
   das vollständige Menü (denselben Drawer wie der Hamburger).
   Desktop und Tablet bleiben unverändert; die Leiste existiert
   dort gar nicht erst.
   ============================================================ */
.nav-bottom { display: none; }

@media (max-width: 767px) {
  .nav-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(251,252,252, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-light, var(--surface-2));
  }
  .nav-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 5px 4px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary, var(--ink-muted));
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
  }
  .nav-bottom-item.active {
    color: var(--text-primary, var(--ink));
    background: var(--bg-primary, var(--surface-2));
  }
  .nav-bottom-item svg { flex: 0 0 auto; }

  /* Phase 211: Zähler in der unteren Leiste. Hier ist kein Platz für eine
     Pille neben dem Text, also sitzt sie als kleine Zahl über dem Symbol.
     margin-left:auto aus .nav-badge greift hier nicht, die Leiste ist eine
     Spalte, deshalb absolut positioniert. */
  .nav-bottom-item { position: relative; }
  .nav-bottom-item .nav-badge {
    position: absolute;
    top: 1px;
    left: 50%;
    margin: 0;
    transform: translateX(2px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    box-shadow: 0 0 0 2px rgba(251,252,252,0.97), 0 1px 4px rgba(0,0,0,0.18);
  }

  /* Inhalt bekommt Luft, damit nichts dauerhaft unter der Leiste steckt. */
  body.hat-bottom-nav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}