/* KH-SON Public Frontend Styles */

/* Base Elements */
.khson-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.2s;
}

.khson-btn:hover {
    background: #005a87;
    color: #fff;
}

.khson-btn--primary {
    background: #0073aa;
    font-size: 16px;
    padding: 10px 24px;
}

.khson-btn--secondary {
    background: #72777c;
}

.khson-btn--secondary:hover {
    background: #555d66;
}

.khson-btn--small {
    padding: 4px 12px;
    font-size: 13px;
}

.khson-input,
.khson-select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    max-width: 100%;
}

.khson-input--large {
    width: 100%;
    max-width: 500px;
    padding: 10px 14px;
    font-size: 16px;
}

.khson-notice {
    padding: 12px 16px;
    background: #f0f0f1;
    border-left: 4px solid #72777c;
    margin: 15px 0;
}

/* Messages */
.khson-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin: 15px 0;
}

.khson-message--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.khson-message--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Filter Form */
.khson-filter-form,
.khson-search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: center;
}

/* Datei List */
.khson-datei-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.khson-datei-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
}

.khson-datei-info strong {
    display: block;
    margin-bottom: 4px;
}

.khson-datei-meta,
.khson-datei-innungen {
    font-size: 13px;
    color: #666;
}

.khson-datei-innungen {
    display: inline-block;
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

/* PDF Search */
.khson-result-count {
    color: #666;
    margin-bottom: 15px;
}

.khson-search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.khson-search-result {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
}

.khson-search-result h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.khson-search-result h3 a {
    text-decoration: none;
    color: #0073aa;
}

.khson-page-badge {
    display: inline-block;
    background: #e2e4e7;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
    color: #555;
}

.khson-snippet {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin: 0;
}

.khson-snippet mark {
    background: #fff3cd;
    padding: 1px 2px;
}

/* Event Cards */
.khson-veranstaltungen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.khson-event-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
}

