/* Grundlegende Stile */
html {
    height: auto;
}

body {
    font-family: Arial, sans-serif; /* Professionelle Schrift */
    margin: 0; /* Ensure no space around the body */
    padding: 0; /* Remove padding */
    box-sizing: border-box;
    /*overflow-x: hidden;*/
}

html, body {
    margin: 1px; /* Entfernt äußeren Rand */
    padding: 0; /* Entfernt inneren Abstand */
    box-sizing: border-box; /* Padding und Margin einbeziehen */
    overflow-x: hidden; /* Horizontales Scrollen vermeiden */
}

.background {
    max-width: 1500px;
    margin: 0 auto;
    background-color: rgb(247, 249, 253); /* Helles Weiß mit Blaustich */
    min-height: 1200px;
    z-index: 1;
    position: relative;
}

.language-bar { 
    left: 0px;          
    /*right: 0px;*/       
    background-color: rgba(255, 255, 255, 0.95); 
    /*padding: 2px 10px;*/ 
    /*font-size: 14px;*/ 
    /*font-family: Arial, sans-serif;*/ 
    /*border-radius: 5px;*/ 
    /*z-index: 5;*/ 
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    /*margin-bottom: 10px;*/
    /*margin-top: 10px; /* schiebt sie höher im Header */ 
    position: relative;
    text-align: center;     /* Links zentrieren */
    /*width: 100%;*/
    /*box-sizing: border-box;*/
    /*padding: 4px 56px 4px 10px; /* rechts Platz fürs Icon */
    /*overflow: visible;*/   
}

.language-bar a {
    text-decoration: none; /* Entfernt Unterstreichung */
    color: rgb(0, 60, 110); /* Dunkelblau für Links */
    /*margin: 0 8px; /* Abstand zwischen Links */
    font-weight: bold;
}

.language-bar a:hover {
    color: rgb(0, 30, 60); /* Leicht dunkler bei Hover */
}

.language-bar span {
    color: rgb(80, 80, 80); /* Dezente Farbe für den Separator */
    margin: 0 4px; /* Platz um den Separator herum */
}

/* Slogan Bar */
.slogan-bar {
    max-width: 1090px; /* Begrenzung der maximalen Breite */
    margin: 0 auto; /* Zentriert die Slogan-Bar horizontal */
    overflow-wrap: break-word;
    white-space: normal;
    align-items: center;
    display: flex;
    background-color: rgb(247, 249, 253);
    font-size: 36px;
    font-weight: bold;
    height: auto;
    min-height: 100px;
    width: 100%;
    position: relative; /* Notwendig für z-index */
    z-index: 10; /* Sicherstellen, dass es hinter .menu-icon liegt */
    text-align: center;
}

/* Slogan-Text */
.slogan {
    max-width: 1040px; /* Begrenzung des Textbereichs */
    margin: 0 auto;
    text-align: center;
    color: rgb(0, 60, 110);
    font-size: 30px;
    font-family: 'Nunito', sans-serif; /* Super abgerundete Schriftart */
    font-weight: 700; /* Fett dargestellt */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    /*letter-spacing: 1px; /* Optional: Buchstaben leicht auseinanderziehen */
    padding: 10px 20px; /* Abstand für einen sanften Look */
    border-radius: 10px; /* Abgerundete Ecken */    
}

.menu-icon div {
    width: 30px;
    height: 3px;
    background-color: rgb(0, 60, 110);
}

.menu-toggle {
    display: none; /* Versteckt die Checkbox vollständig */
}

.hidden {
    display: none; /* Element wird vollständig unsichtbar */
}

/* Hover-Effekt für Hamburger-Button */
.menu-icon:hover span {
    background-color: rgb(60, 90, 130); /* Farbänderung bei Hover */
}

/* Anpassung für Smartphones */

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
    .slogan {
        font-size: 1.8rem;       /* Größer für kleine Displays */
        line-height: 1.3;
    }
}

/* Anpassung für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .slogan {
        font-size: 1.6rem;
    }
}

#hamburger-menu {
    display: none;
    flex-direction: column; 
    position: absolute;
    top: 50px; /* Weniger Abstand nach oben */
    right: 10px; /* Etwas näher am Rand */
    background-color: rgb(0, 60, 110);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 8px; /* Weniger Innenabstand */
    z-index: 1000;
}

#hamburger-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#hamburger-menu li {
    margin: 8px 0; /* Weniger vertikaler Abstand */
}

#hamburger-menu a {
    color: rgb(200, 200, 200);
    text-decoration: none;
    padding: 8px 0; /* Weniger Abstand zwischen den Links */
    font-weight: bold;
    font-size: 14px; /* Kleinere Schriftgröße */
    display: block;
}

/* Hover-Effekt für Links im Menü */
#hamburger-menu a:hover {
    background-color: #004080; /* Dunkleres Blau bei Hover */
    color: rgb(220, 220, 220); /* Etwas hellerer Grauton bei Hover */
    border-radius: 5px; /* Abgerundete Ecken beim Hover */
}

