/* --- CSS GRUNDLAGEN --- */
:root {
    --primary-green: #689F38;
    --light-green: #AED581;
    --dark-text: #333;
    --white: #ffffff;
    --bg-grey: #f4f4f4;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
}
html {
    scroll-behavior: smooth;

}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--dark-text);
    /*background-color: var(--bg-grey);*/
    background-color: var(--bg-grey);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --------------------------- */
/* --- HEADER & NAVIGATION --- */
/* --------------------------- */
header {
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* WICHTIG: Das nav-Element sorgt für das Nebeneinander */
nav {
    display: flex;                  /* Macht nav-top und nav-content nebeneinander */
    justify-content: space-between; /* Schiebt Logo nach links, Menü nach rechts */
    align-items: center;            /* Zentriert alles vertikal */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    min-height: 80px;               /* Mindesthöhe statt fixer Höhe */
}

/* Container für Logo und Burger */
.nav-top {
    display: flex;
    align-items: center;
    /* justify-content: space-between; -> Nicht nötig auf Desktop, da Burger weg ist */
}

/* Logo Bild */
.logo img {
    height: 55px;
    width: auto;
    object-fit: contain;
    display: block; /* Verhindert kleine Abstände unter dem Bild */
}

/* Der Bereich mit Links */
.nav-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Die Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 1.05rem;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.nav-links li a:hover, .nav-links li a.active {
    color: #000;
    border-bottom: 2px solid #000;
    font-weight: 600;
}

/* Burger Menu (Standardmäßig versteckt auf Desktop) */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px;
    transition: all 0.3s ease;
}

/* --- MOBILE RESPONSIVE (Max 900px) --- */
@media (max-width: 900px) {
    /* --- 1. GRUNDLAYOUT RESET --- */
    header {
        position: sticky; /* Nicht mehr sticky auf Handy */
    }

    nav {
        display: block; /* Wichtig: Block, damit nav-top und Content untereinander stehen */
        padding: 0 5%;
        height: auto;
    }

    /* --- 2. TOP LEISTE (Logo + Burger) --- */
    .nav-top {
        justify-content: space-between; /* Logo links, Burger rechts */
        height: 80px;
    }

    .logo img {
        height: 45px; /* Etwas kleiner auf Handy */
        margin: 0; /* Kein Margin nötig, da zentriert in nav-top */
    }

    .burger {
        display: block; /* Burger sichtbar machen */
    }

    /* --- 3. DAS AUSKLAPP-MENÜ (Nav Content) --- */
    .nav-content {
        display: none; /* Standardmäßig ausgeblendet */
        flex-direction: column;
        width: 100%;
        padding-bottom: 20px;
        background-color: var(--white);
        border-top: 1px solid #f0f0f0;
        animation: slideDown 0.3s ease forwards;
    }

    /* Diese Klasse wird per JavaScript hinzugefügt (.show) */
    .nav-content.show {
        display: flex;
    }

    /* --- 4. LINKS STYLING --- */
    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 0; /* Wir nutzen Padding und Borders statt Gap */
        margin: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 15px;
        font-size: 1.1rem;
        border-bottom: 1px solid #f9f9f9; /* Feine Trennlinien */
    }

    /* --- 6. BURGER ANIMATION --- */
    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------- */
