/* ROTH INSTITUT · institut.css v1 — nur das, was main.css nicht schon kann:
   Zeitstrahl „Unser Weg", Profilkarten (Team), Bildausrichtung im Split.
   Wird nach main.css geladen; Tokens kommen aus tokens.css. */

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

/* Merkmalzeile im Seitenkopf (Baustein .hero__merkmale aus main.css) */
.seitenkopf .hero__merkmale { margin-top: var(--s6); }

/* Split: Bild rechts statt links, und Bildausschnitt für Motive mit Schwerpunkt rechts */
.split--bild-rechts .split__bild { order: 2; }
.split__bild--rechts img { object-position: 82% 50%; }
.split__bild--oben img { object-position: 50% 30%; }
/* Luke 08.09.: Buchfoto vollständig zeigen (Querformat 3:2 statt 4:5-Ausschnitt) */
.split__bild--ganz img { aspect-ratio: 1800 / 1201; }
/* Bildspalte mit zwei Bildern untereinander (Buch + Gespräch Roth/Herbst) */
.split__spalte { display: grid; gap: var(--s5); align-content: start; }
.split--bild-rechts .split__spalte { order: 2; }
.split__bild--breit img { aspect-ratio: 840 / 350; }
figure.split__bild { margin: 0; }

/* Ansatz-Punkte mit Icon bekommen die volle Kartenbreite auf schmalen Bildschirmen (main.css: 1 Spalte < 900px) */
.ansatz--vier { margin-top: var(--s7); }

/* Führung als System: weiße Karten auf dunkler Bühne (wie #analyse auf der Startseite) */
#ansatz .perspektive { color: var(--text); border-color: transparent; box-shadow: var(--schatten-2); }
#ansatz .perspektive p { color: var(--text-2); }
#ansatz .lead { color: var(--text-invers-2); }
.gesamtbild-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6);
  margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--linie-dunkel);
}
.gesamtbild-zeile b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--text-invers); }
.gesamtbild-zeile span { color: var(--text-invers-2); font-size: var(--klein); max-width: 60ch; }
.gesamtbild-zeile .btn { margin-left: auto; }

/* ---------- Zeitstrahl „Unser Weg" ---------- */
.weg { list-style: none; margin: var(--s8) 0 0; padding: 0; max-width: 980px; border-top: 1px solid var(--grau-300); }
.weg__schritt {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s6);
  padding-block: var(--s7); border-bottom: 1px solid var(--grau-300);
}
.weg__jahr {
  font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800;
  line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  transition: color var(--t-ruhig) var(--ease);
}
.weg__jahr { color: var(--gold-text); }
.weg__schritt b { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; }
.weg__schritt p { margin-top: var(--s3); color: var(--text-2); max-width: 64ch; line-height: 1.65; }

/* ---------- Team: eine Zeile je Person ----------
   Jedes weitere Profil ist ein weiterer <article class="profil"> im selben Container.
   Auf Breite: Porträt links (Hochformat 2:3), Text rechts. Unter 880px gestapelt. */
.team { display: grid; gap: var(--s6); margin-top: var(--s8); }
.profil {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--s7);
  padding: var(--s7); border-radius: var(--r-kachel);
  background: var(--papier); border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
}
.profil__bild { margin: 0; border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--schatten-bild); align-self: start; }
.profil__bild img { display: block; width: 100%; height: auto; aspect-ratio: 534 / 800; object-fit: cover; }
.profil__rolle { margin-top: var(--s2); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.profil h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.profil__text { margin-top: var(--s5); color: var(--text-2); line-height: 1.65; max-width: 62ch; }
.profil__text + .profil__text { margin-top: var(--s4); }
.profil .haken-liste { margin-top: var(--s6); }
.profil__cta { margin-top: var(--s6); }

/* ---------- Räume: Fotoband mit zwei Bildern ---------- */
.raumband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8); }
.raumband figure { margin: 0; border-radius: var(--r-kachel); overflow: hidden; box-shadow: var(--schatten-1); background: var(--grau-900); }
.raumband img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Impressionen (08.09.): Fotoraster unter dem Raumband, 3 Spalten, 3:2 */
.impressionen { margin-top: var(--s8); }
.impressionen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.impressionen__raster figure { margin: 0; border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--schatten-1); background: var(--grau-200); }
.impressionen__raster img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--t-normal) var(--ease); }
@media (hover: hover) { .impressionen__raster figure:hover img { transform: scale(1.03); } }
@media (max-width: 960px) { .impressionen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .impressionen__raster { grid-template-columns: 1fr; } }
.raumband figcaption { padding: var(--s4) var(--s5); background: var(--weiss); font-size: 0.875rem; color: var(--text-2); }

@media (max-width: 880px) {
  .weg__schritt { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s6); }
  .profil { grid-template-columns: 1fr; padding: var(--s6); }
  .profil__bild { max-width: 300px; }
  .raumband { grid-template-columns: 1fr; }
  .gesamtbild-zeile .btn { margin-left: 0; }
}

/* ---------- Abstände Sektionskopf (Kennung → Überschrift → Einleitung → Text) ---------- */
#main .kennung + .h2 { margin-top: var(--s4); }
#main .h2 + .lead, #main .lead + p, #main .h2 + p { margin-top: var(--s5); }

/* Jahreszahl ist Inhalt: immer lesbar (Gold-Text 4,7:1), mit JS färbt sie sich beim Einblenden ein */
.hat-js .weg__schritt:not(.ist-da) .weg__jahr { color: var(--grau-300); }
@media (prefers-reduced-motion: reduce) { .hat-js .weg__schritt:not(.ist-da) .weg__jahr { color: var(--gold-text); } }

/* Beispiele: Wisch-Galerie (MVP2, 09.09.) – horizontale Spur mit scroll-snap, Pfeile ab Desktop, Zähler */
.wisch { margin-top: var(--s7); }
.wisch__leiste { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.wisch__zaehler { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-2); }
.wisch__pfeile { display: none; gap: var(--s2); }
.wisch__pfeil { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--grau-300); background: var(--weiss); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.wisch__pfeil:hover { border-color: var(--grau-950); }
.wisch__pfeil .icon { width: 20px; height: 20px; }
.wisch__spur { list-style: none; margin: 0; padding: 0 0 var(--s3); display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wisch__spur::-webkit-scrollbar { display: none; }
.wisch__karte { flex: 0 0 86%; scroll-snap-align: start; position: relative; border-radius: var(--r-kachel); overflow: hidden; background: var(--grau-900); color: var(--weiss); min-height: 360px; display: flex; align-items: flex-end; }
.wisch__karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wisch__karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,29,29,.05) 0%, rgba(30,29,29,.35) 45%, rgba(30,29,29,.92) 100%); }
.wisch__text { position: relative; z-index: 1; padding: var(--s6); max-width: 34ch; }
.wisch__text .kennung span { color: var(--orange); }
.wisch__text h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.12; margin-top: var(--s3); }
.wisch__text p { margin-top: var(--s3); font-size: var(--klein); color: rgba(255,255,255,.86); }
@media (min-width: 701px) { .wisch__pfeile { display: flex; } .wisch__karte { flex-basis: calc(50% - var(--s4) / 2); min-height: 420px; } }
@media (min-width: 1100px) { .wisch__karte { flex-basis: calc(40% - var(--s4)); } }
#beispiele .belege { margin-top: var(--s7); }