/* Hamburger-Menü Responsivität */
@media screen and (max-width: 768px) {
    #hamburger-menu {
        top: 10px; /* Menü weiter nach oben schieben */
        right: 4px; /* Nähe des Randes anpassen */
        width: 60%; /* Menübreite flexibler machen */
    }

    #hamburger-menu a {
        font-size: 14px; /* Schriftgröße für kleinere Bildschirme */
        padding: 8px 0; /* Vertikalen Abstand optimieren */
    }
}

@media screen and (max-width: 768px) {
    .menu-icon {
        width: 50px;
        height: 50px;
        padding: 5px;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center; /* Vertikale Zentrierung der Striche */
        justify-content: center; /* Horizontale Zentrierung der Striche */
    }

    .menu-icon span {
        width: 40px;
        height: 6px;
        margin: 3px 0;
        background-color: rgb(0, 60, 110); /* Farbe der Striche */
        display: block;
        border-radius: 3px; /* Abgerundete Striche */
    }
}

/* Noch kleinere Anpassungen für Smartphones */
@media screen and (max-width: 480px) {
    .menu-icon {
        width: 45px; /* Kleinere Breite für Smartphones */
        height: 45px; /* Kleinere Höhe für Smartphones */
        padding: 4px; /* Innenabstand reduzieren */
    }

    .menu-icon span {
        width: 30px; /* Kleinere Breite der Linien */
        height: 3px; /* Kleinere Höhe der Linien */
        margin: 2px 0; /* Weniger Abstand zwischen den Linien */
    }
}

/* Menü sichtbar machen, wenn Checkbox aktiviert ist */
.menu-toggle:checked + .menu-icon + #hamburger-menu {
    display: flex;
    background-color: rgb(0, 60, 110);
    color: #ffffff;
    border-radius: 8px;
}


.menu-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    cursor: pointer;
    position: absolute;
    right: 10px;            /* an den rechten Rand */
    top: 50%;               /* vertikal mittig in der language-bar */
    transform: translateY(-50%);
    margin-left: 0;         /* evtl. vorhandenes auto entfernen */
}

.menu-icon span {
    display: block; /* Macht <span> wie ein Block-Element */
    width: 35px; /* Breite der Striche */
    height: 5px; /* Höhe der Striche */
    border-radius: 2px; /* Abgerundete Striche */
    background-color: rgb(0, 60, 110); /* Blaue Farbe für die Striche */
    margin: 80px auto; /* Abstand zwischen den Strichen */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Weiche Übergänge */
}


/* Checkbox, um das Menü sichtbar zu machen */
.menu-toggle:checked + .menu-icon + #hamburger-menu {
    display: flex; /* Menü sichtbar */
}

.header-container {
    position: relative; /* Ermöglicht die absolute Positionierung der Language-Bar */
    max-width: 1080px; /* Begrenzung der maximalen Breite */
    margin: 0 auto; /* Zentriert den gesamten Header-Container */
    text-align: center; /* Zentriert den Inhalt */
}

.header-image {
    width: 100%; /* Nimmt die gesamte Breite des Containers ein */
    max-width: 1080px; /* Begrenzung der maximalen Breite */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    display: block; /* Korrekte Blockdarstellung */
    margin: 0 auto; /* Zentriert das Bild */
    object-fit: cover; /* Schützt das Seitenverhältnis, schneidet ggf. Teile ab */
    object-position: center; /* Zentriert das Bild-Inhalt */
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .header-container {
        height: auto; /* Automatische Höhe, damit es sich an den Inhalt anpasst */
        margin: 0 auto; /* Zentriert das Header-Image */
    }

    .header-image {
        width: 100%; /* Bild füllt die Breite des Viewports */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
        object-fit: cover; /* Verhindert Verzerrungen */
        object-position: center top; /* Positioniert das Bild oben zentriert */
    }
}

@media (max-width: 480px) {
    .header-container {
        height: auto; /* Gleiche automatische Höhe für sehr kleine Bildschirme */
        margin: 0 auto; /* Zentrierung bleibt erhalten */
    }

    .header-image {
        width: 100%; /* Breite bleibt bei 100% */
        height: auto; /* Seitenverhältnis bleibt erhalten */
        object-fit: cover; /* Verhindert Verzerrungen */
        object-position: center top; /* Positioniert das Bild oben zentriert */
    }
}

    .language-bar {
        font-size: 12px; /* Kleinere Schriftgröße */
        padding: 3px 6px; /* Weniger Innenabstand */
        bottom: 5px; /* Näher am unteren Rand */
        right: 5px; /* Näher am rechten Rand */
    }
    
    .language-bar a {
        margin: 0 6px; /* Weniger Abstand zwischen Links */
    }

    .language-bar span {
        margin: 0 2px; /* Weniger Abstand um Separatoren */
    }


@media (max-width: 480px) {
    .language-bar {
        font-size: 8px; /* Noch kleinere Schriftgröße */
        padding: 1px 2px; /* Geringere Abstände */
        bottom: 0; /* Näher am unteren Rand */
        right: 1px; /* Näher am rechten Rand */
    }
    
    .language-bar a {
        margin: 0 1px; /* Minimaler Abstand zwischen Links */
    }

    .language-bar span {
        margin: 0 1px; /* Minimaler Abstand um Separatoren */
    }
}

