/* =====================================================
   FV.DESKTOP.CSS – Desktop-only Stylesheet
   Förderverein Gemeinsam Aktiv für Speicher
===================================================== */

/* =====================================================
   1. GLOBAL / BODY
===================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('../images/homepage/grafikhomepage.png') no-repeat center center fixed;
    background-size: cover;
}

/* =====================================================
   2. HEADER – DESKTOP (Logo links außen)
===================================================== */
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 10%;
    display: flex;
    justify-content: flex-end; /* Nav bleibt im Container */
    align-items: flex-start;
    position: relative;
}

/* LOGO – links außen, Höhe bleibt */
.logo {
    position: absolute;
    left: 0;          /* ganz links */
    top: 30px;        /* gleiche Höhe wie vorher */
}

.logo img {
    height: 150px;
    display: block;
}

/* Header Right (Nav + Social) */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* =====================================================
   3. NAVIGATION – DESKTOP
===================================================== */
.nav {
    margin-top: 20px;
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav ul li {
    position: relative;
}

.nav ul li > a {
    font-weight: 700;
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav ul li > a:hover {
    color: orange;
}

/* Dropdown Menüs */
.nav ul li .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 10px 0;
    z-index: 9999;
    flex-direction: column;
}

.nav ul li:hover > .dropdown {
    display: block;
}

.nav ul li .dropdown li a {
    display: block;
    padding: 10px 20px;
    font-weight: 400;
    color: #000;
}

.nav ul li .dropdown li a:hover {
    color: orange;
}

/* =====================================================
   4. SOCIAL MEDIA – DESKTOP
===================================================== */
.social-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 16px;
}

.social {
    display: flex;
    gap: 12px;
}

.social img {
    width: 32px;
    height: 32px;
}

/* =====================================================
   5. HEADER – GRUNDREGEL
===================================================== */
/* Hamburger standardmäßig AUS (Desktop) */
.mobile-toggle {
    display: none;
}

/* =====================================================
   6. CONTENT / HERO / KACHELN
===================================================== */
.content {
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero {
    margin-top: 120px;
    text-align: center;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.hero h2 {
    font-size: 26px;
    margin-bottom: 30px;
}

.hero p {
    font-size: 18px;
}

/* Grid Layout */
.aktuelles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 60px auto 120px;
}

.kachel {
    background: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: 0.25s ease;
}

.kachel:hover {
    transform: translateY(-5px);
}

.kachel-bild {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.kachel-button {
    margin-top: 15px;
    padding: 12px 24px;
    border-radius: 6px;
    background: orange;
    color: #fff;
    font-weight: 600;
}

/* =====================================================
   6a. BUTTONS IM BODY
===================================================== */
body button,
body .kachel-button {
    background-color: orange; /* Orange */
    color: #fff;              /* Schrift weiß */
    border: none;             /* Kein Rand */
    padding: 12px 24px;       /* Größe / Innenabstand */
    border-radius: 6px;       /* Abgerundete Ecken */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effekt */
body button:hover,
body .kachel-button:hover {
    background-color: darkorange; /* etwas dunkler beim Hover */
    transform: translateY(-2px);  /* leichter "Lift" Effekt */
}

/* =====================================================
   6b. Mehrere Buttons in einer Kachel – vertikal anordnen
===================================================== */
.kachel .kachel-buttons {
    display: flex;
    flex-direction: column; /* Buttons untereinander */
    gap: 10px;              /* Abstand zwischen den Buttons */
    margin-top: 15px;       /* Abstand zur Kachel-Inhalt */
}
/* =====================================================
   6c. ZIELE – Desktop Layout (Bild links, Text rechts)
===================================================== */

.ziele-table {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 60px 0 120px;
}

.ziele-row {
    display: grid;
    grid-template-columns: 200px 1fr; /* Bild | Text */
    gap: 30px;
    align-items: center;
}

.ziele-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 10px;
}

.ziele-text {
    text-align: left;
}

.ziele-text h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
}

.ziele-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

/* =====================================================
   7. FOOTER – Hintergrund und Schriftfarbe
===================================================== */
.footer {
    background-color: #000;  /* schwarz */
    color: #fff;             /* Schrift weiß */
    padding: 20px 10%;
}

.footer a {
    color: #fff;             /* Links ebenfalls weiß */
    text-decoration: none;
}

.footer a:hover {
    color: orange;
}

/* Innerer Container */
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;              /* padding bereits in .footer gesetzt */
}

