/* HEADER */

  .lang-switch {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.85rem;
  font-family: sans-serif;
  opacity: 0.6;
  z-index: 10;
}

.lang-switch a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.3em;
  transition: opacity 0.2s ease;
}

.lang-switch a:hover {
  opacity: 1;
  text-decoration: underline;
}

#header {
  height: 12vh;
  display: flex; 
  justify-content: center; 
  align-items: center;
  position: fixed; 
  top: 0; 
  left: 0;
  width: 100%; 
  z-index: 998;
  cursor: default; 
  transition: transform .5s .2s ease-in-out; 
  background-color: rgba(246, 244, 244, 1); 
  box-shadow: rgba(200, 200, 200, 0.4) 0px 2px 4px; 
}

/* FLEXBOX-LAYOUT FÜR DEN CONTAINER */
.flex-head {
  height: 12vh; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 0 auto;
  width: 95%; 
}

.flex-head h1{
  letter-spacing: 0.2em;
  color: #333 !important; 
  margin: 0;
}
	
.flex-head h1:hover{
  color: #000;
}

/*LINKS IM HEADER */
#header a {
  color: #555; /* Ändert die Textfarbe der Links zu einem dunklen Grau für besseren Kontrast */
  border-bottom: 0; /* Keine untere Rahmenlinie für Links */
  font-size: 1em; /* Schriftgröße der Links */
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* HOVER-EFFEKT FÜR LINKS IM HEADER */
#header a:hover {
  color: #555; /* Ändert die Textfarbe der Links beim Hover zu einem mittleren Grau */
  font-weight: 300;
}

/* LINK ZUM NAVIGATIONSPANEL IM HEADER */
#header a[href="#navPanel"] {
  text-decoration: none; /* Keine Unterstreichung der Links */
  display: none; /* Standardmäßig nicht angezeigt */
  position: absolute; /* Absolute Positionierung des Links */
  right: 4%; /* Abstand vom rechten Rand */
  top: 4vh; /* Abstand vom oberen Rand */
}

/* ICON DES NAVIGATIONSPANELS IM HEADER */
#header a[href="#navPanel"]:before {
  display: inline-block; /* Inline-Block-Element für das Icon */
  font-size: 1.5rem; /* Schriftgröße des Icons */
  color: #666; /* Ändert die Farbe des Icons zu einem mittleren Grau */
  font-style: normal; /* Normaler Schriftstil */
  font-variant: normal; /* Normale Schriftvariante */
  text-rendering: auto; /* Text-Rendering */
  text-transform: none !important; /* Keine Texttransformation */
  font-family: 'FontAwesome'; /* Schriftart für das Icon */
  content: '\f0c9'; /* Inhalt des Icons (Hamburger-Menü-Symbol) */
  line-height: inherit; /* Zeilenhöhe des Icons erben */
}

/* LISTE IM FLEXIBLEN CONTAINER */
.flex-head>nav>ul {
  display: flex; /* Flexbox-Layout für die Liste */
  align-items: center; /* Zentrierung der Listenelemente */
  justify-content: center; /* Zentrierung der Listenelemente */
  list-style-type: none; /* Keine Aufzählungszeichen für die Liste */
}

/*LISTENELEMENTE IM FLEXIBLEN CONTAINER */
.flex-head>nav>ul>li {
  color: #555; /* Ändert die Textfarbe der Listenelemente zu einem dunklen Grau */
  padding: 0; /* Kein Padding für Listenelemente */
  font-family: "Lato", sans-serif; /* Schriftart der Listenelemente */
  font-weight: 100;  
  font-size: 1.0rem; /* Schriftgröße der Listenelemente */
  letter-spacing: 0.01em; /* Zeichenabstand der Listenelemente */
  /* text-transform: uppercase; /* Großbuchstaben für die Listenelemente */
  user-select: none; /* Verhindert das Markieren des Textes */
  cursor: pointer; /* Cursor als Zeiger für Listenelemente */
  white-space: nowrap; /* Kein Zeilenumbruch in den Listenelementen */
  opacity: 1; /* Vollständige Sichtbarkeit */
}