.hero-container {
  width: 100%;
  max-width: 1079px;     /* maximale Gesamtbreite */
  margin: 0 auto;        /* zentriert das Banner horizontal */
  overflow: hidden; /* Verhindert, dass etwas übersteht */
  margin-bottom: 20px;
}

.hero-banner {
  width: 100%;
  max-height: 350px;           /* du kannst 500–600 px testen */
  object-fit: cover;           /* füllt Container ohne Verzerrung */
  object-position: center top; /* Fokus auf obere Bildhälfte */
  display: block;
}

/* Navigationsleiste mit Icons */
.nav-icons {
    display: flex; /* Icons nebeneinander anordnen */
    justify-content: center; /* Zentriert die Icons horizontal */
    align-items: flex-start; /* Verhindert unerwünschte vertikale Abstände */
    padding: 15px 0; /* Entfernt Innenabstände */
    margin: 10px auto; 
    gap: 50px;
}

/* Icons */
.nav-icons img {
    /*width: 120px;*/
    width: 100%;
    display: block; /* Entfernt zusätzliche Abstände durch Inline-Elemente */
    /*max-width: 100%;*/
    max-width: 125px;
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    margin: 0; /* Entfernt alle Außenabstände */
    /*padding: 0; /* Entfernt alle Innenabstände */
    /*object-fit: contain; /* Beibehaltung der Bildproportionen */
}

.nav-icons a {
    display: inline-flex; /* Behebt unnötige Inline-Abstände */
    align-items: center; /* Zentriert das Icon im Link */
    justify-content: center;
    margin: 0; /* Entfernt Außenabstände */
    padding: 0; /* Entfernt Innenabstände */
}

/* Hover-Effekt für Icons */
.nav-icons img:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Tooltip-Stile */
.nav-icons a[data-tooltip] {
    position: relative; /* Basisposition für Tooltip und Pfeil */
}

.nav-icons a[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 5px); /* Nur 5px Abstand zwischen Icon und Tooltip */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(60, 90, 130);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 8px; /* Innenabstand für den Tooltip-Text */
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    /*pointer-events: none; /* Tooltip nicht klickbar */
    z-index: 10; /* Sicherstellen, dass Tooltip über Icons bleibt */
}

.nav-icons a[data-tooltip]::after {
    content: "";
    position: absolute;
    top: calc(100% + 0px); /* Pfeil direkt unter dem Tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px; /* Größe des Pfeils */
    border-style: solid;
    border-color: rgb(60, 90, 130) transparent transparent transparent; /* Pfeil zeigt nach oben */
    opacity: 0; /* Unsichtbar bis Hover */
    z-index: 10;
}

/* Tooltip und Pfeil sichtbar machen */
.nav-icons a[data-tooltip]:hover::before,
.nav-icons a[data-tooltip]:hover::after {
    opacity: 1; /* Tooltip und Pfeil sichtbar machen */
}

.nav-icons a.active {
    pointer-events: none; /* Aktiver Link ist nicht klickbar */
}

.nav-icons a.active img {
    filter: grayscale(100%); /* Wandelt das Icon in Graustufen um */
    opacity: 0.6; /* Leichte Transparenz */
}

.add-margin {
    margin-top: 20px; /* Passe den Abstand nach Bedarf an */
}

/* Anpassung für Icon-Navigationsbar auf kleinen Displays */
@media (max-width: 768px) {
    .icon-nav-bar {
        margin: 0 5px; /* Abstand von 1,5mm (5px) links und rechts */
    }
}

@media (max-width: 768px) {
    .icon-nav-bar {
        margin: 5px 5px; /* Horizontaler Abstand zum Rand */
        padding: 0; /* Zusätzlicher Innenabstand */
    }
}

/* Main-Titel */
.main-title {
    padding: 10px 15px; /* Reduziert die Höhe */
    max-width: 1040px; /* Maximale Breite */
    margin: 5px auto; /* Zentrierung und Abstand */
    padding: 20px; /* Innenabstände */
    background-color: rgba(0, 60, 110, 0.1); /* Hintergrundfarbe */
    border-radius: 15px; /* Abgerundete Ecken */
    text-align: center; /* Zentriert den Text horizontal */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    font-family: Arial, sans-serif; /* Alternative Schriftart */
    font-size: 28px; /* Schriftgröße */
    font-weight: bold; /* Fettgedruckte Schrift */
    line-height: 1.4; /* Angenehmer Zeilenabstand */
}

/* Main-Titel 2 – kleinere Überschrift ohne Rahmen */
.main-title2 {
  max-width: 1080px;
  margin: 10px auto 0px;         /* kleinerer vertikaler Abstand */
  padding: 0;                  /* kein Innenabstand */
  background: none;            /* kein Hintergrund */
  box-shadow: none;           /* kein Schatten */
  border-radius: 0;           /* keine abgerundeten Ecken */
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 20px;            /* kleiner als main-title (24px) */
  font-weight: bold;
  line-height: 1.3;           /* kompakterer Zeilenabstand */
  color: rgb(0, 60, 110);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
    .main-title {
        font-size: 16px; /* Reduzierte Schriftgröße */
        padding: 8px 12px; /* Weniger Abstand */
    }
}

