/* Globale Einstellungen für die gesamte Seite */
html {
  /* Sorgt dafür, dass die Seite sanft zum Abschnitt gleitet, wenn man einen Link klickt */
  scroll-behavior: smooth;
  /* Sorgt dafür, dass beim Hinscrollen oben 90px Platz gelassen wird, damit die Navigationsleiste nichts überdeckt */
  scroll-padding-top: 90px;
}

/* Definition von Variablen (Farben), die wir im ganzen Dokument immer wieder benutzen */
:root {
  --bg-color: #fafafa;       /* Hintergrundfarbe der Seite (hellgrau) */
  --text-color: #222;        /* Standard-Textfarbe (fast schwarz) */
  --nav-bg: #333;            /* Hintergrundfarbe der Menüleisten (dunkelgrau) */
  --nav-text: #f2f2f2;       /* Textfarbe in den Menüleisten (hell) */
  --card-bg: #fff;           /* Hintergrund der Inhalts-Karten (weiß) */
  --card-shadow: rgba(0,0,0,0.15); /* Dezenter Schatten um die Karten */
  --hover-shadow: rgba(0,0,0,0.25); /* Stärkerer Schatten, wenn man mit der Maus darüberfährt */
}

/* Diese Farben werden aktiv, wenn die Klasse "dark" (Darkmode) gesetzt ist */
.dark {
  --bg-color: #0d1117;       /* Dunkler Hintergrund */
  --text-color: #e6edf3;     /* Hellgrauer Text */
  --nav-bg: #161b22;         /* Sehr dunkle Navigationsleiste */
  --nav-text: #c9d1d9;       /* Etwas matterer Text im Menü */
  --card-bg: #1c2128;        /* Dunkle Inhalts-Karten */
  --card-shadow: rgba(255,255,255,0.08); /* Heller Schatten für dunklen Hintergrund */
  --hover-shadow: rgba(255,255,255,0.12);
}

/* Grundlegendes Aussehen der Seite */
body {
  margin: 0;                 /* Entfernt den Standard-Rand des Browsers */
  font-family: "Segoe UI", Arial, sans-serif; /* Die Schriftart */
  background-color: var(--bg-color); /* Nutzt die oben definierte Hintergrundfarbe */
  color: var(--text-color);  /* Nutzt die oben definierte Textfarbe */
  /* Macht den Wechsel zwischen Hell und Dunkel geschmeidig (0.4 Sekunden Dauer) */
  transition: background-color 0.4s ease, color 0.4s ease;
  font-size: 16px;           /* Standard-Schriftgröße */
}

/* Die obere Navigationsleiste */
.topnav {
  background-color: var(--nav-bg);
  position: fixed;           /* Fixiert die Leiste oben am Bildschirm, auch beim Scrollen */
  top: 0;                    /* Position ganz oben */
  width: 100%;               /* Geht über die volle Breite */
  z-index: 999;              /* Sorgt dafür, dass die Leiste über allen anderen Inhalten liegt */
  display: flex;             /* Aktiviert ein flexibles Layout-System */
  align-items: center;       /* Zentriert die Elemente in der Leiste vertikal */
  padding: 0;           /* Innenabstand links und rechts */
}

/* Der Bereich, in dem die Links (Texte) in der Navigation stehen */
.nav-links {
  display: flex;             /* Links werden nebeneinander angezeigt */
  flex: 1;                   /* Dieser Bereich nimmt allen verfügbaren Platz ein */
  align-items: center;       /* Inhalte werden mittig ausgerichtet */
}

.nav-links a {
  flex: 1;                   /* Jeder Link bekommt exakt gleich viel Platz ab */
  text-align: center;        /* Der Text im Link steht genau in der Mitte seines Bereichs */
}

/* Das "Drei-Striche-Menü" für Handys */
.hamburger {
  display: none;             /* Wird standardmäßig auf dem Computer ausgeblendet */
  flex-direction: column;    /* Die Striche untereinander anzeigen */
  cursor: pointer;           /* Mauszeiger wird zur Hand */
}

