/* Kurs-Seite „Einfach schön Einrichten 4.0 · Warteliste“ · ergänzt stil.css, stil-v2.css, stil-v3.css, seiten.css
 * Abschnitte: Creme · Gelbes Laufband · Taupe · Creme · Salbei zart · Beige hell · Creme · Salbei zart · Creme · Beige hell · Taupe */

/* ---------- Hero ---------- */
.kurs-hero { padding: clamp(40px, 6vw, 90px) 0 clamp(56px, 7vw, 100px); }
.kurs-hero .geteilt { grid-template-columns: 6fr 5fr; }
.kurs-hero__bild { order: 2; }
.kurs-hero__bild img { aspect-ratio: 4 / 5.2; object-position: 50% 30%; animation: auftauchen 1.2s both; }
.kurs-hero .geteilt__text > * { animation: auftauchen 1s .15s both; }
.kurs-hero h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); margin-bottom: .3em; }
.kurs-hero__unter { font: italic 400 clamp(1.2rem, 1.7vw, 1.4rem)/1.5 var(--serif); color: var(--akzent); }
.kurs-hero .knoepfe { margin-top: 26px; }
.kurs-hero__hinweis { margin: 16px 0 0; }

.vorteile { background: var(--salbei-zart); padding: 22px 26px 18px; margin-top: 26px; border-left: 3px solid var(--salbei-mittel); }
.vorteile__titel { font: 700 .68rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--akzent); margin: 0 0 8px; }
.vorteile .haken-liste { margin: 0; }

/* Häkchen-Liste für helle Flächen */
.haken-liste { list-style: none; padding: 0; margin: 0 0 1.6em; }
.haken-liste li { position: relative; padding: 7px 0 7px 30px; }
.haken-liste li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 12px; height: 7px; border-left: 1.5px solid var(--salbei-text); border-bottom: 1.5px solid var(--salbei-text); transform: rotate(-45deg); }
.haken-liste--gross li { padding: 13px 0 13px 32px; border-bottom: 1px solid rgba(75, 75, 75, .12); }
.haken-liste--gross li:first-child { border-top: 1px solid rgba(75, 75, 75, .12); }
.haken-liste--gross li::before { top: 22px; }
.haken-liste strong { font-weight: 700; }

/* ---------- Laufband: das eine gelbe Highlight ---------- */
.kurs-band { background: var(--gelb); padding: 18px 0; overflow: hidden; border-block: 1px solid rgba(75, 75, 75, .1); }
.kurs-band__liste { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: laufband 46s linear infinite; }
.kurs-band__liste li { font: italic 400 clamp(1.1rem, 1.6vw, 1.3rem)/1 var(--serif); white-space: nowrap; padding: 0 30px; display: flex; align-items: center; gap: 60px; }
.kurs-band__liste li::after { content: "✿"; font-style: normal; font-size: .75rem; color: var(--akzent); margin-right: -30px; }
.kurs-band:hover .kurs-band__liste { animation-play-state: paused; }

/* ---------- Kennst du das? (Taupe) ---------- */
.kennst .geteilt { grid-template-columns: 5fr 6fr; }
.kennst .geteilt__bild img { aspect-ratio: 4 / 4.6; object-position: 40% 50%; }
.otoene { list-style: none; margin: 0 0 1.6em; padding: 0; }
.otoene li { font: italic 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.45 var(--serif); padding: 14px 0 14px 22px; border-bottom: 1px solid rgba(249, 248, 247, .18); position: relative; }
.otoene li::before { content: ""; position: absolute; left: 0; top: 25px; width: 10px; height: 1px; background: var(--beige); }
.kennst__antwort { font: italic 400 clamp(1.3rem, 2vw, 1.6rem)/1.4 var(--serif); color: var(--beige); margin-top: 1.2em; }