/* Anpassung für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .main-title {
        font-size: 16px; /* Noch kleinere Schriftgröße für .main-title */
        padding: 6px 10px; /* Minimaler Abstand */
    }
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
  .main-title2 {
    font-size: 16px;
    margin: 6px auto 4px;
  }
}

@media (max-width: 480px) {
  .main-title2 {
    font-size: 15px;
    margin: 4px auto 3px;
  }
}

.text-container {
    max-width: 1000px; /* Maximale Breite wie bei about-image */
    width: 90%; /* Responsive Breite bis maximal 90% des Containers */
    margin: auto; /* Zentriert den Container selbst */
    text-align: left; /* Sicherstellung der Links-Ausrichtung */
}

/* keyword */
.keyword {
    display: block;  
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
    margin: 0;      
    position: relative;
}

.keyword-black {
    display: block;  
    font-size: 16px;
    color: #0a0a0a;
    margin: 0;      
    position: relative;
}

.keyword::before {
  content: "•";
  color: #007bff;
  font-size: 1.1em;
  margin-right: 6px;        /* enger Abstand zum Keyword */
  position: relative;
  top: -1px;
}

.keyword-black::before {
  content: "•";
  color: #0d0d0e;
  font-size: 1.1em;
  margin-right: 6px;        /* enger Abstand zum Keyword */
  position: relative;
  top: -1px;
}

.main-text {
    margin:  auto; /* Centers the container */
    max-width: 960px; /* Defines maximum width for better readability */
    position: relative;
    z-index: 1;
}

.main-text p {
    /*position: relative; /* Ermöglicht die Verwendung von ::before */
    margin: 10px 0; /* Abstand zwischen Absätzen */
    line-height: 1.6; /* Angenehmer Zeilenabstand */
    font-size: 17px; /* Textgröße */
    letter-spacing: 0.3px;   /* Dezente Laufweite für bessere Lesbarkeit */
}

.main-text li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
    padding-left: 25px; /* Add spacing for marker */
    position: relative;
}

.main-text ul {
    padding-left: 20px; /* Einheitliche Einrückung */
    margin: 15px 0; /* Abstand vor und nach der Liste */
    list-style-type: disc; /* Standardsymbol für Listenpunkte */
}

.main-text ul li {
    margin-bottom: 10px; /* Abstand zwischen Listenelementen */
    line-height: 1.5; /* Angenehme Lesbarkeit */
}

/* Impressum-spezifisches Styling */ 
.impressum-text {
    margin-left: 300px; /* Verschiebt die Texte nach rechts */
    font-size: 18px; /* Standard-Schriftgröße für Lesbarkeit */
    line-height: 1.5; /* Angenehmer Zeilenabstand */
    color: #222222; /* Dunkelgrau für professionellen Look */
    text-align: left; /* Standardmäßige Ausrichtung */
}

.impressum-text strong,
.impressum-text b {
    font-weight: bold; /* Sicherstellt, dass der Text fett ist */
    font-size: inherit; /* Gleiche Schriftgröße wie der umgebende Text */
    display: block; /* Zeigt die erste Zeile als Blockelement */
    margin-bottom: 5px; /* Abstand zur nächsten Zeile */
}

@media (max-width: 768px) {
    .impressum-text strong,
    .impressum-text b {
        font-size: 16px; /* Kleiner, aber immer noch deutlich */
    }
}

@media (max-width: 480px) {
    .impressum-text strong,
    .impressum-text b {
        font-size: 14px; /* Noch kleinere Schrift für sehr kleine Geräte */
    }
}

div p.first-example {
    position: relative;
    left: 6cm;
}

.reduced-spacing p {
    margin: 20px 0; /* Alle Absätze innerhalb dieser Gruppe haben nun keinen Standardabstand mehr */
}

/* Arrow symbol for language directions */
.arrow-symbol {
    font-size: 1.2em;
    color: #0056b3;
    margin: 0 5px;
}

/* Anpassungen für kleine Bildschirme */
@media (max-width: 768px) {
    .text-container {
        width: 90%; /* Begrenze die Breite des Containers */
        margin: 0 auto; /* Zentriere den Container horizontal */
        padding: 0 5%; /* Füge Polsterung hinzu, damit der Text nicht zu nah am Rand ist */
        box-sizing: border-box; /* Padding in die Breite einbeziehen */
    }

    .main-text {
        padding: 0; /* Kein zusätzlicher Innenabstand */
        margin: 0; /* Kein Außenabstand */
        text-align: left; /* Links ausgerichtet */
    }

    .report-link {
        font-size: 14px; /* Schriftgröße für kleinere Bildschirme */
        display: block; /* Link auf eigener Zeile */
        word-wrap: break-word; /* Lange Links umbrechen */
        text-align: left; /* Links ausgerichtet */
        margin: 5px 0; /* Vertikaler Abstand zu Keywords */
    }
}

/* Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .text-container {
        width: 100%; /* Nutze die gesamte Breite des Viewports */
        padding: 0 10px; /* Weniger Polsterung für kleine Bildschirme */
    }

    .main-text {
        text-align: left; /* Sicherstellen, dass Text links ausgerichtet bleibt */
    }

    .first-example {
        margin: 8px 0; /* Geringerer Abstand zwischen Absätzen */
        line-height: 1.4; /* Leicht reduzierter Zeilenabstand */
    }

    .report-link {
        font-size: 12px; /* Noch kleinere Schriftgröße für Links */
        margin: 4px 0; /* Weniger vertikaler Abstand */
    }
}

/* Anpassung NUR für study.html */
@media (max-width: 768px) {
    .study-main-text {
        position: relative; /* Ermöglicht die Verschiebung */
        left: -220px; /* Verschiebe den Block nach links */
    }
    }

    .study-main-text .report-link {
        display: block; /* Titel unterhalb des Keywords */
        font-size: 13px; /* Kleinere Schriftgröße */
        margin-top: 5px; /* Kleiner Abstand oberhalb des Links */
        margin-left: 20px; /* Einrückung für bessere Lesbarkeit */
    }

/* Zusätzliche Anpassung für sehr kleine Displays (bis 480px) */
@media (max-width: 480px) {
    .study-main-text {
        left: -220px; /* Beibehalten der Verschiebung */
    }

    .study-main-text .first-example {
        font-size: 12px; /* Noch kleinere Schriftgröße */
        margin-bottom: 10px; /* Weniger Abstand unten */
    }

    .study-main-text .report-link {
        font-size: 12px; /* Noch kleinere Schriftgröße */
        margin-left: 20px; /* Beibehalten der Einrückung */
    }
}


/* Anpassung NUR für work.html */
@media (max-width: 768px) {
    .work-main-text {
        position: relative; /* Ermöglicht die Verschiebung */
        left: -220px; /* Verschiebe den Block nach links */
    }
    }

    .work-main-text .report-link {
        display: block; /* Titel unterhalb des Keywords */
        font-size: 13px; /* Kleinere Schriftgröße */
        margin-top: 5px; /* Kleiner Abstand oberhalb des Links */
        margin-left: 20px; /* Einrückung für bessere Lesbarkeit */
    }

/* Zusätzliche Anpassung für sehr kleine Displays (bis 480px) */
@media (max-width: 480px) {
    .work-main-text {
        left: -220px; /* Beibehalten der Verschiebung */
    }

    .work-main-text .first-example {
        font-size: 12px; /* Noch kleinere Schriftgröße */
        margin-bottom: 10px; /* Weniger Abstand unten */
    }

    .work-main-text .report-link {
        font-size: 12px; /* Noch kleinere Schriftgröße */
        margin-left: 20px; /* Beibehalten der Einrückung */
    }
}

.webdesign-credits {
    text-align: center; /* Zentriert den Text horizontal */
    font-family: 'Nunito', sans-serif; /* Moderne Schriftart */
    font-size: 18px; /* Gute Lesbarkeit */
    font-weight: 600; /* Etwas fett für Sichtbarkeit */
    color: rgb(0, 60, 110); /* Seriöser Dunkelblau-Ton */
    letter-spacing: 1px; /* Leichtes Auseinanderziehen der Buchstaben */
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); /* Leichter Schatten für Tiefe */
    padding: 10px 20px; /* Abstände um den Text */
}

/* Einheitlicher Schatten für alle gewünschten Elemente */
.main-title
{   box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Einheitlicher Schatten */
    color: rgb(0, 60, 110);
}

/*.centered-text-two {
    text-align: center; 
    font-weight: bold;
}*/

.impressum-main {
    font-size: 19px;
    display: flex; /* Aktiviert flexbox */
    justify-content: center; /* Zentriert horizontal */
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.5;
}

.about-de-image,
.about-en-image,
.about-fr-image {
    display: flex; /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Setzt den Inhalt oben ausgerichtet */
    margin: 20px auto; /* Gleichmäßiger Abstand oben und unten */
    /*width: 100%; /* Container nimmt die gesamte Breite ein */
    position: relative; /* Ermöglicht spätere Anpassungen */
    overflow: visible; /* Verhindert Beschneidung */
}

.about-de-image-img,
.about-en-image-img,
.about-fr-image-img {
    max-width: 1000px; /* Maximale Breite des Bildes */
    width: 90%; /* Bild skaliert bis 90% der Containerbreite */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    display: block; /* Verhindert Inline-Abstände */
    margin: 0; /* Keine zusätzlichen Abstände */
}

