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

:root {
  --brand:       #e91e8c;
  --brand-dark:  #c2177a;
  --brand-light: #fdf2f8;
  --brand-mid:   #f9a8d4;
  --navy:        #1e2d72;
  --navy-dark:   #16225a;
  --navy-light:  #eef0f9;
  --success:     #16a34a;
  --danger:      #dc2626;
  --warning:     #d97706;
  --gray-50:     #f8f9fb;
  --gray-100:    #f1f3f7;
  --gray-200:    #e4e7ef;
  --gray-300:    #d1d5e0;
  --gray-400:    #9ca3b8;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-800:    #1a1f2e;
  --radius:      10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg:   0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-brand: 0 4px 16px rgba(233,30,140,.25);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--gray-800);
  background: var(--gray-50);
  line-height: 1.5;
}

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

/* ── Navbar ───────────────────────────────────────────────────────────────── */
:root { --sidebar-w: 232px; }
.navbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 16px;
}

/* ===== Sidebar-Layout (nur eingeloggte App-Ansicht) ===== */
.has-sidebar .navbar {
  flex-direction: column;
  align-items: stretch;
  padding: 20px 14px;
  width: var(--sidebar-w);
  height: 100vh;
  border-bottom: none;
  border-right: 1px solid var(--gray-200);
  position: fixed;
  top: 0; left: 0;
  gap: 4px;
  overflow-y: auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand-icon {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  margin-left: 6px;
}
.navbar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.navbar-brand-sub  { font-size: 10px; font-weight: 600; color: var(--navy); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.navbar-brand-main { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; line-height: 1.1; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  font-size: 13px;
}
/* Hide mobile-only elements on desktop */
.navbar-mobile-new-btn,
.navbar-mobile-divider,
.navbar-mobile-user { display: none; }
.nav-emoji { display: inline; font-size: 12px; margin-right: 1px; opacity: .85; }
.navbar-links a {
  color: var(--gray-500);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
  position: relative;
}

/* Sidebar: Links vertikal, Emoji als Icon */
.has-sidebar .navbar-links {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  font-size: 14px;
  margin-top: 14px;
}
.has-sidebar .nav-emoji {
  display: inline-flex; justify-content: center; width: 20px;
  font-size: 15px; margin-right: 0; opacity: 1; flex-shrink: 0;
}
.has-sidebar .navbar-links a {
  display: flex; align-items: center; gap: 10px;
  color: var(--gray-600); padding: 9px 12px; border-radius: 9px;
}
.navbar-links a:hover { color: var(--gray-800); background: var(--gray-100); text-decoration: none; }
.navbar-links a.active {
  color: var(--brand);
  font-weight: 600;
}
.navbar-links a.active::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
/* Sidebar: aktiver Punkt mit Hintergrund statt Unterstrich */
.has-sidebar .navbar-links a.active { font-weight: 700; background: #fdf2f8; }
.has-sidebar .navbar-links a.active::after { display: none; }

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Sidebar: rechte Controls als Footer unten, gestapelt */
.has-sidebar .navbar-right {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.has-sidebar .navbar-right .navbar-user { width: 100%; }
.has-sidebar .navbar-right #btn-global-search { width: 100%; }
.has-sidebar .navbar-right .btn-primary { width: 100%; text-align: center; }
/* Nutzer-Dropdown öffnet in der Sidebar nach oben */
.has-sidebar .navbar-right .user-dropdown { top: auto; bottom: calc(100% + 8px); right: 0; left: 0; }

.navbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.navbar-user:hover { background: var(--gray-100); color: var(--gray-800); text-decoration: none; }
.navbar-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.navbar-chevron { font-size: 11px; color: var(--gray-400); }

/* User dropdown */
.navbar-user-menu { position: relative; }
.navbar-user { background: none; border: none; cursor: pointer; font-family: inherit; }
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--gray-700);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.user-dropdown-item:hover { background: var(--gray-50); color: var(--gray-800); text-decoration: none; }
.user-dropdown-danger { color: var(--danger); }
.user-dropdown-danger:hover { background: #fef2f2; }
.user-dropdown-divider { border-top: 1px solid var(--gray-100); margin: 4px 0; }

/* Hamburger button — hidden on desktop */
.navbar-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.navbar-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gray-800);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.navbar-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .navbar { padding: 0 16px; gap: 0; }
  /* Sidebar unter 940px zurück auf Top-Bar mit Burger */
  .has-sidebar .navbar {
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0; left: auto;
    width: auto;
    height: 60px;
    padding: 0 16px;
    gap: 0;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    overflow: visible;
  }
  .has-sidebar .navbar-links { margin-top: 0; }
  .has-sidebar .navbar-links a { padding: 13px 20px; border-radius: 0; gap: 12px; }
  .has-sidebar .main-content { margin-left: 0; }
  .navbar-burger { display: flex; margin-left: auto; }

  /* Mobile dropdown panel */
  .navbar-links {
    display: none;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 99;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .navbar-links.navbar-open { display: flex; }
  .navbar-links.navbar-open .navbar-mobile-new-btn,
  .navbar-links.navbar-open .navbar-mobile-divider,
  .navbar-links.navbar-open .navbar-mobile-user { display: flex; }
  .nav-emoji { display: inline; }

  /* Nav links in mobile menu */
  .navbar-links a {
    border-radius: 0;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-700);
    border-left: 3px solid transparent;
  }
  .navbar-links a.active {
    border-left-color: var(--brand);
    background: #fdf2f8;
    color: var(--brand);
    font-weight: 700;
  }
  .navbar-links a.active::after { display: none; }

  /* Section divider inside mobile menu */
  .navbar-mobile-divider {
    border-top: 1px solid var(--gray-100);
    margin: 8px 0;
  }

  /* "+ Neuer Kontakt" full-width in mobile menu */
  .navbar-mobile-new-btn {
    margin: 8px 16px 4px;
    display: block;
    text-align: center;
    background: var(--brand);
    color: #fff !important;
    border-radius: 10px !important;
    padding: 13px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-left: none !important;
  }
  .navbar-mobile-new-btn:hover { background: var(--brand-dark) !important; }

  /* User section at bottom of mobile menu */
  .navbar-mobile-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 4px;
  }
  .navbar-mobile-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .navbar-mobile-user-name {
    font-size: 13px; font-weight: 700; color: var(--navy);
  }

  /* Hide desktop right-side controls */
  .navbar-right { display: none; }

  .main-content { padding: 20px 16px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main-content { padding: 32px 32px; max-width: 1200px; margin: 0 auto; }
/* Sidebar-Einrückung NUR auf Desktop – sonst verschiebt es den Inhalt auf dem Handy */
@media (min-width: 941px) {
  .has-sidebar .main-content { max-width: 1180px; margin-left: var(--sidebar-w); margin-right: auto; padding: 20px 40px 32px; }
}

/* Mobil-Only-Einträge dürfen in der Desktop-Sidebar NICHT auftauchen */
@media (min-width: 941px) {
  .has-sidebar .navbar-links .navbar-mobile-new-btn,
  .has-sidebar .navbar-links .navbar-mobile-link,
  .has-sidebar .navbar-links .navbar-mobile-divider,
  .has-sidebar .navbar-links .navbar-mobile-user { display: none !important; }
}

/* Persistente Such-Leiste oben rechts (auf jeder Seite) */
.app-topbar { display: flex; justify-content: flex-end; }
.has-sidebar .app-topbar {
  position: sticky; top: 0; z-index: 50;
  margin-left: var(--sidebar-w);
  padding: 12px 40px 4px;
  background: var(--gray-50, #f6f7f9);
}
.topsearch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: var(--brand-light, #fdf2f8); border: 1px solid rgba(233,30,140,.25);
  border-radius: 10px; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.topsearch:hover { background: #fce4f1; border-color: rgba(233,30,140,.45); }
.topsearch:active { transform: scale(.94); }
.topsearch:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233,30,140,.14); }
.topsearch-icon { font-size: 18px; }
@media (max-width: 940px) {
  .has-sidebar .app-topbar { position: sticky; top: 60px; margin-left: 0; padding: 10px 16px; }
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
.auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}
.auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.auth-card .subtitle { color: var(--gray-500); font-size: 14px; margin-bottom: 28px; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  background: var(--brand-light);
  color: var(--brand);
}
.avatar-sm  { width: 32px; height: 32px; font-size: 12px; }
.avatar-md  { width: 44px; height: 44px; font-size: 15px; }
.avatar-lg  { width: 64px; height: 64px; font-size: 22px; }
.avatar-xl  { width: 80px; height: 80px; font-size: 26px; }
.avatar-teal { background: #e0f7fa; color: #00838f; }
.avatar-purple { background: #ede9fe; color: #7c3aed; }
.avatar-green { background: #dcfce7; color: #15803d; }
.avatar-orange { background: #fff7ed; color: #c2410c; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--gray-600);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  transition: border-color .15s;
  background: #fff;
  color: var(--gray-800);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(233,30,140,.10);
}
.form-group textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, box-shadow .15s, opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-ghost     { background: transparent; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }
.btn-whatsapp  { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5d; }
.btn-sm        { padding: 5px 12px; font-size: 13px; }
.btn-full      { width: 100%; }
.btn:disabled  { opacity: .5; cursor: not-allowed; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.alert.show { display: block; }
.alert-error   { background: #fef2f2; color: var(--danger);  border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.card-header h2 { font-size: 15px; font-weight: 700; }
/* Button-Gruppen im Karten-Kopf dürfen umbrechen → kein horizontaler Überlauf (Handy) */
.card-header > div { flex-wrap: wrap; min-width: 0; }

/* ── Badges & Tags ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-gray   { background: var(--gray-100); color: var(--gray-500); }
.badge-blue   { background: var(--navy-light); color: var(--navy); }
.badge-pink   { background: var(--brand-light); color: var(--brand-dark); }
.badge-brand  { background: var(--brand-light); color: var(--brand); }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 12px;
  background: var(--brand-light); color: var(--brand); margin: 2px 2px 2px 0;
  font-weight: 500;
}
.tag-seeks { background: #fef9c3; color: #854d0e; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600;
     color: var(--gray-500); border-bottom: 2px solid var(--gray-100); }
td { padding: 11px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--gray-50); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
  padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500);
}
.data-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--gray-50); }

/* ── Misc helpers ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.text-muted { color: var(--gray-400); font-size: 13px; }
.text-sm    { font-size: 13px; }
.mt-4 { margin-top: 16px; }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--gray-200); margin: 20px 0; }
.breadcrumb { font-size: 13px; color: var(--gray-400); display: block; margin-bottom: 4px; }
.breadcrumb:hover { color: var(--brand); text-decoration: none; }
.subtitle-lg { color: var(--gray-500); font-size: 15px; margin-top: 2px; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-header h2 { font-size: 16px; font-weight: 700; }
.text-link { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.empty-state {
  text-align: center; padding: 60px 20px; color: var(--gray-500);
}
.empty-state p { font-size: 15px; }

/* ── Score Circle ─────────────────────────────────────────────────────────── */
.score-circle {
  width: var(--size, 52px); height: var(--size, 52px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.score-high   { background: var(--brand-light); color: var(--brand); }
.score-mid    { background: #fef9c3; color: #854d0e; }
.score-low    { background: var(--gray-100); color: var(--gray-500); }

/* ── Strength dots ────────────────────────────────────────────────────────── */
.strength-dots { display: inline-flex; gap: 4px; align-items: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); }
.dot-on { background: var(--brand); }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
/* Hero match card */
.dash-hero {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.dash-hero-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-hero-title .spark { color: var(--brand); }
.dash-hero-body {
  display: grid;
  grid-template-columns: 1fr 140px 1fr auto;
  gap: 20px;
  align-items: center;
}
@media (max-width: 800px) {
  .dash-hero-body { grid-template-columns: 1fr; }
  .dash-hero-pct  { display: none; }
  .dash-hero-reasons { display: none; }
}

.dash-hero-contact {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
}
.dash-hero-contact-name {
  font-size: 17px; font-weight: 700; margin: 10px 0 2px;
  color: var(--gray-800); text-decoration: none;
}
.dash-hero-contact-name:hover { color: var(--brand); }
.dash-hero-contact-company { font-size: 13px; color: var(--gray-500); margin-bottom: 12px; }
.dash-hero-tag-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--gray-400); letter-spacing: .05em; margin-bottom: 5px; }

.dash-hero-pct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pct-circle {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, #ff6fb5 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.pct-number { font-size: 26px; font-weight: 800; line-height: 1; }
.pct-label  { font-size: 10px; font-weight: 600; opacity: .85; letter-spacing: .05em; }
.pct-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 3px dashed var(--brand-mid);
  display: flex; align-items: center; justify-content: center;
}

.dash-hero-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.dash-hero-reason-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
}
.dash-hero-reason-item::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e91e8c' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}

/* Stats row */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
.dash-stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.dash-stat-icon svg { width: 22px; height: 22px; stroke: var(--brand); }
.dash-stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--gray-800); line-height: 1; }
.dash-stat-label { font-size: 12px; color: var(--gray-500); margin-top: 3px; font-weight: 500; }
.dash-stat-delta { font-size: 11px; color: var(--success); font-weight: 600; margin-top: 2px; }
.dash-stat-delta.neg { color: var(--gray-400); }

/* Lower 3-col grid */
.dash-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .dash-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dash-grid-3 { grid-template-columns: 1fr; } }

/* 2-col below hero */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } }

/* Follow-up timeline */
.fu-timeline { display: flex; flex-direction: column; gap: 0; }
.fu-timeline-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.fu-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px; top: 28px;
  width: 2px;
  height: calc(100% - 8px);
  background: var(--gray-200);
}
.fu-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--brand-light);
}
.fu-dot-open { background: var(--gray-300); box-shadow: 0 0 0 4px var(--gray-100); }
.fu-timeline-names { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.fu-timeline-names a { color: inherit; }
.fu-timeline-names a:hover { color: var(--brand); text-decoration: none; }
.fu-timeline-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.fu-timeline-date { font-size: 12px; color: var(--gray-400); display: flex; align-items: center; gap: 4px; }

/* Activity list */
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.activity-icon-match     { background: var(--brand-light); }
.activity-icon-intro     { background: #dcfce7; }
.activity-icon-contact   { background: #e0f2fe; }
.activity-icon-followup  { background: #fef9c3; }
.activity-text { font-size: 13px; color: var(--gray-700); line-height: 1.5; }
.activity-time { font-size: 11px; color: var(--gray-400); margin-top: 1px; }

/* Contacts im Blick mini-table */
.contact-mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
}
.contact-mini-row:last-child { border-bottom: none; }
.contact-mini-name { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.contact-mini-name a { color: inherit; }
.contact-mini-name a:hover { color: var(--brand); text-decoration: none; }
.contact-mini-sub { font-size: 11px; color: var(--gray-400); margin-top: 1px; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 600px) { .quick-actions { grid-template-columns: 1fr; } }
.quick-action-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.quick-action-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--brand-mid);
  text-decoration: none;
}
.quick-action-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.quick-action-icon svg { width: 22px; height: 22px; stroke: var(--brand); }
.quick-action-title  { font-size: 14px; font-weight: 700; color: var(--gray-800); }
.quick-action-sub    { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.quick-action-arrow  { margin-left: auto; color: var(--gray-300); font-size: 18px; }

/* ── Contacts List ────────────────────────────────────────────────────────── */
.search-form { margin-bottom: 12px; }
.search-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--gray-200);
  border-radius: var(--radius); font-size: 14px; min-width: 180px;
  background: #fff;
}
.search-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233,30,140,.10); }
.filter-select {
  height: 38px; padding: 0 10px; border: 1px solid var(--gray-200);
  border-radius: var(--radius); font-size: 14px; background: #fff; color: var(--gray-800); cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--brand); }

.contact-name { font-weight: 600; color: var(--gray-800); }
.contact-name:hover { color: var(--brand); text-decoration: none; }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 16px; padding: 8px 0;
}
.pagination-info { font-size: 13px; color: var(--gray-500); }

