:root {
    --bg-light: #f5f5f7;
    --bg-dark: #2c2c2c;
    --nav-light: #e0e0e0;
    --nav-dark: #1c1c1e;
    --text-light: #1d1d1f;
    --text-dark: #f5f5f7;
    --button-light: linear-gradient(135deg, #0071e3, #005bb5);
    --button-dark: linear-gradient(135deg, #0a84ff, #007aff);
    --switch-off-bg: #b3b3b3;
    --switch-on-bg: #4cd964;
    --scroll-speed: 0.8s ease-in-out;
}

/* Globale Einstellungen */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
    scroll-behavior: smooth;
    padding-top: 80px;
}

.topnav .active {
  text-decoration: none;
}

/* Header mit Logo und Menü */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--nav-light);
    color: var(--text-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Logo links, Menü rechts */
    align-items: center;
    transition: background 0.3s;
    text-decoration: none;
}

header img.logo {
    width: 30px;
    height: auto; /* Logo besser sichtbar */
    margin-right: 15px;
    filter: none;
    transition: filter 0.3s ease;
    vertical-align: middle;
    outline: none;
    display: inline-block;
    text-decoration: none;
}

body.dark-mode header img.logo {
    filter: invert(1) brightness(2);
}

/* Menü-Icon */
.icon {
    display: inline;
    cursor: pointer;
    padding: 0; /* Kein zusätzlicher Innenabstand */
    background: none; /* Hintergrund komplett entfernt */
    border: none; /* Keine Umrandung */
    vertical-align: middle;
    outline: none;
    text-decoration: none;
}

.icon i {
    font-size: 24px; /* Größe der Menü-Balken */
    color: black; /* Farbe der Menü-Balken auf Schwarz gesetzt */
}

body.dark-mode .icon i {
    color: white; /* Ändert die Farbe der Balken auf Weiß */
    transition: filter 0.3s ease, color 0.3s ease;
}

/* Dropdown-Menü */
#myLinks {
    display: none;
    flex-direction: column;
    background-color: var(--bg-light);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: absolute;
    top: 70px;
    left: 20px;
    width: 240px;
    z-index: 1000;
    overflow: hidden;
    text-decoration: none;
}

#myLinks a {
    color: var(--text-light);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

#myLinks a:last-child {
    border-bottom: none;
}

#myLinks a:hover {
    background-color: var(--nav-light);
}

#myLinks.show {
    display: flex !important;
}

body.dark-mode #myLinks {
    background-color: var(--nav-dark);
}

body.dark-mode #myLinks a {
    color: var(--text-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode #myLinks a:hover {
    background-color: var(--nav-light);
}

/* Buttons Styling */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: white;
    background: var(--button-light);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
    background: var(--button-dark);
    transform: translateY(-2px);
}

body.dark-mode .button {
    background: var(--button-dark);
}

body.dark-mode .button:hover {
    background: var(--button-light);
}

body.dark-mode header {
    background: var(--nav-dark);
}

body.dark-mode {
    background: var(--bg-dark);
}

/* Textanpassungen für Dark Mode */
h1, p, a {
    transition: color 0.3s;
}

body.dark-mode h1, 
body.dark-mode p, 
body.dark-mode a {
    color: var(--text-dark);
}

/* Apple-Themed Dark Mode Switch */
.dark-mode-toggle {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 1000;
}

.dark-mode-toggle input {
    display: none;
}

.dark-mode-toggle .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    background: var(--switch-off-bg);
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s;
}

.dark-mode-toggle .switch .slider {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s, background 0.3s;
}

input:checked + .switch {
    background: var(--switch-on-bg);
}

input:checked + .switch .slider {
    transform: translate(25px, -50%);
}

/* Weitere Komponenten */
.section {
    padding: 50px 20px;
    text-align: center;
}

/* Navbar-Titel */
.navbar-title {
    position: absolute; /* Zentriert unabhängig vom Layout */
    top: 50%;
    left: 49%;
    transform: translate(-50%, -50%);
    display: flex; /* Flexbox für bessere Textformatierung */
    align-items: center;
    text-align: center;
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    gap: 4px; /* Abstand zwischen den Wörtern */
}

/* Text-Styling */
.navbar-title .project {
    font-size: 20px;
    font-weight: 400; /* Normale Schrift */
    color: var(--text-light); /* Standardfarbe */
}

.navbar-title .strawberry {
    font-size: 20px;
    font-weight: 700; /* Fettgedruckt */
    color: var(--text-light);
}

/* Dark Mode */
body.dark-mode .navbar-title .project,
body.dark-mode .navbar-title .strawberry {
    color: var(--text-dark);
}

.divider {
  border: none; /* Entfernt die Standardlinie */
  border-top: 1px solid #3a3a3c; /* Dunkler Grauton für Dark Mode */
  margin: 20px 0; /* Abstände oben und unten */
  width: 90%; /* Breite der Linie */
  margin-left: auto;
  margin-right: auto; /* Zentriert die Linie */
}

body.dark-mode .divider {
  border-top: 1px solid #575757; /* Etwas heller, aber noch dunkler als im Light Mode */
}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background: var(--nav-light);
  color: var(--text-light);
  text-align: center;
  padding: 15px 20px;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
  z-index: 100;
  box-sizing: border-box;
}

body.dark-mode footer {
  background: var(--nav-dark);
  color: var(--text-dark);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content a img {
  width: 70px;
  height: 25px;
  margin: 0;
  transition: filter 0.3s ease;
}

.footer-content p {
  margin: 0;
  font-size: 12px;
}

body.dark-mode .footer-content a img {
  filter: grayscale(100%); /* Anpassung für Dark Mode */
}

/* Styling der Error-Seite */
.error-container {
    max-width: 600px;
    margin: 150px auto 0 auto;
    text-align: center;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error-container h1 {
    font-size: 2rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.error-container p {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

/* Button-Design */
.error-container .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background: var(--button-light);
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}

.error-container .button:hover {
    background: var(--button-dark);
    transform: translateY(-2px);
}