.impress-de, .brand {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.privacy-main {
    padding-left: 19px; /* Abstand von ca. 5 mm links */
}

.footer {
    color: rgb(0, 60, 110);
    padding: 20px; /* Abstand oben und unten */
    font-family: 'Nunito', sans-serif;
    /*position: relative; /* Standardposition
    z-index: 2; /* Stellt sicher, dass der Footer sichtbar ist */
    text-align: center; /* Zentriert den gesamten Inhalt */
    display: flex; /* Aktiviert Flexbox */
    flex-direction: column; /* Elemente untereinander anordnen */
    align-items: center; /* Zentriert alle Elemente horizontal */
    gap: 10px; /* Abstand zwischen den Elementen */
}

.footer-logo img {
    width: 1040px; /* Erhöht die Breite um 40px (entspricht ca. 2 cm) */
    height: auto; /* Höhe wird proportional angepasst */
    max-width: none; /* Entfernt jegliche maximale Breitenbeschränkung */
    min-width: 0; /* Entfernt jegliche maximale Breitenbeschränkung *
    margin: 0 auto; /* Zentriert das Bild */
    display: block; /* Korrekte Blockdarstellung */
}

.footer-links {
    margin-top: 20px; /* Abstand nach oben vergrössern */
    text-align: center;
}


.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    justify-content: center;
    gap: 22px;
}

.footer-links a {
    color: rgb(0, 60, 110);
    text-decoration: none;
    font-size: 20px;
    font-weight: 550;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #007bff; /* Goldener Farbton für Hover */
}

/* Social-Icons mittig, mit schönem Abstand und einheitlicher Größe */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.footer-social a img {
    width: 60px;
    height: auto;
    margin: 0 10px;
    transition: transform 0.3s ease;
    margin-top: 20px;
}

.footer-social a:hover img {
    transform: scale(1.1); /* Leichte Vergrößerung beim Hover */
}

.footer-bottom {
    text-align: center;
    margin-top: 14px;
    opacity: .9;  /* optional */
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-social img {
    width: 32px;   /* einheitlich */
    height: 32px;
    display: block;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip img.X-icon {
    width: 45px; /* Passe die Breite an */
    height: auto; /* Behalte die Proportionen */
}

.main-text-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.professional-text {
    font-family: 'Roboto', sans-serif; /* Eine serifenlose Schriftart für Klarheit */
    font-size: 16px; /* Angenehme Lesbarkeit */
    line-height: 1.7; /* Angemessener Zeilenabstand */
    color: #333333; /* Dunkles Grau für einen professionellen Look */
    margin-bottom: 20px; /* Genügend Abstand zwischen den Absätzen */
}

.large-link {
    font-size: 18px;
    font-weight: bold;
    color: #000; /* Optional: Link-Farbe */
    text-decoration: none; /* Optional: Entfernt die Unterstreichung */
}

.larger-text {
    font-size: calc(1em + 8px); /* oder: font-size: [Basisgröße] + 2px */
}

.smaller-footer {
    font-size: 44px; /* kleinere Schrift für Footer-Text */
    margin-top: 48px;
    text-align: center;
}

.first-example {
    margin: 15px 0; /* Konsistenter Abstand */
    padding-left: 20px; /* Einheitliche Einrückung */
    line-height: 1.5; /* Zeilenhöhe */
}

.languages {
    font-size: 30px; /* Kleinere Schriftgröße für die Sprachpaare */
    text-align: center;
    color: rgb(0, 60, 110);
    margin-top: -5px; /* Reduzierter Abstand zur vorherigen Zeile */
    line-height: 1.3;
    text-shadow: 
        1px 1px 0.5px rgba(0, 0, 0, 0.5), 
        -1px -1px 0.5px rgba(255, 255, 255, 0.8), 
        1px 1px 2px rgba(0, 0, 0, 0.3); /* Tiefeneffekt für Text */    
}

.spacing {
    display: block;
    height: 10px; /* Abstand festlegen */
}

.report-link {
    font-weight: bold;
    display: block;
    text-align: left;
    font-size: 18px;
    color: rgb(0, 60, 110);
    text-decoration: none; /* Keine Unterstreichung */
    margin-top: 10px;
    transition: color 0.3s ease, transform 0.3s ease; /* Sanfter Übergang */
}

.report-link:hover {
    color: #007bff; /* Farbe beim Hover (z. B. Blau) */
    text-decoration: underline; /* Unterstreichung beim Hover */
    transform: translateX(5px); /* Verschiebt den Link leicht nach rechts */
}

.responsive-img {
    max-width: 1000px; /* Maximale Breite */
    width: 90%; /* Bild passt sich flexibel an den Container an */
    height: auto; /* Seitenverhältnis bleibt erhalten */
    display: block; /* Verhindert unerwünschte Inline-Abstände */
    margin: 0 auto; /* Zentriert das Bild */
}

@media (max-width: 768px) {
    .footer-logo img {
        position: static; /* Entfernt die Verschiebung nach links */
        width: 40%; /* Verkleinert das Bild auf 60% der Containerbreite */
        max-width: 200px; /* Begrenzung der maximalen Breite */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
        margin: 0 auto; /* Zentriert das Bild */
        display: block; /* Sicherstellung der Block-Darstellung */
    }
}

@media (max-width: 480px) {
    .footer-logo img {
        width: 30%; /* Noch kleinere Breite für sehr kleine Displays */
        max-width: 120px; /* Maximale Breite weiter reduziert */
        height: auto; /* Seitenverhältnis bleibt erhalten */
        margin: 0 auto; /* Zentriert das Bild */
    }
}

@media (max-width: 768px) {
    .footer-logo img {
        position: static; /* Entfernt die Verschiebung nach links */
        width: 40%; /* Verkleinert das Bild auf 60% der Containerbreite */
        max-width: 200px; /* Begrenzung der maximalen Breite */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
        margin: 0 auto; /* Zentriert das Bild */
        display: block; /* Sicherstellung der Block-Darstellung */
    }
}

@media (max-width: 768px) {
    .footer-logo img {
        position: relative; /* Ermöglicht die Verschiebung */
        left: -10px; /* Verschiebt das Bild weiter nach links */
        width: 100%; /* Breite bleibt flexibel */
        max-width: none; /* Keine Begrenzung */
        height: auto; /* Seitenverhältnis bleibt erhalten */
    }
}

@media (max-width: 768px) {
    .footer-links ul {
        padding: 0; /* Entfernt unnötige Polsterungen */
        margin: 0 auto; /* Zentriert die Liste */
        width: 100%; /* Passt die Breite an den Container an */
        box-sizing: border-box; /* Bezieht Polsterungen in die Breite ein */
        text-align: center; /* Zentriert den Text in der Mitte */
    }

    .footer-links ul li {
        display: block; /* Listenelemente untereinander anzeigen */
        margin: 5px 0; /* Abstand zwischen den Elementen */
        width: 100%; /* Stellt sicher, dass die Elemente sich anpassen */
    }

    .footer-links ul li a {
        display: block; /* Links über die gesamte Breite */
        font-size: 16px; /* Reduzierte Schriftgröße */
        padding: 10px; /* Angemessener Innenabstand für Touchscreens */
        text-align: center; /* Text in der Mitte ausrichten */
        text-decoration: none; /* Entfernt Unterstreichungen */
        color: rgb(0, 60, 110); /* Passende Farbe */
        transition: color 0.3s ease; /* Weicher Hover-Effekt */
    }

    .footer-links ul li a:hover {
        color: #007bff; /* Andere Farbe bei Hover */
    }
}

/* Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .footer-links ul {
        width: 100%; /* Nutzt die volle Breite des Displays */
        padding: 0 5%; /* Füge etwas Polsterung hinzu, um den Rand zu vermeiden */
    }

    .footer-links ul li a {
        font-size: 12px; /* Noch kleinere Schriftgröße */
        padding: 8px; /* Weniger Innenabstand */
    }
}

