/* Version 85.0.2 – modernes Portaldesign nach Layoutvariante 1 */
:root {
  --pro: #0b7f8c;
  --pro-strong: #086b76;
  --pro-soft: #e9f6f7;
  --navy: #102f50;
  --navy-soft: #eaf0f6;
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --line: #dce5e9;
  --line-strong: #cbd8de;
  --ink: #142b43;
  --muted: #667786;
  --success: #197044;
  --warning: #9b6500;
  --danger: #b42318;
  --info: #245a91;
  --gold: #e2b11f;
  --shadow-sm: 0 4px 16px rgba(16, 47, 80, .055);
  --shadow-md: 0 12px 32px rgba(16, 47, 80, .085);
}

html { background: var(--bg); }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a { color: var(--pro-strong); }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.018em; }
.small { color: var(--muted); }

button,
.dark,
.lightbtn,
.redbtn,
.workspace-tab,
.sidebar-filter,
.section-btn {
  border-radius: 10px;
}

.dark,
.primary {
  border: 1px solid var(--pro);
  background: var(--pro);
  color: #fff;
  box-shadow: none;
}
.dark:hover,
.primary:hover { background: var(--pro-strong); border-color: var(--pro-strong); }
.lightbtn,
.light {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}
.lightbtn:hover,
.light:hover { border-color: #9bb9c2; background: #f7fbfc; }

input,
select,
textarea {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(16, 47, 80, .025);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pro);
  outline: 3px solid rgba(11, 127, 140, .13);
}

