/* ROTH INSTITUT · Leadership Toolbox — seiteneigene Bausteine, nach main.css laden.
   Nur, was main.css nicht hergibt: Eckdaten-Streifen, Werkzeugbereiche (3 Karten),
   Sechser-Kette der Grundlogik, Fallbeispiel mit Bild, fünf Bausteine, Zugangskarte
   und die Dunkel-Overrides (website-standards §12). */

/* Brotkrume: aktuelle Seite in Gold — kein Inline-Style (§18b) */

/* Einordnungsabsatz unter dem Seitenkopf: Fließtext, deshalb Zeilenmaß */
.einordnung { max-width: 74ch; }

/* Nachlaufender Absatz unter Listen/Rastern */
.absatz { margin-top: var(--s7); max-width: 70ch; }
.absatz a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Eckdaten: drei große Fakten mit 01–03-Logik ---------- */
.eckdaten { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.eckdaten li {
  padding: var(--s6) var(--s6) var(--s7); border-radius: var(--r-gross);
  background: var(--weiss); border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
  display: flex; flex-direction: column; gap: var(--s3);
}
.eckdaten__nr {
  align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--grau-900); color: var(--orange);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
.eckdaten b { display: block; margin-top: var(--s2); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.eckdaten span:last-child { font-size: var(--klein); color: var(--text-2); line-height: 1.6; }

/* ---------- Werkzeugbereiche: drei Karten auf .perspektive-Basis ---------- */
.werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8); }
.werkzeuge .perspektive .kennung { margin-bottom: var(--s3); }
.werkzeuge .perspektive h3 { font-size: 1.5rem; letter-spacing: -0.012em; }
.werkzeug--people { --marke-farbe: var(--gold); }
.werkzeug--teams { --marke-farbe: var(--petrol-hell); }
.werkzeug--management { --marke-farbe: var(--grau-700); }
.werkzeug__hinweis { margin-top: var(--s6); font-size: var(--klein); color: var(--text-2); max-width: 65ch; }

/* ---------- Grundlogik: sechs Schritte als Kette ---------- */
.kette { list-style: none; margin: var(--s8) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5); }
.kette::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: var(--linie-dunkel); }
.kette li { position: relative; display: flex; flex-direction: column; gap: var(--s3); }
.kette__icon {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grau-900); color: var(--orange); border: 2px solid var(--gold);
}
.kette__icon .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.kette__nr { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: var(--s2); }
.kette b { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.2; color: var(--text-invers); }
.kette span:last-child { font-size: var(--klein); line-height: 1.6; color: var(--text-invers-2); }
.kette li:last-child .kette__icon { background: var(--orange); color: var(--grau-950); border-color: var(--orange); }
.kette__schluss { margin-top: var(--s8); font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.35; max-width: 34ch; color: var(--text-invers); }
.kette__schluss em { font-style: normal; color: var(--orange); }

/* ---------- Fallbeispiel: Ablauf links, Bild rechts ---------- */
.fall { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: var(--s8); align-items: start; margin-top: var(--s6); }
.fall .prozess { margin-top: 0; max-width: none; }
.fall .prozess__schritt:first-child { border-top: 0; padding-top: var(--s5); }
.fall__bild { position: sticky; top: 112px; border-radius: var(--r-kachel); overflow: hidden; box-shadow: var(--schatten-bild); }
.fall__bild img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.fall__bild figcaption {
  position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5);
  padding: var(--s4) var(--s5); border-radius: var(--r-gross);
  background: rgba(30,29,29,.78); color: var(--text-invers); backdrop-filter: blur(8px);
  font-size: var(--klein); line-height: 1.5;
}
.fall__bild figcaption b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s1); }
/* Phasen-Pille am Schritt: welche Stufe der Grundlogik hier greift */
.phase {
  display: inline-block; margin-bottom: var(--s2); padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--petrol-tint); color: var(--petrol);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- Fünf Bausteine (auf .format-Basis), Toolbox hervorgehoben ---------- */
.bausteine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8); }
.bausteine .format { display: flex; flex-direction: column; }
.bausteine .format .icon { width: 30px; height: 30px; color: var(--orange); stroke-width: 2.2; }
.bausteine .format .label { display: block; margin-top: var(--s4); color: var(--gold-text); }
.format--toolbox { background: var(--grau-900); border-color: var(--grau-900); color: var(--text-invers); }
.format--toolbox .label { color: var(--orange); }
.format--toolbox p { color: var(--text-invers-2); }

/* Beispielablauf: Bildunterschrift-Zeile über der Timeline */
.ablauf__hinweis { margin-top: var(--s9); font-size: var(--klein); color: var(--text-2); max-width: 70ch; }
.jahr__punkte b { line-height: 1.35; }

/* ---------- Gründe: drei Punkte statt zwei ---------- */
.gruende { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Zugang: Text + dunkle Karte ---------- */
.zugang__karte { display: grid; gap: var(--s4); }
.zugang__karte .h3 { margin-top: 0; }
.zugang__karte > p { margin-top: 0; }
.zugang__karte .btn { justify-self: start; }
.zugang__trenner { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--linie-dunkel); display: grid; gap: var(--s3); }
.zugang__trenner b { font-family: var(--font-display); font-weight: 700; color: var(--text-invers); }
.zugang__trenner p { font-size: var(--klein); color: var(--text-invers-2); line-height: 1.6; }
.zugang__trenner a:not(.btn) { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--text-invers); text-decoration: none; }
.zugang__trenner a:not(.btn) .icon { color: var(--orange); width: 22px; height: 22px; transition: transform var(--t-normal) var(--ease); }
.zugang__trenner a:not(.btn):hover .icon { transform: translateX(4px); }
.zugang__trenner a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Dunkle Sektionen: 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); }
.sektion--dunkel .h2 { color: var(--text-invers); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kette { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s7); }
  .kette::before { display: none; }
  .bausteine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gruende { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .fall { grid-template-columns: 1fr; }
  .fall__bild { position: static; }
  .fall__bild img { aspect-ratio: 3/2; }
  .abo { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .eckdaten { grid-template-columns: 1fr; }
  .werkzeuge { grid-template-columns: 1fr; }
  .bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kette { grid-template-columns: 1fr; }
  .bausteine { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zugang__trenner a:not(.btn) .icon { transition: none; }
}