.vhs-category-buttons {
    display: flex;
    justify-content: stretch;
    align-items: center;
    position: relative;
    gap: 0px;
    flex-wrap: nowrap;
}

.vhs-category-btn {
    white-space: nowrap;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    transition: transform 0.2s ease-in-out;
    position: relative;
    border-radius: unset;
}

.vhs-category-cursor {
    position: absolute;
    width: 80px;
    height: 5px;
    background-color: black;
    border-radius: 5px;
    bottom: -10px;
    left: 0;
    transition: all 0.3s ease;
}

.course-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/*
border: 4px solid darkgrey;
outline: 2px solid gainsboro;
*/

#searchPanel {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    /*    max-width: 800px;*/
    margin: 24px auto;
    font-family: Arial, sans-serif;
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    margin: 0 auto;
}

#searchPanel .form-group:nth-child(1) {
    grid-column: 1 / span 3;
}
#searchPanel .form-group:nth-child(2) {
    grid-column: 1;
}
#searchPanel .form-group:nth-child(3) {
    grid-column: 2;
}
#searchPanel .form-group:nth-child(4) {
    grid-column: 3;
}
#searchPanel .form-group:nth-child(5) {
    grid-column: 1 / span 3;
}

#searchPanel .form-group {
    margin-bottom: 15px;
}

#searchPanel label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

#searchPanel input[type="text"],
#searchPanel input[type="date"],
#searchPanel select {
    /*    width: 100%;*/
    /*    padding: 10px;*/
    border: 1px solid #ccc;
    border-radius: 0px;
    box-sizing: border-box;
    font-size: 14px;
}
select {
    position: relative;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
        no-repeat right 10px center;
    background-size: 16px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 0px;
    box-sizing: border-box;

}

#searchPanel input[type="text"]:focus,
#searchPanel input[type="date"]:focus,
#searchPanel select:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

.vhs-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vhs-category-btn {
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.vhs-category-btn:hover {
    transform: scale(1.05);
}

.vhs-category-cursor {
    position: absolute;
    height: 3px;
    background-color: #000;
    transition: all 0.3s ease;
}

hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 20px 0;
}

/* ## FORM ## */

form#vhs-courses-form, .vhs-courses-message {
    display: block;
    padding: 20px;
    /* max-width: 800px; */
    margin: 20px auto;
}

form#vhs-courses-form p {
    margin-bottom: 15px;
    color: var(--e-global-color-primary);
}

form#vhs-courses-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #555;
}

form#vhs-courses-form input[type="number"], form#vhs-courses-form input[type="text"], form#vhs-courses-form input[type="email"], form#vhs-courses-form input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 0;
}

form#vhs-courses-form input[type="checkbox"] {
    margin-right: 10px;
}

form#vhs-courses-form input[type="submit"] {
    background-color: var(--e-global-color-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    margin-top: 8px;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

form#vhs-courses-form input[type="submit"]:hover {
    background-color: #0056b3;
}

form#vhs-courses-form strong {
    color: #007bff;
}

/* START KURSFINDER */
.kursfinder.vhs-course.fancy {
    background: rgb(22, 22, 63);
    color: #FFF;
    padding: 16px;
    display: block;
    position: relative;
    margin: 16px 0;
    height: 124px;

}

.kursfinder.vhs-course.fancy strong {
    position: absolute;
    left: 80px;
    top: 16px;
}

.kursfinder.vhs-course.fancy .knr {
    position: absolute;
    left: 16px;
    top: 16px;
}
.kursfinder.vhs-course.fancy .link {
    position: absolute;
    right: 16px;
    top: 16px;
    background-color: white;
    padding: 8px 16px;
}
.kursfinder.vhs-course.fancy .duration {
    position: absolute;
    left: 80px;
    top: 40px;
    font-style: italic;
}
.kursfinder.vhs-course.fancy .duration:after {
    content: 'Termin(e)';
}
.kursfinder.vhs-course.fancy .start_date {
    position: absolute;
    left: 80px;
    top: 64px;
}
.kursfinder.vhs-course.fancy .start_date:before {
    content: 'vom';
}
.kursfinder.vhs-course.fancy .end_date {
    position: absolute;
    left: 210px;
    top: 64px;
}
.kursfinder.vhs-course.fancy .end_date:before {
    content: 'bis';
}
.kursfinder.vhs-course.fancy .start_time {
    position: absolute;
    left: 115px;
    top: 88px;
}
.kursfinder.vhs-course.fancy .start_time:after {
    content: 'Uhr'
}