/* ---------- Module ---------- */
.modulkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.modulkarte { background: var(--weiss); border: 1px solid var(--linie); padding: clamp(26px, 3vw, 38px); position: relative; }
.modulkarte__nr { font: 700 .68rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--akzent); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.modulkarte h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); margin-bottom: .45em; }
.modulkarte p:not(.modulkarte__nr) { color: var(--text-leise); margin: 0; font-size: .98rem; }
.modulkarte--bonus { background: var(--salbei-zart); border-color: var(--salbei-mittel); }
.modulkarte__marke { background: var(--salbei-mittel); color: var(--text); padding: 5px 10px; letter-spacing: .18em; font-size: .62rem; }
.js .modulkarten .zeigen:nth-child(3n+2) { transition-delay: .12s; }
.js .modulkarten .zeigen:nth-child(3n) { transition-delay: .24s; }

/* ---------- Dazu bekommst du ---------- */
.werkzeug { background: var(--salbei-zart); }
.werkzeug .geteilt { grid-template-columns: 5fr 6fr; }
.werkzeug .haken-liste--gross li { border-color: rgba(75, 75, 75, .14); }

/* ---------- So läuft's ab ---------- */
.kurs-ablauf .schritte { margin-bottom: clamp(56px, 7vw, 96px); }
.kurs-ablauf__unten { grid-template-columns: 5fr 6fr; }
.kurs-ablauf__unten .geteilt__bild img { aspect-ratio: 4 / 4.4; }
.kurs-ablauf__titel { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .6em; }
.kurs-ablauf__stimme { margin-top: 30px; border-top-color: rgba(75, 75, 75, .3); }

/* ---------- Für wen ---------- */
.fuerwen { background: var(--salbei-zart); }
.fuerwen__raster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.fuerwen__karte { padding: clamp(28px, 3.6vw, 48px); }
.fuerwen__karte h3 { margin-bottom: .8em; }
.fuerwen__karte--ja { background: var(--creme); }
.fuerwen__karte--nein { border: 1px solid rgba(75, 75, 75, .18); }
.kreuz-liste { list-style: none; padding: 0; margin: 0 0 1.4em; }
.kreuz-liste li { position: relative; padding: 13px 0 13px 32px; border-bottom: 1px solid rgba(75, 75, 75, .12); color: var(--text-leise); }
.kreuz-liste li:first-child { border-top: 1px solid rgba(75, 75, 75, .12); }
.kreuz-liste li::before, .kreuz-liste li::after { content: ""; position: absolute; left: 4px; top: 25px; width: 13px; height: 1.5px; background: var(--akzent); transform: rotate(45deg); }
.kreuz-liste li::after { transform: rotate(-45deg); }
.fuerwen__schluss { font: italic 400 1.2rem/1.5 var(--serif); margin: 0; }

/* ---------- Über Kim ---------- */
.kurs-kim h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.kim-zahlen { list-style: none; margin: 1.6em 0 2em; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--linie); }
.kim-zahlen li { padding: 20px 14px 18px 0; }
.kim-zahlen li + li { padding-left: 18px; border-left: 1px solid var(--linie); }
.kim-zahlen strong { display: block; font: 400 clamp(1.9rem, 3vw, 2.5rem)/1 var(--serif); margin-bottom: 8px; }
.kim-zahlen span { font: 700 .62rem/1.45 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); display: block; }

/* ---------- Fragen ---------- */
.kurs-fragen .fragen { max-width: 860px; margin: 0 auto; border-top: 1px solid rgba(75, 75, 75, .35); }
.kurs-fragen .fragen details > div p { padding-right: 52px; }

/* ---------- Eintragen (Taupe) mit Formularkarte ---------- */
.eintragen .geteilt { grid-template-columns: 5fr 6fr; align-items: start; }
.eintragen .geteilt__bild { position: sticky; top: 110px; }
.eintragen .geteilt__bild img { aspect-ratio: 4 / 5.4; object-position: 50% 30%; }
.formkarte { background: var(--creme); color: var(--text); padding: clamp(26px, 3.4vw, 44px); margin-top: 28px; border-top: 5px solid var(--salbei-mittel); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .55); }
.formkarte h3 { color: var(--text); font-size: clamp(1.45rem, 2.2vw, 1.8rem); margin-bottom: .6em; }
.formkarte .haken-liste { margin-bottom: 18px; }
.eintragen__stimme { margin: 34px 0 0; padding-left: 22px; border-left: 1px solid rgba(249, 248, 247, .35); }
.eintragen__stimme blockquote { margin: 0 0 12px; font: italic 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.45 var(--serif); }
.eintragen__stimme figcaption { font: 700 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--beige); }

