/* ═══════════════════════════════════════════════════════════
   LEITBILD  (/leitbild/)  — page-templates/leitbild.php
   Own design on purpose. This is a controlled document read by
   Vermittlungsfachkräfte, Jobcentern and auditors, not a marketing page, so it
   is deliberately quieter than the rest of the site: one accent, generous
   measure, a visible index, and a document header with Träger-Nr. and Stand.
   No cards, no icon grid, no coloured bands competing for attention.
   ═══════════════════════════════════════════════════════════ */

.lb-page { background: #fff; }
.lb-page .lb-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ── Masthead ───────────────────────────────────────────── */
.lb-masthead {
  background: var(--secondary);
  color: #fff;
  padding: clamp(44px, 6vw, 76px) 0 clamp(36px, 5vw, 60px);
}
.lb-masthead .lb-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.lb-masthead h1 {
  margin: 0 0 18px; color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.12;
}
.lb-standfirst {
  margin: 0; max-width: 62ch;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.65;
  color: rgba(255,255,255,0.86);
}

/* Document facts. This is what makes the page usable as something to cite in a
   funding application: who, which Träger-Nr., valid until when, which revision. */
.lb-facts {
  display: flex; flex-wrap: wrap; gap: 10px clamp(24px, 4vw, 52px);
  margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.lb-facts div { min-width: 0; }
.lb-facts dt {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px;
}
.lb-facts dd {
  margin: 0; font-size: 0.9rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Body: index + document ─────────────────────────────── */
.lb-body { padding: clamp(40px, 5.5vw, 76px) 0 clamp(56px, 7vw, 96px); }
.lb-grid { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }

.lb-index { position: sticky; top: calc(var(--nav-height) + 20px); align-self: start; }
.lb-index-ttl {
  display: block; margin-bottom: 12px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500);
}
.lb-index ol {
  margin: 0; padding: 0; list-style: none;
  counter-reset: lbi; border-left: 1px solid var(--gray-200);
}
.lb-index li { counter-increment: lbi; }
.lb-index a {
  display: block; padding: 8px 0 8px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.86rem; line-height: 1.35; color: var(--gray-700);
  text-decoration: none; transition: color 160ms ease, border-color 160ms ease;
}
.lb-index a::before {
  content: counter(lbi, decimal-leading-zero) '  ';
  font-size: 0.72rem; font-weight: 800; color: var(--gray-300);
  font-variant-numeric: tabular-nums;
}
.lb-index a:hover, .lb-index a:focus-visible {
  color: var(--primary); border-left-color: var(--primary);
}
.lb-index a:hover::before, .lb-index a:focus-visible::before { color: var(--primary); }

/* Scrollspy: the section currently being read (assets/js/leitbild.js). Stronger
   than hover so the two are distinguishable when the pointer happens to rest on
   the active item. */
.lb-index a.is-active {
  color: var(--primary); font-weight: 700;
  border-left-color: var(--primary);
  background: linear-gradient(90deg, var(--primary-light), transparent 85%);
}
.lb-index a.is-active::before { color: var(--primary); }

/* ── Document sections ──────────────────────────────────── */
.lb-doc { min-width: 0; max-width: 68ch; }
.lb-sec {
  padding-bottom: clamp(30px, 4vw, 46px); margin-bottom: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--gray-200);
  /* The index links target the SECTION id, not the heading, so the offset has to
     live here. On the h2 it did nothing and every jump parked the heading under
     the fixed nav pill. */
  scroll-margin-top: calc(var(--nav-height) + 28px);
}
.lb-sec:last-of-type { border-bottom: 0; }
.lb-sec h2 {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 18px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800;
  color: var(--gray-900); letter-spacing: -0.02em;
}
.lb-num {
  flex: none; font-size: 0.78rem; font-weight: 900; color: var(--primary);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.lb-sec p { margin: 0 0 15px; font-size: 0.97rem; line-height: 1.75; color: var(--text); }
.lb-sec p:last-child { margin-bottom: 0; }
.lb-lead {
  font-size: 1.06rem !important; line-height: 1.6 !important;
  color: var(--gray-900) !important; font-weight: 600;
}

/* Werte as a definition list, not cards. Five cards would repeat the icon-grid
   shape used everywhere else on the site and add nothing here. */
.lb-werte { margin: 0; }
.lb-wert { padding: 16px 0; border-top: 1px solid var(--gray-200); }
.lb-wert:first-child { border-top: 0; padding-top: 0; }
.lb-wert dt {
  margin-bottom: 6px; font-size: 0.95rem; font-weight: 800; color: var(--secondary);
}
.lb-wert dd { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--text); }

.lb-ziele { margin: 0; padding: 0; list-style: none; counter-reset: lbz; }
.lb-ziele li {
  counter-increment: lbz; position: relative; padding-left: 42px;
  margin-bottom: 20px;
}
.lb-ziele li:last-child { margin-bottom: 0; }
.lb-ziele li::before {
  content: counter(lbz, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-size: 0.78rem; font-weight: 900; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.lb-ziele strong { display: block; margin-bottom: 5px; font-size: 0.95rem; color: var(--gray-900); }
.lb-ziele span { display: block; font-size: 0.93rem; line-height: 1.7; color: var(--text); }

/* ── Closing statement ──────────────────────────────────── */
.lb-close {
  margin-top: clamp(34px, 4.5vw, 54px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.lb-close p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--gray-900); }
.lb-sig { margin-top: 14px !important; font-weight: 800; color: var(--primary) !important; }

.lb-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(30px, 4vw, 46px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Index becomes a plain list above the document. Sticky in a single column
     would pin it over the text it is meant to introduce. */
  .lb-grid { grid-template-columns: 1fr; gap: 26px; }
  .lb-index { position: static; padding-bottom: 22px; border-bottom: 1px solid var(--gray-200); }
  .lb-index ol {
    display: flex; flex-wrap: wrap; gap: 4px 8px;
    border-left: 0;
  }
  .lb-index a {
    padding: 6px 12px; margin-left: 0;
    border: 1px solid var(--gray-200); border-radius: 999px;
    font-size: 0.8rem;
  }
  .lb-index a:hover, .lb-index a:focus-visible { border-color: var(--primary); border-left-color: var(--primary); }
  /* As a chip, a left border says nothing. Fill it instead. */
  .lb-index a.is-active {
    background: var(--primary); border-color: var(--primary); color: #fff;
  }
  .lb-index a.is-active::before { color: rgba(255,255,255,0.7); }
  .lb-doc { max-width: none; }
}

@media (max-width: 560px) {
  .lb-facts { gap: 14px 28px; }
  .lb-sec p, .lb-wert dd, .lb-ziele span { font-size: 0.93rem; }
  .lb-lead { font-size: 1rem !important; }
  .lb-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-index a { transition: none; }
}