.elementor-30 .elementor-element.elementor-element-bad485b{border-radius:20px 20px 20px 20px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-39efdd4f *//* =========================================
   ERSTE HILFE NRW · BUTLERAPP
   ========================================= */

:root {
    --kurs-frei-text: #166534;
    --kurs-frei-hintergrund: #EDF7EF;
    --kurs-warten-text: #805B00;
    --kurs-warten-hintergrund: #FFF3C4;
    --kurs-voll-text: #B41A23;
    --kurs-voll-hintergrund: #FCEBEC;

    --kurs-schrift-klein: 14px;
    --kurs-schrift-button: 1rem;
    --kurs-schrift-mobile: 16px;
    --kurs-gewicht-normal: 400;
    --kurs-zeilenhoehe: 1.5;

    --kurs-icon-groesse: 20px;
    --kurs-icon-einzug: 30px;
    --kurs-filter-breite: 240px;

    --kurs-spalte-klein: 90px;
    --kurs-spalte-datum: 130px;
    --kurs-spalte-zeit: 160px;
    --kurs-spalte-status: 160px;
    --kurs-spalte-button: 170px;

    --kurs-status-abstand: 5px 12px;
    --kurs-kartenabstand-mobile: 16px;

    --kurs-icon-datum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B41A23' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");

    --kurs-icon-uhr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B41A23' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}


/* =========================================
   GRUNDGESTALTUNG
   ========================================= */

.kursliste {
    width: var(--voll);
    min-width: var(--null);
    font-family: var(--schrift-text);
    color: var(--farbe-dunkel);
    background: var(--farbe-weiss);

    --ws-primary-color: var(--farbe-rot);
    --ws-primary-color-contrast: var(--farbe-weiss);
    --ws-secondary-color: var(--farbe-rot);
    --ws-secondary-color-contrast: var(--farbe-weiss);

    --ws-link-color: var(--farbe-rot);
    --ws-link-hover-color: var(--farbe-dunkel);
    --ws-link-hover-decoration: none;

    --ws-background-color: var(--farbe-weiss);
    --ws-background-color-contrast: var(--farbe-dunkel);

    --ws-input-bg: var(--farbe-weiss);
    --ws-input-color: var(--farbe-dunkel);
    --ws-input-border-color: var(--farbe-beige);
    --ws-input-border-radius: var(--rundung-klein);
    --ws-input-min-height: var(--knopf-hoehe);

    --ws-button-bg: var(--farbe-rot);
    --ws-button-text: var(--farbe-weiss);
    --ws-button-default-bg: var(--farbe-rot);
    --ws-button-default-text: var(--farbe-weiss);

    --ws-gutter: var(--abstand-4);
    --ws-table-padding: var(--null);
    --ws-table-ends-padding: var(--null);
}


/* Weiße Listenflächen statt grauer Zwischenräume */

.kursliste .websail,
.kursliste .ws-container,
.kursliste .ws-table-courses,
.kursliste .ws-table-courses > div,
.kursliste .ws-table,
.kursliste .ws-table tbody,
.kursliste .kurskoerper,
.kursliste .ws-course-accordion {
    min-width: var(--null) !important;
    max-width: var(--voll) !important;
    background: var(--farbe-weiss) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-family: var(--schrift-text) !important;
    color: var(--farbe-dunkel) !important;
}

.kursliste .ws-container {
    padding: var(--null) !important;
}


/* =========================================
   FILTER ZENTRIEREN
   ========================================= */

.kursliste .ws-course-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--abstand-4) !important;
    width: var(--voll) !important;
    margin: var(--null) var(--null) var(--abstand-6) !important;
    padding: var(--null) !important;
    background: var(--farbe-weiss) !important;
}

.kursliste .ws-course-filters > .ws-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--abstand-4) !important;
    width: auto !important;
    max-width: var(--voll) !important;
}

.kursliste .ws-course-filters .ws-input-group {
    width: var(--kurs-filter-breite) !important;
    min-width: var(--null) !important;
    max-width: var(--voll) !important;
    margin: var(--null) !important;
}