/* FOKUS-EFFEKT FÜR LISTENELEMENTE */
.flex-head>nav>ul>li:focus {
  font-weight: 600; /* Fettdruck für fokussierte Listenelemente */
}

/*UNTERMENÜ-LISTEN */
.flex-head>nav>ul>li>ul {
  display: none; /* Standardmäßig nicht sichtbar */
  user-select: none; /* Verhindert das Markieren des Textes */
  position: absolute; /* Absolute Positionierung des Untermenüs */
}

/*LINKS IN LISTENELEMENTEN */
.flex-head>nav>ul>li a {
  display: block; /* Block-Element für Links */
  height: inherit; /* Höhe des Links erben */
  line-height: inherit; /* Zeilenhöhe des Links erben */
  padding: 0 1em; /* Innenabstand des Links */
  margin: 0 0.5em; /* Außenabstand des Links */
}

/*ICONS VOR LINKS MIT DER KLASSE 'ICON' */
.flex-head>nav>ul>li a.icon:before {
  margin-right: 0.5em; /* Abstand rechts vom Icon */
}

/*LINKS MIT DER KLASSE 'BUTTON' */
.flex-head>nav>ul>li a.button {
  font-size: 1em; /* Schriftgröße des Buttons */
  height: 2.6em; /* Höhe des Buttons */
  line-height: 2.5em; /* Zeilenhöhe des Buttons */
  padding: 0 1.65em; /* Innenabstand des Buttons */
  margin: 0 1em; /* Außenabstand des Buttons */
}

/* LETZTE LISTENELEMENT OHNE RECHTEN AUßENABSTAND */
.flex-head>nav>ul>li:last-child a {
  margin-right: 0 !important; /* Kein rechter Außenabstand für das letzte Listenelement */
}

/* CSS FÜR DAS DROPDOWN-MENÜ UNTER DER KLASSE 'FLEX_SELECT' */
.flex_select ul {
  list-style-type: none; /* Entfernt die Standard-Punkte vor Listenelementen */
  margin: 1.7em 0; /* Entfernt den Standard-Außenabstand */
  padding: 0; /* Entfernt den Standard-Innenabstand */
}

.flex_select li a {
    text-decoration: none !important;  /* Keine Unterstreichung */
    color: #f6f4f4;
}

.flex_select li a:hover {
    background-color: #888 !important;  /* Hintergrundfarbe ändert sich bei Hover zu einem hellen Grau */
    color: #fff !important;  /* Schriftfarbe ändert sich bei Hover zu einem dunklen Grau */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); /* verstärkter Glanz-Effekt oben bei Hover */
    inset 0 -1px 0 rgba(0, 0, 0, 0.2); /* verstärkter Schatten-Effekt unten bei Hover */
}

.flex_select>ul>li {
  position: relative; /* Positioniert den Hauptmenüpunkt relativ */
  display: inline-block; /* Hauptmenüpunkte werden nebeneinander angezeigt */
}

.flex_select>ul>li>a {
  display: block; /* Links als Blockelemente darstellen */
  padding: 0.9em; /* Innenabstand */
  text-decoration: none; /* Entfernt die Unterstreichung der Links */
}

.flex_select>ul>li ul {
  display: none; /* Untermenü standardmäßig ausgeblendet */
  position: absolute; /* Positioniert das Untermenü absolut */
  top: 100%; /* Positioniert das Untermenü direkt unter dem Hauptmenüpunkt */
  left: 0; /* Positioniert das Untermenü linksbündig */
  background-color: #888888; /* Hintergrundfarbe des Untermenüs */
  padding: 0.5rem 0; /* Innenabstand für das Untermenü */
  z-index: 1000; /* Stellt sicher, dass das Untermenü über anderen Inhalten liegt */
}

