* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0f2438;
  --navy-2: #16334e;
  --teal: #14b8a6;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --border: rgba(11,11,11,0.10);
  --good: #006300;
  --bad: #d03b3b;
  --warn: #b45309;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.layout { display: flex; min-height: 100vh; }
.layout-topbar { min-height: calc(100vh - 52px); }

/* ===== Topbar (HubSpot-Stil) ===== */
.topbar {
  position: sticky; top: 0; z-index: 1100;
  height: 52px; display: flex; align-items: center; gap: 14px;
  background: #0b1a29; color: #dbe6ef; padding: 0 16px;
}
.tb-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.tb-brand img { width: 26px; height: 26px; border-radius: 6px; background: #fff; object-fit: contain; }
.tb-search { position: relative; flex: 1; max-width: 540px; display: flex; align-items: center; }
.tb-search svg { position: absolute; left: 12px; color: #7f97ab; pointer-events: none; }
.tb-search input {
  width: 100%; margin: 0; padding: 8px 14px 8px 34px;
  background: #16334e; border: 1px solid #24425f; border-radius: 999px;
  color: #fff; font-size: 14px;
}
.tb-search input::placeholder { color: #7f97ab; }
.tb-search input:focus { outline: 2px solid var(--teal); background: #1b3c5c; }
.tb-results {
  position: absolute; top: 44px; left: 0; right: 0;
  background: #fff; color: var(--ink); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(11,26,41,0.18); overflow: hidden;
}
.tb-results a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); font-size: 14px; }
.tb-results a:hover { background: #f2f6f4; }
.tb-account { position: relative; margin-left: auto; }
.tb-account summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.tb-account summary::-webkit-details-marker { display: none; }
.tb-account summary:hover { background: #16334e; }
.tb-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tb-name { font-size: 14px; font-weight: 600; color: #fff; }
.tb-caret { color: #7f97ab; font-size: 11px; }
.tb-menu {
  position: absolute; right: 0; top: 46px; min-width: 240px;
  background: #fff; color: var(--ink); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(11,26,41,0.18); overflow: hidden;
}
.tb-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--grid); }
.tb-menu a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); font-size: 14px; }
.tb-menu a:hover { background: #f2f6f4; }

/* Sidebar */
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--navy); color: #dbe6ef;
  padding: 14px 0; display: flex; flex-direction: column;
  position: sticky; top: 52px; height: calc(100vh - 52px);
  z-index: 900; /* Flyout liegt über dem Seiteninhalt — nichts leuchtet durch */
}
.nav-ico { display: inline-flex; width: 26px; flex-shrink: 0; opacity: 0.85; vertical-align: -3px; }
.sidebar nav a, .nav-locked { display: flex; align-items: center; }
.nav-sep { height: 1px; background: var(--navy-2); margin: 8px 16px; }
.brand { font-size: 24px; font-weight: 700; color: #fff; padding: 0 24px; letter-spacing: -0.5px; }
.brand span { color: var(--teal); }
.brand-sub { padding: 0 24px 20px; font-size: 12px; color: #7f97ab; text-transform: uppercase; letter-spacing: 1px; }
.brand-dark { color: var(--navy); padding: 0; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar nav a {
  color: #b9c9d6; text-decoration: none; padding: 10px 24px; font-size: 14px;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: var(--navy-2); color: #fff; }
.sidebar nav a.active { background: var(--navy-2); color: #fff; border-left-color: var(--teal); }
.sidebar-footer { padding: 16px 24px 0; border-top: 1px solid var(--navy-2); font-size: 13px; }
.user-name { color: #fff; font-weight: 600; }
.user-role { color: #7f97ab; font-size: 12px; margin-bottom: 8px; }
.logout { color: #b9c9d6; font-size: 13px; }

/* Content */
.content { flex: 1; padding: 32px 40px; max-width: none; min-width: 0; }
.content-public { max-width: none; padding: 0; }

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 13px; }
.pos { color: var(--good); }
.neg { color: var(--bad); }

/* Cards & KPIs */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin-bottom: 20px;
}
.kpi-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; flex: 1; min-width: 150px;
}
.kpi-value { font-size: 28px; font-weight: 700; }
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.quicklinks { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.quicklinks a {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; text-decoration: none; color: var(--ink-2); font-weight: 500;
}
.quicklinks a:hover { border-color: var(--teal); color: var(--navy); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Mobile: Burger-Menü, Sidebar als Slide-in-Overlay */
.mobile-topbar { display: none; }
.backdrop { display: none; }
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; overflow-x: hidden; }
  h1 { font-size: 20px; }
  h2 { font-size: 15px; }

  /* Eingaben: 16px verhindert Auto-Zoom beim Fokussieren auf iOS */
  input, select, textarea, .btn { font-size: 16px; }
  .btn { padding: 10px 16px; }
  .btn-small { padding: 8px 12px; }

  .inline-form { flex-wrap: wrap; }
  .inline-form input, .inline-form select { flex: 1 1 auto; min-width: 0 !important; width: auto; }
  .inline-form .btn { flex: 1 1 auto; }
  .form-row { flex-wrap: wrap; }
  .form-row label { flex: 1 1 100%; }

  /* Breite Tabellen scrollen in sich, statt die Seite zu sprengen */
  .card { overflow-x: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .kpi-row { gap: 10px; }
  .kpi { min-width: calc(50% - 5px); padding: 12px 14px; }
  .kpi-value { font-size: 22px; }

  .chart-box { height: 200px; }
  .dash-handle { font-size: 20px; padding: 8px 10px; }

  .enps-grid { flex-direction: column; }
  .qr-box { margin: 0 auto; }
  .enps-headline .kpi-value { font-size: 26px; }

  .company-header { flex-wrap: wrap; }
  .page-head { margin-bottom: 12px; }
  .quicklinks a { flex: 1 1 auto; text-align: center; }
  .sidebar {
    position: fixed; top: 52px; left: 0; height: calc(100vh - 52px); height: calc(100dvh - 52px); width: 260px;
    transform: translateX(-100%); transition: transform 0.25s ease;
    z-index: 1000; overflow-y: auto;
  }
  .tb-name { display: none; }
  .tb-brand span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.35); }
  .backdrop.show {
    display: block; position: fixed; inset: 0;
    background: rgba(11,11,11,0.45); z-index: 990;
  }
  .burger { display: inline-block; }
}
.burger {
  display: none; background: none; border: none; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
@media (max-width: 980px) { .burger { display: inline-block; } }

.chart-box { height: 240px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--grid); }
td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.row-done { opacity: 0.55; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Badges */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-ok { background: #e2f4e2; color: var(--good); }
.badge-info { background: #e2ecfa; color: #1c5cab; }
.badge-warn { background: #fdeeda; color: var(--warn); }
.badge-muted { background: #efeeea; color: var(--ink-2); }
.badge-src-wespect { background: #e0f2f0; color: #0e7268; }
.badge-src-bestandsaufnahme { background: #e2ecfa; color: #1c5cab; }
.badge-src-umfrage { background: #f6e5ee; color: #a1376a; }
.badge-src-manuell { background: #efeeea; color: var(--ink-2); }

/* Forms */
form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--grid); border-radius: 6px; font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.form-row { display: flex; gap: 12px; }
.form-row label { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.check input { width: auto; margin: 0; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 0; }
.inline-form input, .inline-form select { width: auto; margin: 0; }
.inline-label { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-weight: 400 !important; white-space: nowrap; }
details { margin-top: 10px; }
details summary { cursor: pointer; }
details form { margin-top: 10px; }

/* Buttons */
.btn {
  display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--grid); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-small { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: #e2f4e2; color: var(--good); }
.flash-error { background: #fbe4e4; color: var(--bad); }

/* Login & Survey (öffentlich) */
.auth-wrap, .survey-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--page);
}
.auth-card { width: 100%; max-width: 380px; }
.auth-wrap h1, .survey-wrap h1 { margin: 8px 0 4px; }
.auth-wrap .muted, .survey-wrap .muted { margin-bottom: 16px; }
.survey-wrap .card { width: 100%; max-width: 560px; }
.thanks-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #e2f4e2; color: var(--good);
  font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}

/* eNPS-Skala */
.score-question { margin: 16px 0 8px; }
.score-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.score-option { flex: 1; min-width: 36px; margin: 0 !important; }
.score-option input { position: absolute; opacity: 0; }
.score-option span {
  display: block; text-align: center; padding: 10px 0; border: 1px solid var(--grid);
  border-radius: 6px; cursor: pointer; font-weight: 600;
}
.score-option input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.score-option input:focus-visible + span { outline: 2px solid var(--teal); }
.score-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 6px 0 16px; }
@media (max-width: 600px) {
  /* eNPS-Skala als Raster: 6 + 5 Felder, gut tippbar */
  .score-scale { display: grid; grid-template-columns: repeat(6, 1fr); }
  .score-option span { padding: 12px 0; }
}

/* Inhaltsreiche Tabellen werden auf Mobil zu gestapelten Karten */
@media (max-width: 700px) {
  table.stack, table.stack tbody { display: block; overflow: visible; }
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--grid); }
  table.stack tr:last-child { border-bottom: none; }
  table.stack td { display: block; border: none; padding: 3px 0; }
  table.stack td:empty { display: none; }
  table.stack td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  }
}

/* eNPS-Ergebnisse */
.enps-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.qr-box { text-align: center; max-width: 220px; }
.qr-box img { border: 1px solid var(--grid); border-radius: 8px; }
.qr-box a { word-break: break-all; }
.enps-grid > div:last-child { flex: 1; min-width: 280px; }
.enps-headline { display: flex; align-items: baseline; gap: 10px; }
.enps-split { margin-bottom: 10px; }
.comments { margin: 8px 0 0 18px; font-size: 13px; color: var(--ink-2); }
.comments li { margin-bottom: 4px; }

/* Fortschritt */
.progress-row { margin-bottom: 12px; }
.progress-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.progress { height: 8px; background: var(--grid); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--teal); border-radius: 999px; }

.assessment-block { border-top: 1px solid var(--grid); padding-top: 14px; margin-top: 14px; }
.assessment-block:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

/* Produktphasen-Kacheln */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.module-tile { border: 1px solid var(--grid); border-radius: 10px; padding: 14px; }
.module-tile .module-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.module-booked { border-color: #0B7A52; background: #f2faf6; }
.module-locked { opacity: 0.55; pointer-events: none; user-select: none; }
.module-locked-view { opacity: 0.6; }
.nav-locked { display: block; padding: 10px 24px; font-size: 14px; color: #5d7386; cursor: not-allowed; border-left: 3px solid transparent; }
.nav-locked .lock { font-size: 11px; }
.sidebar nav a.nav-sub { padding-left: 38px; font-size: 13px; }

/* ===== People-Frühwarnsystem ===== */
.fw-banner { border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; border: 1px solid transparent; }
.fw-banner .fw-bl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; opacity: 0.85; margin-bottom: 6px; }
.fw-banner .fw-bh { font-size: 22px; font-weight: 700; margin-bottom: 5px; }
.fw-banner .fw-bt { font-size: 14.5px; }
.fw-gruen { background: #e8f6ef; border-color: #bfe6d0; color: #0f5c39; }
.fw-gelb { background: #fdf4e0; border-color: #f0d9a6; color: #7a4f06; }
.fw-rot { background: #fbeae8; border-color: #f0c2bc; color: #8a251b; }

.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1100px) { .fw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fw-grid { grid-template-columns: 1fr; } }
.fw-area { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px 13px; }
.fw-top { display: flex; align-items: center; gap: 10px; }
.fw-top h3 { font-size: 15.5px; margin: 0; flex: 1; }
.fw-lamp { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,0,0,0.04); }
.fw-lamp-gruen { background: #1f9d63; } .fw-lamp-gelb { background: #c07d0a; } .fw-lamp-rot { background: #d1483b; }
.fw-statusword { font-size: 12px; font-weight: 600; }
.fw-sw-gruen { color: #1f9d63; } .fw-sw-gelb { color: #c07d0a; } .fw-sw-rot { color: #d1483b; }
.fw-desc { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.fw-metaline { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--grid); }
.fw-val { font-size: 13px; color: var(--muted); }
.fw-val strong { color: var(--ink); font-size: 15px; }
.fw-src { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
.fw-src-team { background: #eaf1f9; color: #2f6fb0; }
.fw-src-fakten { background: #eef1f4; color: var(--muted); }
.fw-src-gf { background: #fdf4e0; color: #7a4f06; }
.fw-calc { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 7px 0 0; }
.fw-action { font-size: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--grid); }
.fw-area-toggle summary { list-style: none; cursor: pointer; }
.fw-area-toggle summary::-webkit-details-marker { display: none; }
.fw-area-toggle .fw-chev { margin-left: 4px; }
.fw-area-toggle[open] .fw-chev { transform: rotate(180deg); }
.fw-area-toggle[open] { border-color: var(--teal); }
.fw-action-rot strong { color: #d1483b; } .fw-action-gelb strong { color: #c07d0a; }

.fw-risk { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; }
.fw-risk summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.fw-risk summary::-webkit-details-marker { display: none; }
.fw-risk-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; flex: 1; }
.fw-risk-val { font-size: 16px; font-weight: 700; }
.fw-risk-hint { font-size: 12px; padding: 3px 9px; border-radius: 6px; font-weight: 600; }
.fw-risk-hint.calm { background: #eef1f4; color: var(--muted); }
.fw-risk-hint.alert { background: #fbeae8; color: #d1483b; }
.fw-chev { color: var(--muted); font-size: 13px; }
.fw-risk[open] .fw-chev { transform: rotate(180deg); }
.fw-risk-body { padding: 0 18px 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

/* Stimmen aus dem Team: je Zitat eine Kachel */
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.voice {
  margin: 0; padding: 14px 16px; border: 1px solid var(--grid); border-radius: 12px;
  background: var(--page); font-size: 14px; line-height: 1.55; color: var(--ink);
  position: relative; padding-top: 26px;
}
.voice::before {
  content: '„'; position: absolute; top: 2px; left: 12px;
  font-size: 30px; line-height: 1; color: var(--teal); opacity: 0.5;
}

/* ===== HR-Bilanz: Steuerungs-Kacheln (Ist / Ziel / Delta / Trend) ===== */
.bk-hero {
  background: var(--navy); color: #eef4f9; border-radius: 14px;
  padding: 22px 24px; margin-bottom: 14px;
}
.bk-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; opacity: 0.7; margin-bottom: 6px; }
.bk-hero-summe { font-size: 40px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 8px; }
.bk-hero-prosa { font-size: 13.5px; opacity: 0.9; max-width: 720px; }
.bk-hero-prosa .muted { opacity: 0.6; color: inherit; }

.bk-subnav { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 13.5px; }
.bk-mahnung {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--warn);
  background: #fdf4e0; border-radius: 6px; padding: 2px 8px;
}

.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bk {
  border: 1px solid var(--grid); border-radius: 12px; background: var(--page);
  padding: 12px 14px;
}
.bk[open] { border-color: var(--teal); background: var(--surface); }
.bk summary { list-style: none; cursor: pointer; }
.bk summary::-webkit-details-marker { display: none; }
.bk-head { display: flex; align-items: center; gap: 7px; }
.bk-label { font-size: 13px; font-weight: 600; color: var(--ink-2); flex: 1; }
.bk-chev { color: var(--muted); font-size: 12px; }
.bk[open] .bk-chev { transform: rotate(180deg); }
.bk-ist { font-size: 24px; font-weight: 750; margin: 6px 0 2px; }
.bk-von { font-size: 13px; font-weight: 500; color: var(--muted); }
.bk-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-2); align-items: baseline; }
.bk-ziel { color: var(--muted); }
.bk-delta { font-weight: 600; }
.bk-trend { font-weight: 600; }
.bk-hinweis {
  font-size: 11px; font-weight: 600; color: #7a5b06;
  background: #fdf4e0; border-radius: 5px; padding: 1px 7px;
}
.bk .bk-mahnung { margin-top: 8px; }
.kpi-gesperrt { opacity: 0.55; border-style: dashed !important; }
.kpi-gesperrt .kpi-value { font-size: 20px; }
.bk-locked { opacity: 0.65; background: var(--surface); border-style: dashed; }
.bk-locked .bk-label { color: var(--muted); }
.bk-lock { margin-left: auto; font-size: 13px; }
.bk-ab { font-size: 11.5px; color: var(--muted); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.bk-hero-locked { background: var(--navy-2); }
.bk-hero-locked .bk-hero-prosa { font-size: 14.5px; opacity: 0.95; }

.bk-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--grid); }
.bk-spark { color: var(--teal); display: block; max-width: 100%; }
.bk-neutral .bk-spark { color: var(--ink-2); }
.bk-rot .bk-spark { color: var(--bad); }
.bk-erk { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 8px; }

.bk-actions { margin-top: 10px; display: grid; gap: 6px; }
.bk-action {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  border: 1px solid var(--grid); border-radius: 8px; padding: 6px 9px; background: var(--surface);
}
.bk-action.done { opacity: 0.55; }
.bk-action.done .bk-action-text { text-decoration: line-through; }
.bk-action.late { border-color: var(--bad); }
.bk-action.late .bk-action-status { color: var(--bad); font-weight: 800; }
.bk-action-text { flex: 1; }
.bk-action-form { display: inline; }
.bk-neu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bk-neu input[type="text"] { flex: 1 1 160px; min-width: 0; }
.bk-neu select, .bk-neu input[type="date"] { flex: 0 1 auto; }
.bk-neu input, .bk-neu select {
  font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--grid); border-radius: 7px; background: var(--surface);
}

/* Klickbare KPI-Kacheln mit Erklärung */
.kpi-click { margin-top: 0; cursor: pointer; }
.kpi-click summary { list-style: none; cursor: pointer; }
.kpi-click summary::-webkit-details-marker { display: none; }
.kpi-info { color: var(--teal); font-size: 13px; }
.kpi-click[open] { border-color: var(--teal); }
.kpi-erklaerung {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid);
  font-size: 13px; color: var(--ink-2); line-height: 1.5; cursor: default;
}
.brand-sub .dot { color: var(--teal); }

.nowrap { white-space: nowrap; }

/* Firmen-Branding oben in der Sidebar (klickbar → Unternehmensseite) */
.company-brand {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 6px; padding: 10px 12px;
  border-radius: 10px; text-decoration: none;
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25;
}
.company-brand:hover { background: var(--navy-2); }
.company-brand img {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: contain; background: #fff; flex-shrink: 0;
}
.company-brand-initials {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; font-size: 17px; font-weight: 700;
}
.brand-sub .powered { text-transform: none; letter-spacing: 0; }
.brand-sub .dot { color: var(--teal); }
.user-link { text-decoration: none; display: block; border-radius: 8px; margin: -4px -6px 0; padding: 4px 6px; }
.user-link:hover { background: var(--navy-2); }
.user-link .user-name::after { content: ' →'; color: #7f97ab; font-weight: 400; }

/* Impersonation-Banner (Admin in GF-Ansicht) */
.impersonation-bar {
  background: #fdeeda; color: var(--warn);
  border: 1px solid #f3d9b0; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.impersonation-bar a { color: var(--warn); font-weight: 600; }

/* Unternehmensseite */
.company-header { display: flex; align-items: center; gap: 14px; }
.company-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--grid); }
.company-logo-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 20px;
}
.wespect-contact h3 { margin-top: 16px; }

/* Individualisierbares Dashboard */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-item .card { position: relative; height: 100%; margin-bottom: 0; }
.dash-handle {
  position: absolute; top: 12px; right: 12px;
  color: var(--muted); cursor: grab; font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; user-select: none; touch-action: none;
}
.dash-handle:hover { background: var(--grid); color: var(--ink-2); }
.dash-item.dragging { opacity: 0.5; }
.dash-item.dragging .card { outline: 2px dashed var(--teal); }
.drag-hint { font-weight: 400; }

/* ===== Lean-Formulare: Ziele & Kennzahlen-Erfassung ===== */
.zf-card { padding-top: 18px; }
.zf-h { margin-bottom: 4px; }
.zf-legende { white-space: nowrap; margin: 0 4px; }
.zf-legende .fw-lamp { display: inline-block; vertical-align: baseline; margin-right: 3px; }

.zf-row {
  display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(90px, 0.7fr) minmax(200px, 1fr) minmax(150px, 0.8fr);
  gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--grid);
}
.zf-row:last-child { border-bottom: 0; }
.zf-label { font-weight: 600; font-size: 14px; }
.zf-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.zf-ist-wert { font-size: 16px; font-weight: 700; }
.zf-ziel { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.zf-uebernehmen {
  border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.zf-toleranz { display: flex; flex-direction: column; gap: 3px; }

/* Eingabefeld mit Präfix/Suffix im Feld — eine Linie, ein Fokusring */
.inp {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--grid); border-radius: 10px; background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s; width: 100%;
}
.inp:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); }
.inp input, .inp select {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px;
  padding: 9px 12px; width: 100%; min-width: 0;
}
.inp input::placeholder { color: var(--muted); opacity: 0.5; }
.inp .inp-prefix { padding-left: 11px; color: var(--muted); font-size: 13px; }
.inp .inp-prefix + input { padding-left: 6px; }
.inp .inp-suffix { padding-right: 11px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.inp-klein { max-width: 130px; }
.inp-monat { max-width: 190px; }

.zf-save {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(6px);
  border-top: 1px solid var(--grid); padding: 12px 4px; margin-top: 4px;
}
.zf-save-inline { position: static; backdrop-filter: none; background: none; }

/* Erfassung: Gruppen mit Feld-Grid */
.ef-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ef-gruppe { padding: 12px 0; border-bottom: 1px solid var(--grid); }
.ef-gruppe:last-of-type { border-bottom: 0; }
.ef-gh { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-2); margin-bottom: 9px; }
.ef-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.ef-feld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.ef-feld > span { font-weight: 600; }
.ef-verlauf summary { cursor: pointer; }
.ef-verlauf table { margin-top: 8px; }

@media (max-width: 900px) {
  .zf-row { grid-template-columns: 1fr 1fr; }
  .zf-was { grid-column: 1 / -1; }
}

/* ===== Fundament: Baustein-Karten auf der Phasenseite ===== */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bs-karte {
  display: block; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface);
  padding: 16px 18px; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
.bs-karte:hover { border-color: var(--teal); transform: translateY(-1px); }
.bs-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bs-nr {
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.bs-kopf .badge { margin-left: auto; }
.bs-kurz { font-size: 13px; color: var(--ink-2); margin: 8px 0 10px; line-height: 1.5; }
.bs-mehr { font-size: 12.5px; font-weight: 600; color: var(--teal); }
.bs-karte.bs-gesperrt { opacity: 0.6; border-style: dashed; }
.bs-karte.bs-gesperrt:hover { border-color: var(--grid); transform: none; }
.bs-lock { margin-left: auto; font-size: 14px; }
.bs-status { font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--grid); background: var(--surface); }
.bs-abgeschlossen { border-color: #bcd9bc; background: #eff7ef; }
.bs-in_arbeit { border-color: #bcd0e8; background: #eef4fb; }

/* ===== Leitbildpyramide ===== */
.lp-wrap { position: relative; max-width: 760px; margin: 0 auto; padding: 8px 0 4px; }
.lp { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.lp-stufe {
  width: var(--breite); min-width: 240px; text-align: center;
  border: 2px solid var(--teal); border-radius: 8px; background: var(--surface);
  padding: 9px 12px;
}
.lp-stufe.lp-operativ { border-style: solid; border-color: var(--grid); }
.lp-titel { font-weight: 700; font-size: 14.5px; }
.lp-frage { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.lp-inhalt { font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.lp-mehrzeilig { white-space: pre-line; text-align: left; display: inline-block; }
.lp-trenner {
  width: 96%; border-top: 2px dashed var(--teal); margin: 7px 0 2px; position: relative; text-align: left;
}
.lp-trenner span {
  position: relative; top: -1px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 700; color: var(--teal); background: var(--page); padding-right: 8px;
}
.lp-ebene-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
  color: var(--muted); margin-bottom: 6px;
}
.lp-werte {
  margin-top: 10px; border: 2px solid var(--teal); border-radius: 10px;
  background: rgba(20, 184, 166, 0.06); padding: 10px 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.lp-werte > span { font-size: 11px; letter-spacing: 0.08em; font-weight: 800; color: var(--teal); flex: none; }
.lp-werte-inhalt { font-size: 13px; color: var(--ink-2); white-space: pre-line; }
.inp textarea {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px;
  padding: 9px 12px; width: 100%; min-width: 0; resize: vertical;
}

/* ===== Wespect-Kundenverwaltung: Tab-Navigation ===== */
.wk-tabs {
  display: flex; gap: 2px; margin: -6px 0 18px;
  border-bottom: 2px solid var(--grid);
}
.wk-tabs a {
  padding: 8px 14px 9px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  white-space: nowrap;
}
.wk-tabs a:hover { color: var(--ink); }
.wk-tabs a.active { color: var(--ink); border-bottom-color: var(--teal); }
@media (max-width: 700px) { .wk-tabs { overflow-x: auto; } }

/* ===== Maßnahmen-Board (Kanban) ===== */
/* Das Board füllt die Seite nach unten — Spalten strecken sich gemeinsam */
.mb-board { display: flex; gap: 10px; align-items: stretch; min-height: calc(100vh - 330px); }
.mb-spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .mb-board { flex-direction: column; min-height: 0; } .mb-spalte { width: 100%; } }
.mb-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mb-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-filter .inp { width: auto; }
/* Spaltenfarben: dezent getönte Köpfe, erhabene Optik */
.mb-spalte {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 12px;
  padding: 0 10px 10px; min-height: 240px; overflow: hidden;
  border-top: 3px solid var(--sp, var(--grid));
  box-shadow: 0 1px 3px rgba(11, 26, 41, 0.07), 0 4px 14px rgba(11, 26, 41, 0.05);
  transition: border-color 0.15s, background 0.15s, flex-basis 0.2s;
}
.mb-sp-backlog { --sp: #8a8781; --sp-bg: #f1f0ec; }
.mb-sp-offen { --sp: #2f6fb0; --sp-bg: #eaf1f9; }
.mb-sp-in_arbeit { --sp: var(--teal); --sp-bg: rgba(20, 184, 166, 0.09); }
.mb-sp-rueckmeldung { --sp: #b45309; --sp-bg: #fdf4e0; }
.mb-sp-erledigt { --sp: #006300; --sp-bg: #eff7ef; }
.mb-spalte.drop { border-color: var(--sp); background: var(--sp-bg); }
.mb-spalte-kopf {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  color: var(--sp, var(--ink-2)); background: var(--sp-bg, transparent);
  margin: 0 -10px 10px; padding: 9px 12px; display: flex; align-items: center; gap: 8px;
}
.mb-sp-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-anzahl {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 10px;
  padding: 0 8px; font-size: 11.5px; font-weight: 700; color: var(--ink);
}
.mb-zuklapp {
  border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px;
  padding: 0 2px; line-height: 1; opacity: 0.7;
}
.mb-zuklapp:hover { opacity: 1; }
/* Eingeklappt: schmale Leiste mit senkrechtem Titel (Vorbild HubSpot) */
.mb-spalte.zu { flex: 0 0 44px; min-width: 44px; cursor: pointer; padding: 0; }
.mb-spalte.zu .mb-liste { display: none; }
.mb-spalte.zu .mb-spalte-kopf {
  flex-direction: column; margin: 0; padding: 12px 0; gap: 10px; height: 100%; min-height: 234px;
}
.mb-spalte.zu .mb-sp-titel {
  writing-mode: vertical-rl; flex: 0 0 auto; overflow: visible; white-space: nowrap;
}
.mb-spalte.zu .mb-zuklapp { transform: rotate(180deg); }
@media (max-width: 900px) { .mb-spalte.zu { flex: none; } .mb-spalte.zu .mb-spalte-kopf { flex-direction: row; min-height: 0; padding: 9px 12px; } .mb-spalte.zu .mb-sp-titel { writing-mode: horizontal-tb; } }
.mb-liste { display: grid; gap: 8px; min-height: 60px; flex: 1; align-content: start; }
.mb-karte {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 10px;
  padding: 11px 12px; cursor: grab;
  box-shadow: 0 1px 2px rgba(11, 26, 41, 0.08);
  border-left: 3px solid var(--sp, var(--grid));
}
.mb-karte[draggable="false"] { cursor: default; }
.mb-karte.dragging { opacity: 0.45; }
.mb-karte.late { border-color: var(--bad); border-left-color: var(--bad); }
.mb-karte.soon { border-color: var(--warn); border-left-color: var(--warn); }
.mb-karte.done { opacity: 0.6; }
.mb-karte.done .mb-titel { text-decoration: line-through; }
.mb-kpi { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.mb-titel { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.mb-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 7px; flex-wrap: wrap; }
.mb-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--grid); }
.mb-status-form select { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--grid); background: var(--page); }
.mb-loeschen { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 5px; }
.mb-loeschen:hover { color: var(--bad); }

/* Detail-Popup des Maßnahmen-Boards */
.mb-dialog {
  margin: auto; /* das globale *{margin:0} würde den Dialog sonst oben links parken */
  border: 1px solid var(--grid); border-radius: 14px; padding: 20px 22px;
  width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--ink);
}
.mb-dialog::backdrop { background: rgba(11, 26, 41, 0.45); }
.mb-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mb-dialog-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
.mb-dialog .inp input:disabled, .mb-dialog .inp select:disabled { color: var(--ink-2); opacity: 1; }

/* Anzeige-Einstellungen des Boards */
.mb-prefs { position: relative; }
.mb-prefs summary { list-style: none; cursor: pointer; }
.mb-prefs summary::-webkit-details-marker { display: none; }
.mb-prefs-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 500;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(11, 26, 41, 0.14);
  padding: 14px 16px; width: 280px; display: grid; gap: 7px;
}

.btn-gefahr { border-color: var(--bad); color: var(--bad); }
.btn-gefahr:hover { background: #fbeae8; }

/* ===== Fragen-Editor ===== */
.fr-feld { margin-bottom: 12px; }
.fr-paar { padding: 12px 0; border-bottom: 1px solid var(--grid); }
.fr-paar:last-child { border-bottom: 0; }
.fr-key { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }

/* ===== Analyse: Balken je Aussage und Dimension, hoch = gut ===== */
.qa-dimensionen { max-width: 760px; }
/* Aussagen-Balken innerhalb einer aufgeklappten Dimension-Kachel */
.qa-in-kachel { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--grid); }
.qa-in-kachel .qa-zeile { grid-template-columns: 1fr; gap: 4px; padding: 7px 0; }
.qa-in-kachel .qa-label { font-size: 12.5px; }
.qa-in-kachel .qa-balken { height: 7px; }
.qa-in-kachel .qa-wert { font-size: 12.5px; position: relative; margin-top: -22px; text-align: right; }
.qa-liste { display: grid; gap: 2px; }
.qa-zeile {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(140px, 240px) 90px;
  gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grid);
}
.qa-liste .qa-zeile:last-child, .qa-dimensionen .qa-zeile:last-child { border-bottom: 0; }
.qa-label { font-size: 13.5px; line-height: 1.45; }
.qa-balken {
  display: block; height: 9px; border-radius: 5px; background: var(--grid); overflow: hidden;
}
.qa-balken.qa-gross { height: 12px; }
.qa-fuell { display: block; height: 100%; border-radius: 5px; background: var(--muted); }
.qa-gruen { background: var(--good); }
.qa-gelb { background: #d99a26; }
.qa-rot { background: var(--bad); }
.qa-wert { font-size: 14px; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) { .qa-zeile { grid-template-columns: 1fr 90px; } .qa-balken { grid-column: 1 / -1; } }

/* ===== Abstände: Luft zwischen Buttons und Elementen ===== */
.inline-form { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head { margin-bottom: 20px; gap: 14px; }
.page-head .inline-form { gap: 10px; }
.btn + .btn, .btn + form, form + .btn { margin-left: 0; }
.card { margin-bottom: 18px; }
.card h2 { margin-bottom: 10px; }
.card h3 { margin: 14px 0 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
table td { padding-top: 9px; padding-bottom: 9px; }
.badge + .badge { margin-left: 4px; }
.check { display: block; margin: 4px 0; }

/* ===== Sidebar: Hover-Pfeil + Flyout mit Unterpunkten (HubSpot-Muster) ===== */
.nav-wrap { position: relative; }
.nav-pfeil {
  margin-left: auto; padding-left: 8px; font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity 0.12s;
}
.nav-wrap:hover > a .nav-pfeil { opacity: 0.9; }
.nav-flyout {
  display: none; position: absolute; left: 100%; top: 0; z-index: 1200;
  padding-left: 6px; /* Brücke, damit der Hover beim Rüberfahren nicht abreißt */
}
.nav-flyout.offen { display: block; }
.nav-flyout-inner {
  min-width: 220px; background: #16334e; border-radius: 10px;
  padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.nav-flyout-titel {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
  color: #7f97ab; padding: 6px 10px 7px;
}
.sidebar nav .nav-flyout-inner a {
  display: block; padding: 8px 10px; border-radius: 7px; border-left: 0;
  font-size: 13.5px; color: #dbe6ef; white-space: nowrap;
}
.sidebar nav .nav-flyout-inner a:hover { background: var(--navy); color: #fff; }
/* Mobil gibt es kein Hover — dort bleiben die Inline-Untermenüs */
@media (max-width: 980px) {
  .nav-pfeil { display: none !important; }
  .nav-flyout { display: none !important; }
  .nav-flyout.offen { display: block !important; position: static; padding-left: 0; }
  .nav-flyout.offen .nav-flyout-inner { box-shadow: none; border-radius: 0; background: var(--navy-2); }
}

/* Erfassen-Seite: aufklappbare Sektionen — ein sichtbarer Speichern-Button je offener Sektion */
.ef-akk > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; }
.ef-akk > summary::-webkit-details-marker { display: none; }
.ef-akk > summary .zf-h { margin-bottom: 0; }
.ef-akk-chev { margin-left: auto; color: var(--muted); font-size: 14px; }
.ef-akk[open] > summary .ef-akk-chev { transform: rotate(180deg); }
.ef-akk[open] > summary { margin-bottom: 10px; }
.ef-akk-body { padding-top: 4px; }

/* Onboarding: Schritt-Anzeige */
.ob-schritte { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.ob-schritt { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ob-schritt .bs-nr { background: var(--grid); color: var(--ink-2); }
.ob-schritt.aktiv { color: var(--ink); }
.ob-schritt.aktiv .bs-nr { background: var(--navy); color: #fff; }
.ob-schritt.fertig { color: var(--good); }
.ob-schritt.fertig .bs-nr { background: var(--good); color: #fff; }
.ob-linie { width: 34px; height: 2px; background: var(--grid); }