.kursliste .ws-course-filters .ws-input-label:empty {
    display: none !important;
}

.kursliste .ws-course-filters .ws-select {
    box-sizing: border-box !important;
    width: var(--voll) !important;
    min-height: var(--knopf-hoehe) !important;
    margin: var(--null) !important;
    padding: var(--abstand-3) var(--abstand-6) !important;
    border: var(--strich) solid var(--farbe-beige) !important;
    border-radius: var(--rundung-klein) !important;
    background-color: var(--farbe-weiss) !important;
    color: var(--farbe-dunkel) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--groesse-text) !important;
    font-weight: var(--gewicht-stark) !important;
    cursor: pointer;
}


/* =========================================
   DESKTOP-KURSKARTEN
   ========================================= */

.kursliste .ws-table-courses,
.kursliste .ws-table,
.kursliste .ws-table tbody {
    display: flex !important;
    flex-direction: column !important;
    width: var(--voll) !important;
    margin: var(--null) !important;
    padding: var(--null) !important;
    border: none !important;
}

.kursliste .ws-table tbody {
    gap: var(--abstand-4) !important;
}

.kursliste .ws-table colgroup,
.kursliste .ws-table thead {
    display: none !important;
}

.kursliste .ws-data-row {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--abstand-3) !important;
    width: var(--voll) !important;
    margin: var(--null) !important;
    padding: var(--abstand-4) !important;
    border: var(--strich) solid var(--farbe-beige) !important;
    border-radius: var(--rundung-mittel) !important;
    background: var(--farbe-weiss) !important;
    box-shadow: none !important;
    transition: border-color var(--dauer) ease;
}

.kursliste .ws-data-row:hover {
    border-color: var(--farbe-rot) !important;
}

.kursliste .ws-table .ws-cell {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex: var(--eins) var(--eins) var(--kurs-spalte-klein) !important;
    width: auto !important;
    min-width: var(--null) !important;
    margin: var(--null) !important;
    padding: var(--abstand-2) !important;
    border: none !important;
    background: var(--farbe-transparent) !important;
    color: var(--farbe-dunkel) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--groesse-text) !important;
    font-weight: var(--kurs-gewicht-normal) !important;
    line-height: var(--kurs-zeilenhoehe) !important;
    overflow-wrap: anywhere;
}

/* Wochentag fett */

.kursliste .ws-table .ws-info-cell,
.kursliste .ws-table .ws-info-cell .ws-cell-span {
    font-weight: var(--gewicht-stark) !important;
}

/* Datum normal */

.kursliste .ws-table .ws-from-cell {
    flex-basis: var(--kurs-spalte-datum) !important;
}

.kursliste .ws-table .ws-from-cell,
.kursliste .ws-table .ws-from-cell .ws-cell-span {
    font-weight: var(--kurs-gewicht-normal) !important;
}

.kursliste .ws-table .ws-appointments-cell {
    flex-basis: var(--kurs-spalte-zeit) !important;
}

.kursliste .ws-table .ws-remaining-cell {
    flex-basis: var(--kurs-spalte-status) !important;
}

.kursliste .ws-table .ws-price-cell {
    font-weight: var(--gewicht-titel) !important;
    white-space: nowrap !important;
}

/* Genug Platz für einen einzeiligen Button */

.kursliste .ws-table .ws-booklink-cell {
    flex: var(--null) var(--null) var(--kurs-spalte-button) !important;
    justify-content: flex-end !important;
    overflow-wrap: normal !important;
}


/* =========================================
   UHRZEIT-LISTEN OHNE AUFZÄHLUNGSPUNKTE
   ========================================= */

.kursliste .ws-appointment-list,
.kursliste .ws-appointments-cell ul,
.kursliste .ws-appointment-list-cell ul,
.kursliste .ws-appointmentlist-cell ul {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--abstand-2) !important;
    margin: var(--null) !important;
    padding: var(--null) !important;
    list-style: none !important;
}

.kursliste .ws-appointment-list li,
.kursliste .ws-appointments-cell li,
.kursliste .ws-appointment-list-cell li,
.kursliste .ws-appointmentlist-cell li {
    margin: var(--null) !important;
    padding: var(--null) !important;
    list-style: none !important;
}