/* ActiveCampaign-Formular 34 an das Website-Design anpassen (Felder, Knopf in Salbei wie überall) */
#_form_34_._inline-form { margin: 0 !important; padding: 0 !important; max-width: none; font-family: var(--sans) !important; background: transparent !important; }
#_form_34_._inline-form ._form-content { font-family: var(--sans) !important; }
#_form_34_._inline-form ._form-label { font: 700 .66rem/1.4 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--text) !important; margin-bottom: 8px; text-align: left; }
#_form_34_ ._form_element { margin-bottom: 16px !important; }
#_form_34_ ._form_element input[type="text"] { font: 400 16px/1.4 var(--sans) !important; padding: 14px 16px !important; border: 1px solid #cdbfb1 !important; border-radius: 2px !important; background: var(--weiss) !important; color: var(--text) !important; }
#_form_34_ ._form_element input[type="text"]:focus { outline: none; border-color: var(--akzent) !important; box-shadow: 0 0 0 3px rgba(138, 120, 104, .2); }
#_form_34_ input::placeholder { color: #9a928a !important; }
#_form_34_ .field-required { color: var(--akzent) !important; }
#_form_34_._inline-form ._submit { font: 700 .76rem/1.2 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; min-height: 54px; padding: 16px 20px !important; border-radius: 2px !important; border: 1px solid var(--salbei-mittel) !important; background: var(--salbei-mittel) !important; color: var(--text) !important; margin-top: 6px; transition: background .3s, border-color .3s; }
#_form_34_._inline-form ._submit:hover { background: var(--salbei-hover) !important; border-color: var(--salbei-hover) !important; }
#_form_34_ ._form-thank-you { font: 400 1.05rem/1.6 var(--sans) !important; color: var(--text) !important; padding: 12px 0; }
.formkarte .form-consent { font: 400 .8rem/1.5 var(--sans) !important; color: var(--text-leise) !important; margin: 14px 0 0 !important; text-align: center; }
.formkarte .form-consent a { color: var(--text); }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .modulkarten { grid-template-columns: 1fr 1fr; }
  .js .modulkarten .zeigen:nth-child(n) { transition-delay: 0s; }
  .fuerwen__raster { grid-template-columns: 1fr; }
}

/* ---------- Handy: immer Bild, dann Text. Nie zwei Bilder hintereinander. ---------- */
@media (max-width: 760px) {
  .kurs-hero { padding-top: 0; }
  .kurs-hero .geteilt, .kennst .geteilt, .werkzeug .geteilt, .kurs-ablauf__unten, .eintragen .geteilt { grid-template-columns: 1fr; gap: 30px; }
  .kurs-hero .rahmen { padding: 0; }
  .kurs-hero__bild { order: 0; }
  .kurs-hero__bild img { aspect-ratio: auto; height: 58vh; min-height: 360px; max-height: 520px; border-radius: 0; }
  .kurs-hero .geteilt__text { padding: 0 var(--rand); }
  .kurs-hero h1 { font-size: 2.45rem; }
  .vorteile { padding: 18px 18px 14px; }
  .kurs-band { padding: 14px 0; }
  .modulkarten { grid-template-columns: 1fr; }
  .kim-zahlen { grid-template-columns: 1fr; }
  .kim-zahlen li, .kim-zahlen li + li { padding: 14px 0; border-left: 0; display: flex; align-items: baseline; gap: 14px; }
  .kim-zahlen li + li { border-top: 1px solid var(--linie); }
  .kim-zahlen strong { margin: 0; min-width: 96px; }
  .kurs-fragen .fragen details > div p { padding-right: 0; }
  .eintragen .geteilt__bild { position: static; }
  .eintragen .geteilt__bild img { aspect-ratio: 4 / 4.4; }
  .formkarte { margin-left: calc(var(--rand) * -.5); margin-right: calc(var(--rand) * -.5); }
}