/* ROTH INSTITUT · Impulsvorträge — seitenspezifische Ergänzungen zu main.css.
   Nur Layout-Abweichungen, die main.css nicht kennt; Farben und Abstände
   ausschließlich über Tokens aus tokens.css. Wird nach main.css geladen. */

/* Einordnung unter dem Seitenkopf: Lesemaß statt Inhaltsbreite */
.iv-einordnung { max-width: 74ch; }

/* Hinweisabsatz unter Listen (Weiche zu anderen Formaten) */
.iv-hinweis { margin-top: var(--s7); max-width: 70ch; }
.iv-hinweis a { color: var(--petrol); }

/* Formen-Chips unter den Formatkarten */
.iv-formen { margin-top: var(--s7); }

/* Themenraster: drei Spalten, sechs Karten. Die Karten stehen auf dunkler Bühne,
   sind selbst weiß — deshalb Textfarbe explizit zurücksetzen (Standards §12). */
.iv-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iv-themen .perspektive { --marke-farbe: var(--gold); color: var(--text); }
.iv-themen .perspektive p { margin-top: var(--s4); font-size: var(--klein); color: var(--text-2); }
.iv-themen .perspektive .chips { margin-top: var(--s4); }
.iv-themen .perspektive .chips li { font-size: 0.8125rem; }

/* Vier Leistungsmerkmale unter den Themen (auf dunkel) */
.iv-merkmale { margin-top: var(--s9); }
.iv-merkmale h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.2; max-width: 30ch; }
.iv-merkmale > p { margin-top: var(--s4); max-width: 65ch; color: var(--text-invers-2); }
.iv-merkmale .ansatz { margin-top: var(--s6); }

/* Referent: Text links, Porträt rechts */
.iv-referent { margin-top: var(--s8); }
.iv-referent h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.iv-rolle { margin-top: var(--s2); color: var(--text-2); }
.iv-referent p + p { margin-top: var(--s4); }
.iv-referent .merkmale { margin-top: var(--s6); }
.iv-referent .merkmale li:last-child { border-bottom: 1px solid var(--grau-200); }
.iv-referent .split__bild img { object-position: 50% 12%; }
.iv-netzwerk { margin-top: var(--s7); max-width: 70ch; }

/* Konditionen: Preis-Karte */
.iv-preis { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-top: var(--s3); font-family: var(--font-display); }
.iv-konditionen p + p, .iv-konditionen .chips + p { margin-top: var(--s5); color: var(--text-2); }
.iv-konditionen .perspektive p { color: var(--text-2); }
.iv-konditionen .perspektive .btn { margin-top: var(--s5); align-self: flex-start; }

/* Anschluss: Einstiegs-Kacheln unter dem Lead */
.iv-anschluss .einstiege { margin-top: var(--s7); }

/* Formularkarte: Wunschtermin/Anlass/Teilnehmende in einer Zeile */
.iv-dreier { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .iv-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .iv-themen { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .iv-dreier { grid-template-columns: 1fr; }
}

/* ---------- Ergänzungen v2 (Strategie 05.09.: Zielgruppe §18, Türöffner §17, Funnel §20, Bildwelt §30) ---------- */

/* Wirkung: Publikumsbild links, Fünf-Punkte-Liste rechts (Split aus main.css, Bild querformatig) */
.iv-wirkung { align-items: center; }
.iv-wirkung .split__bild { order: -1; }
.iv-wirkung .split__bild img { aspect-ratio: 4/3; object-position: 50% 45%; }
.iv-wirkung .lead { margin-top: var(--s5); }
.iv-wirkung .merkmale { margin-top: var(--s6); }
.iv-wirkung .merkmale li:last-child { border-bottom: 1px solid var(--grau-200); }

/* Zielgruppe: zwei Karten „Für wen“ / „Wann“ */
.iv-zielgruppe .perspektive__liste { gap: var(--s4); font-size: var(--body); color: var(--text); }
.iv-zielgruppe .perspektive__liste li::before { transform: translateY(-5px); }
.iv-sekundaer { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--grau-200); font-size: var(--klein); color: var(--text-2); }

/* Statement: eine große Aussage auf Speaker-Motiv, ruhig, ohne Scroll-Effekt */
.iv-statement { position: relative; overflow: hidden; min-height: 56svh; display: flex; align-items: center; background: var(--grau-900); color: var(--weiss); padding-block: var(--s10); }
.iv-statement__bild { position: absolute; inset: 0; }
.iv-statement__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.iv-statement__schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,29,29,.86) 0%, rgba(30,29,29,.62) 55%, rgba(30,29,29,.35) 100%); }
.iv-statement__inhalt { position: relative; z-index: 2; }
.iv-statement .kennung span { color: rgba(255,255,255,.78); }
.iv-statement__text { margin-top: var(--s5); font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; max-width: 26ch; }
.iv-statement__text em { font-style: normal; color: var(--orange); }

/* Nächster Schritt: Schrittfolge über den Einstiegs-Kacheln */
.iv-schritte { margin-top: var(--s8); }
.iv-anschluss .einstiege { margin-top: var(--s8); }

@media (max-width: 1180px) {
  .iv-wirkung .split__bild { order: 0; max-width: 720px; }
}
@media (max-width: 900px) {
  .iv-statement { min-height: 0; padding-block: var(--s9); }
  .iv-statement__schleier { background: linear-gradient(180deg, rgba(30,29,29,.7) 0%, rgba(30,29,29,.82) 100%); }
}