/* =========================================
   DATUM- UND UHRZEIT-ICONS
   ========================================= */

.kursliste .ws-table .ws-from-cell > .ws-cell-span,
.kursliste .fromDate {
    display: inline-block;
    padding-left: var(--kurs-icon-einzug) !important;
    background-image: var(--kurs-icon-datum) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: var(--kurs-icon-groesse) var(--kurs-icon-groesse) !important;
}

.kursliste .ws-appointment-list li,
.kursliste .fromTime {
    display: inline-block;
    padding-left: var(--kurs-icon-einzug) !important;
    background-image: var(--kurs-icon-uhr) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: var(--kurs-icon-groesse) var(--kurs-icon-groesse) !important;
}


/* =========================================
   VERFÜGBARKEIT
   ========================================= */

.kursliste .ws-remaining-cell .ws-cell-span,
.kursliste .placesLeft {
    display: inline-block !important;
    width: auto !important;
    max-width: var(--voll) !important;
    padding: var(--kurs-status-abstand) !important;
    border: none !important;
    border-radius: var(--rundung-pill) !important;
    background: var(--kurs-frei-hintergrund) !important;
    color: var(--kurs-frei-text) !important;
    font-size: var(--kurs-schrift-klein) !important;
    font-weight: var(--gewicht-stark) !important;
    line-height: var(--kurs-zeilenhoehe) !important;
}

@media (max-width: 767px) {

.kursliste .ws-remaining-cell .ws-cell-span,
.kursliste .placesLeft {
    background:var(--kurs-knapp-hintergrund) !important;
    color:var(--kurs-knapp-text) !important;
}
}

.kursliste .ws-less-places,
.kursliste .ws-more-places {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.kursliste .ws-data-row:not(.ws-data-row-waitlist):not(.ws-data-row-booked-out)
.ws-remaining-cell .ws-cell-span:empty::after {
    content: "mehr als 5 Plätze";
}

/* Warteliste: gelb */

.kursliste .ws-data-row-waitlist .ws-remaining-cell .ws-cell-span,
.kursliste .ws-data-row-waitlist .placesLeft {
    background: var(--kurs-warten-hintergrund) !important;
    color: var(--kurs-warten-text) !important;
}

.kursliste .ws-data-row-waitlist .ws-remaining-cell .ws-cell-span:empty::after {
    content: "Warteliste";
}

/* Ausgebucht: rot */

.kursliste .ws-data-row-booked-out .ws-remaining-cell .ws-cell-span,
.kursliste .ws-data-row-booked-out .placesLeft {
    background: var(--kurs-voll-hintergrund) !important;
    color: var(--kurs-voll-text) !important;
}

.kursliste .ws-data-row-booked-out .ws-remaining-cell .ws-cell-span:empty::after {
    content: "Ausgebucht";
}


/* =========================================
   BUCHUNGSBUTTONS
   ========================================= */

.kursliste .ws-book-now-link,
.kursliste .ws-waiting-list-link {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: var(--null) !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: var(--knopf-hoehe) !important;
    margin: var(--null) !important;
    padding: var(--abstand-3) var(--abstand-4) !important;
    border: var(--strich) solid var(--farbe-rot) !important;
    border-radius: var(--rundung-pill) !important;
    background: var(--farbe-rot) !important;
    color: var(--farbe-weiss) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--kurs-schrift-button) !important;
    font-weight: var(--gewicht-stark) !important;
    line-height: var(--zeile-kurz) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    cursor: pointer;
    transition:
        background-color var(--dauer) ease,
        border-color var(--dauer) ease;
}

.kursliste .ws-book-now-link:hover {
    background: var(--farbe-dunkel) !important;
    border-color: var(--farbe-dunkel) !important;
    color: var(--farbe-weiss) !important;
}

.kursliste .ws-waiting-list-link {
    background: var(--kurs-warten-hintergrund) !important;
    border-color: var(--kurs-warten-text) !important;
    color: var(--kurs-warten-text) !important;
}