.khson-event-date {
    min-width: 60px;
    text-align: center;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.khson-event-day {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.khson-event-month {
    font-size: 12px;
    text-transform: uppercase;
}

.khson-event-type {
    display: inline-block;
    background: #e2e4e7;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.khson-event-info h3 {
    margin: 4px 0 8px;
    font-size: 16px;
}

.khson-event-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.khson-event-meta span::before {
    content: "• ";
    color: #ccc;
}

.khson-event-meta span:first-child::before {
    content: "";
}

.khson-event-excerpt {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
}

/* Registration Form */
.khson-anmeldung {
    max-width: 700px;
}

.khson-form fieldset {
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.khson-form legend {
    font-weight: 600;
    font-size: 16px;
    padding: 0 8px;
}

.khson-field {
    margin-bottom: 12px;
}

.khson-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.khson-field .khson-input {
    width: 100%;
}

.khson-field--checkbox label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.4;
}

.khson-teilnehmer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f1;
}

/* Login */
.khson-login {
    max-width: 400px;
}

.khson-login-links {
    margin-top: 10px;
}

.khson-logged-in {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Responsive */
@media (max-width: 600px) {
    .khson-teilnehmer-row {
        grid-template-columns: 1fr;
    }

    .khson-event-card {
        flex-direction: column;
    }

    .khson-event-date {
        flex-direction: row;
        gap: 6px;
    }
}

/* ═══ Event Courses grid ([khson_event_courses]) ═══ */

/* Suppress theme-rendered page title on pages that host our shortcodes
 * (our design already includes its own banner/hero title). */
body:has(.khson-courses) .wp-block-post-title { display: none; }

.khson-courses {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

.khson-courses,
.khson-courses :is(h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, label, div, strong, em, svg) {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.khson-courses *,
.khson-courses *::before,
.khson-courses *::after { box-sizing: border-box; }

.khson-courses__hero {
    background: var(--khson-primary, #2A426E);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px;
    text-align: center;
}

.khson-courses__title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.khson-courses__panel {
    background: var(--khson-primary, #2A426E);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.khson-courses__filter {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 20px;
    flex-wrap: wrap;
    min-width: 0;
}

/* `color: var(--khson-primary)` here is what lets the SVG icons inside
 * the field use stroke="currentColor" and still pick up the brand primary
 * — the alternative would be a per-icon class rule, but inheriting via
 * `color` keeps the icons in lock-step with the field border. */
.khson-courses__field {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 300px;
    min-width: 0;
    border: 2px solid var(--khson-primary, #2A426E);
    border-radius: 20px;
    padding: 5px 20px;
    min-height: 40px;
    color: var(--khson-primary, #2A426E);
}

.khson-courses__field-icon { flex-shrink: 0; }

/* Selectors below are intentionally wrapped in `.khson-courses__filter`
 * to bump specificity above the theme's aggressive defaults:
 *   form input[type="text"]           → (0,1,2)
 *   body button[type="submit"]        → (0,1,2)
 *   body .theme-button, input[...]    → also (0,1,2)
 * Our `.khson-courses__filter .khson-courses__field input` is (0,2,1)
 * — class count wins on the second component, so we beat every theme
 * rule without resorting to `!important`. The text-input color reset
 * (#333 → #7a7a7a) and border-radius/border kills are also reasserted
 * here because the theme sets them inline at specificity (0,1,2). */
.khson-courses__filter .khson-courses__field-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
    min-height: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

.khson-courses__filter .khson-courses__field-submit:focus-visible {
    outline: 2px solid var(--khson-primary, #2A426E);
    outline-offset: 2px;
    border-radius: 4px;
}

.khson-courses__field-divider {
    color: #7a7a7a;
    font-size: 18px;
}

.khson-courses__filter .khson-courses__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 18px;
    color: #7a7a7a;
    padding: 0;
    min-height: 0;
    outline: none;
    letter-spacing: 0.5px;
    transition: none;
}

.khson-courses__filter .khson-courses__field input::placeholder { color: #7a7a7a; }

.khson-courses__field--date {
    flex: 0 1 auto;
}

.khson-courses__field--date input {
    flex: 0 1 110px;
    width: 110px;
}

.khson-courses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: 10px;
}

@media (max-width: 700px) {
    .khson-courses__hero { border-radius: 20px 20px 0 0; padding: 16px; }
    .khson-courses__title { font-size: 22px; }
}

@media (max-width: 800px) {
    .khson-courses__field--date { flex: 1 1 100%; }
    .khson-courses__field--date input { flex: 0 1 110px; width: 110px; }
}

.khson-courses__empty {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin: 0;
    color: #7a7a7a;
    font-size: 18px;
    text-align: center;
}

.khson-courses__more {
    align-self: center;
    margin: 10px 0 0;
    padding: 12px 32px;
    background: #fff;
    color: var(--khson-primary, #2A426E);
    border: 2px solid #fff;
    border-radius: 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.khson-courses__more:hover,
.khson-courses__more:focus-visible {
    background: var(--khson-primary, #2A426E);
    color: #fff;
}

.khson-courses__more:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.khson-courses__more[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .khson-courses__more {
        transition: none;
    }
}

.khson-course-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #7a7a7a;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 21px;
    min-width: 0;
    overflow: hidden;
}

.khson-course-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.khson-course-card__category { font-weight: 400; }

.khson-course-card__icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.khson-course-card__type-icon {
    flex-shrink: 0;
    color: var(--khson-primary, #2A426E);
}

.khson-course-card__name {
    font-weight: 400;
    color: #7a7a7a;
    word-wrap: break-word;
}

.khson-course-card__divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--khson-primary, #2A426E);
    margin: 0;
}

.khson-course-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.khson-course-card__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    color: var(--khson-primary, #2A426E);
}

.khson-course-card__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.khson-course-card__price {
    display: flex;
    gap: 10px;
}

.khson-course-card__price > :first-child { flex: 1; }
.khson-course-card__price > :last-child  { flex: 1; }

.khson-course-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.khson-course-card__btn {
    flex: 1 1 0;
    min-width: 0;
    background: var(--khson-primary, #2A426E);
    color: #fff;
    text-align: center;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
    box-sizing: border-box;
}

.khson-course-card__btn:hover,
.khson-course-card__btn:focus {
    color: #fff;
    opacity: .88;
    text-decoration: none;
}

/* ═══ Event Detail view ([khson_event_detail]) ═══ */

/* On the event/Schulung detail + Anmeldung page the outer .khson-courses
 * wrapper otherwise paints a translucent-white rounded box behind the
 * dark-blue detail card. The detail view (unlike the grid views) is a single
 * dark card, so that white backdrop reads as a redundant wrapper box around
 * it. Scope-remove the white background + side padding ONLY when the detail
 * panel is present so the grid views keep their backdrop. */
.khson-courses:has(.khson-courses__panel--detail) {
    background: transparent;
    padding: 0;
}

.khson-courses__page-title {
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: var(--khson-primary, #2A426E);
    font-size: 39px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 0.5px;
}

.khson-courses__panel--detail {
    /* All four corners rounded — the hero block that previously sat above
     * the panel (and supplied the rounded top edge) has been removed, so
     * the panel renders its own top corners now. */
    border-radius: 20px;
    gap: 0;
}

.khson-event-detail__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 10px;
}

.khson-event-detail__title {
    margin: 0;
    flex: 1;
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.1;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.khson-event-detail__title-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.khson-event-detail__title-icons .khson-course-card__type-icon {
    width: 36px;
    height: auto;
}

.khson-event-detail__title-icons .khson-course-card__type-icon path { fill: #fff; }

.khson-event-detail__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    background: #fff;
    color: var(--khson-primary, #2A426E);
    border-radius: 16px;
    padding: 10px 16px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.khson-event-detail__close:hover,
.khson-event-detail__close:focus { color: var(--khson-primary, #2A426E); opacity: .88; text-decoration: none; }

.khson-event-detail__body {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-detail__intro {
    margin: 0;
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-detail__intro strong { color: #7a7a7a; font-weight: 700; }

.khson-event-detail__intro--lead {
    font-size: 18px;
}

.khson-event-detail__intro--lead strong {
    color: var(--khson-primary, #2A426E);
    display: inline-block;
    margin-bottom: 4px;
}

.khson-event-detail__description {
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
    padding: 10px 0;
}

.khson-event-detail__description p { margin: 0 0 10px; }
.khson-event-detail__description p:last-child { margin-bottom: 0; }

.khson-event-detail__sessions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 0;
}

@media (max-width: 1100px) {
    .khson-event-detail__sessions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .khson-event-detail__sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.khson-event-session {
    background: var(--khson-primary, #2A426E);
    color: #fff;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.khson-event-session__label {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-session__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-session__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.khson-event-detail__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
}

.khson-event-detail__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.khson-event-detail__address {
    white-space: pre-line;
    line-height: 21px;
}

.khson-event-detail__capacity {
    margin: 0;
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-detail__capacity strong {
    color: var(--khson-primary, #2A426E);
    font-weight: 700;
}

.khson-event-detail__actions {
    display: flex;
    padding-top: 10px;
}

.khson-event-detail__btn {
    display: inline-block;
    background: var(--khson-primary, #2A426E);
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

.khson-course-card__cta {
    align-self: stretch;
    text-align: center;
}

.khson-event-detail__btn:hover,
.khson-event-detail__btn:focus {
    color: #fff;
    opacity: .88;
    text-decoration: none;
}

.khson-event-detail__btn--disabled {
    background: #b9b9b9;
    color: #fff;
    cursor: not-allowed;
}
.khson-event-detail__btn--disabled:hover,
.khson-event-detail__btn--disabled:focus {
    background: #b9b9b9;
    opacity: 1;
}

.khson-event-detail__notice {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-detail__notice--success {
    background: #e6f4ea;
    color: #1e6334;
    border: 1px solid #86c1a4;
}

.khson-event-detail__notice--error {
    background: #fdecea;
    color: #8b1c1c;
    border: 1px solid #f08282;
}

/* ═══ Event registration form ═══ */

.khson-event-form { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.khson-event-form__group {
    border: none;
    background: var(--khson-primary, #2A426E);
    padding: 10px;
    margin: 0;
    min-width: 0;
}

.khson-event-form__legend {
    float: left;
    width: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
    padding: 10px;
    margin: 0;
}

.khson-event-form__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    clear: both;
}

.khson-event-form__row label {
    flex: 0 0 400px;
    color: #fff;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

/* `!important` defends against OceanWP / Elementor rules like
 * `body input[type="text"]` (specificity 0,1,2) and
 * `.entry-content input[type="text"]` (0,1,1) which beat plain class
 * selectors on plugin CSS and overwrite border, padding, background,
 * and width. The Anschrift row was the most visible casualty —
 * theme defaults made the four inputs each take 100% width and stack
 * vertically instead of laying out inline. */
.khson-event-form__row > input[type="text"],
.khson-event-form__row > input[type="email"],
.khson-event-form__row > input[type="tel"],
.khson-event-form__row > input[type="date"],
.khson-event-form__row > select {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 5px 20px !important;
    border: none !important;
    border-radius: 20px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #7a7a7a !important;
    line-height: 21px !important;
    letter-spacing: 0.5px !important;
    min-height: 31px !important;
    box-shadow: none !important;
}

.khson-event-form__inline {
    flex: 1;
    display: flex;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.khson-event-form__inline input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 5px 20px !important;
    border: none !important;
    border-radius: 20px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #7a7a7a !important;
    line-height: 21px !important;
    letter-spacing: 0.5px !important;
    min-height: 31px !important;
    box-shadow: none !important;
}

.khson-event-form__input--sm {
    max-width: 168px !important;
    flex: 0 1 168px !important;
}

.khson-event-form__select { background-image: none; }

.khson-event-form__consent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.khson-event-form__consent > span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.khson-event-form__consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--khson-primary, #2A426E);
}

.khson-event-form__consent a {
    color: var(--khson-primary, #2A426E);
    font-weight: 700;
    text-decoration: none;
}

.khson-event-form__submit {
    display: flex;
    padding-top: 10px;
}

@media (max-width: 900px) {
    .khson-event-form__row { flex-direction: column; align-items: stretch; }
    .khson-event-form__row label { flex: 1 1 auto; }
    .khson-event-form__input--sm { max-width: none !important; flex: 1 !important; }
}

@media (max-width: 700px) {
    .khson-event-detail__title { font-size: 22px; }
    .khson-courses__page-title { font-size: 28px; line-height: 32px; }
}

/* ═══ Events grid cards (with image) ═══ */

.khson-course-card--event { padding: 20px; }

.khson-course-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
    overflow: hidden;
    border-radius: 16px;
    background: #f6f8f9;
    margin-bottom: 10px;
}

.khson-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.khson-course-card__name--muted {
    min-height: 42px;
    color: #7a7a7a;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
}

/* Bold variant — every Veranstaltungs-Karten-Titel.
 * Primary brand color (not the muted gray) so the weight contrast is visually
 * obvious — without the color shift, gray-on-gray bold reads as the same as
 * gray-on-gray regular in many browsers. !important defends against the
 * OceanWP / theme overrides that set font-weight on `article *` selectors.
 * margin-bottom: 6px gives a small gap to the description below. */
.khson-course-card__name--bold {
    color: var(--khson-primary, #2A426E) !important;
    font-size: 18px;
    font-weight: 700 !important;
    line-height: 21px;
    margin-bottom: 6px;
}

.khson-course-card__description {
    color: #7a7a7a;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
}

.khson-course-card__description p,
.khson-course-card__description h1,
.khson-course-card__description h2,
.khson-course-card__description h3,
.khson-course-card__description h4,
.khson-course-card__description h5,
.khson-course-card__description h6,
.khson-course-card__description ul,
.khson-course-card__description ol {
    margin: 0 0 6px;
}

.khson-course-card__description p:last-child,
.khson-course-card__description ul:last-child,
.khson-course-card__description ol:last-child {
    margin-bottom: 0;
}

/* Meta row: date/time stack on the left (fixed col), Ort lines on the right.
 * `margin-top: auto` anchors this block to the bottom of the card — the
 * parent `.khson-course-card` is a column flex, so any free vertical space
 * collects above this element and the meta sticks to the card footer
 * regardless of how short the title/description above is.
 * `padding-top: 15px` keeps a guaranteed minimum gap to the divider above
 * even when the card is content-height (no free space for auto-margin). */
.khson-course-card__meta {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 15px;
}

.khson-course-card__meta-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.khson-course-card__location {
    flex: 1 1 0;
    min-width: 0;
    color: #7a7a7a;
    font-size: 18px;
    line-height: 21px;
    /* Flush to the top of the meta column (matches the date/time rows), with a
     * leading house icon — display:flex + gap mirrors .khson-course-card__row.
     * align-items: flex-start keeps the icon at the first line of multi-line
     * addresses; align-self is left to inherit the meta column's flex-start. */
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Defensive: many WP themes set high-specificity `article { display: block }`
 * rules that override the native `[hidden]` behavior. Reassert at attribute-
 * selector specificity with !important so JS-toggled and PHP-emitted hidden
 * states actually hide the card. Same trick used by `.khson-courses__more`. */
.khson-course-card[hidden],
[data-card][hidden],
.khson-courses__empty[hidden] {
    display: none !important;
}

/* ═══ Terms-of-participation overlay ═══ */

.khson-event-form__terms-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--khson-primary, #2A426E);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.khson-event-form__terms-link:hover,
.khson-event-form__terms-link:focus {
    opacity: .85;
    outline: none;
}

body.khson-modal-open { overflow: hidden; }

.khson-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.khson-modal[hidden] { display: none; }

.khson-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.khson-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 20px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.khson-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--khson-primary, #2A426E);
    color: #fff;
}

.khson-modal__title {
    margin: 0;
    flex: 1;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.khson-modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    background: #fff;
    color: var(--khson-primary, #2A426E);
    border: 0;
    border-radius: 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.khson-modal__close:hover,
.khson-modal__close:focus { opacity: .88; outline: none; }

.khson-modal__body {
    padding: 20px;
    overflow-y: auto;
    color: #444;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
}

.khson-modal__body p {
    margin: 0 0 16px;
}

.khson-modal__body p:last-child { margin-bottom: 0; }

/* ═══ Innungen grid ([khson_innungen]) ═══
 * Card grid mirroring the public Innung listing on kh-son.de. Each card is
 * white with a soft shadow; logo on the left (or top on narrow viewports),
 * name on the right. The whole card is the click target when detail_url
 * is configured (anchor + text-decoration: none keep it visually a card). */

.khson-innungen {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.khson-innungen *,
.khson-innungen *::before,
.khson-innungen *::after { box-sizing: border-box; }

.khson-innungen__title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 700;
    color: var(--khson-primary, #2A426E);
    letter-spacing: 0.5px;
}

.khson-innungen__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}

.khson-innung-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    color: var(--khson-primary, #2A426E);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.khson-innung-card:hover,
a.khson-innung-card:focus {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    color: var(--khson-primary, #2A426E);
    text-decoration: none;
}

.khson-innung-card__logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khson-innung-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.khson-innung-card__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Innungen tiles (flip-box style per Vorlage) ──
 * Normal: solid dark-navy tile, white icon card centred, name below.
 * Hover : Titelbild fades in as background, name fades out, navy CTA
 *         bar slides up from the bottom with "Mehr erfahren". Icon stays
 *         anchored across states so the transition feels intentional.
 * The Titelbild URL travels via the --khson-tile-bg custom property
 * (set inline on each tile in innungen.php). */

.khson-innungen__grid:has(.khson-innung-tile) {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 24px;
}

.khson-innung-tile {
    position: relative;
    display: grid;
    grid-template-areas: "icon" "caption";
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    row-gap: 18px;
    aspect-ratio: 1.2 / 1;
    padding: 32px 24px;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--khson-primary, #2a426e);
    color: #fff;
    text-decoration: none;
    transition: box-shadow 0.25s ease;
    isolation: isolate;
}

.khson-innung-tile__icon-card { grid-area: icon; }

a.khson-innung-tile:hover,
a.khson-innung-tile:focus {
    /* Box-shadow tint can't take a CSS var directly inside rgba(); fall
     * back to a fixed alpha-on-primary mix via color-mix where supported,
     * else use the brand primary at default alpha. */
    box-shadow: 0 8px 24px color-mix(in srgb, var(--khson-primary, #2a426e) 25%, transparent);
    color: #fff;
    text-decoration: none;
}

/* Titelbild background layer — fades in on hover. Pseudo-element trick
 * avoids needing a second markup element; the CSS var supplies the URL. */
.khson-innung-tile__hover-bg {
    position: absolute;
    inset: 0;
    background-image: var(--khson-tile-bg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.khson-innung-tile--no-image .khson-innung-tile__hover-bg { display: none; }

a.khson-innung-tile:hover .khson-innung-tile__hover-bg,
a.khson-innung-tile:focus .khson-innung-tile__hover-bg {
    opacity: 1;
}

/* White rounded-square icon card — stays put across normal/hover.
 * Sized to match the Vorlage's visual weight: the Vorlage uses a 100×100
 * icon image that already includes the white square in the artwork. We
 * synthesize that with a 110×110 white card so plain (transparent-bg)
 * icons render the same way without admin-side artwork prep. */
.khson-innung-tile__icon-card {
    position: relative;
    z-index: 2;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.khson-innung-tile__icon-card img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Placeholder SVG (no admin-uploaded icon) inherits the brand primary
 * through currentColor — picks up whatever the admin set in settings. */
.khson-innung-tile__icon-fallback {
    color: var(--khson-primary, #2a426e);
}

/* The name and the CTA share the same vertical slot — both sit directly
 * below the icon-card. Name is shown by default; on hover it fades out
 * and the CTA fades in at the same position. Stacking them in the same
 * grid cell keeps the icon-card vertically anchored across states. */
.khson-innung-tile__name,
.khson-innung-tile__cta {
    position: relative;
    z-index: 2;
    grid-area: caption;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: opacity 0.2s ease;
}

.khson-innung-tile__name {
    color: #fff;
}

a.khson-innung-tile:hover .khson-innung-tile__name,
a.khson-innung-tile:focus .khson-innung-tile__name {
    opacity: 0;
}

/* "Mehr erfahren" — full-bleed white strip pinned to the tile's bottom
 * edge on hover. `grid-area: unset` is load-bearing: the shared rule
 * above places both .name and .cta in the "caption" grid cell, and for
 * an absolutely positioned grid item that grid area becomes the
 * *containing block* — which is the small mid-tile cell where the name
 * lives, not the tile itself. Resetting grid-area pushes the
 * containing block back to the tile's padding box so left/right/bottom
 * measure from the actual tile edges. */
.khson-innung-tile__cta {
    position: absolute;
    grid-area: unset;
    left: 0;
    right: 0;
    bottom: 36px;
    z-index: 3;
    padding: 16px 24px;
    background: #fff;
    color: var(--khson-primary, #2a426e);
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

a.khson-innung-tile:hover .khson-innung-tile__cta,
a.khson-innung-tile:focus .khson-innung-tile__cta {
    opacity: 1;
}

/* ═══ Innung detail page ([khson_innung_detail]) ═══ */

.khson-innung-detail {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--khson-primary, #2A426E);
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.khson-innung-detail *,
.khson-innung-detail *::before,
.khson-innung-detail *::after { box-sizing: border-box; }

.khson-innung-detail__hero {
    aspect-ratio: 16 / 5;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.khson-innung-detail__header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 28px;
}

.khson-innung-detail__header-text { flex: 1 1 0; min-width: 0; }

.khson-innung-detail__title {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    color: var(--khson-primary, #2A426E);
    line-height: 1.2;
}

.khson-innung-detail__inhalt {
    font-size: 16px;
    line-height: 1.55;
    color: var(--khson-primary, #2A426E);
}

.khson-innung-detail__inhalt p { margin: 0 0 12px; }
.khson-innung-detail__inhalt p:last-child { margin-bottom: 0; }
.khson-innung-detail__inhalt a { color: var(--khson-primary, #2A426E); }

.khson-innung-detail__logo {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #eaf0f2;
    border-radius: 12px;
    overflow: hidden;
}

.khson-innung-detail__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }

.khson-innung-detail__section-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--khson-primary, #2A426E);
    letter-spacing: 0.3px;
}

/* Vorstand list (detail page) */

.khson-innung-detail__vorstand { margin-bottom: 36px; }

.khson-innung-detail .khson-vorstand-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}

.khson-vorstand-list__item {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eaf0f2;
    border-radius: 12px;
}

.khson-vorstand-list__photo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
}

.khson-vorstand-list__photo img { width: 100%; height: 100%; object-fit: cover; }

.khson-vorstand-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.khson-vorstand-list__name { font-weight: 700; font-size: 16px; }
.khson-vorstand-list__position { color: var(--khson-primary, #2A426E); font-size: 14px; font-weight: 600; }
.khson-vorstand-list__address,
.khson-vorstand-list__contact { font-size: 13px; color: #5a6b72; line-height: 1.4; }
.khson-vorstand-list__contact a { color: var(--khson-primary, #2A426E); margin-right: 12px; }

/* Betriebe list (detail page) */

.khson-innung-detail__betriebe { margin-top: 8px; }

.khson-betriebe-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}

.khson-betrieb-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #eaf0f2;
    border-radius: 12px;
}

.khson-betrieb-card__logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

.khson-betrieb-card__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }

.khson-betrieb-card__body { flex: 1 1 0; min-width: 0; }

.khson-betrieb-card__firma {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--khson-primary, #2A426E);
    line-height: 1.3;
}

.khson-betrieb-card__address,
.khson-betrieb-card__contact {
    margin: 0 0 4px;
    font-size: 13px;
    color: #5a6b72;
    line-height: 1.5;
}

/* Vertical stack: phone → mail → website, each link on its own line. */
.khson-betrieb-card__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Icon + text on one row, icon inherits link color via stroke="currentColor". */
.khson-betrieb-card__contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--khson-primary, #2A426E);
    word-break: break-word;
}

.khson-betrieb-card__contact-link svg { flex-shrink: 0; }

/* Stack header on narrow viewports */
@media (max-width: 640px) {
    .khson-innung-detail__header { flex-direction: column-reverse; }
    .khson-innung-detail__logo { align-self: flex-start; }
    .khson-innung-detail__title { font-size: 26px; }
}