.text-container .main-text ul li {
    position: relative; /* Erforderlich für die Positionierung des Pseudoelements */
    padding-left: 18px; /* Platz für das Viereck */
    margin-bottom: 10px; /* Optional: Abstand zwischen den Listenpunkten */
    line-height: 1.5; /* Sicherstellung der Lesbarkeit */
}

.text-container .main-text ul li::before {
    content: ''; /* Erstellt das schwarze Viereck */
    position: absolute;
    left: 0; /* Positioniert das Viereck links */
    top: 8px; /* Exakte vertikale Ausrichtung (angepasst an Pixel statt em) */
    width: 5px; /* Breite des Vierecks */
    height: 5px; /* Höhe des Vierecks */
    background-color: black; /* Schwarze Farbe */
    border-radius: 0; /* Eckig ohne Rundungen */
}

/* Global angenehmer Zeilenabstand & Absatzabstände */
body { line-height: 1.6; }
p { margin: 0 0 14px; }

/* Listen luftiger machen */
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 10px; }

Haupt-Textbreite begrenzen, damit Zeilen nicht zu lang werden 
.container--narrow { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Icon-Reihe oben/unten mehr Luft */
.icon-row { margin: 24px 0 20px; } 

/* schmale Textspalte*/
.container--narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px 0px 15px;
}

/* normale Absatzabstände, aber nicht zu groß */
p {
  margin: 0 0 10px;
  line-height: 1.6;
}

/* === Sprache oben: Schriftgröße anpassen === */
.language-bar,
.language-bar a,
.language-bar span {
  font-size: 18px;
}

/* === HERO SLIDER (global, für Work & Study) === */
.hero-slider {
  position: relative;
  max-width: 1079px;
  height: 350px; /* gewünschte Bannerhöhe (Desktop) */
  margin: 0 auto 20px auto;
  overflow: hidden;
  border-radius: 10px;
  z-index: 1;
  background-color: #f6f8fb; /* leicht neutraler Hintergrund bei Ladeverzögerung */
}

/* Jede Slide wird übereinandergelegt */
.hero-slider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease;
}

/* Aktives Slide sichtbar */
.hero-slider .slide.is-active {
  opacity: 1;
}

/* Bildanpassung für <picture> + <img> */
.hero-slider picture,
.hero-slider img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
}

/* === CTA-Buttons === */
.hero-cta {
  display: inline-block;
  padding: 14px 28px;
  background-color: rgba(0,60,110,.8);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .3s ease, transform .3s ease;
}

.hero-cta:hover {
  background-color: rgb(0,60,110);
}

