/* SSV Kursanfrage – Teaser mit zwei Kurskarten und Platzanfrage (3 Spalten) */
.ssv-kursanfrage {
  --ssv-blue: #01509b;
  --ssv-yellow: #ffcc00;
  --ssv-line: #dce4eb;
  --ssv-muted: #575760;
  margin: 0 0 2em;
  min-width: 0;
}
.ssv-kursanfrage * { box-sizing: border-box; }
.ssv-kursanfrage .ssv-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

/* Kurskarte */
.ssv-kursanfrage .ssv-card { position: relative; isolation: isolate; display: flex; min-width: 0; border-radius: 12px; overflow: hidden; color: #fff; background: #00394a; box-shadow: 0 5px 16px rgba(15, 23, 42, 0.07); }
.ssv-kursanfrage .ssv-card__art, .ssv-kursanfrage .ssv-card__shade { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; z-index: -2; object-fit: cover; object-position: center top; }
.ssv-kursanfrage .ssv-card__shade { z-index: -1; background: linear-gradient(180deg, rgba(0, 9, 15, 0.02) 0%, rgba(0, 9, 15, 0.2) 12%, rgba(0, 6, 10, 0.85) 28%, #030809 62%, #030809 100%); }
.ssv-kursanfrage .ssv-card__copy { width: 100%; min-width: 0; padding: 115px 18px 17px; display: flex; flex-direction: column; }
.ssv-kursanfrage .ssv-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 9px; font-weight: 750; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: #063b49; background: #e5f5ee; border-radius: 30px; padding: 4px 8px; margin-bottom: 9px; }
.ssv-kursanfrage .ssv-badge > span { width: 6px; height: 6px; border-radius: 50%; background: var(--ssv-blue); }
.ssv-kursanfrage .ssv-card h3 { color: #fff; text-transform: uppercase; font-size: 23px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 5px; overflow-wrap: break-word; }
.ssv-kursanfrage .ssv-prerequisite { padding: 8px 9px; border: 1px solid rgba(255, 204, 0, 0.4); border-left: 3px solid var(--ssv-yellow); background: rgba(4, 19, 28, 0.72); border-radius: 5px; margin-bottom: 12px; }
.ssv-kursanfrage .ssv-prerequisite > span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: #ffda4c; margin-bottom: 3px; }
.ssv-kursanfrage .ssv-prerequisite strong { display: block; font-size: 13px; line-height: 1.3; color: #fff; }
.ssv-kursanfrage .ssv-facts { list-style: none; padding: 0; margin: 0 0 9px; display: grid; gap: 8px; }
.ssv-kursanfrage .ssv-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; margin: 0; }
.ssv-kursanfrage .ssv-facts svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--ssv-yellow); stroke-width: 1.8; margin-top: 1px; }
.ssv-kursanfrage .ssv-facts small { display: block; color: #d6e1e4; font-size: 11px; margin-top: 2px; }
.ssv-kursanfrage .ssv-dates { margin: 0 0 10px; }
.ssv-kursanfrage .ssv-dates summary { color: #ecf4f7; font-size: 11px; padding: 3px 0; cursor: pointer; font-weight: 600; }
.ssv-kursanfrage .ssv-dates__year { font-size: 12px; font-weight: 700; color: #d1dee3; margin: 10px 0 7px; }
.ssv-kursanfrage .ssv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ssv-kursanfrage .ssv-chips time { font-size: 12px; border: 1px solid #49616b; background: #183039; color: #fff; padding: 3px 7px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.ssv-kursanfrage .ssv-dates__note { font-size: 12px; color: #d1dee3; margin: 10px 0 0; }
.ssv-kursanfrage .ssv-card__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.19); }
.ssv-kursanfrage .ssv-price { display: block; color: var(--ssv-yellow); font-size: 25px; line-height: 1; font-weight: 750; }
.ssv-kursanfrage .ssv-fee { display: block; font-size: 10px; color: #cfdbdf; margin-top: 5px; }
.ssv-kursanfrage .ssv-places { font-size: 10px; color: #d7e3e7; max-width: 125px; }

/* Anfragekarte */
.ssv-kursanfrage .ssv-request { min-width: 0; display: flex; flex-direction: column; border: 1px solid #e6e6e6; border-top: 4px solid var(--ssv-blue); border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(15, 23, 42, 0.05); }
.ssv-kursanfrage .ssv-request__title { text-transform: uppercase; font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; color: #0f172a; padding: 16px 16px 0; margin: 0 0 24px; }
.ssv-kursanfrage .ssv-form { padding: 0 16px 15px; margin: 0; }
.ssv-kursanfrage .ssv-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.ssv-kursanfrage .ssv-field { min-width: 0; }
.ssv-kursanfrage .ssv-field--full { grid-column: 1 / -1; }
.ssv-kursanfrage .ssv-field label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: #222; }
.ssv-kursanfrage .ssv-optional { font-weight: 400; color: var(--ssv-muted); }
.ssv-kursanfrage .ssv-required { color: var(--ssv-blue); font-weight: 700; }
.ssv-kursanfrage .ssv-field input, .ssv-kursanfrage .ssv-field select { display: block; width: 100%; min-height: 36px; padding: 7px 8px; border: 1px solid #dedede; border-radius: 5px; background: #fff; color: #222; font: inherit; font-size: 13px; line-height: 1.4; }
.ssv-kursanfrage .ssv-field input:focus, .ssv-kursanfrage .ssv-field select:focus { outline: 2px solid var(--ssv-blue); outline-offset: 1px; border-color: var(--ssv-blue); }
.ssv-kursanfrage .ssv-field input[aria-invalid="true"] { border-color: #a52a20; }
.ssv-kursanfrage .ssv-hint { font-size: 10px; line-height: 1.35; color: var(--ssv-muted); margin: 3px 0 0; }
.ssv-kursanfrage .ssv-error-msg { color: #a52a20; font-size: 11px; line-height: 1.4; margin: 5px 0 0; }
.ssv-kursanfrage .ssv-error-msg:empty { display: none; }
.ssv-kursanfrage .ssv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ssv-kursanfrage .ssv-privacy { font-size: 11px; line-height: 1.35; margin: 10px 0; color: #222; }
.ssv-kursanfrage .ssv-button { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 38px; padding: 8px; border: 1px solid var(--ssv-yellow); border-radius: 5px; background: var(--ssv-yellow); color: #151c22; font: inherit; font-size: 13px; font-weight: 750; line-height: 1.4; cursor: pointer; white-space: normal; text-transform: none; }
.ssv-kursanfrage .ssv-button:hover, .ssv-kursanfrage .ssv-button:focus { background: #efbd00; border-color: #efbd00; color: #151c22; }
.ssv-kursanfrage .ssv-button:focus-visible { outline: 3px solid var(--ssv-blue); outline-offset: 3px; }
.ssv-kursanfrage .ssv-button:disabled, .ssv-kursanfrage .ssv-button:disabled:hover { background: #dce1e5; border-color: #dce1e5; color: #5b6269; cursor: not-allowed; }
.ssv-kursanfrage .ssv-note { font-size: 10px; line-height: 1.35; color: #62696e; margin: 8px 0 0; }
.ssv-kursanfrage .ssv-feedback { font-size: 12px; line-height: 1.4; margin: 8px 0 0; color: var(--ssv-blue); }
.ssv-kursanfrage .ssv-feedback:empty { display: none; }
.ssv-kursanfrage .ssv-feedback.is-success { padding: 12px 14px; border-radius: 8px; background: #e6f4ea; color: #1e6b2f; font-weight: 600; font-size: 14px; margin: 0; }
.ssv-kursanfrage .ssv-feedback.is-error { color: #a52a20; }
.ssv-kursanfrage .ssv-feedback.is-info { padding: 0 16px 16px; font-size: 14px; color: var(--ssv-muted); }
.ssv-kursanfrage .ssv-form.is-sent .ssv-form__body { display: none; }
.ssv-kursanfrage .ssv-form.is-sending .ssv-button { opacity: 0.7; cursor: progress; }

@media (max-width: 980px) and (min-width: 769px) {
  .ssv-kursanfrage .ssv-layout { gap: 12px; }
  .ssv-kursanfrage .ssv-card__copy { padding: 105px 13px 15px; }
  .ssv-kursanfrage .ssv-card h3 { font-size: 21px; }
  .ssv-kursanfrage .ssv-request__title { padding: 14px 12px 0; font-size: 17px; }
  .ssv-kursanfrage .ssv-form { padding: 0 12px 14px; }
  .ssv-kursanfrage .ssv-form__grid { grid-template-columns: 1fr; }
  .ssv-kursanfrage .ssv-field--full { grid-column: auto; }
}
@media (max-width: 768px) {
  .ssv-kursanfrage .ssv-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ssv-kursanfrage .ssv-card__copy { padding: 110px 18px 18px; }
  .ssv-kursanfrage .ssv-card h3 { font-size: 24px; }
  .ssv-kursanfrage .ssv-field label { font-size: 12px; }
  .ssv-kursanfrage .ssv-field input, .ssv-kursanfrage .ssv-field select { font-size: 16px; min-height: 44px; }
  .ssv-kursanfrage .ssv-button { min-height: 44px; font-size: 14px; }
}
@media (max-width: 380px) {
  .ssv-kursanfrage .ssv-form__grid { grid-template-columns: 1fr; }
  .ssv-kursanfrage .ssv-field--full { grid-column: auto; }
}
@media print {
  .ssv-kursanfrage .ssv-layout { display: block; }
  .ssv-kursanfrage .ssv-card { color: #222; background: #fff; border: 1px solid #ddd; box-shadow: none; margin-bottom: 16px; }
  .ssv-kursanfrage .ssv-card__art, .ssv-kursanfrage .ssv-card__shade, .ssv-kursanfrage .ssv-request { display: none; }
  .ssv-kursanfrage .ssv-card__copy { padding: 16px; }
  .ssv-kursanfrage .ssv-card h3, .ssv-kursanfrage .ssv-price, .ssv-kursanfrage .ssv-fee, .ssv-kursanfrage .ssv-places, .ssv-kursanfrage .ssv-facts small { color: #222; }
}

/* Kurs und Alter gemeinsam, Kontaktfelder darunter über volle Breite. */
.ssv-kursanfrage .ssv-form__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 380px) {
  .ssv-kursanfrage .ssv-form__grid { grid-template-columns: 1fr; }
  .ssv-kursanfrage .ssv-field--course > label,
  .ssv-kursanfrage .ssv-field--age > label { min-height: 0; }
}

/* Kontaktfelder auch im Tabletbereich über beide Spalten. */
.ssv-kursanfrage .ssv-form__grid > .ssv-field--full { grid-column: 1 / -1; }