.card,
.dash-card,
.box,
.simple-note,
.usage-card,
.quality-kpi,
.quality-level-card,
.employee-quality-card {
  border-color: var(--line);
}
.card {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.box,
.simple-note { border-radius: 12px; background: var(--surface-soft); }
.simple-note { color: #465d6d; }

/* Anmeldung */
.center {
  min-height: 100vh;
  padding: 36px;
  background:
    radial-gradient(circle at 12% 10%, rgba(11, 127, 140, .10), transparent 30%),
    var(--bg);
}
.grid.login {
  width: min(1100px, 100%);
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(16, 47, 80, .16);
}
.grid.login > .hero {
  min-height: 590px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 0;
  padding: 54px;
  background: var(--navy);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.grid.login > .hero::before,
.grid.login > .hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}
.grid.login > .hero::before { width: 310px; height: 310px; right: -120px; top: -110px; }
.grid.login > .hero::after { width: 180px; height: 180px; right: 42px; top: 74px; }
.grid.login > .hero h1 { max-width: 620px; margin: 8px 0 12px; color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); }
.grid.login > .hero p { max-width: 560px; margin: 0; color: #d6e2ec; font-size: 1.06rem; }
.grid.login > .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 52px;
  box-shadow: none;
}
.grid.login > .card h2 { margin: 0 0 20px; font-size: 1.8rem; }
.portal-login-mark { width: 230px; max-width: 75%; margin-bottom: auto; filter: none; }
.group-toggle { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }

/* Feste Portalnavigation */
.workspace-nav-wrap {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: 266px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-right: 1px solid var(--line);
  border-top: 0;
  background: #fff;
  box-shadow: none;
}
.portal-nav-brand {
  flex: 0 0 auto;
  padding: 25px 22px 21px;
  border-bottom: 1px solid #edf1f3;
}
.portal-nav-brand img {
  display: block;
  width: 142px;
  height: auto;
  margin-bottom: 15px;
}
.portal-nav-brand b { display: block; color: var(--navy); font-size: 1.12rem; }
.portal-nav-brand span { display: block; margin-top: 3px; color: var(--muted); font-size: .73rem; letter-spacing: .045em; text-transform: uppercase; }
.workspace-nav-desktop {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 18px 12px;
}
.workspace-nav-desktop .workspace-tab {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #334b60;
  box-shadow: none;
  text-align: left;
}
.workspace-nav-desktop .workspace-tab:hover { border-color: #d9e7ea; background: #f1f8f9; }
.workspace-nav-desktop .workspace-tab.active {
  border-color: #d6eaed;
  background: var(--pro-soft);
  color: var(--pro-strong);
  box-shadow: none;
}
.workspace-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.workspace-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-nav-user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 12px 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.portal-avatar {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pro-soft);
  color: var(--pro-strong);
  font-size: .78rem;
  font-weight: 900;
}
.portal-nav-user > span:last-child { min-width: 0; }
.portal-nav-user b,
.portal-nav-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-nav-user b { font-size: .86rem; }
.portal-nav-user small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.workspace-nav-mobile { display: none; }

/* Kopf und Arbeitsfläche */
.top {
  margin-left: 266px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.top > div { max-width: none; min-height: 73px; padding: 11px 30px; }
.top-brand b { color: var(--navy); font-size: 1.08rem; }
.top-userline { margin-top: 3px; }
.current-training-meta { margin-top: 2px; font-size: .72rem; }
.top-actions { gap: 8px; }
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
}
.top-logout { min-height: 42px; padding: 9px 14px; }

.notice { max-width: none; margin: 14px 0 0 266px; padding: 0 30px; }
.notice .msg { border-radius: 12px; }

.layout,
.layout.no-sidebar {
  width: auto;
  max-width: none;
  min-height: calc(100vh - 73px);
  margin: 0 0 0 266px;
  padding: 28px 30px 52px;
}
.layout { grid-template-columns: 314px minmax(0, 1fr); gap: 22px; }
.layout.no-sidebar { display: block; }
#mainContent { width: 100%; max-width: 1540px; margin: 0 auto; }
.workspace-title { margin: 0 0 4px; }
.workspace-title h1 { margin: 0; color: var(--navy); font-size: clamp(1.75rem, 2.4vw, 2.35rem); }
.workspace-title p { max-width: 820px; margin: 7px 0 0; color: var(--muted); }
.workspace-eyebrow {
  display: block;
  color: var(--pro-strong);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.welcome-title { padding: 2px 0 4px; }

/* Startseite wie Layout 1 */
.overview-hero-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.35fr) minmax(380px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.continue-card {
  min-height: 234px;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.continue-visual {
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pro-soft);
  color: var(--pro);
  position: relative;
}
.continue-visual::before,
.continue-visual::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(11, 127, 140, .27);
  border-radius: 50%;
}
.continue-visual::before { inset: 17px; }
.continue-visual::after { inset: 34px; }
.continue-visual span { position: relative; z-index: 1; font-size: 2.25rem; font-weight: 900; }
.continue-content { min-width: 0; }
.continue-kicker { display: block; margin-bottom: 13px; color: var(--pro-strong); font-size: 1.02rem; font-weight: 900; }
.continue-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.continue-heading h2 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.6rem); overflow-wrap: anywhere; }
.continue-heading p { margin: 6px 0 0; color: var(--muted); font-size: .84rem; }
.continue-heading > b { color: var(--pro-strong); font-size: 1.5rem; white-space: nowrap; }
.continue-progress { height: 9px; margin: 18px 0; overflow: hidden; border-radius: 999px; background: #e8eef1; }
.continue-progress span { display: block; height: 100%; border-radius: inherit; background: var(--pro); }
.continue-button { min-width: 205px; display: inline-flex; justify-content: space-between; gap: 18px; }

.overview-hero-grid > .dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.overview-hero-grid > .dash .dash-card {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.overview-hero-grid > .dash .dash-card::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  right: -24px;
  top: -24px;
  border-radius: 50%;
  background: var(--pro-soft);
}
.overview-hero-grid > .dash .dash-card:nth-child(2)::after { background: #edf6ef; }
.overview-hero-grid > .dash .dash-card:nth-child(3)::after { background: var(--navy-soft); }
.overview-hero-grid > .dash .dash-card:nth-child(4)::after { background: #fff5dd; }
.overview-hero-grid > .dash .dash-card b { color: var(--navy); font-size: 1.85rem; }
.dash-card { border-radius: 14px; background: #fff; box-shadow: none; }
.dash-card b { color: var(--navy); }

.task-center { padding: 22px; background: #fff; }
.task-head h2 { color: var(--navy); }
.task-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.task-card {
  min-height: 188px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.task-card:hover { border-color: #b8ced4; box-shadow: var(--shadow-sm); }
.task-card.personal { border-left: 4px solid var(--danger); }
.task-card.overdue { border-color: #efc3be; background: #fffafa; }
.task-card h3 { color: var(--navy); }

.overview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.quick-card { gap: 10px; }
.quick-action {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.quick-action:hover { border-color: #b8ced4; background: #fff; }
.status-legend-card { align-self: start; }

.badge,
.status-pill { border-radius: 999px; }
.badge.blue { background: #eaf2fb; color: #245a91; }
.badge.green,
.status-pill.is-success { background: #e9f6ee; color: #17663c; border-color: #c6e4d2; }
.badge.amber,
.status-pill.is-warning { background: #fff6dc; color: #815a00; border-color: #edd99c; }
.badge.red,
.status-pill.is-danger { background: #fff0ef; color: #9d2017; border-color: #edc1bd; }

.progress,
.points-meter,
.sidebar-progress,
.usage-bar { background: #e8eef1; }
.progress div,
.progress span,
.points-meter div,
.sidebar-progress > div,
.usage-bar div { display: block; height: 100%; background: var(--pro); }

/* Schulungsnavigation und Lernansicht */
.layout > aside .sidebar-stack { top: 92px; max-height: calc(100vh - 116px); }
.sidebar-status-card,
.sidebar-training-card {
  border: 1px solid var(--line);
  border-radius: 16px !important;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar-progress-head strong { color: var(--navy); }
.sidebar-stat { border-color: var(--line); border-radius: 10px; background: var(--surface-soft); }
.sidebar-filter { border-color: var(--line); border-radius: 8px; color: #526674; }
.sidebar-filter.active { border-color: var(--pro); background: var(--pro); color: #fff; }
.sidebar-category { border-color: var(--line); border-radius: 11px; }
.sidebar-category .cat-row { background: #fbfcfd; }
.sidebar-category.is-open > .cat-row { border-bottom-color: var(--line); background: var(--pro-soft); }
.training-mini { border-color: var(--line); border-radius: 9px; color: var(--ink); }
.training-mini:hover { border-color: #9fc0c7; background: #f5fbfc; }
.training-mini.active { border-color: var(--pro); background: var(--pro); color: #fff; box-shadow: none; }
.training-mini.mandatory-open { background: #fff8f7; border-color: #efcbc7; }
.training-mini.mandatory-open.active { background: var(--pro); border-color: var(--pro); }
.sidebar-priority { border-radius: 11px; }
.mobile-training-picker { border-color: #b9d4d9; background: var(--pro-soft); color: var(--navy); }

.section-nav { gap: 7px; }
.section-btn { border-color: var(--line-strong); color: var(--ink); }
.section-btn:hover { border-color: #95b9c0; background: #f7fbfc; }
.section-btn.active { border-color: var(--pro); background: var(--pro); color: #fff; }
.section-btn.done { border-color: #6eb3bd; box-shadow: inset 0 0 0 1px #6eb3bd; }
.answer { border-color: var(--line-strong); border-radius: 10px; }
.answer:hover { border-color: #91b6bd; background: #f7fbfc; }
.answer.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.training-video { border-radius: 12px; }

/* Nachweise, Qualität und Verwaltung */
.folder-hero,
.admin-intro {
  border-radius: 16px;
  background: var(--navy);
}
.folder-year { border-color: var(--line); border-radius: 12px; }
.folder-year > summary { background: var(--surface-soft); }
.folder-item { border-color: var(--line); }
.process-step { border-color: var(--line); border-radius: 10px; }
.process-step strong { background: var(--pro); }
.admin-hub,
.admin-tools-wrap { gap: 14px; }
.acc-card { overflow: hidden; }
.acc-head { padding: 2px; }
.quality-kpi-grid { gap: 10px; }
.quality-kpi,
.quality-level-card,
.employee-quality-card { border-radius: 12px; background: #fff; }
.quality-kpi strong { color: var(--navy); }
.quality-kpi.success strong { color: var(--success); }
.quality-kpi.warning strong { color: var(--warning); }
.quality-kpi.danger strong { color: var(--danger); }
.tablewrap,
.compact-table { border: 1px solid var(--line); border-radius: 12px; }
.table th,
table th { background: #f5f8fa; color: var(--navy); }
.table td,
.table th,
table td,
table th { border-color: #e5ecef; }

.notification-panel { border-left: 1px solid var(--line); box-shadow: -18px 0 48px rgba(16, 47, 80, .16); }
.notification-item { border-color: var(--line); border-radius: 12px; }
.push-card { border-color: #bdd8dd; background: var(--pro-soft); }
.update-banner { background: var(--navy); }

@media (max-width: 1280px) {
  .workspace-nav-wrap { width: 238px; }
  .top,
  .layout,
  .layout.no-sidebar,
  .notice { margin-left: 238px; }
  .layout { grid-template-columns: 290px minmax(0, 1fr); padding-left: 22px; padding-right: 22px; }
  .layout.no-sidebar { padding-left: 24px; padding-right: 24px; }
  .overview-hero-grid { grid-template-columns: 1fr; }
  .overview-hero-grid > .dash { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 1020px) {
  .workspace-nav-wrap { width: 220px; }
  .portal-nav-brand { padding-left: 16px; padding-right: 16px; }
  .portal-nav-brand img { width: 125px; }
  .top,
  .layout,
  .layout.no-sidebar,
  .notice { margin-left: 220px; }
  .layout:not(.no-sidebar) { display: grid; grid-template-columns: 255px minmax(0, 1fr); }
  .overview-hero-grid > .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continue-card { grid-template-columns: 120px minmax(0, 1fr); }
  .continue-visual { width: 112px; height: 112px; }
}

@media (max-width: 820px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .workspace-nav-wrap {
    position: fixed;
    inset: auto 0 0;
    width: auto;
    height: auto;
    display: block;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-right: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -10px 28px rgba(16, 47, 80, .11);
    backdrop-filter: blur(12px);
  }
  .portal-nav-brand,
  .portal-nav-user,
  .workspace-nav-desktop { display: none !important; }
  .workspace-nav-mobile {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .workspace-nav-mobile.no-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-nav-mobile .workspace-tab {
    min-width: 0;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 3px !important;
    border: 1px solid transparent;
    background: transparent;
    color: #637786;
    font-size: .67rem !important;
    line-height: 1.05;
  }
  .workspace-nav-mobile .workspace-tab.active { border-color: #d7ebed; background: var(--pro-soft); color: var(--pro-strong); box-shadow: none; }
  .workspace-nav-mobile .workspace-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .workspace-nav-mobile .workspace-icon svg { width: 20px; height: 20px; }
  .workspace-more-icon { font-size: 1rem; font-weight: 900; }

  .top,
  .layout,
  .layout.no-sidebar,
  .notice { margin-left: 0; }
  .top > div { min-height: 62px; padding: 8px 12px; }
  .top-brand b { font-size: .95rem; }
  .top-userline { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .current-training-meta { display: none; }
  .install-app-btn { display: none; }
  .top-logout { padding: 8px 10px; }
  .notice { padding: 0 12px; }
  .layout,
  .layout.no-sidebar { min-height: 0; padding: 16px 12px calc(100px + env(safe-area-inset-bottom)); }
  #mainContent { max-width: none; }
  .workspace-title h1 { font-size: 1.65rem; }
  .workspace-title p { font-size: .88rem; }
  .overview-hero-grid { grid-template-columns: 1fr; }
  .continue-card { min-height: 0; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .continue-visual { width: 104px; height: 104px; }
  .continue-kicker { margin-bottom: 7px; font-size: .84rem; }
  .continue-heading { display: block; }
  .continue-heading > b { display: block; margin-top: 7px; font-size: 1.15rem; }
  .continue-progress { margin: 12px 0; }
  .continue-button { width: 100%; min-width: 0; }
  .overview-hero-grid > .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-hero-grid > .dash .dash-card { min-height: 102px; padding: 14px; }
  .overview-grid { grid-template-columns: 1fr; }
  .task-center { padding: 15px; }
  .task-grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }

  main.layout > aside {
    background: #fff;
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 50px rgba(16, 47, 80, .19);
  }
  .sidebar-status-card,
  .sidebar-training-card { box-shadow: none; }
  .mobile-sidebar-close { border-color: var(--line); color: var(--navy); }
  .mobile-training-picker { margin-bottom: 2px; }
  .mobile-more-panel { border-color: var(--line); background: #fff; }
  .mobile-more-item { border-color: var(--line); }
  .mobile-more-item.active { border-color: var(--pro); background: var(--pro-soft); }

  .center { padding: 14px; }
  .grid.login { grid-template-columns: 1fr; border-radius: 18px; }
  .grid.login > .hero { min-height: 220px; justify-content: flex-end; padding: 24px; }
  .grid.login > .hero::before { width: 180px; height: 180px; }
  .grid.login > .hero::after { display: none; }
  .grid.login > .hero h1 { font-size: 1.7rem; }
  .grid.login > .hero p { font-size: .9rem; }
  .grid.login > .card { padding: 25px 22px; }
  .portal-login-mark { width: 170px; margin-bottom: 30px; }
}

@media (max-width: 520px) {
  .top-actions .icon-btn { width: 38px; height: 38px; }
  .top-brand .top-userline { display: none; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-visual { width: 78px; height: 78px; }
  .continue-visual::before { inset: 10px; }
  .continue-visual::after { inset: 22px; }
  .continue-visual span { font-size: 1.6rem; }
  .overview-hero-grid > .dash { gap: 8px; }
  .overview-hero-grid > .dash .dash-card { min-height: 96px; padding: 12px; }
  .overview-hero-grid > .dash .dash-card b { font-size: 1.45rem; }
  .quick-action { align-items: stretch; }
  .quick-action button { width: 100%; }
}

/* Version 85.0.2 – reale Lern- und Qualitätsbereiche konsequent in Blau/Petrol */
body { background: var(--bg); }

/* Alte beige Oberflächen werden in das kühle Kartensystem der Variante 1 überführt. */
.box:not(.red):not(.amber):not(.green),
.simple-note,
.video-box,
.genially-box,
.group-toggle,
.folder-item,
.employee-attempts,
.training-attempts,
.mentoring-training-list,
.mentoring-record,
.usage-card,
.quality-event-card,
.effectiveness-card,
.plan-chip,
.reminder-item {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
.employee-attempts[open] > summary,
.mentoring-record[open] > summary { background: var(--pro-soft); }
.mentoring-training-option:hover { background: var(--pro-soft); }
.role-pill { border-color: var(--line-strong); color: var(--ink); }
.role-pill:hover { border-color: #9bb9c2; background: #f6fbfc; }
.role-pill.active { border-color: var(--pro); background: var(--pro); color: #fff; }
.quality-matrix thead th { background: var(--navy); color: #fff; }
.notification-item { border-color: var(--line); }
.notification-item.unread { background: var(--pro-soft); }

/* Neue Schulungsansicht: Kursidentität, Lernschritte und Nachweis klar getrennt. */
.training-shell {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.training-assignment-note { margin: 18px 18px 0; }
.training-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 32px 26px;
  background: linear-gradient(128deg, var(--navy) 0%, #124d68 58%, var(--pro) 100%);
  color: #fff;
}
.training-hero::before,
.training-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}
.training-hero::before { width: 260px; height: 260px; right: -88px; top: -136px; }
.training-hero::after { width: 150px; height: 150px; right: 58px; top: -72px; }
.training-hero > * { position: relative; z-index: 1; }
.training-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 10px;
  color: #bfe4e8;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.training-hero h2 {
  max-width: 940px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.16;
}
.training-hero > p {
  max-width: 960px;
  margin: 12px 0 0;
  color: #e3eef3;
  font-size: .95rem;
  line-height: 1.58;
}
.training-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.training-meta-row .badge {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(5px);
}
.training-meta-row .pflicht-badge {
  border-color: rgba(255, 221, 216, .44);
  background: rgba(142, 25, 20, .48);
  color: #fff;
}
.training-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 8px;
  margin-top: 22px;
}
.training-flow-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .075);
  color: #d9e9ee;
  font-size: .73rem;
  font-weight: 800;
}
.training-flow-number {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 7px;
  font-size: .7rem;
}
.training-flow-step.is-complete { background: rgba(255, 255, 255, .13); color: #fff; }
.training-flow-step.is-active {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(6, 32, 52, .18);
}
.training-flow-step.is-active .training-flow-number { border-color: var(--pro); background: var(--pro); color: #fff; }
.training-author { margin-top: 14px; color: #bfdae3; font-size: .72rem; }

.training-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
  padding: 24px;
  background: #f5f8fa;
}
.training-learning-column { min-width: 0; }
.training-learning-column .section-nav { margin-bottom: 12px; }
.training-learning-column .section-btn {
  min-height: 78px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 47, 80, .035);
}
.training-learning-column .section-btn .small { display: inline-block; margin-top: 4px; color: #617381; line-height: 1.25; }
.training-learning-column .section-btn.active { border-color: var(--pro); background: var(--pro); color: #fff; }
.training-learning-column .section-btn.active .small { color: #e7f6f7; }
.training-learning-column .section-btn.done:not(.active) { border-color: #8fc1c8; background: #f2fafb; }
.learning-content-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.learning-section-heading { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.learning-section-heading > span,
.learning-card-kicker {
  display: block;
  color: var(--pro-strong);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.learning-section-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.learning-content-card .section-text { margin: 0; color: #2d4356; font-size: 1rem; line-height: 1.72; }
.learning-primary-action { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.learning-primary-action .dark { min-width: 230px; }

.training-confirm-column { min-width: 0; }
.learning-confirm-card {
  top: 96px;
  padding: 21px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--pro);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.learning-confirm-card h3 { margin: 5px 0 9px; color: var(--navy); font-size: 1.15rem; }
.learning-confirm-card > p { margin: 0 0 14px; line-height: 1.5; }
.learning-confirm-stats { display: grid; grid-template-columns: 1fr 84px; gap: 8px; }
.learning-confirm-card .box { margin: 0 0 9px; padding: 11px; border-radius: 10px; background: var(--surface-soft); }
.signature-field { display: grid; gap: 6px; margin-top: 4px; color: #526674; font-size: .75rem; font-weight: 800; }
.signature-field input { min-height: 44px; }

/* Qualifikationsauswahl ohne kreisförmige Steuerelemente. */
.quality-target-group { display: grid; gap: 9px; margin-top: 12px; }
.qn-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 9px;
}
.qn-selector .qn-option {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.qn-selector .qn-option:hover { border-color: #91b9c0; background: #f7fbfc; }
.qn-selector .qn-option:focus-within { outline: 3px solid rgba(11, 127, 140, .15); outline-offset: 2px; }
.qn-selector .qn-option input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  min-height: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.qn-option-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #a9bbc4;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: .72rem;
}
.qn-option:has(input:checked) { border-color: var(--pro); background: var(--pro-soft); box-shadow: inset 0 0 0 1px var(--pro); }
.qn-option:has(input:checked) .qn-option-box { border-color: var(--pro); background: var(--pro); color: #fff; }

@media (max-width: 1180px) {
  .training-body { grid-template-columns: minmax(0, 1fr); }
  .learning-confirm-card { position: static; }
  .training-flow { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media (max-width: 820px) {
  main.layout > aside { background: var(--bg); }
  .training-hero { padding: 23px 19px 20px; }
  .training-hero h2 { font-size: 1.55rem !important; }
  .training-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-flow-step:last-child { grid-column: 1 / -1; }
  .training-body { padding: 13px; }
  .learning-content-card { padding: 18px !important; }
  .learning-primary-action .dark { width: 100%; min-width: 0; }
  .qn-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .training-flow { grid-template-columns: 1fr; }
  .training-flow-step:last-child { grid-column: auto; }
  .learning-confirm-stats { grid-template-columns: 1fr; }
}

/* Version 85.0.2 – lesbare Schulungskarten mit echten Themenillustrationen */
.training-visual {
  display: block;
  overflow: hidden;
  border: 1px solid #d8e5e9;
  background: #eaf3f7;
}
.training-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-card { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
.continue-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  place-items: initial;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(16, 47, 80, .1);
}
.continue-visual::before,
.continue-visual::after { display: none; }

.task-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.task-card.has-visual {
  min-width: 0;
  min-height: 344px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-left: 1px solid var(--line);
}
.task-card.has-visual.personal { border-left: 4px solid var(--danger); }
.task-card-visual {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.task-card-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 17px;
}
.task-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.12rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}
.task-card .small { font-size: .84rem; line-height: 1.48; }
.task-card-content > .dark,
.task-card-content > .lightbtn {
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  justify-content: center;
}

.training-mini {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px;
}
.training-mini-visual {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 8px;
  background: #eaf3f7;
}
.training-mini-copy { min-width: 0; display: block; }
.training-mini-copy .title { font-size: .79rem; line-height: 1.28; }
.training-mini.active .training-mini-visual { box-shadow: 0 0 0 2px rgba(255,255,255,.72); }

.training-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: 28px;
}
.training-hero-copy { min-width: 0; }
.training-hero-copy > p {
  max-width: 960px;
  margin: 12px 0 0;
  color: #e3eef3;
  font-size: .95rem;
  line-height: 1.58;
}
.training-hero-visual {
  width: 230px;
  aspect-ratio: 4 / 3;
  border-color: rgba(255,255,255,.46);
  border-radius: 15px;
  background: rgba(255,255,255,.1);
  box-shadow: 0 18px 36px rgba(6, 32, 52, .24);
}

@media (max-width: 1280px) {
  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continue-card { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .task-grid { grid-template-columns: 1fr; }
  .task-card.has-visual { min-height: 0; }
  .task-card-visual { aspect-ratio: 16 / 7.8; }
  .continue-card { grid-template-columns: 132px minmax(0, 1fr); }
  .continue-visual { width: 132px; }
  .training-hero-layout { grid-template-columns: minmax(0, 1fr) 145px; gap: 15px; }
  .training-hero-visual { width: 145px; }
}

@media (max-width: 560px) {
  .continue-card { grid-template-columns: 1fr; }
  .continue-visual { width: min(100%, 260px); }
  .training-hero-layout { grid-template-columns: 1fr; }
  .training-hero-visual { width: min(100%, 240px); }
}