/* Reset für alle Elemente */
* {
    margin: 0;
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
}
/* Allgemeines Styling */
html, body {
    margin: 0;
    padding: 0;
    width: 100%; /* 100% muss bleiben - Füllt den gesamten Viewport */  
    max-width: none; /* Keine Beschränkung der Breite */
    min-height: 100vh; /* 100vh muss bleiben - Mindestens die Höhe des Viewports */
    font-family: "calibri", sans-serif;
    color: #646464;
    background-color: rgb(245, 245, 245); /* Gelbgrüner Hintergrund */
    scroll-behavior: smooth; /* Sanftes Scrollen aktivieren */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* Abschnitte */
section {
    margin-top: 0px;
    scroll-margin-top: 0px; /* Korrigiert die Position beim Sprung */
}
/* Individuelle Sectionen-Werte in den #-Abschnitten*/
#home {
    margin-bottom: auto; /* Abstand nach unten */
    scroll-margin-top: 0px; /* 0px = top - Abstand beim Springen */
}
#warum {
    scroll-margin-top: 0px; /* 0px = top - Abstand beim Springen */
    margin-top: 20px;
    margin-bottom: 0px; /* Mittelgroßer Abstand */
}
#was {
    scroll-margin-top: 0px; /* 0px 0 top - Abstand beim Springen */
    margin-top: 0px;
    margin-bottom: 0px; /* Mittelgroßer Abstand */
}
#wer {
    scroll-margin-top: 0px; /* Abstand beim Springen */
    margin-top: 0px;
    margin-bottom: 0px;
}
#wie {
    scroll-margin-top: 0px; /* Abstand beim Springen */
    margin-top: 0px;
    margin-bottom: 0px; /* Großer Abstand */
}
/* Dynamischer Inhalt mit Scrollbereich */
.scrollable {
    flex: 1;
    overflow-y: auto;
    transform-origin: center center; /* Skalierung beginnt oben mittig */
    transition: transform 0.2s ease; /* Sanfter Übergang beim Zoom */
    will-change: transform; /* Optimierung für bessere Performance */
}
.sticky {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Glatte Animation */
    z-index: 1000; /* Stelle sicher, dass es sichtbar bleibt */
}
/* ****************************************************** */
/*                       HOME LOGO                        */
/* ****************************************************** */
.container-home { /* Home */
    width: 35%; /* width: 600px; */
    aspect-ratio: 44 / 54; /* Verhältnis Breite:Höhe */
    margin: auto;
    margin-bottom: 100px;
    /*border: 1px solid #e40a0a; /* Optionaler Rahmen */
    position: relative; /* Referenzpunkt für absolute Positionen */
    display: flex; /* Flexbox für Inhalte */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    align-items: center; /* Zentriert vertikal */
    overflow: hidden; /* Überstehende Inhalte ausblenden */
}
/* Bild in der Mitte des Home-Containers */
.image-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 100% der Breite des Containers */
    height: 100%; /* 100 % der Höhe des Containers */
    object-fit: cover; /* Passt das Bild an */
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design: Home für SmartPhone*/
    .container-home{
        width: 80%; /* Breite im Hochformat */
        margin: 0 0 100px 0 auto;
        .vertical {
            font-size: 2.0rem
        }
        .horizontal {
            font-size: 0.8rem;
        }
        /*background-color: lightblue; /* TEST: Andere Hintergrundfarbe für Portrait */
    }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design: Home für SmartPhone*/
    .container-home {
        width: 60%; /* Weniger Breite im Querformat */
        margin: 0 0 100px 0 auto; /* Zentriert den Container */
        .vertical {
            /* font-size: 3.5rem*/
            font-size: clamp(2.3rem, 2.7vw, 3.2rem);
        };
        .horizontal {
            /*font-size: 1.4rem;*/
            font-size: clamp(.95rem, 1.3vw, 1.5rem);
        }
        /* background-color: lightcoral; TEST: Andere Hintergrundfarbe für Landscape */
    }
}
.vertical { /* e4u.team Homebildschirm */
    position: absolute;
    top: 0;
    width: 50%; /* Die Hälfte der Breite des Home-containers */
    aspect-ratio: 22 / 35; /* Verhältnis Breite:Höhe = 1:2 */
    left: 50%; /* Positioniert nach der Hälfte von links */
    background-color: #ff9c2a; /* orange */
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: clamp(0.5rem, 3.5vw, 3.5rem);
    color: #404040;
    z-index: 20; /* Rechtecke bleiben hinter dem Footer */
}
.vertical span { /* e4u.team Homebildschirm */
    position: absolute;
    bottom: 15%; /* Platziere im unteren Drittel des Rechtecks */
    left: 16%;
}
.vertical:hover { /* e4u.team Homebildschirm */
    color: #f4f4f4; /*  #f4f4f4 Farbe der Schrift beim Hover */
}
.horizontal { /* e4u.team Homebildschirm */
    position: absolute;
    /*top: 29.6vw; /* ausprobiert 29.65vw */
    bottom: 0;
    width: 50%; /* Gleiche Breite wie das vertikale Rechteck */
    aspect-ratio: 22 / 19; /* Stellt sicher, dass es ein Quadrat bleibt */
    left: 0%; /* Verschiebt das Quadrat nach links */
    background-color: #57a7b3; /* Gleiche Farbe */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.3rem, 1.3vw, 1.5rem);
    color: #404040; /* #404040 */
    z-index: 20; /* Rechtecke bleiben hinter dem Footer */
}
.horizontal p { /* e4u.team Homebildschirm */
    line-height: 1.3; /* Zeilenabstand */
}
.horizontal:hover { /* e4u.team Homebildschirm */
    color: #f4f4f4; /* #f4f4f4 Farbe der Schrift beim Hover */
}
/* ****************************************************** */
/*                  Logo im Header                        */
/* ****************************************************** */
.container-logo {  /* header logo */
    width: 66px;
    height: 81px;
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    display: flex;
    justify-content:  center;
    align-items: center;
}
.vertical-logo {  /* header logo */
    width: 50px; /* feste Breite in px*/
    aspect-ratio: 22 / 35; /* vertikales Rechteck oben, Verhältnis Breite:Höhe = 2:3 */
    transform: translateY(-13.5px); /* angepasste Verschiebung */
    background-color: #ff9c2a; /* GrauGrünBlau */
    /*border: 1px solid #8a106b; /* Optionaler Rahmen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20; /* Rechtecke bleiben hinter dem Footer */
}
.horizontal-logo{  /* header logo */
    width: 50px; /* Gleiche Breite wie das vertikale Rechteck */
    aspect-ratio: 22 / 19; /* Stellt sicher, dass es ein Quadrat bleibt */
    transform: translateY(26px);
    background-color: #57a7b3; /* Gleiche Farbe */
    /*border: 1px solid #ba256b; /* Optionaler Rahmen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20; /* Rechtecke bleiben hinter dem Footer */
}
/* ****************************************************** */
/*         Logo in der Info-box "Was wir leisten"         */
/* ****************************************************** */
.container-logo-box {  /* header logo */
    width: 44px;
    height: 54px;
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    display: flex;
    justify-content:  center;
    align-items: center;
}
.vertical-logo-box {  /* logo info box "Was wir leisten" */
    width: 22px; /* feste Breite in px*/
    aspect-ratio: 22 / 35; /* vertikales Rechteck oben, Verhältnis Breite:Höhe = 2:3 */
    transform: translateY(-9.5px); /* angepasste Verschiebung */
    background-color: #ff9c2a; /* orange */
    /*border: 1px solid #8a106b; /* Optionaler Rahmen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15; /* Rechtecke bleiben hinter dem Footer */
}
.horizontal-logo-box {  /* logo info box "Was wir leisten" */
    width: 22px; /* feste Breite */
    aspect-ratio: 22 / 19; /* horizontales Rechteck unten */
    transform: translateY(16.5px);
    background-color: #57a7b3; /* türkis */
    /*border: 1px solid #ba256b; /* Optionaler Rahmen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15; /* Rechtecke bleiben hinter dem Footer */
}
/* ****************************************************** */
/*          Section "Warum Energie optimal nutzen"        */
/* ****************************************************** */
.header-warum { /* warum energie optimal nutzen */
    position: sticky; /* Ermöglicht Positionierung von Text innerhalb */
    top: 0;
    width: 100%; /* Nimmt die gesamte Breite ein */
    aspect-ratio: 64 / 6; /* Seitenverhältnis: breite / höhe */
    height: auto;
    background-color: rgb(225, 225, 225);
    background-size: cover; /* Bild passt sich an, um den gesamten Bereich abzudecken */
    background-position: center; /* Zentriere das Bild */
    margin: 0; /* Entfernt Abstände */
    padding: 0; /* Entfernt Polsterung */
    margin-bottom: 0px; /* Abstand unter dem Header */
    display: flex; /* Flexbox für einfache Zentrierung */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    z-index: 10;
}
.header-warum h2 { /* warum energie optimal nutzen */
    color: #404040; /* Schriftfarbe */
    font-size: clamp(1.6rem, 2.9vw, 3.5rem);
    /*font-size: 3rem; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatten für bessere Lesbarkeit */
    margin-left: 20px; /* Entfernt Standard-Margin */
}
.sub-container-warum { /* warum energie optimal nutzen */
    width: 50%; /* width: 600px; */
    height: auto; /* height: 850px; height: auto;*/
    background-color: rgb(245, 245, 245); /* Hintergrundfarbe */
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    margin: 0px auto; /* 0px nach oben und unten - Zentriert innerhalb der Section */
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    justify-content: top; /* Inhalt vertikal zentrieren */
    align-items: left; /* Inhalt horizontal zentrieren */
    padding: 130px 0; /* Innenabstand */
    text-align: left; /* Text links */ 
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design für SmartPhones*/
    .sub-container-warum {
        width: 90%; /* Volle Breite im Hochformat */
        margin: 0 auto;
        /* background-color: lightblue; TEST: Andere Hintergrundfarbe für Portrait */
    }
    .header-warum h2 {
    font-size: clamp(1.6rem, 2.9vw, 3.5rem);
    /*font-size: clamp(1.6rem, 2.2vw, 2.9rem);/* TEST */
   }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design für SmartPhones*/
    .sub-container-warum {
        width: 60%; /* Weniger Breite im Querformat */
        margin: 0 auto; /* Zentriert den Container */
        /* background-color: lightcoral; TEST: Andere Hintergrundfarbe für Landscape */
    }
}
.sub-container-warum h2 { /* warum energie optimal nutzen */
    font-size: 24px;
    font-weight: bold;
    margin-top: 0px;
    padding-left: 0px;
    margin-bottom: 10px;
}
.sub-container-warum p { /* warum energie optimal nutzen */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.5; /* Zeilenabstand */
    margin-top: 3px;
    margin-bottom: 8px; /* Abstand nach unten */
    padding-left: 0px;
}
.sub-container-warum ul { /* warum energie optimal nutzen */
    list-style-position: inside; /* Bullet Point bleibt innerhalb des Listenbereichs */
    padding-left: 0; /* Entfernt Standard-Einrückung */
    margin-left: 0; /* Entfernt Standard-Margin */
}
.sub-container-warum li { /* warum energie optimal nutzen */
    padding-left: 0px; /* Text der Punkte einrücken, Bullet bleibt links */
    line-height: 1.5; /* Zeilenabstand */
    margin-top: 8px;
    margin-bottom: 0px; /* Abstand nach unten */
    font-weight: bold;
}
.highlight-link { /* warum energie optimal nutzen */
    color: #57a7b3; /* Blaue Schrift bei "kontaktieren*/
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight: bold; /* Hebt den Text hervor */
}
.highlight-link:hover { /* warum energie optimal nutzen */
    text-decoration: underline; /* Unterstreicht beim Hover */
    color: #278897; /* Dunkleres Blau beim Hover */
}
/* ****************************************************** */
/*                Section "Was wir leisten"               */
/* ****************************************************** */
.header-was { /* Was wir leisten */
    position: sticky; /* Ermöglicht Positionierung von Text innerhalb */
    top: 0;
    width: 100%; /* Nimmt die gesamte Breite ein */
    aspect-ratio: 64 / 6; /* Seitenverhältnis: 16:9 */
    height: auto;
    background-color: rgb(225, 225, 225);
    background-size: cover; /* Bild passt sich an, um den gesamten Bereich abzudecken */
    background-position: center; /* Zentriere das Bild */
    margin: 0; /* Entfernt Abstände */
    padding: 0; /* Entfernt Polsterung */
    margin-bottom: 0px; /* Abstand unter dem Header */
    display: flex; /* Flexbox für einfache Zentrierung */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    z-index: 10;
}
.header-was h2 { /* Was wir leisten */
    color: #404040; /* Schriftfarbe */
    font-size: clamp(1.6rem, 2.9vw, 3.5rem);
    /*font-size: 3rem; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatten für bessere Lesbarkeit */
    margin-left: 20px; /* Entfernt Standard-Margin */
}
.sub-container-was { /* Was wir leisten */
    width: 70%; /* width: 600px; */
    height: auto; /* height: 850px; height: auto;*/
    background-color: rgb(245, 245, 245); /* Hintergrundfarbe */
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    margin: 0px auto; /* 0px oben und unten, Zentriert innerhalb der Section */
    padding: 75px 0;
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    justify-content: center; /* Inhalt vertikal zentrieren */
    align-items: center; /* Inhalt horizontal zentrieren */
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design für SmartPhones*/
    .sub-container-was { /* Was wir leisten */
        width: 80%; /* Volle Breite im Hochformat */
        margin: 0 auto;
        /* padding: 10px; */
        /* background-color: lightblue; TEST: Andere Hintergrundfarbe für Portrait */
    }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design für SmartPhones*/
    .sub-container-was { /* Was wir leisten */
        width: 75%; /* Weniger Breite im Querformat */
        margin: 0 auto; /* Zentriert den Container */
        /* padding: 20px; */
        /* background-color: lightcoral; TEST: Andere Hintergrundfarbe für Landscape */
    }
}
.sub-container-was h2 { /* Was wir leisten */
    font-size: 24px;
    font-weight: bold;
    margin-top: 0px;
    padding-left: 10px;
    margin-bottom: 0px;
}
.sub-container-was h3 { /* Was wir leisten */
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    padding-left: 20px; /* Innenabstand */
    margin-bottom: 20px;
}
.sub-container-was p { /* Was wir leisten */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.3; /* Zeilenabstand */
    padding-left: 0px; /* Innenabstand */
    margin-bottom: 10px; /* Abstand nach unten */
}
.sub-container-was ul { /* Was wir leisten */
    list-style: disc; /* runder Bulletpoint */
    list-style-position: outside; /* Bullet Point */
    padding-left: 0; /* Entfernt Standard-Einrückung */
    margin-left: 0; /* Entfernt Standard-Margin */
}
.sub-container-was li { /* Was wir leisten */
    /*align-items: flex-start; /* Inhalt horizontal zentrieren */
    font-size: 20px; /* Schriftgröße */
    line-height: 2; /* Zeilenabstand */
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px; /* Abstand nach unten */
}
.info-list {
    list-style: none;
    padding: 0;
    margin: 20px;
}
.list-item-content {
    position: relative;
    cursor: pointer;
    padding: 5px 0;
    transition: all 0.3s ease;
}
.list-item-content:hover {
    text-decoration: underline;
}
.info-icon {
    color: #57a7b3;
    margin-left: 10px;
    cursor: pointer;
}
.global-info-box {
    display: none; /* Box ist initial unsichtbar */
    position: fixed; /* Fixiert, damit sie immer sichtbar ist */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert die Box */
    width: 300px;
    height: 400px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Sicherstellen, dass der Text innerhalb bleibt */
    overflow: auto; /* Aktiviert Scrollen bei Überlauf */
    word-wrap: break-word; /* Bricht lange Wörter */
    text-overflow: ellipsis; /* Zeigt Auslassungspunkte bei Überlauf (optional) */
    font-size: 16px; /* Schriftgröße hier hinzufügen */
    font-weight: normal; /* Fette Schrift ausschalten */
}
.global-info-box.visible {
    display: block;
}
.info-content {
    display: block; /* Standardmäßig unsichtbar */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
    color: #333; /* Textfarbe */
    text-align: left; /* Linksbündige Ausrichtung des Textes */
    margin: 0; /* Entfernt Standard-Margin */
    padding: 0; /* Entfernt Standard-Padding */
    padding-top: 20px; /* Optional zusätzlicher Abstand oberhalb des Inhalts */
    word-wrap: break-word; /* Längere Wörter umbrechen */
    z-index: 150; /* Darstellungsebene */
    overflow-y: auto; /* Falls der Inhalt länger ist als die Box, scrollen */
    max-height: 80%; /* Optional: Maximalhöhe des Textbereichs innerhalb der Box */
}
.info-content:not(.global-info-box .info-content) {
    display: none; /* Versteckt alle Info-Inhalte außerhalb der global-info-box */
}
.info-content .line {
    display: block; /* Zeile als Blockelement behandeln */
    margin-left: 0.5em; /* Einrückung für den gesamten Text */
    text-indent: -0.6em; /* Hängender Einzug, damit der Text bündig bleibt */
}
.overlay {
    display: none; /* Standardmäßig unsichtbar */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
}
.overlay.visible {
    display: block;
}
/* ****************************************************** */
/*              Section "Wer ist mit dabei"               */
/* ****************************************************** */
.header-wer {  /* Wer ist mit dabei */
    position: sticky; /* Ermöglicht Positionierung von Text innerhalb */
    top: 0;
    width: 100%; /* Nimmt die gesamte Breite ein */
    aspect-ratio: 64 / 6; /* Seitenverhältnis: 16:9 */
    height: auto;
    background-color: rgb(225, 225, 225);
    background-size: cover; /* Bild passt sich an, um den gesamten Bereich abzudecken */
    background-position: center; /* Zentriere das Bild */
    margin: 0; /* Entfernt Abstände */
    padding: 0; /* Entfernt Polsterung */
    margin-bottom: 0px; /* Abstand unter dem Header */
    display: flex; /* Flexbox für einfache Zentrierung */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    z-index: 10;
}
.header-wer h2 { /* Wer ist mit dabei */
    color: #404040; /* Schriftfarbe */
    font-size: clamp(1.6rem, 2.9vw, 3.5rem);
    font-weight: bold; /* Fettschrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatten für bessere Lesbarkeit */
    margin-left: 20px; /* Entfernt Standard-Margin */
}
.sub-container-wer { /* Wer ist mit dabei */
    width: 50%; /* width: 600px; */
    height: auto; /* height: 850px; height: auto;*/
    margin: 0px auto; /* 0px oben und unten, Zentriert innerhalb der Section */
    padding: 75px 0 75px 0; /* Innenabstand */
    background-color: rgb(245, 245, 245); /* Hintergrundfarbe */
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    justify-content: center; /* Inhalt vertikal zentrieren */
    align-items: center; /* Textausrichtung */
    text-align: left;
    box-sizing: border-box; /* Padding wird in Breite/Höhe einbezogen */
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design für SmartPhones*/
    .sub-container-wer { /* Wer ist mit dabei */
        width: 90%; /* Volle Breite im Hochformat */
        margin: 0 auto;
        /* padding: 10px; */
        /* background-color: lightblue; TEST: Andere Hintergrundfarbe für Portrait */
    }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design für SmartPhones*/
    .sub-container-wer { /* Wer ist mit dabei */
        width: 90%; /* Weniger Breite im Querformat */
        margin: 0 auto; /* Zentriert den Container */
        /* padding: 20px; */
        /* background-color: lightcoral; TEST: Andere Hintergrundfarbe für Landscape */
    }
}
.sub-container-wer h2 { /* Wer ist mit dabei */
    font-size: 24px;
    font-weight: bold;
    /*margin-top: 75px;*/
    margin-bottom: 30px;
    padding-left: 20px;
}
.sub-container-wer h3 { /* Wer ist mit dabei */
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 2px;
    padding-left: 20px; /* Innenabstand */
}
.sub-container-wer p { /* Wer ist mit dabei */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.3; /* Zeilenabstand */
    padding-left: 20px; /* Innenabstand */
    margin-bottom: 10px; /* Abstand nach unten */
}
.sub-container-wer ul { /* Wer ist mit dabei */
    list-style: none; /* kein Bulletpoint */
    list-style-position: inside; /* Bullet Point */
    padding-left: 0; /* Entfernt Standard-Einrückung */
    margin-left: 0; /* Entfernt Standard-Margin */
}
.sub-container-wer li { /* Wer ist mit dabei */
    text-align: left;
    line-height: 1.7; /* Zeilenabstand */
    margin-top: 0px;
    margin-bottom: 0px; /* Abstand nach unten */
}
/* ***************************************************** */
/*            Section "Wie erreichen Sie uns"            */
/* ***************************************************** */
.header-wie {  /* Wie erreichen sie uns */
    position: sticky; /* Ermöglicht Positionierung von Text innerhalb */
    top: 0;
    width: 100%; /* Nimmt die gesamte Breite ein */
    aspect-ratio: 64 / 6; /* Seitenverhältnis: 16:9 */
    height: auto;
    background-color: rgb(225, 225, 225);
    background-size: cover; /* Bild passt sich an, um den gesamten Bereich abzudecken */
    background-position: center; /* Zentriere das Bild */
    margin: 0; /* Entfernt Abstände */
    padding: 0; /* Entfernt Polsterung */
    margin-bottom: 0px; /* Abstand unter dem Header */
    display: flex; /* Flexbox für einfache Zentrierung */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    z-index: 10;
}
.header-wie h2 { /* Wie erreichen sie uns */
    color: #404040; /* Schriftfarbe */
    font-size: clamp(1.6rem, 2.9vw, 3.5rem); /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatten für bessere Lesbarkeit */
    margin-left: 20px; /* Einrücken links */
}
.sub-container-wie { /* Wie erreichen sie uns */
    width: 50%;
    height: auto;
    background-color: rgb(245, 245, 245); /* Hintergrundfarbe */
    /*border: 1px solid #1ed7af; /* Optionaler Rahmen */
    margin: 0px auto; /* Zentriert innerhalb der Section */
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    justify-content: flex-start; /* Inhalt vertikal zentrieren */
    align-items: center; /* Inhalt horizontal zentrieren */
    padding: 50px 0 50px 0; /* Innenabstand */
    text-align: left; /* Text links */
    position: relative;
}
@media (max-width: 600px) { /* Responsive Design für "Wie erreichen sie uns*/
    .sub-container-wie {
        width: 90%;
        height: auto; /* Passt die Höhe an den Inhalt an */
    }
    .contact-details,
    .container-qrcode,
    .container-form {
        display: flex; /* Sicherstellen, dass Flexbox aktiviert ist */
        flex-direction: column; /* Stapelt die Elemente untereinander */
        align-items: center;
        justify-content: center; /* Zentriert vertikal, wenn sie gestapelt sind */
        width: 100%; /* Volle Breite für kleinere Bildschirme */
        height: auto; /* Dynamische Höhe */
        /*background-color: lightblue; /* hintergrund bei true*/
    }
    .container-qrcode {
        display: none !important;
    }
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design für SmartPhones*/
    .container-qrcode {
        display: none !important;
    }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design für SmartPhones*/
    .container-qrcode {
        display: none !important;
    }
}
.sub-container-wie h2 { /* Wie erreichen sie uns */
    margin: 0; /* Entfernt Standardabstände */
    font-size: 24px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-align: left; /* Textausrichtung */
    margin-bottom: 20px;
    z-index: 0;
}
.sub-container-wie h3 { /* Wie erreichen sie uns */
    font-size: 16px;
    font-weight: bold;
    margin-top: 40px;
    padding-left: 0px;
    margin-bottom: 5px; /* Abstand nach unten */
}
.sub-container-wie p { /* Wie erreichen sie uns */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.4; /* Zeilenabstand */
    padding-left: 0px;
    margin-bottom: 0px; /* Abstand nach unten */
}
.contact-header { /* Wie erreichen sie uns */
    display: flex;
    flex-wrap: wrap; /* Erlaubt das Umbrechen der Section */
    justify-content: center; /* space-between Platzierung mit Abstand */
    align-items: last baseline;
    width: 100%; /* Nimmt die gesamte Breite des übergeordneten Containers ein */
    height: auto;
    /*border: 1px solid #de1919; /* Optionaler Rahmen */
}
.contact-details { /* Wie erreichen sie uns */
    width: 300px; /* Breite */
    height: 300px; /* Höhe 300px*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid #180303; /* Optionaler Rahmen */
    z-index: 5;
}
.contact-info { /* Wie erreichen sie uns */
    padding-right: 20px; /* Abstand zum QR-Code*/
}
.contact-info a {
    color: #57a7b3;
}
.container-qrcode { /* Wie erreichen sie uns */
    width: 150px; /* Breite */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid #180303; /* Optionaler Rahmen */ 
    z-index: 5;
    overflow: hidden; /* Überlaufenden Inhalt ausblenden */
}
.qr-code img { /* Wie erreichen sie uns */
    max-width: 100%; /* Passt die Breite des Bildes an den Container an */
    max-height: 100%; /* Passt die Höhe des Bildes an den Container an */
    object-fit: contain; /* Behält das Seitenverhältnis des Bildes */
}
.highlight-letter { /* Energie optimal nutzen */
    font-weight: bold;
    color: #57a7b3; /* Farbe der Buchstaben */
}
.container-form { /* Wie erreichen sie uns */
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid #ea1236; /* Optionaler Rahmen */ 
    z-index: 5;
}
.request-form { /* Wie erreichen sie uns */
    width: 100%;
    height: 100%;
    padding: 0px 0px; /* Oben/Unten: 20px, Links/Rechts: 40px */
    /*border: 1px solid #080b53; /* Optionaler Rahmen */ 
}
.request-form label { /* Wie erreichen sie uns */
    display: block;
    margin-bottom: 3px;
}
.request-form input,
.request-form textarea { /* Wie erreichen sie uns */
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgb(225, 225, 225);
    border: 1px solid #797979;
    border-radius: 5px;
}
.request-form button { /* Wie erreichen sie uns */
    background-color: rgb(225, 225, 225);
    font-size: 14px; /* Schriftgröße */
    color: #070707;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.request-form button:hover { /* Wie erreichen sie uns */
    background-color: #57a7b3; /* Button Farbe bei hover */
    color: #f5f5f5; /* Textfarbe bei hover */
}
.special-field { /* versteckte Datenfelder um BOTS auszuklammern*/
    position: absolute;
    left: -9999px;
    visibility: hidden;
}
/* ***************************************************** */
/*       Overlay Impressum & Datenschutzerklärung        */
/* ***************************************************** */
.overlay-legal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.overlay-legal.hidden {
    display: none;
}
.header-legal {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    /*border: 1px solid #000;/* */
}
.overlay-legal-content {
    background-color: #ffffff;
    color: #000000;
    width: 50%;
    padding: 20px; /* Rahmen aussen herum*/
    border-radius: 8px;
    overflow-y: auto;
    max-height: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1500;
    /*border: 2px solid #20e966;/* */
}
.overlay-legal-content h2 { /* Information */
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.overlay-legal-content h3 { /* Information */
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.overlay-legal-content p { /* Information */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.5; /* Zeilenabstand */
    margin-bottom: 5px; /* Abstand nach unten */
    padding-left: 10px; /* Text links einrücken */
}
.overlay-legal-content a { /* Information */
    color: #57a7b3; /* Blau für Links */
    text-decoration: none;
}
.overlay-legal-content ul { /* Information */
    list-style-position: inside; /* Bullet Point bleibt innerhalb des Listenbereichs */
    padding-left: 0; /* Entfernt Standard-Einrückung */
    margin-left: 0; /* Entfernt Standard-Margin */
}
.overlay-legal-content li { /* Information */
    padding-left: 10px; /* Text der Punkte einrücken, Bullet bleibt links */
    line-height: 1.5; /* Zeilenabstand */
    margin-bottom: 5px; /* Abstand nach unten */
}
li.tab-beibullet { /* Information */
    list-style: disc inside;
    text-indent: -0.85em;
    line-height: 1.5;
    margin-left: 1.4em; /* Zweite Zeile einrücken */
    padding-left: 0;
}
/* Portrait (Hochformat) iPhone */
@media (max-width: 414px) and (orientation: portrait) { /* Responsive Design für SmartPhones */
   .overlay-legal-content {
        width: 95vw;
    }
}
/* Landscape (Querformat) iPhone */
@media (max-width: 896px) and (orientation: landscape) { /* Responsive Design für SmartPhones */
    .overlay-legal-content {
        width: 70vw;
    }
}
/* ***************************************************** */
/*                         Footer                        */
/* ***************************************************** */
footer { /* Footer */
    background-color: white;
    border-top: 1px solid black;
    width: 100%;
    display: flex;
    flex-direction: column; /* Ensures legal section appears in a new row */
    align-items: center;
    font-size: 14px;
    color: black;
    padding: 5px 10px 10px 0; /* oben, rechts, unten , links Innenabstand */
    box-sizing: border-box;
    flex-shrink: 0; /* Footer bleibt unten */
    position: sticky; /* Bleibt am unteren Rand des Viewports */
    bottom: 0; /* Fixiert den Footer */
    z-index: 100; /* Rechtecke bleiben hinter dem Footer */
    /*border: 1px solid #12ea44; /* Optionaler Rahmen */
}
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*border: 1px solid #bf12ea; /* Optionaler Rahmen */
}
.footer-logos { /* Footer */
    display: flex;
    gap: 30px; /* Abstand zwischen den Logos */
    align-items: center;
    /*border: 1px solid #ea1236; /* Optionaler Rahmen */ 
}
.logo { /* Footer */
    height: 50px; /* Einheitliche Höhe */
    width: auto; /* Automatische Breite basierend auf dem Seitenverhältnis */
}
.footer-logos img:first-child { /* Footer */
    margin-left: 20px; /* Abstand für das erste Logo */
}
.footer-links { /* Footer */
    display: flex;
    justify-content: right;
    font-size: clamp(0.9rem, 1.2vw, 1.5rem);
    gap: 20px; /* Abstand zwischen den Links */
    margin-top: 5px;
    width: auto;
    /*border: 1px solid #060505; /* Optionaler Rahmen */ 
}
.footer-legal-wrapper {
    display: flex;
    justify-content: center;
    width: auto;
    margin-top: 5px;
    /*border: 1px solid #12caea; /* Optionaler Rahmen */ 
}
.footer-legal {
    display: flex;
    gap: 1rem;
}
.footer-legal-link {
    text-decoration: none;
    color: inherit;
    font-size: 0.7rem;
}
.footer-legal-link:hover {
    text-decoration: underline;
}
.hamburger-menu { /* Footer */
    display: none; /* Standardmäßig ausblenden */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin: 10px;
}
@media (max-width: 620px) { /* Responsive Design für Footer*/
    .footer-links {
        display: none; /* Verstecke die Links */
        flex-direction: row; /* Optional für das Dropdown-Layout */
        background-color: rgb(244, 244, 244); /* Hintergrund für das Dropdown-Menü */
        border: 1px solid black;
        border-radius: 5px;
        position: fixed; /* Überlagerung */
        bottom: 82px; /* Abstand vom Hamburger-Button */
        right: 0px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 5px;
        z-index: 100;
    }
    .footer-links a {
        margin: 0px 0px; /* Abstand zwischen den Links im Dropdown */
    }
    .hamburger-menu {
        display: block; /* Zeige den Hamburger-Button */
    }
    .footer-links.active {
        display: flex; /* Zeige die Links im Dropdown-Menü */
    }
}
.footer-links a {
    color: black;
    text-decoration: none; /* Entfernt die Unterstreichung */
}
.footer-links a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
}