/* Kurse – Liste & Detail. Nutzt die Custom Properties des Sitepackages. */

/* .tx-courses .container wird bewusst NICHT eigens gestylt: das Sitepackage
   liefert .container (86rem, margin auto) und setzt .main-content .container
   padding-inline: 0 (Doppel-Padding-Vermeidung). Ein eigenes padding-inline hier
   führte zu doppeltem Innenabstand und damit zu einer zu schmalen Liste/Detail. */

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #eceff8);
    border-radius: 0.5rem;
    overflow: hidden;
}

.course-card__media img {
    display: block;
    width: 100%;
    height: auto;
}

.course-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-4, 1.5rem);
}

.course-card__title {
    margin: 0;
    font-size: 1.25rem;
}

.course-card__title a {
    color: var(--color-heading, #1b1e3d);
    text-decoration: none;
}

.course-card__title a:hover,
.course-card__title a:focus-visible {
    color: var(--color-primary-dark, #835782);
}

.course-card__dates {
    margin: 0;
    font-weight: 600;
    color: var(--color-primary-dark, #835782);
}

.course-card__teaser {
    margin: 0;
    color: var(--color-text, #666);
}

.course-card__price {
    margin: 0;
    font-weight: 600;
}

.course-card__link {
    margin-top: auto;
    align-self: flex-start;
}

/* Detail */
.course-detail__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2, 0.5rem) var(--space-4, 1.5rem);
    margin: var(--space-5, 2rem) 0;
}

.course-detail__facts dt {
    font-weight: 600;
    color: var(--color-heading, #1b1e3d);
}

.course-detail__facts dd {
    margin: 0;
}

.course-detail__insurance {
    font-style: italic;
    color: var(--color-text, #666);
}

.course-detail__ics {
    margin-top: var(--space-5, 2rem);
}

.course-detail__booking {
    margin-top: var(--space-5, 2rem);
}

/* ============================================================
   Buchung – Formular & Statusseiten
   ============================================================ */
.booking {
    max-width: 44rem;
}

.booking__title {
    margin-top: 0;
}

.booking__meta {
    font-weight: 600;
    color: var(--color-primary-dark, #835782);
}

.booking__intro,
.booking__hint {
    color: var(--color-text, #666);
}

.booking__notice {
    padding: var(--space-4, 1.5rem);
    border-radius: 0.5rem;
    border-left: 4px solid var(--color-primary-dark, #835782);
    background: color-mix(in srgb, var(--color-primary, #9a6699) 8%, #fff);
}

.booking__notice--success {
    border-left-color: #2e7d32;
    background: color-mix(in srgb, #2e7d32 8%, #fff);
}

.booking__notice--warning {
    border-left-color: #b26a00;
    background: color-mix(in srgb, #b26a00 8%, #fff);
}

.booking__back {
    margin-top: var(--space-5, 2rem);
}

/* Formular */
.booking-form__hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.booking-form__hint {
    font-size: 0.9rem;
    color: var(--color-text, #666);
}

.booking-form__row {
    margin-bottom: var(--space-3, 1rem);
}

.booking-form__row label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.booking-form__row input,
.booking-form__row select,
.booking-form__row textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 0.375rem;
    font: inherit;
    background: #fff;
}

.booking-form__row--split {
    display: flex;
    gap: var(--space-3, 1rem);
}

.booking-form__row--split .booking-form__col {
    flex: 1;
}

/* Mobile Portrait: Felder über die volle Breite – 2-spaltig ist zu eng */
@media (max-width: 575.98px) {
    .booking-form__row--split {
        flex-direction: column;
    }
}

.booking-form__req {
    color: var(--color-primary-dark, #835782);
}

.booking-form__row--consent {
    margin: var(--space-4, 1.5rem) 0;
}

.booking-form__consent-label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
}

.booking-form__consent-label input {
    width: auto;
    margin-top: 0.25rem;
}

.booking-form__errors {
    padding: var(--space-4, 1.5rem);
    margin-bottom: var(--space-4, 1.5rem);
    border-radius: 0.5rem;
    border-left: 4px solid #c62828;
    background: color-mix(in srgb, #c62828 8%, #fff);
}

.booking-form__errors-title {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.booking-form__field-error {
    display: block;
    margin-top: 0.35rem;
    color: #b71c1c;
    font-size: 0.9rem;
}

/* Alpine setzt has-error auf dem Wrapper-Element wenn clientErrors gesetzt */
.has-error input,
.has-error select,
.has-error textarea {
    border-color: #c62828;
}

.booking-form__row input:focus-visible,
.booking-form__row select:focus-visible,
.booking-form__row textarea:focus-visible,
.booking-form__submit:focus-visible {
    outline: var(--focus-outline-width, 3px) solid var(--focus-outline-color, #1696e7);
    outline-offset: var(--focus-outline-offset, 2px);
}