/* --- HAUPTBEREICH (MAIN) --- */
/* --------------------------- */
/* Wichtig: Das sorgt für den Abstand zum Rand auf Unterseiten */
main {
    /*display: flex;*/
    flex: 1;
    padding: 40px 0;

    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Container: Hält Sidebar und Hauptinhalt nebeneinander */
.flyer-container {
    /*gap: 40px;*/
    flex: 1;
    /*max-width: 900px;*/
    margin: 0px auto 10px;

    font-family: Arial, sans-serif;
    align-items: start;
    justify-items: start;
}

/* Hauptinhaltsbereich */
.main-content {
    width: 100%;
    max-width: 900px;
    display: flex;
    margin: auto;
    flex-direction: column;
    position: relative;
}

.top-row {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center; /* Zentriert das Logo vertikal zur grauen Box */
    gap: 20px;
}

.vertical-brand {
    display: flex;
    justify-content: center;
    flex-shrink: 0; /* Verhindert, dass das Logo gestaucht wird */
    width: 100px;    /* Breite deiner "Sidebar" */
    align-self: start;


    position: relative; /* Ermöglicht die Nutzung von z-index */
    z-index: 2;        /* Sorgt dafür, dass das Logo ÜBER dem Grau liegt */

    /* Schiebt das Logo nach rechts.
       Der Wert (z.B. -40px) bestimmt, wie tief es im Grau steckt */
    margin-right: -100px;

    /* Falls das Logo zentriert war, stellen wir sicher,
       dass es sich nicht verformt */
    flex-shrink: 0;
}

.vertical-brand img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.vertical-brand , .hero-card-gray{
    padding-top: 40px;
}
/* Graue Box oben rechts */
.hero-card-gray {
    flex-grow: 1;
    background-color: #e5e7eb; /* Hellgrau */
    padding: 40px; /* Unten mehr Platz für die Überlappung */
    padding-left: 100px;
    padding-bottom: 250px;
    z-index: 1;
    border-radius: 12px;
}

.hero-card-gray h1 {
    font-size: 4rem;
    margin-bottom: 0;
}

.hero-card-gray p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding-left: 15px;
    padding-right: 50px;
}
/*.hero {
    background-color: var(--white);
    padding: 60px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}
.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; max-width: 800px; margin: 0 auto 20px auto; }*/

/* Grüne Box (GUT ZU WISSEN) */
.info-card-green {
    background-color: #6a9641; /* Das Apfelgrün */
    color: white;
    padding: 30px;
    width: 320px;
    border-radius: 12px;
    margin-bottom: 40px;

    /* Positionierung: Schiebt die Box nach oben in die graue Box hinein */
    position: absolute;
    top: 450px; /* Wert anpassen, bis es optisch passt */
    left: 0;
    z-index: 2;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
}

.info-card-green h2 {
    margin-top: 0;
    font-size: 1.4rem;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}

.info-card-green ul {
    list-style: none;
    padding: 0;
}

.info-card-green li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/* Die weißen Quadrate vor den Listenpunkten */
.info-card-green li::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #d1d5db; /* Hellgraues Quadrat */
    margin-right: 15px;
    flex-shrink: 0;
}

