/* ==========================================================================
   KLARSYSTEM – Leistungsseiten
   (Führung & Zusammenarbeit, Veränderung wirksam gestalten)
   Wird nach main.css geladen und ergänzt nur Bausteine, die die
   Landingpage nicht hat. Ausschließlich vorhandene Design-Tokens.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-title {
  font-size: clamp(1.75rem, 1.05rem + 3.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  hyphens: manual;
  overflow-wrap: break-word;
}
.page-title .accent { color: var(--magenta); }
.hero .eyebrow { flex-wrap: wrap; row-gap: .4rem; line-height: 1.5; }
.hero-copy .page-title { margin-bottom: 1.75rem; }
.hero-scene {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 500;
  color: var(--white);
}
.hero-copy .hero-lead + .hero-lead,
.hero-scene + .hero-lead { margin-top: 1rem; }

.cta-row-text { align-items: center; column-gap: 1.75rem; row-gap: 1rem; }
.text-link-light { color: var(--white); min-height: 44px; }
.text-link-light .icon { color: var(--magenta-light); }

.hero-card .facts dd { font-weight: 500; }

/* ---------- Alltagssituationen (zwei Spalten) ---------- */
@media (min-width: 1024px) { .shift-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shift-title { margin-bottom: .6rem; font-size: 1.1875rem; line-height: 1.35; }
.shift-grid-2 .shift-scene { margin-bottom: 0; }

.page-note {
  max-width: 52rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-left: 1.5rem;
  border-left: 3px solid var(--magenta);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}
.section-grey .page-note { border-left-color: var(--navy); }
.section-grey .page-note,
.page-note-muted { font-size: .9375rem; font-weight: 400; color: var(--ink-muted); }

/* ---------- Leistungsfelder ---------- */
.service-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}
.service h3 { margin-bottom: .75rem; font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); line-height: 1.3; }
.service > p { color: var(--ink-muted); }
.service-results {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--grey-300);
}
.service > p + .service-results { margin-top: 1.5rem; }
.service-results-label {
  margin-bottom: .6rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-600);
}
.service-results .module-list li { color: var(--ink); font-weight: 500; }

/* ---------- Beispiel (Ausgangssituation) ---------- */
.example-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .example-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
}
.example-quote {
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.example-quote .accent { color: var(--magenta); }
.example-copy > p:first-child { font-size: 1.0625rem; font-weight: 600; }

.question-list { margin: 1.25rem 0 0; }
.question-list li {
  position: relative;
  padding: 1rem 0 1rem 2.25rem;
  border-top: 1px solid var(--grey-200);
  font-weight: 600;
  line-height: 1.45;
}
.question-list li:last-child { border-bottom: 1px solid var(--grey-200); }
.question-list li::before {
  content: "?";
  content: "?" / "";
  position: absolute;
  left: 0;
  top: .95rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--magenta-tint);
  color: var(--magenta-600);
  font-size: .8125rem;
  font-weight: 700;
}
.section-navy .question-list li { border-color: var(--navy-line); }
.section-navy .question-list li::before { background: rgba(255, 77, 154, .16); color: var(--magenta-light); }

/* ---------- Ablauf auf Navy: vier Schritte ---------- */
@media (min-width: 1024px) {
  .steps-4 { --steps-gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-4 .step { padding-left: 0; }
  .steps-4 .step-node { position: relative; margin-bottom: .75rem; }
  .steps-4 .step:not(:last-child)::after { top: 28px; bottom: auto; left: 56px; right: calc(-1 * var(--steps-gap)); width: auto; height: 1px; }
  @supports (grid-template-rows: subgrid) {
    .steps-4 { grid-template-rows: repeat(3, auto); row-gap: 0; }
    .steps-4 .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* ---------- Vorgehen auf Grau: vier Karten mit Verbindungslinie ---------- */
.flow { --flow-gap: 1.25rem; --flow-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem); display: grid; gap: var(--flow-gap); }
.flow-step {
  position: relative;
  padding: var(--flow-pad);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--flow-pad) + 23px);
  bottom: calc(-1 * var(--flow-gap) - 1px);
  width: 2px;
  height: calc(var(--flow-gap) + 2px);
  background: var(--magenta);
}
.flow-title { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.flow-question { margin: .75rem 0 0; color: var(--ink-muted); line-height: 1.55; }
@media (min-width: 1100px) {
  .flow { --flow-gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-step:not(:last-child)::after {
    left: auto;
    right: calc(-1 * var(--flow-gap) - 1px);
    top: calc(var(--flow-pad) + 23px);
    bottom: auto;
    width: calc(var(--flow-gap) + 2px);
    height: 2px;
  }
}

/* ---------- Alltagssätze (KI, Lernen) ---------- */
.voice-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .voice-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
}
.voices { display: grid; gap: 1.5rem; }
.voice {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--magenta);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.section-navy .voice { border-left-color: var(--magenta-light); }
.voices-label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.section-navy .voices-label { color: var(--on-dark-muted); }
.voice-copy > p { color: var(--ink-muted); }
.section-navy .voice-copy > p { color: var(--on-dark-muted); }
.voice-copy > p.voice-strong { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.section-navy .voice-copy > p.voice-strong { color: var(--white); }
.voice-copy .question-list { margin-bottom: 1.5rem; }

.learn-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .learn-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
}
.learn-grid .lead + p { margin-top: 1rem; color: var(--ink-muted); }
.needs { display: grid; gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 560px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.needs li {
  padding: .9rem 1rem;
  border-top: 2px solid var(--magenta);
  background: var(--grey-50);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  line-height: 1.4;
}
.learn-card .voices { gap: 1.75rem; }
.learn-card .voice { font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); }
.learn-card .voices-label { margin-bottom: 0; }

/* ---------- Abschluss ---------- */
.cta-crossref {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-line);
  font-size: .9375rem;
  color: var(--on-dark-muted);
}
.cta-crossref a { display: inline-block; margin-top: .25rem; color: var(--white); font-weight: 600; text-underline-offset: 4px; }
.cta-crossref a:hover { color: var(--magenta-light); }

/* ---------- Footer mit Seitenlinks ---------- */
.footer-links { display: grid; gap: .25rem; }
.footer-links a[aria-current="page"] { color: var(--white); }
@media (min-width: 768px) {
  .footer-inner-pages { grid-template-columns: minmax(0, 1fr) auto auto; }
  .footer-links { justify-items: end; }
  .footer-links ul { justify-content: flex-end; }
}

@media print {
  .learn-card, .cta-crossref { break-inside: avoid; }
}

/* Situationskarte auf Navy innerhalb einer weißen Sektion */
.learn-card .voices-label { color: var(--magenta-light); }
.learn-card .voice { border-left-color: var(--magenta-light); }