/* CTA im Slider: zentriert + Animation */
.hero-slider .hero-cta {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}
.hero-slider .hero-cta:hover {
  transform: translateX(-50%) scale(1.05);
}

/* CTA im Textbereich (außerhalb Slider) */
.cta-wrapper .hero-cta {
  position: static;
  transform: none;
}
.cta-wrapper .hero-cta:hover {
  transform: scale(1.05);
}

/* === Mobile Optimierung === */
@media (max-width: 768px) {
  .hero-slider { height: 240px; }
  .hero-cta { padding: 10px 20px; font-size: 0.95rem; }
}

/* === Kleinere Smartphones === */
@media (max-width: 480px) {
  .hero-slider { height: 200px; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slide { transition: none; }
}

/* === Reset (rechte Winkel) === */
.hero-slider,
.hero-slider .slide,
.hero-slider img,
.hero-slider picture {
  border-radius: 0;
}


/* Container */
section.apply-section {
  max-width: 760px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: system-ui, Arial, sans-serif;
  color: #222;
}

/* Überschrift */
section.apply-section h2 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

/* Formularelemente */
form label {
  display: block;
  margin-top: 0.1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
  text-align: left;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="date"],
form select,
form input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Gruppierungen */
fieldset {
  border: none;
  margin: 1.2rem 0;
  padding: 0;
}

/* Legenden linksbündig wie Labels */
legend {
  font-weight: 700;
  display: block;
  margin: 0 0 0.3rem 0;   /* gleiche linke Ausrichtung wie label */
  padding: 0;
}


/* Checkbox + Datenschutz */
form .consent {
  margin-top: 1rem;
}

form .consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: normal;
  line-height: 1.4;
}

form .consent input[type="checkbox"] {
  margin-top: 0.2rem;
}

/* Submit-Button */
button[type="submit"] {
  background-color: #005fcc;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1.2rem;
}

button[type="submit"]:hover {
  background-color: #004b99;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  text-decoration: none;   /* ← entfernt die Unterstreichung */
  color: #0066cc;
  font-size: 0.95rem;
}

.back-link:hover {
  text-decoration: none;   /* ← bleibt auch beim Hover ohne Unterstreichung */
  color: #004b99;           /* optional: beim Hover etwas dunkler */
}

.consent-label {
  display: flex;
  align-items: center;   /* vertikal mittig ausrichten */
  gap: 0.5rem;           /* Abstand zwischen Checkbox und Text */
  font-weight: normal;
  line-height: 1.4;
}

.consent-label input[type="checkbox"] {
  margin: 0;             /* entfernt den Standardabstand oben */
}

/* Wrapper */
.file-input {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: .4rem .5rem;
}

/* echtes Input unsichtbar, aber zugänglich über Label */
.file-input input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Button-Stil (an deinen .hero-cta angelehnt) */
.file-btn {
  background: #005fcc;
  color: #fff;
  padding: .45rem .9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .95rem;
  user-select: none;
}

.file-btn:hover { background: #004b99; }

/* Dateiname/Placeholder */
.file-name {
  color: #666;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inhaltstitel */
main.container.main-text h1 {
  font-size: 31px;        /* Schriftgröße */
  text-align: center;     /* zentriert */
  color: rgb(0, 60, 110); /* optional: gleiche Farbe wie dein Design */
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Mobile-Anpassung: Inhaltstitel kleiner auf kleinen Displays */
@media (max-width: 768px) {
  main.container.main-text h1 {
    font-size: 22px;     /* statt 31px */
    line-height: 1.3;    /* bessere Lesbarkeit auf engem Raum */
    margin-top: 8px;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  main.container.main-text h1 {
    font-size: 18px;     /* für sehr kleine Bildschirme */
  }
}

section.content-section h2 {
font-size: 18px;        /* kleinere Schriftgröße */
text-align: auto;
color: rgb(0, 60, 110); /* optional: gleiche Farbe wie dein Design */
margin-top: 10px;
margin-bottom: 10px;
}

/* === Mobile-Anpassung: kleinere Social Icons === */
/* Mobile: smaller social icons */
@media (max-width: 600px) {
  .footer-social { gap: 8px; }                     /* optional tighter spacing */
  .footer-social a img,
  .footer-social img {
    width: 22px;
    height: 22px;
    margin: 4px;                                   /* optional */
  }
}

/* --- Mobile-Abstand für Textbereiche --- */
@media (max-width: 768px) {
  .main-text {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .main-text {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Hero-Slider: Slides überlagern, Bilder füllen den Container */
.hero-slider { 
  position: relative;
  overflow: hidden;
  max-width: 1079px;
  height: 350px;              /* Desktop-Höhe */
  margin: 0 auto 16px;        /* unterer Abstand kleiner */
  border-radius: 10px;
}

.hero-slider .slide {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left:0 */
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-slider .slide.is-active { opacity: 1; }

/* <picture> und <img> müssen die Box ausfüllen */
.hero-slider picture,
.hero-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Mobile enger: geringere Höhe & Abstand */
@media (max-width: 768px){
  .hero-slider { height: 240px; margin-bottom: 8px; }
}