/* Der Bereich mit Benjamin & Zitat */
.founder-intro {
    display: flex;
    align-items: center;
    gap: 40px;

    background-color: #fff; /* Optional: Weißer Kasten oder transparent lassen */
    padding: 30px;
    margin-top: 280px;
    margin-bottom: 40px;
    border-radius: 12px;

    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt: Karte hebt sich leicht ab */
.founder-intro:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Das Bild von Benjamin */
.founder-image-wrapper img {
    width: 220px;
    height: 280px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Das Zitat rechts daneben */
.founder-quote {
    font-style: italic;
    font-size: 1.15rem;
    color: #000;
    max-width: 600px;
}

.quote-author {
    display: block;
    /*margin-top: 15px;*/
    font-style: normal;
    font-weight: bold;
    color: #555;
    text-align: right; /* Name rechtsbündig */
}

.checklist {
    color: white;
    list-style: square;
    padding: 0;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}
.checklist li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
.checklist li::before {
    content:"";
    margin-right: 10px;
    background: white;
    width: 25px; height: 25px;
    display: flex; align-items: center; justify-content: center;

}

.cta-button {
    display: inline-block;
    background-color: var(--bg-grey);
    color: #f39200;
    padding: 15px 30px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    border: 2px solid var(--bg-grey);
    transition: all 0.3s;
}
.cta-button:hover { background-color: transparent; color: var(--bg-grey); }

.cta-button-white {
    display: inline-block;
    background-color: var(--white);
    color: black;
    padding: 15px 30px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    border: 2px solid var(--white);
    transition: all 0.3s;
}
.cta-button-white:hover { background-color: transparent; color: var(--white); }

.philo-leistungen-container {
    background: white;
    padding-top: 50px;
    padding-bottom: 10px;
    font-family: Arial, sans-serif;
    align-items: start;
    scroll-margin-top: 60px;
}

.philo-leistungen-section {
    /*gap: 40px;*/
    max-width: 900px;
    margin: 0 auto;
}

/* Karten-Design */
.card {
    background-color: #fff;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 40px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-gray {
    background-color: var(--bg-grey);
}

/* Subtiler Schatten wie im Screenshot */
.shadow-soft {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Hover-Effekt: Karte hebt sich leicht ab */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.other {
    display: flex;
    flex-direction: row;
}
/* Karten-Design */
.card2 {
    flex: 1;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    border-radius: 12px;
    gap: 60px;
    padding: 35px;
    margin-bottom: 40px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card2 a {
    flex: 0 0 100%;
}

.philo-box p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
}

/* Subtiler Schatten wie im Screenshot */
.shadow-soft2 {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Hover-Effekt: Karte hebt sich leicht ab */
.card2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.quote {
    font-style: italic;
    font-weight: 500;
    font-size: 1.1rem;
    color: #444;
    border-left: 4px solid #f39200;
    padding-left: 15px;
    margin-bottom: 20px;
}

/* Die Karte als Link-Element */
.card-green {
    text-decoration: none; /* Entfernt das Standard-Blau von Links */
    color: inherit;
    display: block; /* Macht die gesamte Fläche klickbar */
    border-left: 5px solid #76b041; /* Grüner Akzent für "Förderung/Geld" */
}


.cta-text {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    color: #76b041;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Hover-Animation für den Pfeil */
.card-link:hover .cta-text {
    padding-left: 5px;
    transition: padding 0.3s ease;
}


@media (max-width: 900px) {
    .hero {
        padding: 30px 20px;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Die "Gut zu wissen" Box */
    .checklist {
        margin-left: 0;
    }
}

.angebot-container {
    /*gap: 40px;*/
    max-width: 900px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: Arial, sans-serif;
    align-items: start;
    scroll-margin-top: 60px;
}

.angebot-quote {
    text-align: center;
    width: 100%;
}


/* ------------------------- */
/* --- ÜBER UNS DESIGN  --- */
/* ------------------------ */

.team-container {
    /*gap: 40px;*/
    /*max-width: 900px;*/
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: Arial, sans-serif;
    align-items: start;
    justify-items: start;
    background: white;
    scroll-margin-top: 60px;
}

.team-list {
    display: flex;
    flex-direction: column;
    max-width: 1000px; /* Nicht zu breit, damit es lesbar bleibt */
    margin: 0 auto;
}

.team-list h1 {
    font-size: 4rem;
}

.centered-header {
    width: 100%;
    text-align: center;
}

.team-member {
    display: flex;
    gap: 40px; /* Abstand zwischen Bild und Text */
    align-items: flex-start; /* Oben bündig ausrichten */
    background-color: var(--bg-grey); /* Optional: Weißer Kasten oder transparent lassen */
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt: Karte hebt sich leicht ab */
.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Das Bild */
.member-img {
    flex-shrink: 0; /* Verhindert, dass das Bild gequetscht wird */
    width: 220px;   /* Fixe Breite wie im Screenshot */
}

.member-img img {
    width: 100%;
    height: 280px; /* Hochformat */
    object-fit: cover; /* Schneidet das Bild sauber zu, ohne Verzerren */
    border-radius: 4px; /* Minimale Abrundung */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Dezent, edel */
    background-color: #ddd; /* Platzhalterfarbe falls Bild lädt */
}

/* Der Textbereich */
.member-info {
    padding-top: 10px; /* Damit der Name optisch auf Augenhöhe mit Bild beginnt */
}

.member-info h3 {
    font-size: 1.4rem;
    font-weight: 800; /* Sehr fett, wie "Benjamin" im Bild */
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
}

.member-info p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333; /* Dunkles Grau für gute Lesbarkeit */
    margin-bottom: 15px;
}

.team-werbung {
    text-align:center;
    margin-top:20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;"
}

/* Die orangene Schriftfarbe */
.header-orange {
    color: #f39200;
    font-size: 3rem;
    margin-top: 0px;
}
.text-orange {
    color: #f39200;
    font-size: 1.6rem;
    margin-top: 0px;
    margin-bottom: 15px;
}


.text-white {
    color: white;
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.text-green {
    color: #76b041;
    margin-top: 0;
    font-size: 1.6rem;
}





/* Responsive: Auf Handys untereinander */
@media (max-width: 900px) {
    .philosophy-section {
        padding: 10px 20px;
    }

    .philo-grid {
        grid-template-columns: 1fr; /* Untereinander */
        gap: 30px;
    }

    .founder-intro {
        flex-direction: column;
        text-align: center;
    }

    .quote-author {
        text-align: center;
    }

    .team-member {
        flex-direction: column; /* Untereinander */
        align-items: center; /* Mittig */
        text-align: center;
        gap: 10px;
    }

    .member-img {
        width: 100%;
        max-width: 280px; /* Begrenzung, damit es nicht riesig wird */
    }

    .member-img img {
        height: auto;
        aspect-ratio: 3/4; /* Format beibehalten */
    }

    .member-info {
        padding-top: 0;
    }
}


/* --------------------------- */
/* --- KONTAKT & FORMULARE --- */
/* --------------------------- */
.contact-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: Arial, sans-serif;
    align-items: start;
    justify-items: start;
    scroll-margin-top: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 40px;
}

.contact-container h2 {
    flex: 0 0 100%;
}

.contact-box {
    flex: 1;
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 300px; /* Verhindert, dass Boxen zu schmal werden */
}

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 10px;
    border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;
    font-family: inherit;
}
.btn-submit {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; width: 100%;
    font-size: 1rem;
}


/* --------------------- */
/* --- FOOTER DESIGN --- */
/* --------------------- */
.site-footer {
    background-color: var(--white);
    padding: 60px 5% 20px 5%;
    border-top: 1px solid #eaeaea; /* Zarte Linie oben, falls gewünscht */
    margin-top: auto; /* Drückt Footer nach unten */
    font-size: 0.95rem;
    color: #555; /* Dunkelgrau wie im Bild */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* 4 Spalten Layout, das bei kleinen Bildschirmen umbricht */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

/* Typografie im Footer */
.footer-col h4 {
    color: #000; /* Schwarze Überschriften */
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    text-decoration: none;
    color: #666; /* Etwas helleres Grau für Text */
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-green);
}

/* Brand Spalte (Logo Bereich) */
.footer-logo {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.footer-logo .highlight {
    color: var(--primary-green); /* Dein Grün für "FIT" */
}

.logo-icon {
    font-size: 1.5rem;
    margin-right: 5px;
}

.brand-sub {
    font-size: 0.75rem;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: bold;
}

.footer-slogan {
    line-height: 1.5;
    color: #666;
}

/* Kontakt Spalte */
.contact-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Unterer Copyright Balken */
.footer-bottom {
    border-top: 1px solid #eaeaea;
    text-align: center;
    padding: 30px 20px; /* Padding an den Seiten für Mobile */
    margin-top: 40px;   /* Etwas mehr Abstand zum Inhalt oben */
    color: #888;
    font-size: 0.85rem;
}

.legal-links {
    list-style: none; /* Entfernt die Aufzählungspunkte */
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;    /* Setzt die Links nebeneinander */
    justify-content: center;
    gap: 20px;        /* Erzeugt den Abstand zwischen den Links ohne Striche */
}

.legal-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

/* Mobile Anpassung */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr; /* Alles streng untereinander */
        gap: 30px;
        text-align: center;
    }

    .footer-links li {
        margin-bottom: 15px; /* Mehr Platz für Finger-Taps */
    }

    /* Kontakt-Icons zentrieren */
    .contact-item {
        justify-content: center;
    }

    .footer-logo img {
        margin: 0 auto 15px auto; /* Logo zentrieren */
    }
}

/* ------------------------ */
/* --- LOGO ANPASSUNGEN --- */
/* ------------------------ */
/* 1. Header Logo */
.logo {
    /* Entfernt Text-Eigenschaften, da jetzt ein Bild drin ist */
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 50px; /* Fixe Höhe für den Header */
    width: auto;  /* Breite passt sich automatisch an */
    object-fit: contain; /* Verhindert Verzerren */
}

/* Damit die Navigation schön mittig zum Logo bleibt */
nav {
    padding: 0.5rem 5%; /* Etwas weniger Padding oben/unten, da Logo höher ist */
}


/* 2. Footer Logo */
.footer-logo {
    display: block;
    margin-bottom: 15px;
    text-decoration: none;
}

.footer-logo img {
    width: 250px; /* Im Footer darf es größer sein */
    max-width: 100%; /* Damit es auf dem Handy nicht rausragt */
    height: auto;
}


@media (max-width: 900px) {



    /* --- 2. LAYOUT & ABSTÄNDE --- */
    main {
        padding: 20px 5%; /* Weniger Rand an den Seiten */
    }

    h1 { font-size: 2rem;
        word-wrap: break-word;
        hyphens: auto; } /* Kleinere Überschriften */
    h2 { font-size: 1.5rem; }

    /* --- 3. LANDING PAGE --- */


    /* --- 4. TEAM BEREICH (Liste) --- */


    /* --- 5. FOOTER --- */

}