/* Importiere die Darkmode Button Stile (oder füge sie hier ein) */
/* @import url(darkmodebutton.css); */
/* Behalte dies bei, wenn du die Datei separat hast */

/* ======================================== */
/* === Grundlegende Einstellungen & Variablen === */
/* ======================================== */

:root {
    /* Farbvariablen für Light Mode (Standard) */
    --primary-color: #2C3E50;
    /* Dunkles Schieferblau */
    --secondary-color: #3498DB;
    /* Helleres, kräftiges Blau */
    --background-color: #f4f4f4;
    /* Heller Hintergrund (beibehalten) */
    --text-color: #333333;
    /* Dunkler Text (beibehalten) */
    --card-background: #ffffff;
    /* Weißer Kartenhintergrund (beibehalten) */
    --header-footer-bg: #e9e9e9;
    /* Leicht grauer Header/Footer (beibehalten) */
    --link-color: var(--primary-color);
    /* #2C3E50 */
    --link-hover-color: #1A242F;
    /* Noch dunkleres Schieferblau für Hover */
    --button-bg: var(--primary-color);
    /* #2C3E50 */
    --button-text: #ffffff;
    /* Weißer Text auf dunklem Button */
    --button-hover-bg: var(--link-hover-color);
    /* #1A242F */

    /* Übergänge */
    --transition-speed: 0.3s;
    /* Beibehalten */
}

/* Variablen für Dark Mode (wird durch JS-Klasse am Body aktiviert) */
body.dark-mode {
    --primary-color: #5DADE2;
    /* Helleres Blau für Dark Mode */
    --secondary-color: #ABB2B9;
    /* Helles Grau als Sekundärfarbe */
    --background-color: #1a1a1a;
    /* Dunkler Hintergrund (beibehalten) */
    --text-color: #e0e0e0;
    /* Heller Text (beibehalten) */
    --card-background: #2a2a2a;
    /* Dunkler Kartenhintergrund (beibehalten) */
    --header-footer-bg: #111111;
    /* Sehr dunkler Header/Footer (beibehalten) */
    --link-color: var(--primary-color);
    /* #5DADE2 */
    --link-hover-color: #85C1E9;
    /* Noch helleres Blau für Hover im Dark Mode */
    --button-bg: var(--primary-color);
    /* #5DADE2 */
    --button-text: #ffffff;
    /* Weißer Text für besseren Kontrast */
    --button-hover-bg: var(--link-hover-color);
    /* #85C1E9 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Bessere Box-Modell-Berechnung */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    /* Ermöglicht sanftes Scrollen bei internen Links */
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    /* Standard-Schriftarten */
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    /* Sicherstellen, dass der Body mindestens die Höhe des Viewports hat */
    display: flex;
    flex-direction: column;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    /* Übergang für Dark Mode */
}

img {
    max-width: 100%;
    /* Stellt sicher, dass Bilder nicht über ihren Container hinausragen */
    height: auto;
    display: block;
    /* Verhindert zusätzlichen Leerraum unter Bildern */
}

.svg {
    height: 20px;
    position: relative;
    left: 10px;
    fill: darkgoldenrod;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--link-hover-color);
}

/* Container für zentrierten Inhalt */
/* .container { */
/* max-width: 1100px; */
/* margin-left: auto; */
/* margin-right: auto; */
/* padding-left: 1rem; */
/* padding-right: 1rem; */
/* } */

/* Hauptbereiche */
.site-content {
    flex-grow: 1;
    /* Stellt sicher, dass der Footer unten bleibt */
}

section {
    padding: 3rem 0;
    /* Vertikaler Abstand für Sektionen */
}

h1,
h2,
h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    /* Überschriften hervorheben */
    /* display: flex; */
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}


/* ======================================== */
/* =========== Header & Navigation ======== */
/* ======================================== */