.flex_select>ul>li:hover ul {
  display: block; /* Zeigt das Untermenü an, wenn der Hauptmenüpunkt gehovt wird */
}

.flex_select>ul>li ul>li {
  white-space: nowrap; /* Verhindert Textumbruch in den Untermenüelementen */
}

.flex_select>ul>li ul>li>a {
  display: block; /* Links in Untermenüpunkten als Blockelemente darstellen */
  padding: 0.5rem 1rem; /* Innenabstand */
}

/* Styling für den Button */
section.button_hover button {
  margin: 0 auto 2em;
  text-align: center;
  font-size: 1em;
  color: #666 !important;
  border: 1px solid #666;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

button:hover { cursor: pointer; }

button:hover:before { opacity: 1; transform: translate(0, 0); }
button:before {
  content: attr(data-hover);
  position: absolute;
  top: 0.65em; 
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(-100%, 0);
  transition: all .3s ease-in-out;
}

button:hover div { opacity: 0; transform: translate(100%, 0); }
button div {
  transition: all .3s ease-in-out;
}

/* Styling für das Select-Dropdown */
select#learn_to_fly {
  margin-top: 10px;  /* Abstand zwischen Button und Dropdown */
  width: 100%;       /* Passt sich der Breite des Buttons an */
  font-size: 1em;
  padding: 10px;
  border: 1px solid #666;
  border-radius: 6px;
}


/*DROPDOWN-MENÜS */
.dropotron {
  background-color: #888; /* Ändert die Hintergrundfarbe des Dropdown-Menüs zu einem mittleren Grau */
  border-radius: 0.5em; /* Abgerundete Ecken des Dropdown-Menüs */
  list-style-type: none; /* Keine Aufzählungszeichen für die Liste im Dropdown-Menü */
  width: 16.5em; /* Breite des Dropdown-Menüs */
  padding: 0.5em 0; /* Innenabstand des Dropdown-Menüs */
  max-height: 60vh;  /* maximale Höhe */
  overflow-y: auto; /* Ermöglicht vertikales Scrollen, wenn der Inhalt die maximale Höhe überschreitet */
}

/*  OBERSTE EBENE DES DROPDOWN-MENÜS */
.dropotron.level-0 {
  margin-top: 1em; /* Abstand nach oben für die oberste Ebene */
}

/* PFEIL-ICON IM DROPDOWN-MENÜ */
.dropotron.level-0:before {
  transform: rotate(45deg); /* Drehung des Pfeil-Icons */
  background-color: #888; /* Hintergrundfarbe des Pfeil-Icons anpassen */
  content: ''; /* Leeres Inhaltsfeld für das Pfeil-Icon */
  height: 0.75em; /* Höhe des Pfeil-Icons */
  position: absolute; /* Absolute Positionierung des Pfeil-Icons */
  right: 2em; /* Abstand vom rechten Rand */
  top: -0.375em; /* Abstand vom oberen Rand */
  width: 0.75em; /* Breite des Pfeil-Icons */
}

/*LISTENELEMENTE IM DROPDOWN-MENÜ */
.dropotron li {
  border-top: solid 1px rgba(255, 255, 255, 0.3); /* Ändert die obere Rahmenlinie der Listenelemente zu einem helleren Weiß */
  padding: 0; /* Kein Padding für Listenelemente */
  position: relative; /* Relative Positionierung der Listenelemente */
}

/* ERSTE LISTENELEMENT OHNE OBERE RAHMENLINIE */
.dropotron li:first-child {
  border-top: none; /* Keine obere Rahmenlinie für das erste Listenelement */
}

/*Links im Dropdown-Menü */
.dropotron a {
  transition: none; /* Kein Übergangseffekt für Links */
  color: #fff; /* Textfarbe der Links bleibt weiß */
  padding: 0.5em 1em; /* Innenabstand der Links */
  border-bottom: 0; /* Keine untere Rahmenlinie für Links */
  font-family: "Lato", sans-serif; /* Schriftart der Links */
  font-size: 0.8rem; /* Schriftgröße der Links */
  text-align: left; /* Textausrichtung der Links nach links */
  letter-spacing: 0.01em; /* Zeichenabstand der Links */
}

