/**********************************
(c) diwa mediamatik 2025
diwa stjernestoev
Variablen
**********************************/
:root {
    --primary: #7b294c;
    --text: #333;
    --light-bg: #efefe7;
    --content-width: 100%;
    }

/**********************************
defaults
**********************************/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    color: var(--text);
    font: 400 1.2em/1.6 'Open Sans', sans-serif;
    background: #fff;
    }

a {
    color: inherit; text-decoration: none;
    }
a:hover {
    color: var(--primary);
    }

.wrapper {
    max-width: 1920px;
    margin: auto;
    }

/**********************************
header
**********************************/
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 3% 7% 3% 8%;
    background: #fff;
    }

header img.logo {
    max-height: 120px;
    }

header ul {
    list-style: none;
    }
header ul li {
    float: left;
    padding: 0 12px;
    border-right: 1px solid #000;
    }
header ul li:last-child {
    border-right: 0;
    }

nav {
    display: flex;
    gap: 1rem;
    font-size: 1.2em;
    }

/**********************************
Hamburger
**********************************/
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    }
.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    }


/**********************************
Hero Banner
**********************************/
.hero img {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    }


/**********************************
Section defaults shared
**********************************/
.intro,
.two-col,
.three-col,
.contact,
.map {
    max-width: var(--content-width);
    margin: auto;
    padding: 2rem;
    }

.intro {
    color: var(--primary);
    width: 84%;
    }

.intro h1 {
    color: var(--primary);
    font-size: 1.7em;
    margin-bottom: 1rem;
    }

/**********************************
Section two-col Layout 10
**********************************/
.two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background: var(--light-bg);
    }

.two-col > div {
    flex: 1 1 300px;
    color: var(--primary);
    }

.two-col img {
    width: 100%;
    border-radius: 4px;
    }
.two-col ul {
    margin: 12px 0 12px 2%;
    }

/* Desktop-Randlogik (Original) */
.two-col div:first-child,
.contact div:first-child,
.map,
.footer div:first-child {
    margin-left: 8%;

    }

.two-col div:last-child,
.contact div:last-child,
.map,
.footer div:last-child {
    margin-right: 4%;
    }

.two-col h2,
.three-col h2,
.contact h2 {
    color: var(--primary);
    font-size: 1.2em;
    margin: 0 0 1rem;
    }

/**********************************
Section three-col Layout 12
**********************************/
.three-col {
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
    background: #fff;
    }

.three-col > div {
    flex: 1 1 300px;
    color: var(--primary);
    }
.three-col img { width: 100%; border-radius: 4px; }

.three-col div:nth-child(2) { /* Textspalte */
    max-width: 28%;
    margin-left: 8%;
    }
.three-col div:nth-child(1) { /* Bildspalte */
    padding-right: 4%;
    }

/**********************************
Section Kontakt
**********************************/
.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background: var(--light-bg);
    }

.contact > div {
    flex: 1 1 300px;
    color: var(--primary);
    }
.contact h3 {
    color: var(--primary);
    margin-bottom: .5rem;
    }
.contact div:nth-child(2) {
    padding-right: 3%;
    max-width:26.5%;
    margin-left:-1.2%;
    }

.contact a:hover,
.map a:hover,
.footer a:hover {
    font-weight: bold;
    }

.openhours p,
.map p {
    margin-top: 11px;
    }

/**********************************
Section Anfahrt Layout 14
**********************************/
.map h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    }
.map img {
    width: 100%;
    border-radius: 4px;
    }
.map a {
    color: var(--primary);
    }

/**********************************
Footer
**********************************/
.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    font-size: .9rem;
    background: var(--primary);
    color: #fff;
    }
.footer > div {
    flex: 1 1 200px;
    }
.footer a {
    color: #fff;
    }

/**********************************
Mobile Ausgaben
**********************************/

@media (max-width: 1124px) {
    .intro,
    .two-col,
    .three-col,
    .contact,
    .map {
        width: 90%;
        padding: 1.5rem;
        }

    .intro {
        width: 90%;
        }
    header img.logo {
        max-height: 90px;
        }
    .map {
        margin-left: 5% !important; margin-right: 0 !important;
        }
    .footer {
        margin-left: 5% !important; margin-right: 5% !important;
        }

    nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: min(85vw, 320px);
        padding: 1rem;
        font-size: 1em;
        background: #fff;
        border: 1px solid #ccc;
        border-top: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        z-index: 50;
        }
    nav.active {
        display: flex;
        }
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        }
    nav ul li {
        float: none;
        display: block;
        padding: .5rem 0;
        border-right: 0;
        }

    .hamburger {
        display: flex;
        }
    .two-col,
    .three-col,
    .contact {
        gap: 1rem;
        }
    .two-col > div,
    .three-col > div,
    .contact > div {
        flex: 1 1 100%;
        }
    .two-col div:first-child,
    .contact div:first-child,
    .footer div:first-child,
    .two-col div:last-child,
    .contact div:last-child {
        margin-left: 0;
        margin-right: 0;
    }
    .contact div:nth-child(2) {
    padding-right: 0;
    max-width:100%;
    margin-left:0;
    }
    .three-col {
        flex-direction: column;
        }
    .three-col div:nth-child(2) {
        max-width: 100%; margin-left: 0;
        }
    .three-col div:nth-child(1) {
        padding-right: 0;
        }
    .hero img,
    .two-col img,
    .three-col img,
    .map img {
        width: 100%;
        height: auto;
        }
}

@media (max-width: 480px) {
    html {
        font-size: 16px;
        }
    body {
        font-size: 1rem;
        line-height: 1.55;
        }
    .intro,
    .two-col,
    .three-col,
    .contact,
    .map {
        width: 92%;
        padding: 1rem;
        }
    .intro h1 {
        font-size: 1.35em;
        margin-bottom: .75rem;
        }
    header img.logo {
        max-height: 56px;
        }

    .two-col ul {
        margin: .5rem 0 .75rem 1rem;
        }
    .openhours p,
    .map p {
        margin-top: .5rem;
        }
    .footer {
        gap: 1rem;
        font-size: .95rem;
        }
    .footer > div {
        flex: 1 1 100%;
        }
}