/* ROTH INSTITUT · Landingpage Führungskräftetraining in Bremen (Leadership Essentials) — seiteneigene Bausteine, nach main.css laden.
   Nur, was main.css nicht hergibt: kompakter Seitenkopf mit Eckdaten, Abgrenzungsband, Situationskarten, Zeitstrahl, Preisblock.
   Farben nur aus tokens.css (ein Gelb, Petrol, Anthrazit); keine max-width auf Texten (Textbreiten-Regel). */

/* ---------- Seitenkopf: alles Wichtige im ersten Bildschirm, ohne Animation ---------- */
.seitenkopf--landing { min-height: 0; padding-top: 112px; }
.seitenkopf--landing .seitenkopf__inhalt { padding-bottom: var(--s7); }
.seitenkopf--landing h1 { font-size: clamp(2rem, 4.4vw, 3.75rem); margin-top: var(--s4); text-wrap: pretty; }
.seitenkopf--landing .seitenkopf__sub { margin-top: var(--s4); }
.seitenkopf--landing .seitenkopf__bild img { object-position: center 35%; }
.seitenkopf--landing .seitenkopf__schleier { background: linear-gradient(180deg, rgba(30,29,29,.68) 0%, rgba(30,29,29,.56) 45%, rgba(30,29,29,.9) 100%); }
.lp-leser { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s6); color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.5; }
.lp-leser li { padding-left: var(--s4); border-left: 3px solid var(--orange); }
.lp-leser b { display: block; font-weight: 700; color: var(--weiss); }
.lp-fakten { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s3) var(--s7); }
.lp-fakten li { display: grid; gap: 2px; align-content: start; }
.lp-fakten span { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.lp-fakten b { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lp-fakten small { font-size: .875rem; color: rgba(255,255,255,.82); }
.seitenkopf--landing .hero__ctas { margin-top: var(--s5); }

/* ---------- Abgrenzungsband ---------- */
.lp-abgrenzung { background: var(--orange); color: var(--grau-950); padding-block: var(--s5); }
.lp-abgrenzung p { font-family: var(--font-display); font-size: clamp(1.0625rem, 1.9vw, 1.375rem); font-weight: 500; line-height: 1.35; }
.lp-abgrenzung strong { font-weight: 700; }

/* ---------- Für wen: drei Situationen ---------- */
.kennung + .h2 { margin-top: var(--s4); }
.lp-situationen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.lp-situation { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s6) var(--s6) calc(var(--s6) + 4px); background: var(--papier); border-radius: var(--r-gross); box-shadow: var(--schatten-1); }
.lp-situation::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--orange); border-radius: var(--r-gross) 0 0 var(--r-gross); }
.lp-situation__wer { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.lp-situation h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.25; }
.lp-situation p:not(.lp-situation__wer) { color: var(--text-2); }
.lp-situation__link { margin-top: auto; padding-top: var(--s3); }
.lp-situation__link a { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 500; color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.lp-situation__link .icon { width: 18px; height: 18px; color: var(--orange); }

/* ---------- Lernziele ---------- */
.lp-themen { margin-top: var(--s6); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.lp-themen + .chips { margin-top: var(--s3); }
#lernziele .perspektiven { margin-top: var(--s7); }

/* ---------- Aufbau: Zeitstrahl über den vier Bausteinen ---------- */
.lp-strahl { list-style: none; margin: var(--s7) 0 var(--s7); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.lp-strahl::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--linie-dunkel); }
.lp-strahl__punkt { position: relative; display: grid; gap: 2px; padding-top: var(--s6); padding-right: var(--s3); font-size: var(--klein); color: var(--text-invers-2); }
.lp-strahl__punkt::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--orange); background: var(--grau-900); }
.lp-strahl__punkt--praesenz::before { background: var(--orange); }
.lp-strahl__monat { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.lp-strahl__punkt b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--text-invers); }

/* ---------- Preis ---------- */
.lp-preis { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s8); margin-top: var(--s7); align-items: start; }
.lp-preis__zahl { padding: var(--s6); background: var(--grau-900); color: var(--text-invers); border-radius: var(--r-gross); box-shadow: var(--schatten-1); }
.lp-preis__betrag { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-preis__einheit { margin-top: var(--s2); color: var(--text-invers-2); }
.lp-preis__cta { margin-top: var(--s5); }
.lp-preis__text p { color: var(--text-2); }
.lp-preis__text p + p { margin-top: var(--s4); }
.lp-preis__text a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Für Personalentwicklung ---------- */
.lp-hrliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s7); margin-top: var(--s6); }
.lp-hrfest { margin-top: var(--s5); color: var(--text-2); }
.lp-hrfest a { display: inline-flex; gap: var(--s2); align-items: center; color: var(--petrol); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.lp-hrfest .icon { width: 18px; height: 18px; color: var(--orange); }

/* ---------- Institut ---------- */
.lp-institutbild { margin: var(--s7) 0 0; border-radius: var(--r-kachel); overflow: hidden; box-shadow: var(--schatten-bild); }
.lp-institutbild img { width: 100%; height: auto; }

/* ---------- Anfrage ---------- */
#anfrage .anmeldung__text > .kennung { margin-top: 0; }
#anfrage .anmeldung__text .h2 { margin-top: var(--s3); font-size: clamp(1.75rem, 3vw, 2.5rem); }
#anfrage .anmeldung__text .lead { margin-top: var(--s5); }
#anfrage .anmeldung__text .abschluss__ctas { margin-top: var(--s6); }
#anfrage .anmeldung__karte .h3 { margin-top: 0; }
#anfrage select { width: 100%; }

@media (max-width: 1180px) {
  .lp-situationen { grid-template-columns: 1fr; }
  .lp-preis { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 900px) {
  .lp-leser, .lp-hrliste { grid-template-columns: 1fr; }
  .lp-strahl { grid-template-columns: 1fr; margin-block: var(--s6); }
  .lp-strahl::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .lp-strahl__punkt { padding: 0 0 var(--s5) var(--s7); }
  .lp-strahl__punkt::before { left: 0; top: 4px; }
}
@media (max-width: 700px) {
  .seitenkopf--landing { padding-top: 96px; }
  .lp-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
  .lp-fakten li:first-child { grid-column: 1 / -1; }
  .seitenkopf--landing .hero__ctas .btn { width: 100%; justify-content: center; }
}
@media (max-width: 700px) {
  .seitenkopf--landing .seitenkopf__sub { font-size: 1.0625rem; line-height: 1.5; }
  .lp-leser { font-size: .9375rem; gap: var(--s3); }
}