/* =========================== Farbvariablen =========================== */
:root {
    --accent-color: #22BBEA;
    --primary-color: #232526;
    --secondary-color: #121313;
    --text-color: #d9d9d9;
    --secondary-text-color: #7f8082;
}

/* =========================== Allgemeine Stile =========================== */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--primary-color);
    height: 100%;
    overflow-x: hidden;
}

/* =========================== Navigation =========================== */
nav {
  position: relative; /* Stellt sicher, dass der Button relativ zur Navigation positioniert wird */
width: 100%;
background-color: var(--primary-color);
color: var(--text-color);
padding: 0;
z-index: 1000;
display: flex;
justify-content: space-between; /* Lässt Platz für das Logo und den Sprachbutton */
align-items: center;
height: 65px; /* Definierte Höhe für die Navbar */
box-sizing: border-box;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: center; /* Zentriert die Links in der Mitte */
    position: relative;
}

.nav-logo {
    position: absolute; /* Absolut positioniert, bleibt links */
    left: 20px; /* 20px vom linken Rand */
}

/* Sprachwechsel-Button */
.language-dropdown {
    position: absolute; /* Absolut positioniert, ohne andere zu beeinflussen */
    right: 20px; /* Ganz rechts */
    top: 50%; /* Vertikal zentriert */
    transform: translateY(-50%); /* Vertikal zentriert */
    display: flex;
    align-items: center;
}

/* Styling für den kreisförmigen Flaggen-Button */
.flag-btn {
    width: 50px;    /* Feste Breite des Buttons */
    height: 50px;   /* Feste Höhe des Buttons */
    border-radius: 50%; /* Runde Form */
    border: 2px solid #22BBEA; /* Rahmen um den Button */
    background-color: #232526; /* Hintergrundfarbe des Buttons */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */
    padding: 0; /* Kein Padding */
}

.flag-btn:hover {
    background-color: #22BBEA; /* Hover-Farbe */
    transform: scale(1.1); /* Vergrößern beim Hover */
}

.flag-icon {
    width: 60%;   /* Verkleinert die Flagge auf 80% der Button-Größe */
    height: 60%;  /* Verkleinert die Flagge proportional */
    object-fit: contain; /* Proportional skalieren */
    border-radius: 50%;  /* Runde Form für die Flagge */
}
/* =========================== Navigation Links (Hover, Active) =========================== */
.nav-links {
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: center;
}

.logo-nav {
    height: 3vw;
    max-height: 50px;
    width: auto;
    display: block;
    margin: 0;
}

/* =========================== Navigation Links (Hover, Active) =========================== */
nav a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5vw 1vw;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 1.2vw;
    line-height: 1; /* Verhindert zusätzliche Abstände */
}

nav a:not(.logo-link)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5em;
    background-color: var(--accent-color);
    z-index: -1;
    transition: transform 0.3s ease;
    transform: translateY(-50%) scaleX(0); /* Unsichtbar bei Start */
    transform-origin: right;
    border-radius: 10px;
}

nav a:not(.logo-link):hover::before {
    transform: translateY(-50%) scaleX(1); /* Beim Hover voll sichtbar */
    transform-origin: left;
}

nav a.active:not(.logo-link)::before {
    transform: translateY(-50%) scaleX(1); /* Wenn aktiv, ebenfalls voll sichtbar */
    transform-origin: left;
}

nav a:not(.logo-link):hover {
    color: var(--primary-color);
}

nav a.active {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.2vw;
    padding: 0.5vw 1vw; /* Konsistentes Padding */
}
/*----------------------------------------------Ende Navigation -----------------------------------*//* Impressum Sektionen */
.impressum-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 8vh;
    padding-left: 7vw;
    padding-right: 7vw;
    padding-bottom: 5vh;
    color: var(--text-color);

}

.primary-background {

    background-color: var(--secondary-color);
}

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

h1 {
    font-size: 4vw;
    color: var(--accent-color);
    margin-bottom: 20px;
    text-align: center;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    width: 100%;
    margin-top: 3vw;
}

.impressum-block-first {
    text-align: center;
}


h2 {
    color: var(--accent-color);
    font-size: 1.5vw;
    margin-bottom: 10px;
}

p {
    font-size: 1.2vw;
    line-height: 1.6;
}


/* =========================== Footer Styling =========================== */
/* Footer Grundlayout */
.footer {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em; /* Kleinere Schrift */
}

/* Footer Container */
.footer-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
}

/* Spalten im Footer */
.footer-column {
    flex: 1; /* Gleiche Verteilung der Spalten */
    text-align: center;
    padding: 10px;
}

/* Linke Spalte: Logo */
.footer-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-logo-img {
    max-width: 100px; /* Größe des Logos */
    height: auto;
}

/* Mittlere Spalte: Kontakt */
.footer-contact {
    text-align: center;
    font-size: 0.9em; /* Kleinere Schrift für den Kontaktbereich */
    line-height: normal;
}

.footer-contact p {
    margin: 5px 0;
      font-size: 0.9em;
      line-height: normal;
}

/* Rechte Spalte: Links */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-links a {
    color: var(--text-color);
    text-decoration: none;
    margin: 5px 0;
    font-size: 0.8em; /* Kleinere Schrift für die Links */
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-color); /* Farbe beim Hover ändern */
}
.burger-menu span {
  display: none;
}

/* Mobile Ansicht (max-width: 500px) */
@media (max-width: 500px) {
    /* Logo bleibt links */
    .nav-logo {
        position: absolute;
        left: 20px;
    }

    /* Burger-Menü in der Mitte anzeigen */
    .burger-menu {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000; /* Sicherstellen, dass das Menü immer sichtbar ist */
  }

  .burger-menu span {
    display: block;
    width: 100%; /* Volle Breite der Burger-Linie */
    height: 3px; /* Dicke der Burger-Linie */
    background-color: white; /* Farbe der Linien, anpassbar */
    border-radius: 3px; /* Leicht abgerundete Ecken */
    transition: all 0.3s ease-in-out; /* Animation für smooth transition */
}

    /* Navigationselemente werden standardmäßig ausgeblendet */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 8vw;
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        z-index: 999;
        height: 25vh;

    }

    /* Navigation sichtbar, wenn aktiviert */
    .nav-links.active {
        display: flex;

    }

    /* Sprachbutton rechts */
    .language-dropdown {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    nav a{
      font-size: 3vw;
    }
    nav a.active{
      font-size: 3vw;
    }


    .impressum-section {
        min-height: none;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 2vh;
        padding-left: 7vw;
        padding-right: 7vw;
        padding-bottom: 5vh;
        color: var(--text-color);

    }
    .content-grid {
        display: grid;
        grid-template-columns: none;
        gap: 2vw;
        width: 100%;
        margin-top: 3vw;
        height: auto;
    }

    h1 {
      font-size: 10vw;
    }

    .impressum-block-first {
        text-align: center;

    }
    .impressum-block-first h2 {
      font-size: 4vw;
    }

    .impressum-block-first p {
      font-size: 3vw;
    }
    .impressum-block {
        text-align: center;

    }
    .impressum-block h2 {
      font-size: 4vw;
    }

    .impressum-block p {
      font-size: 3vw;
    }
    .footer-container {
      font-size: 2vw;
    }