.kursliste .ws-waiting-list-link:hover {
    background: var(--kurs-warten-text) !important;
    color: var(--farbe-weiss) !important;
}

.kursliste .ws-description-cell .ws-cell-link {
    color: var(--farbe-rot) !important;
    font-weight: var(--gewicht-stark) !important;
    text-decoration: none !important;
}

.kursliste .ws-book-now-link:focus-visible,
.kursliste .ws-waiting-list-link:focus-visible,
.kursliste .ws-course-filters .ws-select:focus-visible {
    outline: var(--fokus-strich) solid var(--farbe-rot) !important;
    outline-offset: var(--fokus-abstand) !important;
}


/* =========================================
   MOBILE AKKORDEON-KARTEN
   ========================================= */

.kursliste .ws-course-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--abstand-4) !important;
}

.kursliste .ws-accordion-pane {
    box-sizing: border-box !important;
    width: var(--voll) !important;
    min-width: var(--null) !important;
    margin: var(--null) !important;
    padding: var(--abstand-4) !important;
    border: var(--strich) solid var(--farbe-beige) !important;
    border-radius: var(--rundung-mittel) !important;
    background: var(--farbe-weiss) !important;
    box-shadow: none !important;
}

.kursliste .ws-accordion-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--abstand-3) !important;
    margin: var(--null) !important;
    padding: var(--null) !important;
    border: none !important;
    background: var(--farbe-transparent) !important;
    color: var(--farbe-dunkel) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--groesse-text) !important;
    font-weight: var(--kurs-gewicht-normal) !important;
    line-height: var(--kurs-zeilenhoehe) !important;
}

.kursliste .ws-accordion-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--abstand-3) !important;
    flex: var(--eins) !important;
    min-width: var(--null) !important;
}

.kursliste .ws-accordion-title p {
    width: var(--voll);
    margin: var(--null) !important;
    padding: var(--null) !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.kursliste .ws-accordion-title p:empty {
    display: none !important;
}

/* Kursname oben fett */

.kursliste .ws-accordion-title .course1,
.kursliste .ws-accordion-title .course2,
.kursliste .ws-accordion-title .ws-course-last {
    color: var(--farbe-dunkel) !important;
    font-weight: var(--gewicht-titel) !important;
}

.kursliste .ws-accordion-title .title {
    display: block;
    color: var(--farbe-dunkel) !important;
    font-weight: var(--gewicht-stark) !important;
}

.kursliste .fromDate {
    display: block;
    width: fit-content;
    margin: var(--abstand-2) var(--null);
    font-weight: var(--kurs-gewicht-normal) !important;
}

.kursliste .fromTime,
.kursliste .toTime {
    font-weight: var(--kurs-gewicht-normal) !important;
    white-space: nowrap;
}

.kursliste .ws-timespan-title-price {
    display: inline-block;
    color: var(--farbe-dunkel) !important;
    font-weight: var(--gewicht-titel) !important;
}

.kursliste .ws-accordion-icons {
    flex-shrink: var(--null);
    color: var(--farbe-rot) !important;
}

.kursliste .ws-accordion-body {
    margin: var(--null) !important;
    padding: var(--abstand-4) var(--null) var(--null) !important;
    border: none !important;
    background: var(--farbe-transparent) !important;
    color: var(--farbe-dunkel) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--groesse-text) !important;
    line-height: var(--kurs-zeilenhoehe) !important;
}

/* Doppelte Angaben nur im aufgeklappten Inhalt ausblenden */

.kursliste .ws-accordion-body .ws-info-cell,
.kursliste .ws-accordion-body .ws-from-cell,
.kursliste .ws-accordion-body .ws-appointments-cell {
    display: none !important;
}

.kursliste .ws-course-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--abstand-3) !important;
    min-width: var(--null) !important;
    margin: var(--null) var(--null) var(--abstand-3) !important;
}

.kursliste .ws-course-info:last-child {
    margin-bottom: var(--null) !important;
}

/* Keine Leerfläche, wenn nur die drei doppelten Angaben enthalten sind */

