/* ROTH INSTITUT · Führungsanalyse — seiteneigene Bausteine, nach main.css laden.
   Nur, was main.css nicht hergibt: Reifegradskala 1–5, Preiskarte, Fallbeispiel,
   Aufwandszeile im Prozess und die Dunkel-Overrides (website-standards §12). */

/* Brotkrume: aktuelle Seite in Gold — ersetzt den Inline-Style der Vorlage (§18b) */

/* Einordnungsabsatz unter dem Seitenkopf: Fließtext, deshalb Zeilenmaß */
.einordnung { max-width: none; } /* Luke 07.09.: Texte auf volle Breite */

/* Beispielwerte im Diagramm: Farbe folgt der Perspektive, kein Inline-Style */
.reifegrad__beispiel { color: var(--gold-text); }
.perspektive--b .reifegrad__beispiel { color: var(--petrol); }
.beispiel-hinweis { margin-top: var(--s5); font-size: var(--klein); color: var(--text-2); }
/* Perspektiven-Sektion ist seit 07.09. weiß (Luke): Lead und Karten wie auf hellem Grund */
#analyse .lead { color: var(--text-2); }
#analyse .perspektive { border-color: var(--grau-200); box-shadow: var(--schatten-1); }

/* Nachlaufender Absatz unter Listen/Rastern */
.absatz { margin-top: var(--s7); }
.absatz--eng { margin-top: var(--s6); }

/* ---------- Reifegradskala 1–5 ---------- */
.stufen { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); }
.stufe {
  position: relative; overflow: hidden;
  padding: var(--s6) var(--s5) var(--s6);
  border-radius: var(--r-gross); background: var(--weiss);
  border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
}
/* Füllstand als Bodenlinie: 1/5 bis 5/5 — die Skala ist auch ohne Zahl lesbar */
.stufe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--orange); transform: scaleX(var(--anteil, 1)); transform-origin: left;
}
.stufe--1 { --anteil: .2; } .stufe--2 { --anteil: .4; } .stufe--3 { --anteil: .6; } .stufe--4 { --anteil: .8; } .stufe--5 { --anteil: 1; }
.stufe__nr {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: var(--grau-950);
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums;
}
.stufe b { display: block; margin-top: var(--s4); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.stufe span:not(.stufe__nr) { display: block; margin-top: var(--s2); font-size: var(--klein); color: var(--text-2); line-height: 1.6; } /* vorher überschrieb .stufe span die Nummer im Kreis */

/* ---------- Ablauf: Aufwandszeile je Schritt ---------- */
.prozess__aufwand { margin-top: var(--s3); font-size: var(--klein); color: var(--text-2); }
.prozess__aufwand span { font-family: var(--font-display); font-weight: 600; color: var(--text); margin-right: var(--s2); }

/* ---------- Fallbeispiel ---------- */
.fallbeispiel {
  margin-top: var(--s8); max-width: 940px; padding: var(--s7);
  border-radius: var(--r-gross); background: var(--weiss);
  border: 1px solid var(--grau-200); border-left: 4px solid var(--orange); box-shadow: var(--schatten-1);
}
.fallbeispiel h3 { margin-top: var(--s3); font-size: 1.3125rem; font-weight: 700; line-height: 1.25; }
.fallbeispiel p { margin-top: var(--s4); color: var(--text-2); }
.fallbeispiel ol { margin: var(--s4) 0 0; padding-left: 1.3em; color: var(--text-2); display: grid; gap: var(--s2); }
.fallbeispiel ol li::marker { font-family: var(--font-display); font-weight: 700; color: var(--gold-text); }

/* ---------- Dunkle Sektion: Komponenten mit eigener Farbregel (§12) ---------- */
.sektion--dunkel .haken-liste li { color: var(--text-invers-2); }
.sektion--dunkel .haken-liste .icon { color: var(--orange); }
.sektion--dunkel .absatz { color: var(--text-invers-2); }

/* ---------- Preiskarten ---------- */
.preis__betrag { margin-top: var(--s5); font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.preis__zusatz { margin-top: var(--s2); font-size: var(--klein); color: var(--text-2); }
.preis__text { margin-top: var(--s4); font-size: var(--klein); color: var(--text-2); }
.perspektive .kennung { margin-bottom: var(--s3); }
.perspektive__fuss { margin-top: auto; padding-top: var(--s6); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stufen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stufe::after { transition: none; }
}

/* ============================================================
   v2 (07.09.) · Strategie 05.09.: Ergebnisprofil (§30), Funnel-Kette (§15),
   Whitepaper-Block (ROTH INSIGHTS 01). Nur Ergänzungen, Tokens aus tokens.css.
   ============================================================ */

/* ---------- Ergebnisprofil (Beispiel): Dashboard-Blick je Prüffeld ----------
   Nutzt .reifegrad__balken/.reifegrad__wert aus main.css (Animation über main.js),
   Farbe je Spalte über --marke-farbe aus .perspektive--a/--b. */
.profil {
  margin-top: var(--s7); padding: var(--s7);
  border-radius: var(--r-gross); background: var(--weiss);
  border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
}
.profil__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.profil__kopf h3 { margin-top: var(--s3); font-size: 1.3125rem; font-weight: 700; line-height: 1.25; }
.profil__hinweis { max-width: 42ch; font-size: var(--klein); color: var(--text-2); }
.profil__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); margin-top: var(--s6); }
.profil__titel {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-weight: 700; line-height: 1.25;
}
.profil__titel .perspektive__buchstabe { width: 32px; height: 32px; font-size: 0.875rem; }
.profil__gesamt { margin-left: auto; font-size: var(--klein); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.profil__gesamt b { margin-left: var(--s1); font-size: 1.25rem; color: var(--text); }
.profil__liste { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.profil__liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.5ch; grid-template-rows: auto auto;
  gap: var(--s2) var(--s4); align-items: center;
  font-size: var(--klein); color: var(--text-2);
}
.profil__wert { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 700; color: var(--text); text-align: right; }
.profil__liste .reifegrad__balken { grid-column: 1; }
.profil__summary { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--grau-200); }
.profil__summary ul { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.profil__summary li { font-size: var(--klein); line-height: 1.6; color: var(--text-2); }
.profil__summary li b { display: block; margin-bottom: var(--s1); font-family: var(--font-display); font-weight: 700; color: var(--text); }

/* ---------- Funnel-Kette: .schritte aus main.css, hier vier Spalten ---------- */
.schritte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schritte--4 a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Whitepaper-Block: .abo/.magnet aus main.css, Ergänzungen auf dunkel ---------- */
.whitepaper__punkte { margin-top: var(--s5); }
.whitepaper__bezug { margin-top: var(--s6); max-width: 60ch; font-size: var(--klein); line-height: 1.6; color: var(--text-invers-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .schritte--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .profil__raster { grid-template-columns: 1fr; gap: var(--s6); }
  .schritte--4 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .profil { padding: var(--s6); }
  .profil__summary ul { grid-template-columns: 1fr; }
}