.site-header {
    display: flex;
    align-items: center;
    background-color: var(--header-footer-bg);
    padding: 0.5rem 0;
    position: sticky;
    /* Hält den Header beim Scrollen oben */
    top: 0;
    z-index: 100;
    /* Stellt sicher, dass der Header über dem Inhalt liegt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed) ease;
    /* background-color: gray; */
}

/* .site-header .container { */
/* display: flex; */
/* justify-content: space-between; */
/* align-items: center; */
/* } */

.site-header .logo img {
    height: 50px;
    /* Höhe des Logos anpassen */
    width: auto;
    opacity: 1;
    /* Logo sichtbar machen */
    position: static;
    /* Normale Positionierung */
    z-index: auto;
}

.main-navigation {
    width: 100%;
    /* Nimmt den gesamten Platz ein */
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Dark Mode Toggle - Grundlegende Positionierung */
.darkmode-toggle {
    margin-right: 1rem;
    /* Abstand zum Menü-Icon/Menü */
    /* Die Stile für Input/Label/SVG kommen idealerweise aus darkmodebutton.css */
    /* oder müssen hier eingefügt/angepasst werden */
}

/* Hamburger Menü - Nur auf Mobilgeräten sichtbar */
.menu-toggle-label {
    display: block;
    /* Auf Mobilgeräten anzeigen */
    cursor: pointer;
    /* --- Hamburger Icon Styling --- */
    background: transparent;
    /* Kein Hintergrund für den Button selbst */
    width: 35px;
    /* Kleinere Größe für das Icon */
    height: 30px;
    position: relative;
    z-index: 102;
    /* Über dem Menü */
}

.menu-toggle-label .line {
    position: absolute;
    left: 0;
    height: 3px;
    /* Dünnere Linien */
    width: 100%;
    background: var(--primary-color);
    /* Linienfarbe an Textfarbe anpassen */
    border-radius: 2px;
    display: block;
    transition: all var(--transition-speed) ease-in-out;
    transform-origin: center;
}

.menu-toggle-label .line:nth-child(1) {
    top: 6px;
}

.menu-toggle-label .line:nth-child(2) {
    top: 14px;
}

.menu-toggle-label .line:nth-child(3) {
    top: 22px;
}

/* Versteckte Checkbox */
.menu-toggle-checkbox {
    display: none;
}

/* Menüliste - Standard (versteckt auf Mobile) */
.menu-list {
    list-style: none;
    display: none;
    /* Standardmäßig auf Mobile versteckt */
    flex-direction: column;
    /* Mobile: Untereinander */
    position: absolute;
    /* Mobile: Überlagert Inhalt */
    top: 100%;
    /* Mobile: Unter dem Header */
    left: 0;
    width: 100%;
    background-color: var(--header-footer-bg);
    /* Gleicher Hintergrund wie Header */
    padding: 1rem 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    z-index: 101;
    /* Unter dem Hamburger-Icon, aber über dem Inhalt */
    transition: background-color var(--transition-speed) ease;
}

.menu-list li {
    text-align: center;
    width: 100%;
}

.menu-list a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
}

.menu-list a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Leichter Hover-Effekt */
}

/* Hamburger Logik: Wenn Checkbox gecheckt ist... */
.menu-toggle-checkbox:checked+.menu-toggle-label .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    /* Animation zum X */
}

.menu-toggle-checkbox:checked+.menu-toggle-label .line:nth-child(2) {
    opacity: 0;
}

.menu-toggle-checkbox:checked+.menu-toggle-label .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    /* Animation zum X */
}

.menu-toggle-checkbox:checked~.menu-list {
    display: flex;
    /* ...zeige die Menüliste an */
}