.kursliste .ws-accordion-body .ws-course-info:not(:has(
    > :not(.ws-info-cell):not(.ws-from-cell):not(.ws-appointments-cell)
)) {
    display: none !important;
}


/* =========================================
   SEITENWECHSEL
   ========================================= */

.kursliste .ws-pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--abstand-2) !important;
    margin-top: var(--abstand-6) !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {
    .kursliste .ws-table .ws-booklink-cell {
        flex-grow: var(--eins) !important;
    }
}


/* =========================================
   HANDY
   ========================================= */

@media (max-width: 767px) {
    .kursliste .ws-accordion-pane,
    .kursliste .ws-data-row {
        padding: var(--kurs-kartenabstand-mobile) !important;
    }

    .kursliste .ws-accordion-header,
    .kursliste .ws-accordion-body,
    .kursliste .ws-table .ws-cell {
        font-size: var(--kurs-schrift-mobile) !important;
    }

    .kursliste .ws-accordion-body .ws-course-info {
        width: var(--voll) !important;
    }

    .kursliste .ws-accordion-title .ws-book-now-link,
    .kursliste .ws-accordion-title .ws-waiting-list-link,
    .kursliste .ws-accordion-body .ws-book-now-link,
    .kursliste .ws-accordion-body .ws-waiting-list-link {
        width: var(--voll) !important;
    }

    .kursliste .ws-table .ws-booklink-cell {
        flex-basis: var(--voll) !important;
        justify-content: stretch !important;
    }

    .kursliste .ws-table .ws-booklink-cell .ws-cell-link {
        width: var(--voll) !important;
    }
}
.sc-afnQL.dArMDH {
    display: none;
}

/* Preis und Buchung bleiben außerhalb der Kursdetails sichtbar */

.kursliste .kurs-buchungszeile {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--abstand-3) !important;
    width: var(--voll) !important;
    min-width: var(--null) !important;
    margin: var(--abstand-4) var(--null) var(--null) !important;
}

.kursliste .kurs-direktpreis {
    color: var(--farbe-dunkel) !important;
    font-family: var(--schrift-text) !important;
    font-size: var(--groesse-text) !important;
    font-weight: var(--gewicht-titel) !important;
    line-height: var(--zeile-kurz) !important;
}

/* Ursprünglichen Preis und Button nur dann ausblenden,
   wenn ihre sichtbaren Kopien tatsächlich vorhanden sind */

.kursliste .ws-accordion-pane:has(.kurs-direktpreis)
.ws-accordion-body .ws-price-cell {
    display: none !important;
}

.kursliste .ws-accordion-pane:has(.kurs-direktbuchung)
.ws-accordion-body .ws-book-now-link,
.kursliste .ws-accordion-pane:has(.kurs-direktbuchung)
.ws-accordion-body .ws-waiting-list-link,
.kursliste .ws-accordion-pane:has(.kurs-direktbuchung)
.ws-accordion-body a.ws-cell-link[href*="bookcart"] {
    display: none !important;
}

@media (max-width: 767px) {
    .kursliste .kurs-buchungszeile .kurs-direktbuchung {
        width: var(--voll) !important;
    }
}

/* Weniger als 5 freie Plätze: orange */

:root {
    --kurs-knapp-text: #9A3412;
    --kurs-knapp-hintergrund: #FFF0E5;
}

/* Desktop: gesamte Statusfläche orange färben */

.kursliste
.ws-data-row:not(.ws-data-row-waitlist):not(.ws-data-row-booked-out)
.ws-remaining-cell .ws-cell-span:has(.ws-less-places) {
    background: var(--kurs-knapp-hintergrund) !important;
    color: var(--kurs-knapp-text) !important;
}

/* Mobil: falls Butlerapp denselben Statusmarker ausgibt */

.kursliste
.ws-accordion-pane:not(.ws-data-row-waitlist):not(.ws-data-row-booked-out)
.placesLeft:has(.ws-less-places) {
    background: var(--kurs-knapp-hintergrund) !important;
    color: var(--kurs-knapp-text) !important;
}/* End custom CSS */