.footer-address {
    text-align: left;
}

.footer-links {
    display: flex;
    flex-direction: column; /* Links untereinander */
    gap: 5px;
    text-align: right;
}

/* =====================================================
   8. OVERLAYS / MODALS
===================================================== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.overlay img,
.overlay iframe {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.overlay-close {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

/* =====================================================
   8b. GLOBAL DESKTOP OVERLAY
===================================================== */
.desktop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.desktop-overlay .overlay-content {
    max-width: 90vw;      /* für Bilder, HTML-Content */
    max-height: 90vh;
    overflow-y: auto;     /* nur vertikal scrollen */
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;  /* abgerundete Ecken für HTML/Iframe */
}

.desktop-overlay img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 10px; /* abgerundete Ecken für Bilder */
}

.desktop-overlay iframe {
    width: 90vw;          /* volle Breite des Viewports */
    max-width: 1200px;    /* optional, damit es nicht zu breit wird */
    height: 90vh;         /* 90% der Höhe */
    border: none;
    display: block;
    border-radius: 12px;  /* abgerundete Ecken */
}

/* Close Button */
.desktop-overlay .overlay-close {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}
/* =====================================================
   9. PROJEKTE – DESKTOP GRID
===================================================== */

.projekte-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Projekte pro Zeile */
    gap: 30px;
    margin: 60px auto 120px;
}

/* Einzelne Projekt-Kachel */
.projekt-kachel {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.projekt-kachel:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Projektbild */
.projekt-kachel img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Projekttitel */
.projekt-kachel h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
/* =====================================================
   VORSTAND GRID
===================================================== */
.vorstand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten auf Desktop */
    gap: 50px 30px; /* vertikal 50px, horizontal 30px */
    margin: 40px 0;
}

.vorstand-person {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-direction: row; /* Standard: Bild links, Text rechts */
}

/* Alternierende Reihen: Bild rechts, Text links */
.vorstand-person:nth-child(2n) {
    flex-direction: row-reverse;
    text-align: left; /* Text links neben Bild */
}

/* Bild Styling */
.vorstand-person img {
    width: 200px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Text Styling */
.vorstand-text {
    flex: 1;
}

.vorstand-text h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: orange;
}

.vorstand-text p {
    margin: 5px 0;
}

.vorstand-text .name {
    font-weight: 700;
    margin-top: 10px;
}

.vorstand-text .funktion {
    font-style: italic;
    color: #555;
}

/* RESPONSIVE: Bei kleinen Bildschirmen */
@media (max-width: 900px) {
    .vorstand-grid {
        grid-template-columns: 1fr; /* nur eine Spalte */
    }

    .vorstand-person,
    .vorstand-person:nth-child(2n) {
        flex-direction: column; /* Bild über Text */
        text-align: center;
    }

    .vorstand-person img {
        width: 150px;
        margin-bottom: 15px;
    }
}
/* ===============================
   KONTAKTFORMULAR
================================ */

.contact-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form label {
    font-weight: 500;
    margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
    font-family: inherit;
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #ff6600;
}

/* Pflichtfeld-Stern */
.required {
    color: #ff6600;
}

/* reCAPTCHA Abstand */
.captcha-wrapper {
    margin: 20px 0;
}

/* Senden-Button */
.contact-form .kachel-button {
    align-self: flex-start;
    margin-top: 10px;
}