/* Styling für die einzelnen Links in der oberen Leiste */
.topnav a {
  color: var(--nav-text);    /* Helle Textfarbe */
  padding: 14px 10px;        /* Klickbereich vergrößern */
  text-decoration: none;     /* Entfernt das Unterstreichen von Links */
  font-size: 17px;           /* Schriftgröße der Links */
  transition: background 0.3s ease; /* Sanfter Farbumschlag beim Drüberfahren */
}

/* Farbe ändert sich, wenn man mit der Maus über einen Link fährt */
.topnav a:hover {
  background-color: #555;    /* Etwas helleres Grau */
}

/* Spezielle Farbe für hervorgehobene Links (z.B. Teaching) */
.topnav a.gruen, .bottomnav a.gruen {
  background-color: #4CAF50; /* Ein schönes Grün */
}

/* Der Mond/Sonne-Button für den Darkmode */
/* Styling für den Darkmode-Umschalter (Sonne/Mond-Button) */
.theme-toggle {
  cursor: pointer;              /* Zeigt beim Drüberfahren die "Klick-Hand" an */
  font-size: 20px;              /* Legt die Größe des Emojis (Mond/Sonne) fest */
  margin: 0;
  padding: 0 20px;   /* padding horizontal */
  color: var(--nav-text);       /* Nutzt die helle Textfarbe der Navigation */
  user-select: none;            /* Verhindert, dass das Emoji markiert/blau hinterlegt werden kann */
  transition: background 0.3s ease;  /* Sorgt für einen weichen Übergang der Hintergrundfarbe beim Drüberfahren (Dauer: 0.3s) */
  display: flex;   /* Aktiviert Flexbox innerhalb des Buttons, um das Icon exakt mittig auszurichten */
  align-items: center;          /* Zentriert das Icon vertikal */
  justify-content: center;       /* Zentriert das Icon horizontal */
  align-self: stretch; /* damit füllt der Hover-Effekt die komplette Leiste aus. */
}

/* Erzeugt den grauen Hintergrund auf Geräten, die echtes Hover unterstützen (Desktop) */
@media (hover: hover) {
  .theme-toggle:hover {
    background-color: #555;
    transition: background 0.3s ease;
  }
}

/* Optional: Ein aktiver Effekt für das Handy beim Draufdrücken (kurzes Feedback) */
.theme-toggle:active {
  background-color: rgba(128, 128, 128, 0.4);
}

/* Die einzelnen drei Striche des Hamburger-Menüs */
.hamburger div {
  width: 25px;               /* Breite der Striche */
  height: 3px;               /* Dicke der Striche */
  background-color: var(--nav-text);
  margin: 4px 0;             /* Abstand zwischen den Strichen */
  transition: 0.4s;          /* Für spätere Animationen */
}

/* Der Haupt-Inhaltsbereich */
.content {
  /* Wichtig: 90px Abstand nach oben, damit der Inhalt nicht UNTER der fixierten Leiste startet */
  padding-top: 90px;
  text-align: center;        /* Zentriert Überschriften und Texte standardmäßig */
}

/* Allgemeine Links im Text */
a {
  text-decoration: none;     /* Keine Unterstreichung */
  color: #4CAF50;      /* Standardfarbe für Links ist Grün */
  transition: text-shadow 0.3s ease;}

@media (hover: hover) {
  a:hover {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  }
}

/* Grid */

.home .sections-container {
  margin: 60px auto;
  max-width: 1300px;         /* Nochmal breiter (von 1200px auf 1300px) für noch flachere Optik */
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;                 /* Etwas mehr Abstand zwischen den breiten Karten */
}

.home .page-section {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--card-shadow);
  padding: 25px;             /* Mehr Innenabstand für ein luftigeres Gefühl */
  text-align: left;
  display: flex;
  flex-direction: column;    /* Alles untereinander */
}

.home .page-section{
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover){
  .home .page-section:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 25px var(--hover-shadow);
  }
  }

.home .page-section h2 {
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  color: var(--text-color);
}

/* Bilder innerhalb der Sektionen*/
.home .page-section img {
  width: auto;               /* Bild nimmt nicht die volle Breite ein */
  max-width: 80%;            /* Bild wird max. 80% breit, damit es nicht zu groß wirkt */
  height: auto;              /* Bild behält sein natürliches Seitenverhältnis, nichts wird abgeschnitten */
  margin: 0 auto 20px auto;  /* Zentriert das Bild horizontal, Abstand nach unten */
  border-radius: 8px;
}

