/* CSS-Variablen für einfaches Theming */
:root {
    --bg-color: #F9F9F9;
    --text-color: #1a1a1a;
    --secondary-text-color: #444;
    --border-color: #e0e0e0;
    --link-hover-color: #3c6187;
    --switch-bg: #ccc;
    --switch-circle-bg: #fff;
    --scroll-color: #3c6187;
}

body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #F9F9F9;
    --secondary-text-color: #bbb;
    --text-decoration-color: #de8532;
    --border-color: #333;
    --link-hover-color: #de8532;
    --switch-bg: #de8532; /* iOS green for 'on' state */
    --switch-circle-bg: #fff;
    --scroll-color: #de8532;
}


/* CSS Reset und grundlegende Einstellungen */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* domine-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/domine-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* domine-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/domine-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* domine-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/domine-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    min-height: 100vh;
    display: grid; /* Wir verwenden Grid statt Flexbox */
    grid-template-rows: auto 1fr auto; /* Nav (auto), Main (füllt den Rest), Footer (auto) */

    /* Die restlichen Styles bleiben unverändert */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scroll-Anzeige */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--scroll-color);
    width: 0%;
    z-index: 200;
}

/* Menüleiste */
.top-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    z-index: 100;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-container {
        max-width: 840px;       
        margin: 0 auto;     
        display: flex;
        padding: 1rem 2rem; 
        justify-content: space-between;
        align-items: center;
}


.nav-brand {
    font-weight: 700;
    font-size: 1.2rem;
    /* Standardmäßig sichtbar, keine Transition nötig */
}

/* Spezifische Regel NUR für die Startseite (initial unsichtbar) */
.home-page .nav-brand {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Spezifische Regel für den sichtbaren Zustand NUR auf der Startseite */
.home-page .nav-brand.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-brand a {
    text-decoration: none;
}

/* Dark Mode Schalter */
.dark-mode-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-label {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    transition: color 0.3s ease;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.toggle-container {
    width: 41px;
    height: 21px;
    border-radius: 99px;
    background-color: var(--switch-bg);
    padding: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
}

.toggle-circle {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: var(--switch-circle-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

body.dark-mode .toggle-circle {
    transform: translateX(20px);
}


/* Hauptcontainer */
.container {
    max-width: 840px;
    margin: 0 auto;
    padding: 5vh 2rem 5rem 2rem;
}

/* Typografie */
h1, h2 {
    font-family: 'Domine', serif;
    font-weight: 700;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 2rem;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

a {
    color: var(--text-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

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

/* Sektionen-spezifische Stile */
.hero .subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.project-item h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.project-item p {
    font-size: 1rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.project-item .project-link {
    font-weight: 500;
    font-size: 1rem;
}

.contact-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}

/* Stil für die Artikelliste */
.article-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.article-list li {
    margin-bottom: 1rem;
}

.article-list a {
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.article-list a:hover {
    border-bottom-color: var(--text-color);
}

/* Stile für die Artikelseiten */
.article-content .article-meta {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-bottom: 2rem;
}

.article-content .back-link {
    display: inline-block;
    margin-top: 3rem;
    font-weight: 500;
    text-decoration: none;
}

.article-content .back-link:hover {
    text-decoration: underline;
}

/* ======================================= */
/* RESPONSIVE ANPASSUNGEN (TABLETS & CO.)  */
/* ======================================= */
@media (max-width: 768px) {
    .top-nav {
        padding: 1rem 1.5rem;
    }
    
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .nav-container {
        padding: 0rem 0rem; 
    }

    h1 {
        font-size: 2.8rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    p {
        font-size: 1rem;
    }
}

/* =============================================== */
/* WEITERE ANPASSUNGEN (KLEINE SMARTPHONES)        */
/* =============================================== */
@media (max-width: 480px) {
    .top-nav {
        padding: 0.75rem 1rem;
    }

    .nav-brand {
        font-size: 1rem;
    }

    .nav-container {
        padding: 0rem 0rem; 
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 2.4rem;
    }

    .hero .subtitle {
        font-size: 1.1rem;
    }
}

/* =============================================== */
/* NEU: STILE FÜR DIE RESSOURCEN-LISTE              */
/* =============================================== */

.resource-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.resource-list li {
    margin-bottom: 2.5rem;
}

.resource-link {
    text-decoration: none;
    display: flex;
    align-items: flex-start; /* Sorgt dafür, dass Icon und Text oben bündig sind */
    gap: 1.5rem; /* Abstand zwischen Icon und Text */
}

.resource-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    color: var(--text-color); 
    transition: transform 0.2s ease;
}

.resource-link:hover .resource-icon {
    transform: scale(1.1);
}

.resource-text h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
}

.resource-text p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--secondary-text-color);
    margin: 0;
}

/* NEU: Stile für responsive iframes/Videos */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    margin: 2rem 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.back-link {
    display: inline-block;
    margin-top: 3rem;
    font-weight: 500;
    text-decoration: none;
}

/* =============================================== */
/* FOOTER STYLES                                   */
/* =============================================== */

.site-footer {
    text-align: center; /* Zentriert den Text */
    padding: 2rem 1rem; /* Innenabstand (oben/unten, links/rechts) */
    margin-top: 0rem; /* Großer Abstand zum Hauptinhalt, um ihn abzusetzen */
    border-top: 1px solid var(--border-color); /* Dezente Trennlinie */
    color: var(--secondary-text-color); /* Unauffällige Textfarbe aus den Variablen */
    font-size: 0.9rem; /* Etwas kleinere Schrift */
}

/* =============================================== */
/* ERWEITERTE FOOTER & LEGAL STYLES                */
/* =============================================== */

/* Macht den Footer flexibler für mehrere Links */
.site-footer p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.site-footer a {
    text-decoration: none;
    color: var(--secondary-text-color);
}

.site-footer a:hover {
    text-decoration: underline;
    color: var(--text-color);
}

/* Stile für den Inhalt der Legal-Seite */
.legal-content h2, .legal-content h3 {
    margin-top: 2rem;
}

.legal-content p, .legal-content li {
    line-height: 1.8; /* Verbessert die Lesbarkeit langer Texte */
}

.legal-content a {
    text-decoration: underline;
}

/* =============================================== */
/* STILE FÜR DAS NEUE FOOTER-ICON                  */
/* =============================================== */

/* Ein kleiner Container für den Text und das Icon, um die Ausrichtung zu erleichtern */
.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.3em; /* Kleiner Abstand zwischen Text und Icon */
}

/* Das Styling für das SVG-Herz-Icon */
.footer-heart-icon {
    width: 1em; /* Passt die Größe an die Schriftgröße an */
    height: 1em;
    fill: var(--text-color); /* WICHTIG: Keine Füllfarbe */
  /*  stroke: var(--text-color); /* WICHTIG: Die Strichfarbe entspricht der Textfarbe */
  /* stroke-width: 0.5; Die Dicke des Rahmens */
    vertical-align: middle; /* Verbessert die vertikale Ausrichtung */
}