.kursfinder.vhs-course.fancy .end_time {
    position: absolute;
    left: 236px;
    top: 88px;
}

.kursfinder.vhs-course.fancy .end_time:after {
    content: 'Uhr'
}

.kursfinder.vhs-course.fancy .location {
    position: absolute;
    right: 16px;
    top: 64px;
    font-weight: bold;
}
.kursfinder.vhs-course.fancy .subject_code {
    position: absolute;
    right: 16px;
    top: 88px;
    font-style: italic;
}
.kursfinder.vhs-course.fancy .subject_code:before {
    content: '[';
    margin: 0;
    font-style: italic;
}

.kursfinder.vhs-course.fancy .subject_code:after {
    content: ']';
    margin: 0;
    font-style: italic;
}
.kursfinder.vhs-course.fancy .subject_text {
    position: absolute;
    right: 80px;
    top: 88px;
    font-style: italic;
}

/* ENDE KURSFINDER */

.kursfinder.vhs-course.fancy .lecturers {
    position: absolute;
    right: 185px;
    top: 40px;
}

.kursfinder.vhs-course.fancy .fee_standard {
    position: absolute;
    right: 185px;
    top: 16px;
}

.kursfinder.vhs-course.fancy .fee_standard:after {
    content: '€';
}

/* DETAILS START */
.vhs-course.fancy-single {
    padding: 16px;
    display: block;
    position: relative;
    /*    height: 96px;*/
    height: 500px;
    margin-bottom: 16px;
    background: lightgray;
    max-width: 440px;
}
.vhs-course.fancy-single .duration {
    position: absolute;
    left: 16px;
    top: 16px;
    font-style: italic;
    font-weight: bold;
}
.vhs-course.fancy-single .appointments {
    position: absolute;
    left: 16px;
    top: 108px;
}
.vhs-course.fancy-single .lecturers {
    position: absolute;
    right: 16px;
    top: 40px;
    font-weight: bold;
}
.vhs-course.fancy-single .lecturers:before{
    content: 'Kursleitung:';
    font-weight: normal;
}
.vhs-course.fancy-single .fee_standard {
    position: absolute;
    right: 16px;
    bottom: 40px;
}
.vhs-course.fancy-single .fee_standard:before {
    content: 'normal Preis'
}
.vhs-course.fancy-single .fee_standard:after, .vhs-course.fancy-single .fee_reduced:after {
    content: '€'
}
.vhs-course.fancy-single .fee_reduced:before {
    content: 'ermäßigter Preis'
}
.vhs-course.fancy-single .fee_reduced {
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.vhs-course.fancy-single .duration:after {
    content: 'Termin(e)';
}
.vhs-course.fancy-single .start_date {
    position: absolute;
    left: 16px;
    top: 40px;
}
.vhs-course.fancy-single .start_date:before {
    content: 'vom';
}
.vhs-course.fancy-single .end_date {
    position: absolute;
    left: 146px;
    top: 40px;
}
.vhs-course.fancy-single .end_date:before {
    content: 'bis';
}
.vhs-course.fancy-single .start_time {
    position: absolute;
    left: 51px;
    top: 64px;
}
.vhs-course.fancy-single .start_time:after {
    content: 'Uhr'
}

.vhs-course.fancy-single .end_time {
    position: absolute;
    left: 172px;
    top: 64px;
}

.vhs-course.fancy-single .end_time:after {
    content: 'Uhr';
}
.vhs-course.fancy-single .location:before {
    content: 'Kursort: ';
    font-weight: normal;
}
.vhs-course.fancy-single .location {
    position: absolute;
    left: 16px;
    top: 16px;
    font-weight: bold;
}
.vhs-course.fancy-single .subject_code {
    position: absolute;
    top: 64px;
    font-style: italic;
}
.vhs-course.fancy-single .subject_code:before {
    content: '[';
    margin: 0;
    font-style: italic;
}

.vhs-course.fancy-single .subject_code:after {
    content: ']';
    margin: 0;
    font-style: italic;
}
.vhs-course.fancy-single .subject_text {
    position: absolute;
    left: 80px;
    top: 64px;
    font-style: italic;
}

/* < OLD | NEW >*/

.vhs-course.fancy-single {
        height: 600px;
    }
    .vhs-course.fancy-single .lecturers{
        top: 128px!important;
    }
    .vhs-course.fancy-single .location{
        top: 152px;
    }
    .vhs-course.fancy-single .subject_code, .vhs-course.fancy-single .subject_text {
        top: 176px;
    }

    .vhs-course.fancy-single .appointments {
        top: 224px;
    }

    .vhs-course.fancy-single .lecturers {
        top: 40px;
        left: 16px;
    }



/*.fancy-single {*/
/*    display: grid;*/
/*    grid-template-columns: 1fr 2fr;*/
/*    gap: 10px; !* Space between items *!*/
/*    padding: 20px;*/
/*    border: 1px solid #ccc;*/
/*    background-color: #ccc;*/

/*    margin: auto; !* Center align *!*/
/*}*/

/*.fancy-single > div {*/
/*    padding: 5px;*/
/*    font-family: Arial, sans-serif;*/
/*    font-size: 14px;*/
/*    color: #333;*/
/*}*/

/*.fancy-single > div.subject_code,*/
/*.fancy-single > div.subject_text,*/
/*.fancy-single > div.start_date,*/
/*.fancy-single > div.end_date,*/
/*.fancy-single > div.start_time,*/
/*.fancy-single > div.end_time,*/
/*.fancy-single > div.duration,*/
/*.fancy-single > div.location,*/
/*.fancy-single > div.lecturers {*/
/*    font-weight: bold;*/
/*}*/

/*.fancy-single > div.appointments {*/
/*    grid-column: span 2; !* Make this element span across both columns *!*/
/*    font-size: 12px;*/
/*    color: #666;*/
/*}*/

/* DETAILS END */


@media screen and (max-width: 1000px) {
    main#content {
        max-width: unset!important;
    }
    /*    .vhs-category-buttons {*/
    /*        flex-wrap: wrap;*/
    /*        justify-content: center;*/
    /*    }*/

    /*    .vhs-category-btn {*/
    /*        font-size: 12px;*/
    /*        padding: 5px 8px;*/
    /*    }*/

    /*    #searchPanel {*/
    /*        grid-template-columns: 1fr;*/
    /*        gap: 15px;*/
    /*        padding: 15px;*/
    /*    }*/

    /*    #searchPanel .form-group:nth-child(1),*/
    /*    #searchPanel .form-group:nth-child(2),*/
    /*    #searchPanel .form-group:nth-child(3),*/
    /*    #searchPanel .form-group:nth-child(4),*/
    /*    #searchPanel .form-group:nth-child(5) {*/
    /*        grid-column: 1 / span 1;*/
    /*    }*/

    /*    form#vhs-courses-form, .vhs-courses-message {*/
    /*        padding: 15px;*/
    /*    }*/

    /*    form#vhs-courses-form input[type="text"],*/
    /*    form#vhs-courses-form input[type="number"],*/
    /*    form#vhs-courses-form input[type="email"],*/
    /*    form#vhs-courses-form input[type="tel"] {*/
    /*        padding: 8px;*/
    /*    }*/

    /*    form#vhs-courses-form input[type="submit"] {*/
    /*        padding: 8px 12px;*/
    /*    }*/

    .kursfinder.vhs-course.fancy {
        Height: 280px!important;
    }

    .kursfinder.vhs-course.fancy strong{
        left: 16px!important;
        top: 40px!important;
    }

    .kursfinder.vhs-course.fancy .duration{
        right: 16px!important;
        top: 16px!important;
    }

    .kursfinder.vhs-course.fancy .link{
        top: unset!important;
        bottom: 16px!important;
    }
    .kursfinder.vhs-course.fancy .location{
        left: 16px!important;
        top: 150px!important;
    }

    .kursfinder.vhs-course.fancy .start_date{
        left: 80px!important;
        top: 90px!important;
    }
    .kursfinder.vhs-course.fancy .start_time{
        left: 115px!important;
        top: 114px!important;
    }
    .kursfinder.vhs-course.fancy .end_date{
        left: 210px!important;
        top: 88px!important;
    }
    .kursfinder.vhs-course.fancy .end_time{
        top: 114px!important;
    }
    .kursfinder.vhs-course.fancy .subject_code{
        left: 16px!important;
        top: 180px!important;
    }

    .kursfinder.vhs-course.fancy .subject_text{
        left: 76px!important;
        top: 180px!important;
    }
    .kursfinder.vhs-course.fancy .lecturers {
        position: absolute;
        right: 108px;
        top: 16px;
    }

    .kursfinder.vhs-course.fancy .fee_standard {
        position: absolute;
        right: 16px;
        top: 16px;
    }




}