/* Optionaler Text-Container (um Textbreite zu begrenzen, falls nötig) */
.home .page-section-text {
  max-width: 90%;            /* Text wird nicht ganz so breit, um Lesbarkeit zu verbessern */
  margin: 0 auto;            /* Zentriert den Text */
}

.subpage .sections-container {
  margin: 60px auto;
  max-width: 800px;
  padding: 0 15px;
}

.subpage .page-section {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--card-shadow);
  margin-bottom: 40px;
  padding: 20px;
  text-align: left;
}

.subpage .page-section h2 {
  margin-top: 0;
  text-align: center;
  color: var(--text-color);
}

.subpage .page-section img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Die untere Navigationsleiste (Footer) */
.bottomnav {
  background-color: var(--nav-bg);
  position: fixed;           /* Bleibt immer am unteren Bildschirmrand kleben */
  bottom: 0;
  width: 100%;
  display: flex;             /* Zeigt die Links nebeneinander an */
}

.bottomnav a {
  flex: 1;                   /* Alle Links im Footer sind gleich breit */
  text-align: center;
  color: var(--nav-text);
  padding: 14px 0;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.3s ease;
}

.bottomnav a:hover {
  background-color: #575757;
}

/* ===== Responsive Design: Anpassungen für Tablets und Handys ===== */
@media screen and (max-width: 768px) {
.sections-container {
  margin: 60px auto;
  max-width: 800px;
  padding: 0 15px;
}

.page-section {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--card-shadow);
  margin-bottom: 40px;
  padding: 20px;
  text-align: left;
}

.page-section h2 {
  margin-top: 0;
  text-align: center;
  color: var(--text-color);
}

.page-section img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Auf dem Handy soll der Footer seitlich scrollbar sein, falls die Links nicht passen */
.bottomnav {
  display: flex;
  overflow-x: auto;        /* Aktiviert horizontales Scrollen */
  white-space: nowrap;     /* Verhindert Zeilenumbruch der Links */
  padding: 0px;              /*Auf 0 gesetzt, damit das Grün den Rand berührt */
  gap: 10px;
  scrollbar-width: none;   /* Versteckt den Scrollbalken (Firefox) */
}

.bottomnav::-webkit-scrollbar {
  display: none;           /* Versteckt den Scrollbalken (Chrome/Safari) */
}

.bottomnav a {
  flex: 0 0 auto;          /* Links behalten ihre eigene Breite bei */
  padding: 14px 15px;      /* GEÄNDERT: Höheres Padding sorgt für die volle Höhe des grünen Feldes */
  font-size: 14px;
  display: inline-block;   /* ERGÄNZT: Stellt sicher, dass das Padding die Höhe korrekt füllt */
}

  /* Die obere Leiste wird für das Handy-Menü vorbereitet */
  .topnav {
    flex-direction: row;     /* Elemente bleiben in einer Reihe */
    align-items: flex-start; /* Ausrichtung nach oben */
    padding: 0px 5px;
  }

  .hamburger {
    display: flex;           /* Das Menü-Icon wird jetzt angezeigt */
    margin: 10px;
  }

  /* Das Menü, das beim Klicken auf den Hamburger ausklappt */
  .nav-links {
      position: absolute;    /* Löst das Menü aus dem normalen Fluss */
      top: 100%;             /* Erscheint direkt unter der Topnav */
      left: 0;
      width: 100%;
      padding: 0px 14px;
      background-color: var(--nav-bg);
      flex-direction: column; /* Die Links stehen jetzt untereinander */
      display: none;         /* Standardmäßig ist das Menü zu (wird per JavaScript geöffnet) */
  }

  .topnav a {
    width: 100%;             /* Links nehmen volle Breite ein */
    text-align: left;        /* Text linksbündig im Handy-Menü */
    padding: 8px 0px;
    color: var(--nav-text);
  }

  /* Der Darkmode-Button rückt auf dem Handy nach rechts */
  .theme-toggle {
    margin-left: auto;
    padding: 10px 20px;
  }

  .bottomnav a {
    font-size: 13px;
    padding: 20px 0;
  }
}

/* Ganz kleine Bildschirme (sehr alte Handys) */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;         /* Schrift wird etwas kleiner */
  }
}
}