/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — ANGEBOTSSEITE KI-Kompetenz-Kurs
   Geladen von angebot-ki-kompetenz.php und angebot-website.php (dort nur
   Titelzeile, Punktliste, Preiszeile, Hinweis — gescopt auf .kursangebot), als letzte Stilvorlage
   (nach rechtstext.css, leistungsseite.css, kontaktformular.css).
   ═══════════════════════════════════════════════════════════════════════

   Trägt nur, was es sonst nirgends gibt: Titelzeile, Kapitel- und
   Punktlisten, Handout-Vorschau, Preiszeile, Kontaktweg-Auswahl und die
   Anpassungen, damit die Felder des Kontaktfensters (`kf-…`) auch als
   Formular MITTEN in der Seite tragen. Alles ist auf `.kursangebot`
   (den Abschnitt) gescopt — die Regeln wirken nicht in andere Seiten.
   Farben über die :root-Variablen aus grund.css bzw. die Feldfarbe der
   Leistungsseite (`--feldfarbe`, hier blau).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Titel ─────────────────────────────────────────────────────────────
   Die Leistungsseiten tragen ein Titelbild; für das Angebot gibt es keins.
   Eigene Schriftregel in der Kopfschrift. */
.kursangebot .ka-titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(30px, 4vw, 44px); letter-spacing: .01em; color: #fff;
}

/* ── Seitenhintergrund ─────────────────────────────────────────────────
   Grundregeln (.seitenbild, Verlauf darüber) aus leistungsseite.css; hier nur
   das Motiv, gleiche Helligkeit wie die Leistungsseiten. */
.seitenbild--kurs {
  background-image: url(../kurs-hg.webp);
  filter: brightness(1.05) saturate(.9);
  opacity: .62;
}

/* ── Listen ──────────────────────────────────────────────────────────── */
.kursangebot .ka-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kursangebot .ka-liste li { position: relative; padding-left: 22px; color: var(--tx-dim2); font-size: 16px; line-height: 1.55; }
.kursangebot .ka-liste li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--feldfarbe), .8);
}
.kursangebot .ka-liste strong { color: var(--tx); }
.kursangebot .imp-body p + .ka-liste { margin-top: 12px; }
/* Absatz nach der Liste (angebot-website.php): sonst klebt er an der letzten Zeile. */
.kursangebot .imp-body .ka-liste + p { margin-top: 14px; }
/* Knopf IM Kasten (angebot-website.php): rechtstext.css färbt jeden Link in
   .imp-body grün und unterstreicht ihn — für den Knopf zurücknehmen, sonst
   steht grüne Schrift auf grünem Grund. */
.kursangebot .imp-body a.btn-primary,
.kursangebot .imp-body a.btn-primary:hover { color: #04160b; border-bottom-color: transparent; }

/* ── Handout-Vorschau ──────────────────────────────────────────────────
   Drei Seiten klein nebeneinander, auch auf schmalen Fenstern (nur
   kleiner) — die Seite soll kurz bleiben.
   `min-width: 0` gegen das Aufblähen der Rasterspalten durch das Bild. */
.kursangebot .ka-handout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 18px; max-width: 560px;
}
.kursangebot .ka-handout img {
  display: block; width: 100%; height: auto; min-width: 0;
  border-radius: 4px; box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

/* ── Preis ───────────────────────────────────────────────────────────── */
.kursangebot .ka-preis {
  font-family: var(--font-mono); font-weight: 700; font-size: 30px;
  color: var(--green-h); margin: 18px 0 0;
}
.kursangebot .ka-preis span { font-family: var(--font-sans); font-weight: 400; font-size: 17px; color: var(--tx-dim2); margin-left: 8px; }
/* Zeile zur Pflicht nach Art. 4 unter „Das Angebot“, leiser
   als der Text — wie .ls-pflicht auf der KI-Seite. */
.kursangebot .imp-body .ka-pflicht { margin-top: -6px; font-size: 15px; color: var(--tx-dim); }
.kursangebot .imp-body .ka-hinweis { margin-top: 6px; font-size: 14px; color: var(--tx-dim); }

/* ── Formular in der Seite ─────────────────────────────────────────────
   kontaktformular.css setzt JEDES input im Formular auf volle Breite mit
   Innenabstand — für Optionsknöpfe falsch, sie würden zu Balken. */
.kursangebot .ka-form { margin-top: 20px; }
.kursangebot .ka-form input[type="radio"] {
  width: 18px; height: 18px; padding: 0; margin: 0; flex: none;
  accent-color: var(--green);
}
.kursangebot .ka-weg { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.kursangebot .ka-weg legend { width: 100%; padding: 0; float: left; }
.kursangebot .ka-wahl { display: inline-flex; align-items: center; gap: 9px; color: var(--tx); font-size: 16px; cursor: pointer; }
.kursangebot .ka-stern[hidden] { display: none; }

/* PLZ schmal, Ort breit — wie auf einem Briefumschlag. */
.kursangebot .ka-ortreihe { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }

.kursangebot .kf-pflicht a { color: var(--green-h); text-decoration: none; border-bottom: 1px solid rgba(34,197,94,.4); }
.kursangebot .kf-pflicht a:hover { color: var(--green); border-bottom-color: var(--green); }
/* Rückmeldung entsteht per Skript (Klassen aus kontaktformular.css); die
   Absatzregel der Kästen (`.imp-body p`) würde sonst ihre Farbe übermalen. */
.kursangebot .imp-body .kf-meldung--fehler { color: #fecaca; }
.kursangebot .imp-body .kf-meldung--erfolg { color: var(--green-h); }

/* ── Schmale Fenster ──────────────────────────────────────────────────── */
/* „* Pflichtfelder“ in der Zeile „Unverbindlich anfragen“: nur Handy. */
.kursangebot .ka-pflicht-kurz { display: none; }
@media (max-width: 760px) {
  .kursangebot .ka-handout { gap: 10px; }
  .kursangebot .ka-pflicht-kurz {
    display: inline-block; float: right; margin-top: 3px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--tx-dim);
  }
  .kursangebot .ka-pflicht-kurz em { color: var(--green-h); font-style: normal; }
  /* Passt der Hinweis nicht mehr neben die Überschrift, rutscht er in eine
     eigene Zeile rechts — der Absatz darunter fließt nicht um ihn herum. */
  .kursangebot #anfrage .imp-kicker + p { clear: right; }
}
@media (max-width: 560px) {
  .kursangebot .ka-ortreihe { grid-template-columns: minmax(0, 1fr); }
  .kursangebot .ka-preis span { display: block; margin: 6px 0 0; }
}