/* Markenfarben (Theme-Designer 6.11, aus ColorConfig). Handeditierbar; überlebt Rebuilds. */
:root {
    --brand-main: #f5b901;
    --brand-secondary: #fff;
    --brand-headline: #f5b901;
    --brand-text: #fff;
    --brand-link: #f5b901;
    --brand-black: #000;
}

#content {
    color: var(--brand-text);
}

h1,
h2,
.h1,
.h2 {
    color: var(--brand-headline);
}

#content a {
    color: var(--brand-link);
}

.font-black,
.text-black {
    color: var(--brand-black);
}

.text-brand-main {
    color: var(--brand-main);
}

.border-brand-main {
    border-color: var(--brand-main);
}

.bg-brand-main {
    background-color: var(--brand-main);
}

.bg-brand-secondary {
    background-color: var(--brand-secondary);
}

.bg-brand-headline {
    background-color: var(--brand-headline);
}

.bg-brand-text {
    background-color: var(--brand-text);
}

.bg-brand-link {
    background-color: var(--brand-link);
}

.bg-brand-black {
    background-color: var(--brand-black);
}

.text-bold {
    font-weight: bold;
}

body {
    background-color: var(--brand-black);
    font-size: 18px;
}

.img-logo {
    width: 250px;
    height: auto;
    margin: 2rem 0;
}

footer a:hover {
    color: var(--brand-headline)
}

main .banner-slider {
    height: clamp(240px, 42vw, 560px);
}


header nav a {
    color: var(--color-white);
    font-size: clamp(16px, 5vw, 22px);
}

header nav a.bg-primary-50 {
    background-color: transparent;
    color: var(--brand-main);
}


header nav a:hover {
    background-color: transparent;
    color: var(--brand-main);
}

header nav a:focus {
    background-color: transparent;
    color: var(--brand-main);
}

.banner-slide__overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-slide__overlay .banner-slide__overlay-inner {
    max-width: 60%;
}

.banner-slide__overlay .banner-slide__title {
    font-size: clamp(16px, 2vw, var(--text-2xl));
}

.banner-slide__overlay .banner-slide__text {
    font-size: clamp(22px, 5vw, var(--text-7xl));
    font-weight: 700;
    line-height: 1.2;
}


@media screen and (min-width:1024px) {
    .img-logo {
        width: 270px;
        margin: 1.5rem 0;
    }

    main .banner-slider {
        height: calc(80vh - 174px);
    }
}

button#nav-toggle span {
    background-color: var(--brand-main);
}

#content form button {
    border-radius: 2rem;
    background-color: var(--brand-headline);
    color: var(--brand-black);
}

#form_kontakt input {
    border-radius: 2rem;
}

#form_kontakt label {
    color: var(--color-white);
}

#form_kontakt textarea {
    border-radius: 2rem;
}

.courses-list li a {
    background-color: var(--brand-main);
    border-color: var(--brand-main);
}

.courses-list li a:hover {
    background-color: var(--brand-black);
    color: var(--color-white);
}

.courses-list li a:hover span {
    color: var(--brand-text);
}

.course-enroll form button {
    border-radius: 2rem;
    background-color: var(--brand-headline);
    color: var(--brand-black);
}

.course-enroll input {
    border-radius: 2rem;
}

.course-enroll label {
    color: var(--color-white);
}

.course-enroll textarea {
    border-radius: 2rem;
}