/* Desktop Navigation (ab z.B. 768px) */
@media (min-width: 768px) {
    .menu-toggle-label {
        display: none;
        /* Hamburger auf Desktop verstecken */
    }

    .menu-list {
        display: flex;
        /* Menüpunkte nebeneinander anzeigen */
        flex-direction: row;
        position: static;
        /* Normale Positionierung */
        background-color: transparent;
        /* Kein extra Hintergrund nötig */
        width: auto;
        padding: 0;
        box-shadow: none;
    }

    .menu-list li {
        margin-left: 1rem;
        /* Abstand zwischen Menüpunkten */
        width: auto;
    }

    .menu-list a {
        padding: 0.5rem;
        font-size: 1rem;
    }

    .menu-list a:hover {
        background-color: transparent;
        color: var(--link-hover-color);
        /* Nur Textfarbe ändern */
    }
}

/* ======================================== */
/* ============== Hero Section ============ */
/* ======================================== */


.hero-section {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
    /* Mehr Abstand */
    background-color: var(--secondary-color);
    /* Leicht andere Hintergrundfarbe */
    transition: background-color var(--transition-speed) ease;
}

.hero-section h1 {
    color: var(--background-color);
    /* Heller Text auf dunklerem Hintergrund */
    margin-top: 20px;
}

.hero-section p {
    font-size: 1.2rem;
    color: var(--background-color);
}

.hero-text {
    display: grid;
    text-align: center;
}

/* ======================================== */
/* =========== Projects Section =========== */
/* ======================================== */


.projects-section h2 {
    text-align: center;
    /* Überschrift zentrieren */
}

.project-grid {
    display: grid;
    /* Responsive Grid: Passt Spaltenanzahl an verfügbaren Platz an */
    /* Jede Spalte ist mindestens 280px breit */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
    /* Abstand zwischen den Karten */
}

.project-card {
    background-color: var(--card-background);
    border-radius: 8px;
    /* margin: 1rem; */
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.project-card:hover {
    transform: translateY(-5px);
    /* Leichter Schwebe-Effekt */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.project-card h3 {
    margin-top: 0;
    /* Kein oberer Margin für die erste Überschrift in der Karte */
}

.project-card p {
    margin-bottom: 1rem;
}

.project-card .button {
    display: inline-block;
    /* Button-Styling */
    background-color: var(--button-bg);
    color: var(--button-text) !important;
    /* Wichtig, um Linkfarbe zu überschreiben */
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    transition: background-color var(--transition-speed) ease;
}

.project-card .button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-text) !important;
}

/* ======================================== */
/* =========== Gallery Section ============ */
/* ======================================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.gallery img:hover {
    transform: scale(1.05);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
}

.modal.active {
    display: flex;
}

.modal .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    cursor: pointer;
}


/* ======================================== */
/* ========== About & Contact Section ===== */
/* ======================================== */

.about-section,
.contact-section {
    max-width: 800px;
    /* Schmalerer Container für Textsektionen */
    margin: 0 auto;
    padding: 1.5rem;
}

/* ======================================== */
/* ================ Footer ================ */
/* ======================================== */

.site-footer {
    background-color: var(--header-footer-bg);
    color: var(--text-color);
    /* Stelle sicher, dass Text lesbar ist */
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: auto;
    /* Footer nach unten schieben */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.site-footer p {
    margin-bottom: 0.5rem;
}

.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.footer-navigation li {
    display: inline-block;
    /* Links nebeneinander */
    margin: 0 0.5rem;
}

.footer-navigation a {
    font-size: 0.9rem;
}

/* ======================================== */
/* =========== Media Queries ============== */
/* ======================================== */

/* Kleinere Anpassungen für sehr kleine Handys */
@media (max-width: 420px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .project-card {
        padding: 1rem;
    }

    .hero-section {
        padding: 1rem 1rem;
    }

    .hero-section h1 {
        margin-top: 0;
    }


}

/* Mittlere Bildschirme (Tablets) - Wenige Anpassungen nötig dank Flex/Grid */
@media (max-width: 768px) {
    img[src$=".gif"] {
        display: none;
    }
}

/* Größere Bildschirme */
/* @media (min-width: 1200px) { ... } */