/* Grundlegendes Reset/Basis */
html, body {
    margin: 0;
    padding: 0;
    font-family: open-sans, sans-serif;
    background: #fff;
    color: #1E1E1E;
    width: 100vw;
    font-size: 14px; /* Standard-Font-Size als px */
    overflow-x: hidden;
}

main > section {
    width: 100%;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
}

.inverted {
    background: #1E1E1E;
    color: #fff;
    text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    /* 27px => 27/14 ≈ 1.93rem, 32px => 32/14 ≈ 2.29rem */
    font-size: 1.93rem;
    line-height: 2.29rem;
}

h1 .h-shadow, h2 .h-shadow, h3 .h-shadow, h4 .h-shadow, h5 .h-shadow, h6 .h-shadow {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.letter-spacing {
    letter-spacing: 5px;
}

a, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

/* Cookie-Bar */
#cookie-bar {
    background: rgba(0, 0, 0, 0.9);
    color: #FFF;
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding: 10px 0 10px 10px;
    display: none; /* Anfangs versteckt, JS zeigt sie an */
    z-index: 9999;

    /* 9px => 9/14 ≈ 0.64rem */
    font-size: 0.64rem;
}

#cookie-bar > * {
    margin: 0;
    position: relative;
    z-index: 10;
}

#cookie-bar > p {
    width: auto;
}

#cookie-bar .cb-enable {
    position: absolute;
    top: 0;
    right: 30px;

    background: #FFF;
    color: #000;
    padding: 10px;
    text-decoration: none;
    border-radius: 2px;
    font-weight: bold;
}

#cookie-bar .cb-policy {
    color: #FFF;
    text-decoration: underline;
}


/* Container um alle Karten nebeneinander darzustellen */
.card-container {
    display: flex;
    flex-wrap: wrap; /* Falls der Platz nicht reicht, brechen Karten um */
    gap: 20px; /* Abstand zwischen den Karten */
    justify-content: center;
    margin: 20px;
    width: 100%;
}

/* Einzelne Karte */
.card {
    background: #f0f0f0;
    /*border-radius: 8px;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 350px;
    flex: 1 1 350px;
}

/* Überschriften in der Karte */
.card h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.card h4 {
    margin: 0;
    font-weight: normal;
    /* vorher .9em => jetzt in rem (bei 14px Standard): 0.9em ≈ 12.6px => 12.6/14 = ~0.9rem */
    font-size: 0.9rem;
    color: #777;
}

/* Allgemeine Textformatierung */
.card p {
    margin: 0.75em 0;
    line-height: 1.4;
}

/* Links (Mail) */
.card a {
    color: #000;
    text-decoration: none;
}

.card a:hover {
    text-decoration: underline;
}


/* Main-Bereich */
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: none;
}

footer {
    display: flex;
    background: rgb(40, 40, 40);
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding: 30px 20px 70px 20px;

    /* 10px => 10/14 ≈ 0.71rem; 12px => 12/14 ≈ 0.86rem */
    font-size: 0.71rem;
    line-height: 0.86rem;
    font-weight: 700;
}

.footer-column {
    flex: 0 1 400px;
    margin-right: 10px;
    text-align: left;
}

.footer-column:last-child {
    margin-right: 0;
    text-align: right;
}

.footer-column a {
    color: #fff;
    text-decoration: none;
}


#willkommen {
    width: 100vw;
    height: 100vh;

    background: url(/images/fahrschule_enterprise_00.jpg) no-repeat center center;
    background-size: cover;
}

#willkommen img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#ausbildung {
    background: url(/images/fahrschule_enterprise_03.jpg) no-repeat center center;
    background-size: cover;
    text-shadow: rgba(0, 0, 0, 0.84) 1px 1px 4px;
}
#ausbildung h2 {
    text-align: center;
}

#ausbildung ul {
    margin: 40px 0;
    padding: 0 20px;
}

#seminare {
    position: relative;
    padding-bottom: 140px;
    z-index: 1;
}

#seminare ul {
    margin-top: 0;
}

#seminare #auto {
    position: absolute;
    bottom: 0;
    transform: translate(0%, 45%);
    z-index: 3;
}

#socialMedia {
    background: url(/images/fahrschule_enterprise_01.jpg) no-repeat center center;
    background-size: cover;
    min-height: 380px;
    position: relative;
}

#socialMedia > a {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#socialMedia h3, #socialMedia h4 {
    margin: 0;
    padding: 0;
}

#socialMedia h3 {
    /* 25px => 1.79rem; 30px => 2.14rem */
    font-size: 1.79rem;
    line-height: 2.14rem;
    font-weight: 700;
    font-style: italic;
}

#socialMedia h4 {
    /* 34px => 2.43rem; 41px => 2.93rem */
    font-size: 2.43rem;
    line-height: 2.93rem;
    font-weight: 800;
    font-style: italic;
}

#socialMedia > a > * {
    vertical-align: middle;
}

#socialMedia .facebookIcon {
    margin: 10px;
}

#social_z {
    position: absolute;
    bottom: -10px;
    right: 0;
    display: block;
    transform: translate(50%, 50%);
    image-rendering: pixelated;
}

.inlineBlock {
    display: inline-block;
}

.upperText {
    text-transform: uppercase;
}

.introText {
    /* 17px => 1.21rem; 20px => 1.43rem */
    font-size: 1.21rem;
    line-height: 1.43rem;
    text-align: center;
    font-weight: 600;
}

.italicText {
    /* 23px => 1.64rem; 35px => 2.50rem */
    font-size: 1.64rem;
    line-height: 2.50rem;
    text-align: left;
    font-weight: 600;
    font-style: italic;
}

.italicInfoText {
    /* 14px => 14/14 => 1rem */
    font-size: 1rem;
    text-align: center;
    font-style: italic;
}

.noListStyle {
    list-style-type: none;
}

.service-row {
    display: flex;
}

.service-row .days {
    min-width: 70px;
}

.service-row .times {
    flex: 1;
    margin-left: 10px;
}

.withOverlay {
    position: relative;
}

.withOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 25, 0.4);
    z-index: 1;
}

.withOverlay > * {
    z-index: 2;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 650px) {
    html, body {
        font-size: 12px;
    }
    #cookie-bar > * {
        display: block;
        text-align: center;
        margin: 5px;
    }
    #cookie-bar .cb-enable {
        position: static;
    }
    #willkommen img {
        max-width: 100%;
    }

    footer {
        flex-direction: column;
        gap: 0;
    }
    footer .footer-column{
        flex: 1 1 auto;
        margin: 0;
        text-align: center !important;
    }
    #seminare #auto, #socialMedia .facebookIcon {
        max-width: 100%;
    }
}

@media (max-width: 886px) {
    #socialMedia > a {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #socialMedia > a > * {
        display: block;
        flex: 0 1 auto;
        text-align: center;
    }

    #socialMedia .facebookIcon {
        margin: 20px;
    }

    #social_z {
        position: static;
        transform: none;
    }
}