/* HOVER-EFFEKT FÜR LINKS IM DROPDOWN-MENÜ */
.dropotron a:hover {
  color: #333 !important; /* Ändert die Textfarbe beim Hover zu einem dunkleren Grau */
  background-color: #fff; /* Ändert die Hintergrundfarbe beim Hover zu Weiß */
}


/*DROPDOWN-SELECT*/
.dropotron2 {
  background-color: #f6f4f4; /* Ändert die Hintergrundfarbe des Dropdown-Menüs zu einem mittleren Grau */
  border: 10px solid #666;
  border-radius: 6px; /* Abgerundete Ecken des Dropdown-Menüs */
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
  list-style-type: none; /* Keine Aufzählungszeichen für die Liste im Dropdown-Menü */
  width: 16.5em; /* Breite des Dropdown-Menüs */
  padding: 0.5em 0; /* Innenabstand des Dropdown-Menüs */
  max-height: 600px;  /* maximale Höhe */
  overflow-y: auto; /* Ermöglicht vertikales Scrollen, wenn der Inhalt die maximale Höhe überschreitet */
}

/* NAVIGATIONSPANEL FÜR HAMBURGE MENUE*/
#navPanel {
  transform: translateX(100%); /* Positionierung außerhalb des Viewports */
  transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; /* Übergangseffekte für das Navigationspanel */
  background: rgba(50, 50, 50, 0.9); /* Ändert die Hintergrundfarbe des Navigationspanels zu einem dunkleren Grau */
  box-shadow: none; /* Kein Schatten für das Navigationspanel */
  color: #d6d6d6; /* Textfarbe des Navigationspanels bleibt gleich */
  height: 100%; /* Höhe des Navigationspanels auf 100% */
  max-width: 80%; /* Maximale Breite des Navigationspanels */
  overflow-y: auto; /* Automatische Vertikal-Rollbalken */
  position: fixed; /* Fixierte Position des Navigationspanels */
  right: 0; /* Position am rechten Rand */
  top: 0; /* Position am oberen Rand */
  visibility: hidden; /* Standardmäßig nicht sichtbar */
  width: 18em; /* Breite des Navigationspanels */
  z-index: 10005; /* Sicherstellt, dass das Navigationspanel über anderen Inhalten liegt */
  display: none; /* Standardmäßig nicht angezeigt */
  font-family: "Lato", sans-serif; /* Schriftart des Navigationspanels */
  font-size: .8rem; /* Schriftgröße des Navigationspanels */
  line-height: 2rem; /* Zeilenhöhe des Navigationspanels */
  letter-spacing: 0.01em; /* Zeichenabstand des Navigationspanels */
  text-transform: uppercase; /* Großbuchstaben für das Navigationspanel */
  text-align: left;
}

/* SICHTBARE NAVIGATIONSPANEL */
#navPanel.visible {
  transform: translateX(0); /* Positioniert das Navigationspanel sichtbar im Viewport */
  box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.3); /* Erhöht den Schatteneffekt für mehr Tiefe */
  visibility: visible; /* Sichtbar machen des Navigationspanels */
}

/* NAVIGATIONSBEREICH IM NAVIGATIONSPANEL */
#navPanel nav {
  padding: 3em 2.5em; /* Innenabstand für den Navigationsbereich */
}


/*LINKS IM NAVIGATIONSPANEL */
#navPanel .link {
  transition: color 0.2s; /* Übergangseffekt für die Textfarbe der Links */
  border-top: solid 1px rgba(255, 255, 255, 0.2); /* Obere Rahmenlinie für Links */
  color: inherit !important; /* Erbt die Textfarbe */
  display: block; /* Block-Element für Links */
  padding: 0.75em 0; /* Innenabstand für Links */
  border-bottom: 0; /* Keine untere Rahmenlinie für Links */
}

