:root {
    --gap-size: 1em;
    --seminardetails-topmargin: 3em;
}

.categories {
    display: grid;
    grid-template-columns:
            [filter-start] 3fr
            [filter-end categories-start] 9fr
            [categories-end];
    gap: 0.5em;
}

.categories-list {
    grid-column: categories;
}

.categories-list td>a {
    color: black;
    text-decoration: none;
}

.categories-list td>a.active {
    color: var(--nw-company-orange);
    text-decoration: none;
    font-weight: bold;
}

.category-seminar-list {
    display: grid;
    grid-template-columns:
            [filter-start] 3fr
            [filter-end seminarlist-start] 9fr
            [seminarlist-end];
    gap: 0.5em;
}

.seminar {
    display: grid;
    gap: 1em;
}

.seminar-list {
    grid-column: seminarlist;
}

.seminar-list td>a {
    color: black;
    text-decoration: none;
}

.seminar-list td>a:hover {
    color: var(--nw-company-orange);
}

.seminar h1 {
/*    font-family: 'Roboto Condensed', sans-serif; */
    font-size: 1.2rem;
    color: var(--netzweise-barrierefrei-orange);
    font-weight: bold;
}

.seminar h2 {
    font-size: 1.1em;
    color: var(--netzweise-barrierefrei-orange);
    font-style: italic;
}

.seminar h3 {
    font-size: 1.0rem;
    color: var(--netzweise-barrierefrei-orange);
    font-weight: bold;
}

.seminar h4 {
    font-size: 1.0rem;
    color: var(--netzweise-barrierefrei-orange);
    font-weight: bold;
}

.seminar-filter {
    grid-column: filter;
}

.seminar-filter>ul {
    font-size: 1em;
    text-transform: capitalize;
    list-style-type: none;
    padding-left: 0em;
    padding-top: 3em;
}

.seminar-filter a.filtermenu {
    color: black;
    text-decoration: none;
}

.seminar-filter a.active  {
    color: var(--nw-company-orange);
    text-decoration: none;
    font-weight: bold;
}

.seminardescription {
    grid-column: seminar;
}

.seminardetails {
    margin-top: var(--seminardetails-topmargin);
    display: flex;
    flex-direction: column;
    grid-column: details;
    gap: var(--gap-size);
}

.seminartitle h1 {
    color: var(--netzweise-barrierefrei-orange);
    font-size: 1.8em;
/*    text-transform: uppercase; */
    margin: 1em 0em;
}

.seminardescription .title::before, .title::after {
    content: "";
    flex: 1 1 auto;
    border-bottom: 1px solid orange;
    margin: 1em 1em;
}

.seminardescription .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.4em;
    text-shadow: 2px 2px 2px lightgray;
    color: var(--nw-company-orange);
}

.card-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5rem;
    padding: 1rem;
}

.netzweise-farbe {
    color: var(--netzweise-barrierefrei-orange)
}

.seminarbox {
    background-color: var(--netzweise-hellorange) !important;
}

.seminarkachel {
    color: var(--netzweise-barrierefrei-orange) !important;
    background-color: var(--netzweise-hellorange) !important;
    display: block;
    text-decoration: none;
}

.seminarkachel:hover {
    background-color: var(--netzweise-hellorange2) !important;
}

.seminar-row {
    border-bottom: 2px solid var(--netzweise-mittelorange);
    padding: 1rem !important;
}

.title-column {
    font: var(--font-sans-serif);
    color: var(--netzweise-barrierefrei-orange) !important;
    background-color: var(--netzweise-hellorange) !important;
    padding: 1rem !important;

}

.title-column a,
.title-column a:link,
.title-column a:visited,
.title-column a:hover,
.title-column a:active {
    font: var(--font-sans-serif);
    color: var(--netzweise-barrierefrei-orange) !important;
    text-decoration: none;
    font-size: 1.2rem;
}

.price-column {
    font: var(--font-sans-serif);
    color: var(--netzweise-barrierefrei-orange) !important;
    background-color: var(--netzweise-hellorange) !important;
    padding-right: 2rem !important;
    font-size: 1.2rem;
}

/*.btn-clear {*/
/*    background-color: var(--netzweise-hellorange) !important;*/
/*    color: var(--netzweise-barrierefrei-orange) !important;*/
/*}*/

@media screen and (max-width: 1200px) {
    .card-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .card-container {
        grid-template-columns: 1fr;
    }
}



.titel {
    font-weight: 500;
    font-size: 16px;
    color: var(--netzweise-grau);
}

.infobox {
    border-color: var(--nw-company-orange);
    border-style: solid;
    font-size: 1em;
}

.boxheader {
    display: flex;
    justify-content: space-between;
    background-color: var(--nw-company-orange);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    color: white;
    padding: 0.5em 0.7em;
}

.boxcontent {
    padding: 0.8em;
}

.boxcontent td {
    vertical-align: top;
}

.container {
    --gutter-x: 0em !important;
}

.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #fff !important;
    padding-right: 2rem !important;
}

.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 60%;  /* Slightly adjusted from 50% to better align visually */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;    /* Increased from 6px to 9px */
    border-right: 9px solid transparent;   /* Increased from 6px to 9px */
    border-top: 12px solid var(--netzweise-barrierefrei-orange);         /* Increased from 6px to 9px */
    pointer-events: none;
}