/* ── Contact Detail ───────────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
/* min-width:0 verhindert, dass breite Inhalte (z.B. <pre> Nachrichten) die Grid-Spalte
   über die Viewport-Breite hinausdrücken (klassischer Grid-Overflow auf Mobile). */
.detail-main, .detail-side { min-width: 0; }
@media (max-width: 700px) { .detail-grid { grid-template-columns: 1fr; } }

.match-fields { display: flex; flex-direction: column; gap: 16px; }
.match-field { padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.match-field:last-child { border-bottom: none; }
.match-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.offers-label { color: var(--brand); }
.seeks-label  { color: #854d0e; }
.match-field-text { font-size: 14px; color: var(--gray-600); margin-bottom: 6px; }
.tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.card-section-title { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.detail-list { display: flex; flex-direction: column; gap: 10px; }
.dl-row { display: flex; justify-content: space-between; font-size: 14px; }
.dl-row dt { color: var(--gray-400); }
.dl-row dd { font-weight: 500; text-align: right; max-width: 60%; }

.detail-match-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--gray-100);
  min-width: 0;
}
.detail-match-item:last-child { border-bottom: none; }
.detail-match-item > div { min-width: 0; overflow: hidden; }

/* ── Matches ──────────────────────────────────────────────────────────────── */
.matches-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.match-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 20px;
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 20px; align-items: start;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.match-card:hover { box-shadow: var(--shadow-lg); }
.match-contacts { display: flex; align-items: flex-start; gap: 16px; }
.match-person { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.match-person-name { font-weight: 600; font-size: 15px; color: var(--gray-800); }
.match-person-name:hover { color: var(--brand); text-decoration: none; }
.match-arrow { font-size: 22px; color: var(--gray-400); padding-top: 2px; flex-shrink: 0; }
.match-meta { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.match-reason-text { font-size: 13px; color: var(--gray-600); line-height: 1.5; max-width: 260px; }
.match-actions { display: flex; flex-direction: column; gap: 6px; }
.match-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.match-item:last-child { border-bottom: none; }
.match-name { font-weight: 500; color: var(--gray-800); }
.match-name:hover { color: var(--brand); }
.match-reason { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.match-item-score { flex-shrink: 0; margin-left: 12px; }

@media (max-width: 700px) {
  .match-card { grid-template-columns: 1fr; }
  .match-contacts { flex-direction: column; }
  .match-arrow { display: none; }
}

/* ── Intro ────────────────────────────────────────────────────────────────── */
.intro-persons {
  display: grid; grid-template-columns: 1fr 40px 1fr;
  gap: 16px; align-items: start; margin-bottom: 0;
}
.intro-person { display: flex; flex-direction: column; gap: 4px; }
.intro-person-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--gray-400); }
.intro-person-name { font-weight: 600; font-size: 15px; color: var(--gray-800); }
.intro-person-name:hover { color: var(--brand); text-decoration: none; }
.intro-person-field { font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.intro-connector { font-size: 24px; color: var(--gray-400); text-align: center; padding-top: 18px; }

.match-reason-banner {
  background: var(--brand-light); border: 1px solid var(--brand-mid);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; color: var(--brand-dark);
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
}
.match-reason-icon { font-size: 16px; flex-shrink: 0; }

.message-text {
  font-family: inherit; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  overflow-x: hidden; max-width: 100%;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 16px; margin: 0;
}

/* ── Pipeline ─────────────────────────────────────────────────────────────── */
.pipeline-track {
  display: flex; align-items: flex-start; overflow-x: auto; padding: 8px 0;
}
.pipeline-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; min-width: 80px;
}
.pipeline-step:not(:last-child)::after {
  content: ''; position: absolute; top: 7px; left: 50%; width: 100%; height: 2px;
  background: var(--gray-200); z-index: 0;
}
.pipeline-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gray-200); border: 2px solid var(--gray-200); z-index: 1; position: relative;
}
.pipeline-step-done .pipeline-dot  { background: var(--brand); border-color: var(--brand); }
.pipeline-step-active .pipeline-dot { background: #fff; border: 3px solid var(--brand); }
.pipeline-step-done::after { background: var(--brand) !important; }
.pipeline-label { font-size: 11px; color: var(--gray-400); text-align: center; line-height: 1.3; }
.pipeline-step-done .pipeline-label   { color: var(--brand); font-weight: 600; }
.pipeline-step-active .pipeline-label { color: var(--brand-dark); font-weight: 700; }

/* ── Follow-up Kanban ─────────────────────────────────────────────────────── */
.pipeline-overview {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  align-items: start; overflow-x: auto;
}
@media (max-width: 900px) { .pipeline-overview { grid-template-columns: repeat(3, 1fr); } }
.pipeline-col { background: var(--gray-100); border-radius: var(--radius); padding: 12px; min-width: 140px; }
.pipeline-col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pipeline-col-title { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.pipeline-col-count {
  background: var(--gray-200); color: var(--gray-600); border-radius: 99px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.fu-card {
  display: block; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 10px; margin-bottom: 8px; text-decoration: none; transition: box-shadow .15s;
}
.fu-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.fu-names { font-size: 13px; font-weight: 600; color: var(--gray-800); line-height: 1.4; }
.fu-date  { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
.fu-notes { font-size: 11px; color: var(--gray-600); margin-top: 4px; line-height: 1.4; }
.fu-empty { font-size: 12px; color: var(--gray-400); text-align: center; padding: 8px 0; }

/* ── Contact Form ─────────────────────────────────────────────────────────── */
.form-grid { display: flex; flex-direction: column; gap: 28px; }
.form-section {}
.form-section-title { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint { display: block; font-size: 11px; font-weight: 400; color: var(--gray-400); margin-top: 1px; }
.form-actions { display: flex; align-items: center; padding-top: 20px; border-top: 1px solid var(--gray-200); margin-top: 24px; }
.strength-picker { display: flex; gap: 6px; margin-top: 4px; }
.strength-btn {
  flex: 1; padding: 12px 8px; border: 2px solid var(--gray-200); border-radius: var(--radius);
  background: #fff; color: var(--gray-600); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: all .15s; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.strength-btn.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 700; }
.strength-btn:hover:not(.active) { border-color: var(--gray-400); background: var(--gray-50); }

/* ── Admin ─────────────────────────────────────────────────────────────────── */
.stat-card { text-align: center; padding: 20px; }
.stat-value { font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1; }
.stat-label { font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.admin-nav-card {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  text-decoration: none; color: inherit; transition: box-shadow .15s;
}
.admin-nav-card:hover { box-shadow: var(--shadow-lg); }
.admin-nav-icon { font-size: 28px; flex-shrink: 0; }
.dash-stats-admin {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px;
}
.dash-match-card, .dash-fu-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit; border: 1px solid var(--gray-200);
  border-radius: var(--radius); background: #fff; transition: box-shadow .15s;
}
.dash-match-card:hover, .dash-fu-card:hover { box-shadow: var(--shadow); }
.dash-match-names { font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 24px; width: 100%; max-width: 440px;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--gray-200); border-radius: var(--radius);
  padding: 32px 24px; text-align: center; color: var(--gray-500);
  transition: border-color .15s, background .15s; cursor: default;
}
.drop-zone.drop-active { border-color: var(--brand); background: var(--brand-light); }
.drop-icon { font-size: 32px; margin-bottom: 8px; }

/* ── Onboarding ────────────────────────────────────────────────────────────── */
.onboarding-wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.onboarding-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.onboarding-steps { display: flex; align-items: center; gap: 0; margin-bottom: 28px; }
.ob-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-400); flex: 1; text-align: center;
}
.ob-step.ob-active { color: var(--brand); font-weight: 600; }
.ob-step.ob-done   { color: var(--success); }
.ob-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #fff;
}
.ob-step.ob-active .ob-dot { border-color: var(--brand); color: var(--brand); }
.ob-step.ob-done .ob-dot   { border-color: var(--success); color: var(--success); background: #dcfce7; }
.ob-connector { flex: 1; height: 2px; background: var(--gray-200); margin-bottom: 24px; }
.onboarding-card { padding: 28px; }

/* ── Event Badges ──────────────────────────────────────────────────────────── */
.event-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-family: monospace; font-weight: 600;
  background: var(--gray-100); color: var(--gray-500);
}
.event-contact_created  { background: #dbeafe; color: #1d4ed8; }
.event-contact_deleted  { background: #fee2e2; color: #b91c1c; }
.event-intro_sent       { background: #dcfce7; color: #15803d; }
.event-followup_updated { background: #fef9c3; color: #854d0e; }
.event-match_dismissed  { background: var(--gray-100); color: var(--gray-500); }

/* ── Mobile Improvements ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Page header stacks on mobile */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header > div:last-child,
  .page-header > a,
  .page-header > button { align-self: stretch; }

  /* Cards full-width padding */
  .card { border-radius: 10px; }

  /* Search row stacks */
  .search-row { flex-direction: column; gap: 8px; }
  .search-input, .filter-select { width: 100%; }

  /* Hero match: stack vertically */
  .dash-hero-body { grid-template-columns: 1fr; }
  .pct-ring { display: none; }

  /* Stats: 2x2 grid */
  .dash-stats { grid-template-columns: 1fr 1fr; }

  /* Quick actions: 1 column */
  .quick-actions { grid-template-columns: 1fr; }

  /* Detail grid: single column */
  .detail-grid { grid-template-columns: 1fr; }

  /* Pagination */
  .pagination { flex-direction: column; gap: 8px; text-align: center; }

  /* Form rows: stack */
  .form-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Auth pages */
  .auth-card { padding: 24px 20px; }

  /* Intro persons: stack */
  .intro-persons { flex-direction: column; }
  .intro-connector { transform: rotate(90deg); }

  /* Buttons full width in form-actions */
  .form-actions { flex-direction: column; gap: 8px; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-actions > div { flex-direction: column; gap: 8px; }

  /* Hide secondary columns on very small screens */
  .dash-grid-3 { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Extra compact header */
  .navbar-brand-sub { display: none; }
  h1 { font-size: 22px; }
  .page-header h1 { font-size: 20px; }
  .btn { font-size: 13px; }
  .btn-sm { font-size: 12px; padding: 5px 10px; }
}

/* ── Contact Detail – Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Hero card: stack avatar + info + buttons vertically */
  .contact-hero-inner { flex-direction: column; gap: 14px; }

  /* Quick-contact buttons: 2-column grid on mobile */
  .contact-quick-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .contact-quick-btns .btn { justify-content: center; text-align: center; }

  /* Match items: allow reason to wrap, button below */
  .detail-match-item { align-items: flex-start; }
  .detail-match-item > a.btn { margin-top: 4px; }

  /* Detail sidebar: compact rows */
  .dl-row dd { max-width: 55%; font-size: 13px; }
  .dl-row dt { font-size: 13px; }

  /* Card padding tighter */
  .card { padding: 14px; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header h2 { font-size: 15px; }
}

/* ── Sidebar-Navigation: Gruppen ──────────────────────────────────────────
   „Empfehlungen", „Dranbleiben" usw. sind reine Zwischenüberschriften (keine
   eigenen Seiten) und lassen sich zum Aufräumen ein-/ausklappen. */
.navbar-links .nav-group {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 14px 0 2px; padding: 4px 12px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gray-400); text-align: left;
}
.navbar-links .nav-group:hover { color: var(--gray-600); }
.navbar-links .nav-group .chev {
  margin-left: auto; font-size: 10px; line-height: 1; opacity: .7;
  transition: transform .15s ease;
}
.navbar-links .nav-group[aria-expanded="false"] .chev { transform: rotate(-90deg); }

.navbar-links .nav-sub { display: flex; flex-direction: column; gap: 2px; }
.navbar-links .nav-sub[hidden] { display: none; }
/* leichte Einrückung der Unterpunkte */
.has-sidebar .navbar-links .nav-sub > a { padding-left: 30px; }

.navbar-links .nav-sep {
  height: 1px; background: var(--gray-200); margin: 14px 12px 6px;
}
.navbar-links .nav-settings { margin-bottom: 2px; }

@media (max-width: 900px) {
  .has-sidebar .navbar-links .nav-sub > a { padding-left: 40px; }
  .navbar-links .nav-group { padding: 10px 20px 4px; margin-top: 8px; }
  .navbar-links .nav-sep { margin: 10px 20px 4px; }
}

/* ── Dashboard: neues Layout (neuer vs. aktiver Nutzer) ─────────────────── */
.dash-sec { margin: 0 0 34px; }            /* mehr Luft zwischen den Bereichen */
.dash-h { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.dash-h-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dash-h-row .dash-h { margin: 0; }
.dash-h-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dash-grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Ganze Karte klickbar (ein eindeutiges Ziel) */
.dash-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  padding: 18px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dash-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,.06); text-decoration: none; }
.dash-card-body { min-width: 0; flex: 1; }
.dash-card-kicker { font-size: 12px; color: var(--gray-500); margin-bottom: 2px; }
.dash-card-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.dash-card-title strong { color: var(--navy); }
.dash-card-sub { font-size: 13px; color: var(--gray-500); margin-top: 4px; line-height: 1.5; }
.dash-arrow { color: var(--gray-300); font-size: 20px; align-self: center; }
.dash-card:hover .dash-arrow { color: var(--brand); }
.dash-pill { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.dash-pill-red { background: #fee2e2; color: #b42318; }

.dash-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; font-size: 19px; flex-shrink: 0; }
.dash-ic-amber { background: #fef3c7; } .dash-ic-blue { background: #dbeafe; }
.dash-ic-green { background: #dcfce7; }  .dash-ic-pink { background: #fce7f3; }

/* Kennzahlen */
.dash-kpi { display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px 18px;
  text-decoration: none; color: inherit; transition: border-color .15s; }
.dash-kpi:hover { border-color: var(--brand); text-decoration: none; }
.dash-kpi-val { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.dash-kpi-lbl { font-size: 12.5px; color: var(--gray-500); }

/* Onboarding-Kopf für neue Accounts */
.dash-onb { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 28px 30px; margin-bottom: 34px; }
.dash-onb-intro h1 { font-size: 30px; font-weight: 800; color: var(--navy); margin: 0 0 10px; line-height: 1.15; }
.dash-onb-intro p { color: var(--gray-500); font-size: 15px; line-height: 1.6; margin: 0; }
.dash-onb-step { border-left: 1px solid var(--gray-200); padding-left: 28px; }
.dash-onb-lbl { font-size: 13px; color: var(--gray-500); margin-bottom: 4px; }
.dash-onb-step h2 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.dash-onb-step p { font-size: 13.5px; color: var(--gray-500); line-height: 1.55; margin: 0 0 14px; }
.dash-onb-prog { font-size: 13px; color: var(--gray-600); margin-bottom: 14px; }
.dash-onb-bar { height: 7px; background: var(--gray-200); border-radius: 4px; margin-top: 7px; overflow: hidden; }
.dash-onb-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }

/* Match-Karte: getrennte Klickziele */
.dash-match { display: grid; grid-template-columns: 1fr auto 1fr 1.1fr; gap: 22px;
  align-items: center; padding: 22px 24px; }
.dash-match-side { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dash-match-name { font-weight: 800; color: var(--navy); text-decoration: none; font-size: 15px; }
.dash-match-name:hover { color: var(--brand); }
.dash-match-firma { font-size: 13px; color: var(--gray-500); }
.dash-match-lbl { font-size: 11px; color: var(--gray-400); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; margin: 8px 0 4px; }
.dash-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; margin: 0 4px 4px 0; }
.dash-tag-pink { background: #fce7f3; color: #a3116a; }
.dash-tag-green { background: #dcfce7; color: #0d8f68; }
.dash-match-score { text-align: center; }
.dash-match-pct { font-size: 26px; font-weight: 800; color: var(--brand); }
.dash-match-word { font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; }
.dash-match-why { border-left: 1px solid var(--gray-200); padding-left: 22px; }
.dash-match-why p { font-size: 13px; color: var(--gray-500); line-height: 1.55; margin: 0 0 12px; }

@media (max-width: 900px) {
  .dash-onb, .dash-match { grid-template-columns: 1fr; gap: 18px; }
  .dash-onb-step, .dash-match-why { border-left: 0; padding-left: 0;
    border-top: 1px solid var(--gray-200); padding-top: 18px; }
  .dash-match-score { text-align: left; }
}

/* ── Kontaktübersicht: Kopf, Suche, Filter, Massenaktionen ──────────────── */
.k-more { position: relative; }
.k-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 280px; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.10); padding: 6px;
}
.k-more-menu[hidden] { display: none; }
.k-more-menu > a, .k-more-menu > button, .k-more-menu > label {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 13.5px; color: var(--gray-700); cursor: pointer;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
}
.k-more-menu > a:hover, .k-more-menu > button:hover, .k-more-menu > label:hover {
  background: var(--gray-100); color: var(--navy); text-decoration: none;
}

.k-search { margin-bottom: 14px; }
.k-search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.k-search-box { position: relative; flex: 1; min-width: 260px; }
.k-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .5; pointer-events: none; }
.k-search-input {
  width: 100%; padding: 12px 14px 12px 40px; font-size: 14px;
  border: 1px solid var(--gray-200); border-radius: 12px; background: #fff;
}
.k-search-input:focus { outline: none; border-color: var(--brand); }
.k-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--brand); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; }

.k-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  padding: 12px; background: var(--gray-50, #f8f9fb); border: 1px solid var(--gray-200); border-radius: 12px; }
.k-filters[hidden] { display: none; }

.k-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px; font-size: 13px; color: var(--gray-600); }
.k-chip { background: #fff; border: 1px solid var(--gray-200); border-radius: 20px;
  padding: 4px 12px; font-size: 12.5px; color: var(--gray-600); }
.k-chip-reset { color: var(--brand); font-weight: 700; font-size: 12.5px; text-decoration: none; }

.k-selbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  position: sticky; top: 8px; z-index: 5; background: #fff5fb;
  border: 1px solid var(--brand); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.k-selbar[hidden] { display: none; }

@media (max-width: 700px) {
  .k-search-row { gap: 8px; }
  .k-search-box { min-width: 100%; }
  .k-more-menu { right: auto; left: 0; min-width: 240px; }
}

/* ── Kontakte: Karten- & Listenansicht (gleiche Informationslogik) ──────── */
.k-viewbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.k-viewtoggle { margin-left:auto; display:flex; gap:4px; background:var(--gray-100); padding:4px; border-radius:10px; }
.k-viewtoggle .view-btn { border:0; background:none; font:inherit; font-size:13px; font-weight:600;
  color:var(--gray-600); padding:6px 14px; border-radius:8px; cursor:pointer; }
.k-viewtoggle .view-btn.active { background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(0,0,0,.08); }

.k-badge-rel { display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px;
  border-radius:20px; background:var(--gray-100); color:var(--gray-600); }
.k-badge-match { display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; }
.k-badge-match.ok   { background:#dcfce7; color:#0d8f68; }
.k-badge-match.warn { background:#fef3c7; color:#92400e; }

.k-next { margin-top:10px; font-size:12.5px; font-weight:700; }
.k-next-inline { font-size:12px; font-weight:600; }
.k-next-wv, .k-next-inline.k-next-wv { color:#b42318; }
.k-next-incomplete, .k-next-inline.k-next-incomplete { color:#92400e; }
.k-next-match, .k-next-inline.k-next-match { color:#0d8f68; }
.k-next-none, .k-next-inline.k-next-none { color:var(--gray-400); font-weight:500; }

/* Karten */
.k-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:16px; }
.k-card { position:relative; background:#fff; border:1px solid var(--gray-200); border-radius:14px;
  transition:border-color .15s, box-shadow .15s; }
.k-card:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.k-card-cb { position:absolute; top:14px; right:44px; z-index:2; width:16px; height:16px; }
.k-card-body { padding:18px; }
/* Stretched-Link-Muster: Overlay macht die ganze Karte klickbar (öffnet Kontakt),
   Telefon/E-Mail, Checkbox und Menü liegen mit z-index darüber und bleiben eigenständig. */
.k-card-overlay { position:absolute; inset:0; z-index:1; border-radius:14px; }
.k-card-contact { position:relative; z-index:2; display:flex; flex-direction:column;
  gap:3px; margin-bottom:12px; }
.k-contact-link { font-size:12.5px; color:var(--gray-600); text-decoration:none;
  width:fit-content; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-contact-link:hover { color:var(--brand); text-decoration:underline; }
.k-card-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; padding-right:60px; }
.k-card-name { font-weight:800; color:var(--navy); font-size:15px; line-height:1.3; }
.k-card-firma { font-size:13px; color:var(--gray-500); }
.k-card-meta { font-size:12.5px; color:var(--gray-500); margin-bottom:10px; }
.k-card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.k-tag { font-size:11.5px; background:#fce7f3; color:#a3116a; padding:3px 9px; border-radius:20px; }
.k-card-status { display:flex; gap:6px; flex-wrap:wrap; }

/* Drei-Punkte-Menü */
.k-menu { position:absolute; top:10px; right:10px; z-index:3; }
.k-row .k-menu { position:static; }
.k-menu-btn { border:0; background:none; font-size:18px; line-height:1; color:var(--gray-400);
  cursor:pointer; padding:4px 8px; border-radius:8px; }
.k-menu-btn:hover { background:var(--gray-100); color:var(--navy); }
.k-menu-list { position:absolute; right:0; top:calc(100% + 4px); min-width:220px; background:#fff;
  border:1px solid var(--gray-200); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.10);
  padding:6px; z-index:40; }
.k-menu-list[hidden] { display:none; }
.k-menu-list a, .k-menu-list button { display:block; width:100%; text-align:left; background:none;
  border:0; font:inherit; font-size:13.5px; color:var(--gray-700); padding:9px 12px;
  border-radius:8px; cursor:pointer; text-decoration:none; }
.k-menu-list a:hover, .k-menu-list button:hover { background:var(--gray-100); color:var(--navy); text-decoration:none; }

/* Liste */
.k-list { background:#fff; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden; }
.k-list-head, .k-row { display:grid;
  grid-template-columns:34px 1.3fr 1.3fr 1fr .8fr 1fr 1fr 1.1fr 40px; align-items:center; }
.k-list-head { padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gray-500); font-weight:700; background:var(--gray-50, #f8f9fb); }
.k-list-head > span:first-child, .k-row > input { justify-self:center; }
.k-row { border-top:1px solid var(--gray-100); padding:0 14px; }
.k-row:hover { background:#fdf7fb; }
.k-row-link { display:contents; text-decoration:none; color:inherit; }
.k-row-link > span { padding:13px 8px; font-size:13.5px; color:var(--gray-600); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-row-name { font-weight:700; color:var(--navy); }

/* Mobil: Liste wird zur kompakten Kartenliste */
@media (max-width: 900px) {
  .k-list-head { display:none; }
  .k-list { border:0; background:none; }
  .k-row { grid-template-columns:1fr; background:#fff; border:1px solid var(--gray-200);
    border-radius:12px; margin-bottom:10px; padding:12px 14px; position:relative; }
  .k-row-link { display:flex; flex-direction:column; gap:3px; }
  .k-row-link > span { padding:0; white-space:normal; }
  .k-row-link > span[data-l]:not(.k-row-name)::before {
    content:attr(data-l) ": "; color:var(--gray-400); font-size:11.5px; }
  .k-row-name { font-size:15px; }
  .k-row > input { position:absolute; top:12px; right:40px; }
  .k-cards { grid-template-columns:1fr; }
}

/* ── Kontakte: leere Zustände ───────────────────────────────────────────── */
.k-empty { text-align:center; padding:56px 20px; }
.k-empty-ic { font-size:44px; margin-bottom:14px; }
.k-empty h2 { color:var(--navy); font-size:19px; font-weight:800; margin:0 0 8px; }
.k-empty p { color:var(--gray-500); font-size:14px; line-height:1.6; max-width:460px; margin:0 auto; }
.k-empty-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.k-empty-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* ── Papierkorb ─────────────────────────────────────────────────────────── */
.tr-warn { display:flex; gap:14px; align-items:flex-start; background:#fef2f2;
  border:1px solid #fecaca; border-radius:14px; padding:18px 20px; margin-bottom:20px;
  font-size:13.5px; color:#7f1d1d; line-height:1.55; }
.tr-warn-ic { font-size:20px; line-height:1.2; }
.tr-warn strong { color:#b42318; }

.tr-list { display:flex; flex-direction:column; gap:12px; }
.tr-row { display:grid; grid-template-columns:auto 1.4fr 1fr auto; gap:16px; align-items:center;
  background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:16px 20px; }
.tr-name { font-weight:800; color:var(--navy); font-size:15px; }
.tr-firma { font-size:13px; color:var(--gray-500); margin-top:2px; }
.tr-date-lbl { font-size:12px; color:var(--gray-400); }
.tr-date-val { font-size:13.5px; color:var(--gray-600); font-weight:600; margin-top:2px; }
.tr-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width: 800px) {
  .tr-row { grid-template-columns:auto 1fr; row-gap:12px; }
  .tr-date, .tr-actions { grid-column:1 / -1; }
  .tr-actions { justify-content:flex-start; }
}

/* ── Admin/Benutzer: ruhige Karten statt breiter Tabelle ────────────────── */
.au-search { display:flex; gap:8px; margin-bottom:16px; align-items:center; }
.au-search input { flex:1; max-width:360px; padding:10px 14px; font-size:14px;
  border:1px solid var(--gray-200); border-radius:10px; background:#fff; }
.au-search input:focus { outline:none; border-color:var(--brand); }

.au-kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.au-kpi { background:#fff; border:1px solid var(--gray-200); border-radius:12px;
  padding:12px 18px; min-width:110px; }
.au-kpi-val { font-size:22px; font-weight:800; color:var(--navy); line-height:1.1; }
.au-kpi-lbl { font-size:12px; color:var(--gray-500); }

.au-list { display:flex; flex-direction:column; gap:12px; }
.au-card { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:16px 18px; }
.au-card:hover { border-color:var(--gray-300); }

.au-head { display:flex; align-items:flex-start; gap:14px; }
.au-id { min-width:190px; }
.au-name { font-weight:800; color:var(--navy); font-size:14.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.au-role { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:#ede9fe; color:#6d28d9; padding:2px 8px; border-radius:20px; }
.au-mail { font-size:12.5px; color:var(--gray-500); }
.au-note { font-size:11.5px; color:var(--gray-400); margin-top:2px; }

.au-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:14px; flex:1; }
.au-fact { display:flex; flex-direction:column; gap:1px; min-width:0; }
.au-fact-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); font-weight:700; }
.au-val { font-size:13px; color:var(--gray-700); }
.au-num { font-size:15px; font-weight:800; color:var(--navy); }
.au-num.warn, .au-sub.warn { color:#b45309; }
.au-num.bad, .au-val.bad, .au-sub.bad { color:#b42318; }
.au-val.ok { color:#0d8f68; font-weight:600; }
.au-sub { font-size:11px; color:var(--gray-400); font-weight:400; }
.au-plan { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--navy); }
.au-plan i { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }

.au-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }

.au-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; padding-left:52px; }
.au-chip { font-size:11.5px; background:var(--gray-100); color:var(--gray-600);
  padding:3px 10px; border-radius:20px; }

.au-edit { margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-100); }
.au-edit[hidden] { display:none; }
.au-edit-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.au-f { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.au-f > span:first-child { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gray-400); font-weight:700; }
.au-f select, .au-f input[type="date"] { font-size:13px; padding:7px 9px;
  border:1px solid var(--gray-200); border-radius:8px; }
.au-addons { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:2px; }
.au-addons label { font-size:12.5px; color:var(--gray-600); display:flex; align-items:center; gap:5px; }
.au-addons input[type="number"] { width:56px; font-size:12.5px; padding:4px 6px;
  border:1px solid var(--gray-200); border-radius:6px; }
.plan-expires-clear { background:none; border:0; cursor:pointer; color:var(--gray-400); font-size:13px; }

.au-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--gray-100); }

@media (max-width: 900px) {
  .au-head { flex-wrap:wrap; }
  .au-facts { width:100%; }
  .au-right { flex-direction:row; align-items:center; width:100%; }
  .au-chips { padding-left:0; }
  .au-actions .btn-delete-user { margin-left:0 !important; }
}

/* Kontaktdaten in der Listenansicht (unter dem Namen) */
.k-row-contact { display:block; font-size:11.5px; color:var(--gray-400); font-weight:400;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Checkbox/Menue muessen ueber dem Karten-Overlay liegen */
.k-card-cb { z-index:2; }
.k-card .k-menu { z-index:3; }

/* ── Kontaktkarte v2: ruhig, klare Hierarchie (überschreibt frühere Regeln) ── */
.k-cards { gap: 14px; }
.k-card { display: flex; flex-direction: column; border-radius: 12px; }
.k-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.k-card-head { padding-right: 56px; margin-bottom: 10px; }
.k-card-name { font-size: 14.5px; letter-spacing: -.01em; }
.k-card-firma { font-size: 12.5px; margin-top: 1px; }

/* Branche · Ort – ruhige Sekundärzeile */
.k-card-meta { font-size: 12.5px; color: var(--gray-400); margin: 0 0 10px; }

/* Telefon + E-Mail: grau, zurückhaltend, mit feinem Icon (klickbar) */
.k-card-contact { position: relative; z-index: 2; display: flex; flex-direction: column;
  gap: 5px; margin: 0 0 12px; }
.k-contact-link { display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  max-width: 100%; font-size: 12.5px; color: var(--gray-500); text-decoration: none; }
.k-contact-link svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gray-400); }
.k-contact-link .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-contact-link:hover { color: var(--gray-800); text-decoration: none; }
.k-contact-link:hover svg { color: var(--gray-600); }

/* Tags: neutral statt bunt, damit die Karte ruhig bleibt */
.k-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.k-tag { font-size: 11.5px; background: var(--gray-100); color: var(--gray-600);
  padding: 3px 10px; border-radius: 6px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Fußzeile: Beziehung (dezent) + höchstens EIN Status – unten bündig */
.k-card-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.k-rel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
.k-rel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; }
.k-rel-2 { background: #f59e0b; }
.k-rel-3 { background: #0d8f68; }
.k-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.k-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.k-status-wv { color: #dc2626; }
.k-status-incomplete { color: #b45309; }
.k-status-match { color: #0d8f68; }

/* ── Dashboard „Aktuelle Empfehlung": farbiger Score-Kreis (wie früher) ──── */
.dash-match-score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dash-score-ring { width: 104px; height: 104px; border-radius: 50%;
  border: 3px dashed var(--brand-mid, #f6a5cf); display: flex; align-items: center; justify-content: center; }
.dash-score-circle { width: 82px; height: 82px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #ff6fb5 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(233, 30, 140, .32); }
.dash-score-num { font-size: 22px; font-weight: 800; line-height: 1; }
.dash-score-cap { font-size: 10px; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .05em; text-align: center; }

/* ── Fix (2026-07-24): kein horizontaler Überlauf der Kontaktkarten ──────────
   Single-column-Grid mit `1fr` hat sich an den breitesten Karten-Inhalt (z. B.
   eine lange, nicht umbrechbare E-Mail mit white-space:nowrap) angepasst und ist
   damit über den Bildschirmrand hinausgewachsen. Fixe Track-Untergrenze
   (min(100%,290px)) verhindert das Wachsen; min-width:0 + overflow lassen lange
   E-Mails/Tags sauber mit „…" abschneiden. Desktop-Mehrspaltigkeit bleibt. */
.k-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.k-card, .k-card-body { min-width: 0; }
.k-contact-link { overflow: hidden; }
.k-contact-link .t { min-width: 0; }