/* ERSTE LINK-ELEMENT IM NAVIGATIONSPANEL */
#navPanel .link:first-child {
  border-top: 0; /* Keine obere Rahmenlinie für das erste Link-Element */
}

/*HAUPTLINKS IM NAVIGATIONSPANEL */
#navPanel .link.depth-0 {
  color: #fff !important; /* Textfarbe der Hauptlinks bleibt weiß */
  font-weight: 600; /* Fettgedruckt für Hauptlinks */
}

/* HOVER-, FOKUS- UND AKTIVEFFEKTE FÜR LINKS IM NAVIGATIONSPANEL */
#navPanel .link:active,
#navPanel .link:focus,
#navPanel .link:hover {
  color: #cccccc !important; /* Textfarbe beim Hover, Fokus oder Aktiv-Zustand auf ein helles Grau ändern */
}

/*  INDENTATION IN LINKS IM NAVIGATIONSPANEL */
#navPanel .link .indent-1 {
  display: inline-block; /* Inline-Block-Element für Einrückung */
  width: 1.25em; /* Breite der Einrückung */
}

#navPanel .link .indent-2 {
  display: inline-block; /* Inline-Block-Element für Einrückung */
  width: 2.5em; /* Breite der Einrückung */
}

/* SCHLIEßEN-BUTTON IM NAVIGATIONSPANEL */
#navPanel .close {
  text-decoration: none; /* Keine Unterstreichung für den Schließen-Button */
  transition: color 0.2s ease-in-out; /* Übergangseffekt für die Textfarbe des Schließen-Buttons */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Verhindert die Hervorhebung bei Touch-Events */
  border: 0; /* Kein Rand für den Schließen-Button */
  color: #e0e0e0; /* Textfarbe des Schließen-Buttons zu einem helleren Grau ändern */
  cursor: pointer; /* Cursor als Zeiger für den Schließen-Button */
  display: block; /* Block-Element für den Schließen-Button */
  height: 3.25em; /* Höhe des Schließen-Buttons */
  line-height: 3.25em; /* Zeilenhöhe des Schließen-Buttons */
  padding-right: 1.25em; /* Innenabstand rechts des Schließen-Buttons */
  position: absolute; /* Absolute Positionierung des Schließen-Buttons */
  right: 0; /* Position am rechten Rand */
  text-align: right; /* Textausrichtung nach rechts */
  top: 0; /* Position am oberen Rand */
  vertical-align: middle; /* Vertikale Ausrichtung des Schließen-Buttons */
  width: 7em; /* Breite des Schließen-Buttons */
}

/* ICON IM SCHLIEßEN-BUTTON */
#navPanel .close:before {
  display: inline-block; /* Inline-Block-Element für das Icon */
  font-style: normal; /* Normaler Schriftstil */
  font-variant: normal; /* Normale Schriftvariante */
  text-rendering: auto; /* Text-Rendering */
  line-height: 1; /* Zeilenhöhe des Icons */
  text-transform: none !important; /* Keine Texttransformation für das Icon */
  font-family: 'FontAwesome'; /* Schriftart für das Icon */
  content: '\f00d'; /* Inhalt des Icons (Schließen-Symbol) */
  font-size: 1.25em; /* Schriftgröße des Icons */
}

/* HOVER-EFFEKT FÜR DEN SCHLIEßEN-BUTTON */
#navPanel .close:hover {
  color: #fff; /* Textfarbe des Schließen-Buttons beim Hover zu Weiß ändern */
}

/* MEDIENABFRAGEN FÜR VERSCHIEDENE BILDSCHIRMGRÖßEN */

