/* Master Kollegen – Frontend (Enterprise UI) */

.mkol-team{
  --mkol-bg: transparent;
  --mkol-card: #ffffff;
  --mkol-text: #0f172a;
  --mkol-muted: #64748b;
  --mkol-border: rgba(15,23,42,.10);
  --mkol-accent: #2563eb;
  --mkol-accent2: #1d4ed8;
  --mkol-shadow: 0 14px 40px rgba(2,6,23,.10);

  background: var(--mkol-bg);
  color: var(--mkol-text);
}

.mkol-team *{ box-sizing: border-box; }

.mkol-variant-dark{
  --mkol-card: rgba(15, 23, 42, .92);
  --mkol-text: #e5e7eb;
  --mkol-muted: rgba(229,231,235,.70);
  --mkol-border: rgba(229,231,235,.14);
  --mkol-shadow: 0 18px 52px rgba(0,0,0,.28);
}

.mkol-empty{
  border: 1px dashed var(--mkol-border);
  border-radius: var(--mkol-radius);
  padding: 22px;
  background: rgba(255,255,255,.55);
}
.mkol-variant-dark .mkol-empty{ background: rgba(15,23,42,.40); }
.mkol-empty__title{ font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.mkol-empty__text{ color: var(--mkol-muted); margin-bottom: 14px; }
.mkol-empty__btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 14px;
  border-radius: 999px;
  background: var(--mkol-accent); color: #fff;
  text-decoration: none; font-weight: 700;
}
.mkol-empty__btn:hover{ background: var(--mkol-accent2); }

.mkol-team__header{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mkol-team__hint{ color: var(--mkol-muted); font-size: 13px; }
.mkol-team__controls{ display: flex; gap: 10px; }
.mkol-nav{
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--mkol-border);
  background: var(--mkol-card);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--mkol-text);
}
.mkol-variant-dark .mkol-nav{ box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.mkol-nav:hover{ border-color: rgba(37,99,235,.45); }

.mkol-team__track{
  display: grid;
  grid-template-columns: repeat(var(--mkol-cols), minmax(0, 1fr));
  gap: var(--mkol-gap);
}

/* Auto-fit mode (min-width controls how many tiles per row) */
.mkol-team.mkol-autofit .mkol-team__track{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mkol-card-minw)), 1fr));
}

.mkol-card{
  background: var(--mkol-card);
  border: 1px solid var(--mkol-border);
  border-radius: var(--mkol-radius);
  padding: var(--mkol-cardpad);
  box-shadow: var(--mkol-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

/* optional min-height */
.mkol-card{ min-height: var(--mkol-card-minh); }

.mkol-card__top{
  display: grid;
  grid-template-columns: var(--mkol-avatar) 1fr;
  gap: 16px;
  align-items: center;
}

.mkol-avatar{
  width: var(--mkol-avatar);
  height: var(--mkol-avatar);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--mkol-border);
  background: rgba(148,163,184,.18);
  display: grid;
  place-items: center;
}

.mkol-img-circle .mkol-avatar{ border-radius: 999px; }
.mkol-img-square .mkol-avatar{ border-radius: 10px; }
.mkol-img-rounded .mkol-avatar{ border-radius: 18px; }

.mkol-avatar__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mkol-avatar__placeholder{ width: 100%; height: 100%; display: grid; place-items: center; font-weight: 900; font-size: 30px; color: var(--mkol-muted); }

.mkol-card__head{ min-width: 0; }

.mkol-name{
  margin: 0 0 4px 0;
  font-size: var(--mkol-name);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkol-meta{ color: var(--mkol-text); font-size: var(--mkol-meta); font-weight: 700; opacity: .95; }
.mkol-meta--sub{ color: var(--mkol-muted); font-size: var(--mkol-submeta); font-weight: 700; margin-top: 2px; }

.mkol-extras{ margin: 0; padding: 0; display: grid; gap: 8px; }
.mkol-extras__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mkol-extras dt{ margin: 0; color: var(--mkol-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mkol-extras dd{ margin: 0; font-size: 13px; font-weight: 700; text-align: right; }

.mkol-bio{ color: var(--mkol-muted); font-size: 13px; line-height: 1.45; }

.mkol-actionbar{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mkol-iconbtn{
  width: var(--mkol-iconbtn);
  height: var(--mkol-iconbtn);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--mkol-accent);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37,99,235,.22);
  transition: transform .12s ease, background-color .12s ease;
}

.mkol-btn-ghost .mkol-iconbtn{
  background: rgba(37,99,235,.10);
  color: var(--mkol-accent);
  box-shadow: none;
  border: 1px solid rgba(37,99,235,.25);
}

.mkol-iconbtn:hover{ background: var(--mkol-accent2); }
.mkol-btn-ghost .mkol-iconbtn:hover{ background: rgba(37,99,235,.16); }
.mkol-iconbtn:active{ transform: translateY(1px); }

.mkol-iconbtn svg{ width: var(--mkol-icon); height: var(--mkol-icon); display: block; }

.mkol-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Slider mode – activated via JS (tablet/mobil) */
.mkol-team.is-slider .mkol-team__header{ display: flex; }

.mkol-team.is-slider .mkol-team__track{
  display: flex;
  gap: var(--mkol-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.mkol-team.is-slider .mkol-team__track::-webkit-scrollbar{ display: none; }
.mkol-team.is-slider .mkol-team__track{ scrollbar-width: none; }

.mkol-team.is-slider .mkol-card{
  scroll-snap-align: start;
  min-width: var(--mkol-slide-w);
  max-width: var(--mkol-slide-w);
}

/* Responsive tuning */
@media (max-width: 900px){
  .mkol-card{ padding: var(--mkol-cardpad-sm); }
  .mkol-card__top{ grid-template-columns: var(--mkol-avatar-sm) 1fr; }
  .mkol-avatar{ width: var(--mkol-avatar-sm); height: var(--mkol-avatar-sm); }
  .mkol-name{ font-size: var(--mkol-name-sm); }
  .mkol-meta{ font-size: var(--mkol-meta-sm); }
  .mkol-meta--sub{ font-size: var(--mkol-submeta-sm); }
  .mkol-iconbtn{ width: var(--mkol-iconbtn-sm); height: var(--mkol-iconbtn-sm); }
  .mkol-iconbtn svg{ width: var(--mkol-icon-sm); height: var(--mkol-icon-sm); }
}

@media (max-width: 520px){
  .mkol-actionbar{ gap: 10px; }
  .mkol-team.is-slider .mkol-card{ min-width: var(--mkol-slide-w-sm); max-width: var(--mkol-slide-w-sm); }
}


/* Ensure consistent layout: reserve space for missing degree */
.mkol-meta--placeholder{ visibility:hidden; }

/* Desktop + Tablet: max 2 cards per row (grid mode) */
@media (min-width: 768px){
  .mkol-team:not(.is-slider) .mkol-team__track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mkol-team.mkol-autofit:not(.is-slider) .mkol-team__track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}