/* Kursseiten (Basic Course, 1:1 Mentoring) — ergänzt site.css */

/* Hero Basic Course */
.kurs-held { position: relative; height: 900px; background: #b9b3ad var(--bild) center / cover no-repeat; color: #fff; }
.kurs-held__marke { position: absolute; top: 25px; left: 0; right: 0; margin: 0; text-align: center; color: #000;
  font: 700 15px/1 "Rodetta", var(--serif); text-transform: uppercase; }
.kurs-held__inhalt { position: absolute; left: 108px; right: 108px; top: 389px; text-align: center; }
.kurs-held h1 { font: 300 50px/1 var(--serif); padding-bottom: 10px; }
.kurs-held__schrift { margin: -14px 0 0; text-align: right; font: 400 4vw/1 "Rodetta Rossie", var(--schrift); }

/* Kursnavigation: vier Punkte, gleiche Optik wie die Hauptnavigation */
.hauptnav--kurs ul { max-width: 880px; }

/* Hero 1:1 Mentoring (Bild links, Text rechts) */
.mentoring-held h1 { font: 300 50px/1 var(--serif); padding-bottom: 10px; margin-bottom: 0; }
.mentoring-held .symbol { margin-bottom: 30px; }

/* „Basic Course“-Liste neben dem Bild: Textspalte etwas breiter */
.kurs-split .kurs-split__text { max-width: 585px; }
.kurs-split h2 { margin-bottom: 0; }

/* ---------------------------------------------------------------- Kapitel & Inhalte (Karussell) */
.kapitel { background: #efeded; padding: 58px 0 60px; text-align: center; }
.kapitel > h2 { padding: 0 0 50px; }
.schieber { position: relative; max-width: 1368px; margin: 0 auto; padding: 0 0 20px; }
.schieber__folie { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.schieber__folie[hidden] { display: none; }
.schieber__folie.ist-aktiv .schieber__bild { animation: kurs-rein-links .7s .1s ease-in-out both; }
.schieber__folie.ist-aktiv .schieber__text { animation: kurs-rein .6s ease-in-out both; }
.schieber__bild { width: 80%; max-width: 500px; margin: 0 auto 0 calc(10% + 6px); aspect-ratio: 500 / 447; object-fit: cover; }
.schieber__text { max-width: 569px; margin: 0 auto; padding: 0 20px 0 0; font-size: 15px; }
.schieber__text h3 { font: 300 38px/1.25 var(--serif); margin: 0 0 10px; }
.schieber__kapitel { font-weight: 900; margin-bottom: 1.2em !important; }
.schieber__pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border: 0; background: none;
  color: #222; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.schieber__pfeil--zurueck { left: 22px; }
.schieber__pfeil--weiter { right: 22px; }
.schieber__pfeil svg { width: 26px; height: 26px; }
.schieber__pfeil:hover { color: var(--mauve); }
@keyframes kurs-rein-links { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes kurs-rein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Preise */
.preise { display: grid; grid-template-columns: 28% 28% 28%; justify-content: center; column-gap: 4%; padding: 0 0 58px; }
.preis { background: rgba(188, 174, 174, .15); border: 1px solid var(--mauve); box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
  padding: 50px 20px 60px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.preis > img { width: 40px; height: 60px; margin-bottom: 23px; }
.preis h2 { font-size: 40px; line-height: 1; margin-bottom: 23px; }
.preis > p { max-width: 321px; }
.preis__klein { font: 300 16px/23.8px var(--serif); margin: 30px 0 0 !important; }
.preis__betrag { font: 300 40px/1.25 var(--serif); margin: 0 0 40px !important; }
.preis .knopf { margin-top: auto; }

.nur-handy { display: none; }

/* Zitate in den Stimmen nicht auf Kachel-Textbreite (288px) begrenzen */
.stimmen blockquote p { max-width: none; }

/* ---------------------------------------------------------------- Tablet & Handy */
@media (max-width: 980px) {
  .kurs-held { height: 640px; }
  .kurs-held__inhalt { left: 20px; right: 20px; top: 260px; }
  .kurs-held h1 { font-size: 38px; }
  .kurs-held__schrift { font-size: 7vw; }
  .schieber__folie { grid-template-columns: 1fr; }
  .schieber__bild { margin: 0 auto 30px; width: 70%; }
  .schieber__text { padding: 0 60px; }
  .preise { grid-template-columns: 1fr; row-gap: 30px; padding: 0 20px 58px; }
  .preis { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .kurs-held { height: 760px; background-position: 62% center; }
  .kurs-held__marke { top: 32px; font-size: 13px; }
  .kurs-held__inhalt { top: 318px; left: 34px; right: 34px; }
  .kurs-held h1 { font-size: 25px; line-height: 1.15; }
  .kurs-held__schrift { margin: 4px -20px 0 0; font-size: 33px; white-space: nowrap; }
  .split__text > .symbol { width: 34px; height: 50px; margin-bottom: 22px; }
  .split--voll .split__bild { min-height: 105vw; }
  .mentoring-held h1 { font-size: 22px; line-height: 1.2; }
  .mentoring-held h1 br { display: inline; }
  .mentoring-held .split__bild { min-height: 420px; }
  .kapitel { padding: 50px 0 40px; }
  .kapitel > h2 { padding: 20px 0 16px; font-size: 22px; }
  .schieber__bild { width: 70%; margin-bottom: 24px; }
  .schieber__text { padding: 0 40px; font-size: 14px; }
  .schieber__text h3 { font-size: 22px; }
  .schieber__pfeil { top: 72%; width: 32px; height: 32px; }
  .schieber__pfeil--zurueck { left: 4px; }
  .schieber__pfeil--weiter { right: 4px; }
  .schieber__pfeil svg { width: 20px; height: 20px; }
  .preise { padding: 0 10px 50px; row-gap: 14px; }
  .preis { padding: 40px 20px 40px; }
  .preis h2 { font-size: 22px; }
  .preis__klein { font-size: 13px; }
  .preis__betrag { font-size: 22px; margin-bottom: 30px !important; }
  .nur-handy { display: block; }
}