/* General styles */
* {
    box-sizing: border-box;
}

/* Zentriertes Layout mit max. Breite */
html,
body {
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: Comic Sans MS, Tahoma, CourierNew;
    margin: 0 auto;
    /* auto -> Der Platz an beiden Seiten wird gleichmäßig verteilt und der Inhalt ist zentriert */
    max-width: 1000px;
    overflow: scroll;
    /*style="overflow-x: hidden;"*/
    padding: 5px;
    text-align: center;
}

h1,
h2,
h3,
h4 {
    color: var(--color-complement-0);
    font-weight: bold;
}

/* always a little smaller for h1 - headline */
h2 {
    font-size: 1.3em;
}

img {
    border-radius: 20px;
    max-width: 100%;
    /* Verhindert Übergröße */
    height: auto;
    /* Beibehaltung des Seitenverhältnisses */
}

/* cookie management*/
.cookie-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-primary-0);
    border: 5px solid var(--color-complement-0);
    color: var(--color-white);
    padding: 1rem;
    text-align: center;
    align-items: center;
    /*z-index: 9999;*/
}

#cookie-banner-href a {
    color: var(--color-white);
}

#cookie-banner-href a:hover {
    color: var(--color-complement-1);
}

.cookie-banner button {
    background: var(--color-complement-0);
    border: 1px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--color-white);
    border-radius: 10px;
    font-weight: bold;
}

.cookie-banner.hidden {
    display: none;
}

/* Interaktive Karte */
#map-image {
    max-width: 100%;
    height: auto;
}

.tooltip {
    padding: 10px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 10px;
    font-size: xx-large;
}

/* hyperlinks */
a:active,
a:focus,
a:link,
a:visited {
    color: var(--color-black);
    text-decoration: none;
}

a:hover {
    color: var(--color-complement-1);
    /*font-weight: bold;
    font-size: 1.1em;*/
    text-decoration: none;
}

/* haed layout: image left and two rows right */
.layout {
    display: flex;
    align-items: flex-start;
    flex-shrink: 1;
    max-width: 1000px;
    margin: 0px auto;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    gap: 20px;
}

.right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top-row img {
    border-radius: 12px;
    height: auto;
    margin-bottom: 10px;
    max-width: 100%;
}

.big {
    color: var(--color-complement-0);
    font-size: 2em;
    /* Relativ zur Schriftgröße des übergeordneten Elements */
    font-weight: bold;
}

.small {
    color: var(--color-complement-0);
    font-size: 0.4em;
    /* Relativ zur Schriftgröße des übergeordneten Elements */
    padding-bottom: 15px;
}

/* Navigation */
.hamburger {
    background-color: var(--color-primary-0);
    border-radius: 10px;
    color: var(--color-white);
    display: none;
    font-size: 18px;
    cursor: pointer;
    text-align: left;
    padding: 10px 20px 10px 10px;
    left: 15px;
    /*width: 30%; kürzt die Navigation ein */
}

.menu {
    background-color: var(--color-primary-0);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

.menu a {
    color: var(--color-white);
    text-decoration: none;
}

.menu a:hover {
    color: var(--color-complement-5);
    /*font-weight: bold;*/
    text-decoration: none;
}

/* Behavior image and row Geschichte, Sponsor */
.geschichte,
.sponsor {
    display: flex;
    align-items: center;
    gap: 3rem;
    /* Abstand zwischen Bild und Text */
    text-align: justify;
    /* Blocksatz*/
}

.geschichte img {
    width: 80%;
    /* oder z. B. 150px, 20%, etc. */
    height: auto;
}

.sponsor img {
    border: 3px solid var(--color-complement-0);
    border-radius: 25px;
}

/* Responsive */
@media (max-width: 560px) {

    /* head layout */
    .logo {
        display: none;
        /* Logo-Dorfverein switch off */
    }

    /* Navigation */
    .hamburger {
        display: flex;
        width: 150px;
    }

    .menu {
        display: none;
        text-align: left;
    }

    .menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 110px;
    }

    .menu.active a:hover {
        color: var(--color-complement-5);
        /*font-weight: bold;
        text-decoration: none;*/
    }

    .big {
        color: var(--color-white);
        font-size: 1.7em;
        text-align: left;
    }

    .small {
        color: var(--color-white);
    }

    /* Behavior image and row Geschichte, Sponsor */
    .geschichte,
    .sponsor {
        flex-direction: column;
        gap: 0rem;
    }

    .geschichte img {
        align-items: center;
        margin: 0 auto;
        width: 60%;
        /* Bild skaliert mit */
    }

    .sponsor img {
        align-items: center;
        margin: 0 auto;
        /*width: 80%;
         Bild skaliert mit */
    }

    /* Cookie management */
    /*.cookie-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-banner button {
        width: 100%;
    }*/
}

/* Section */
section {
    margin: auto;
    width: 100%;
}

section.dark {
    background-color: #ffffff;
}

section.light {
    background-color: #ffffff;
}

/* Anfahrt with Google-Maps */
iframe {
    width: 100%;
}

/* Footer */
.foot-center {
    text-align: center;
}

/* Horizontaler Trenner */
hr {
    background-color: var(--color-primary-0);
    height: 3px;
    width: 100;
}

.hr-footer {
    height: 10px;
    border-radius: 10px;
    width: 100%;
}

/* index.html Separatoren */
.separator {
    align-items: center;
    /* Vertikal zentrieren */
    border-radius: 10px;
    background-color: var(--color-primary-0);
    display: flex;
    margin: 2% 0% 2% 0%;
    /* Reduziert die Breite */
    max-height: 100px;
    padding: 6px;
    /* Bringt Höhe */
    place-items: center;
}

.h2-light {
    color: var(--color-white);
    text-align: center;
    margin: 0 auto;
}

/* impressum.html */
.impressum {
    /*font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;*/
    text-align: justify;
    /* Schrift im Blocksatz */
}

.impressum h2 {
    text-align: left;
}

/* Font colors for all surroundings */
:root {
    /* Main  Colors */
    --color-white: #fff;
    --color-black: #000;
    /* Main Primary color */
    --color-primary-0: #A4343F;
    --color-primary-1: #CB6342;
    --color-primary-2: #AC4221;
    /* Main Secondary color (1) */
    --color-secondary-1-0: #8C5108;
    --color-secondary-1-1: #CB8D42;
    --color-secondary-1-2: #AC6E21;
    /* Main Complement color */
    --color-complement-0: #066233;
    --color-complement-1: #2E8E5E;
    --color-complement-2: #177947;
    --color-complement-3: #004823;
    --color-complement-4: #002B15;
    --color-complement-5: #0fc162;
    /* 5 is much lighter for navigation */
}