/* FÜR BILDSCHIRME MIT EINER MAXIMALEN BREITE VON 800PX */
@media screen and (max-width: 800px) {
  .flex-head {
    width: 90%; /* Breite des Containers auf 90% verkleinern */
  }
  
  #header a[href="#navPanel"]:before {
    font-size: 1.5em; /* Schriftgröße des Icons vergrößern */
    transform: scaleX(1.5); /* Icon vergrößern */
  }
  
  #header a[href="#navPanel"] {
    display: block; /* Link zum Navigationspanel anzeigen */
	top: 1.5em;
    right: 4em; /* Abstand vom rechten Rand anpassen */
  }

  .flex-head>nav {
    display: none; /* Navigation im flexiblen Container ausblenden */
  }

  #navPanel {
    display: block; /* Navigationspanel anzeigen */
  }
}

/* FÜR BILDSCHIRME MIT EINER MAXIMALEN BREITE VON 480PX */
@media screen and (max-width: 480px) {
	
#header {
  height: 6vh; /* Höhe des Headers auf 10% der Viewport-Höhe */
}
  .flex-head {
	height: 6vh;
    width: 95%;
    margin-left: 1.5em;
  }

  #header a[href="#navPanel"]:before {
    font-size: 1.5em; /* Schriftgröße des Icons vergrößern */
    transform: scaleX(1.5); /* Icon vergrößern */
  }
  
  #header a[href="#navPanel"] {
    right: 3em;
    top: 1.5em;
  }

  footer {
    height: 10vh;
  }

  footer div#flexbox {
    width: 90%;
  }

  footer p, footer a {
    font-size: 0.9em;
  }
}

/* FOOTER */
 footer {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     position:fixed;
     bottom:0;
     background-color: #f6f4f4;
     z-index:1000;
     height: 8vh;
     background-color: rgba(246, 244, 244, 1); /* Ändert die Hintergrundfarbe zu einem helleren Grau mit höherer Deckkraft */
     box-shadow: rgba(230, 230, 230, 0.1) 0px -6px 0px, rgba(200, 200, 200, 0.2) 0px -3px 0px;  /* Erhöht den Schatteneffekt für mehr Tiefe */
}

 footer div#flexbox {
     margin: 0 auto ;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     width: 40%;
}
 footer a {
     -moz-transition: color 0.2s ease-in-out;
     -webkit-transition: color 0.2s ease-in-out;
     -ms-transition: color 0.2s ease-in-out;
     transition: color 0.2s ease-in-out;
     color: #ccc;
     text-decoration: none;
}
 footer a:active, footer a:hover {
     color: #ccc;
}
 footer p, footer a {
	 margin-top: 1em;
     font-size: 1.1em;
     color: #000;
}

@MEDIA SCREEN AND (MAX-WIDTH: 1920PX) {
  #header {
    height: 7vh;
  }
  
  .flex-head {
    width: 90%;
  }

  footer {
    height: 7vh;
  }

  footer div#flexbox {
    width: 50%;
  }
}

@MEDIA SCREEN AND (MAX-WIDTH: 1440PX) {
  #header {
    height: 7vh;
  }
  
  .flex-head {
    width: 85%;
  }

  footer {
    height: 7vh;
  }

  footer div#flexbox {
    width: 60%;
  }
}

@MEDIA SCREEN AND (MAX-WIDTH: 1080PX) {
  #header {
    height: 7vh;
  }
  footer {
    height: 8vh;
  }

  footer div#flexbox {
    width: 70%;
  }
}

@MEDIA SCREEN AND (MAX-WIDTH: 800PX) {
  .flex-head {
    width: 90%;
  }
  
  #header a[href="#navPanel"]:before {
    font-size: 1.5em;
    transform: scaleX(1.5);
  }
  
  #header a[href="#navPanel"] {
    display: block;
    right: 5em;
  }

  .flex-head>nav {
    display: none;
  }

  #navPanel {
    display: block;
  }

  footer {
    height: 10vh;
  }

  footer div#flexbox {
    width: 90%;
  }
}

@MEDIA SCREEN AND (MAX-WIDTH: 480PX) {
  #header a[href="#navPanel"] {
    display: block;
    right: 4em;
  }

}