/* --- SCHRIFT-EINSTELLUNGEN --- */
        @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

        /* --- GRUNDLAGEN --- */
        :root {
            --bg-main: #ffffff;
            --bg-secondary: #f0f8ff;
            --deep-blue: #0b1c2d;     
            --accent-hot: #f39c12; 
            --accent-cold: #87ceeb;
            --font-main: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg-main);
            color: var(--deep-blue);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            hyphens: auto; 
            font-weight: 200; 
            font-size: 0.95rem; 
        }

        h1, h2, h3 { 
            font-weight: 900; 
            text-transform: uppercase;
            letter-spacing: 0; 
            margin-top: 0; 
            color: var(--deep-blue);
        }

        .highlight { color: var(--accent-hot); }

        p { 
            margin-bottom: 1.5em; 
            font-size: 0.95rem; 
            color: var(--deep-blue);
            font-weight: 200; 
        }
        
        a { text-decoration: none; color: inherit; transition: 0.3s; }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
        }

        section { padding: 60px 0; }

        /* --- HEADER --- */
        html { scroll-padding-top: 92px; }
        .topbar { position: sticky; top: 0; z-index: 200; background-color: var(--bg-main); }
        header {
            padding: 20px 0; 
            background: var(--bg-main);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--bg-secondary);
        }

        .logo-img { height: 30px; width: auto; object-fit: contain; }
        
        .contact-link {
            font-weight: 700; 
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--deep-blue);
            border: 2px solid var(--deep-blue);
            padding: 10px 24px;
            display: inline-block;
            cursor: pointer;
            background: none;
            font-family: var(--font-main);
        }
        .contact-link:hover { 
            border-color: var(--accent-hot);
            color: var(--accent-hot);
            background: rgba(243, 156, 18, 0.08); 
        }

        /* --- INTRO SECTION --- */
        .intro { padding: 70px 0 100px; }

        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center; 
        }

        .intro-content h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.0; margin-bottom: 30px; }
        
        .intro-lead {
            font-size: 1.15rem; 
            font-weight: 600; 
            color: var(--deep-blue);
            margin-bottom: 25px;
            border-left: 5px solid var(--accent-cold);
            padding-left: 25px;
        }

        .profile-image-container { position: relative; width: 100%; }
        
        .profile-image {
            display: block;
            width: 100%;
            object-fit: cover; 
            object-position: center 20%; 
            filter: grayscale(100%);
            transition: all 0.5s ease;
            aspect-ratio: 21/9; 
        }
        
        .profile-image:hover { filter: grayscale(0%); }

        @media (min-width: 901px) {
            .profile-image { aspect-ratio: 1/1; max-width: 500px; margin-left: auto; }
        }

        /* --- SERVICES --- */
        .services { background-color: var(--bg-secondary); padding: 60px 0 80px 0; }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
            margin-bottom: 80px; 
        }

        .service-col {
            background: #fff; 
            padding: 30px;
            box-shadow: 0 10px 30px rgba(11, 28, 45, 0.05);
            transition: transform 0.3s ease;
            position: relative;
            cursor: pointer;
        }

        .image-frame {
            width: 100%;
            height: 220px; 
            overflow: hidden;
            margin-bottom: 25px;
            background-color: var(--bg-secondary);
        }

        .image-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: all 0.5s ease;
        }

        .service-col.open .image-frame img { filter: grayscale(0%); transform: scale(1.05); }

        .service-col h2 { font-size: 1.25rem; margin-bottom: 15px; }
        
        .service-num { 
            display: block;
            font-size: 0.85rem;
            color: var(--accent-hot); 
            font-weight: 900; 
            margin-bottom: 10px;
        }

        /* --- CONTACT FORM --- */
        .contact-form-container {
            margin-top: 40px;
            max-width: 800px;
        }
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        .form-group.full-width {
            grid-column: span 2;
        }
        .form-group label {
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
            margin-bottom: 8px;
            color: var(--deep-blue);
        }
        .form-group input, .form-group textarea {
            border: 1px solid #d1d1d1;
            padding: 12px;
            font-family: var(--font-main);
            font-size: 0.95rem;
            color: var(--deep-blue);
        }
        .form-group input:focus, .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-hot);
        }
        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }
        @media (max-width: 600px) {
            .form-grid { grid-template-columns: 1fr; }
            .form-group.full-width { grid-column: span 1; }
        }

        /* --- NETWORK SECTION --- */
        .network { background-color: var(--bg-main); border-top: 1px solid var(--bg-secondary); }
        
        .profile-card { 
            border-left: 3px solid var(--accent-cold); 
            padding: 30px; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            background: #fff;
        }
        
        .profile-tag { 
            font-weight: 700; 
            color: var(--accent-hot); 
            margin-bottom: 20px; 
            font-size: 0.85rem; 
            text-transform: uppercase; 
        }

        .network-portrait {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            filter: grayscale(100%);
            margin-bottom: 25px;
            transition: filter 0.5s ease;
            background-color: var(--bg-secondary);
        }

        .profile-card.open .network-portrait,
        .profile-card.static-open .network-portrait {
            filter: grayscale(0%);
        }

        @media (hover: hover) {
            .profile-card:hover .network-portrait {
                filter: grayscale(0%);
            }
        }

        .profile-details { 
            max-height: 0; 
            overflow: hidden; 
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; 
            opacity: 0;
        }

        .profile-card.open .profile-details { 
            max-height: 1000px; 
            opacity: 1; 
            margin-top: 15px; 
            padding-top: 10px;
            border-top: 1px solid var(--bg-secondary);
        }

        .mobile-toggle-icon { 
            display: inline-block; 
            margin-left: 10px; 
            color: var(--accent-hot); 
            transition: transform 0.3s ease;
        }

        .profile-card.open .mobile-toggle-icon {
            transform: rotate(45deg);
        }

        .profile-card.static-open { cursor: default; }

        /* --- FOOTER --- */
footer { 
    padding: 60px 0; 
    background: var(--deep-blue); 
    color: #a0b0c0; 
}

/* Die obere Zeile mit den Links */
.footer-links { 
    display: flex; 
    gap: 40px; /* Großer Abstand zwischen den Links */
    font-weight: 700; 
    flex-wrap: wrap; 
    margin-bottom: 20px; /* Abstand zur Adresszeile */
}

.footer-links a { 
    color: #fff; 
    text-transform: none; 
}

.footer-links a:hover { 
    color: var(--accent-hot); 
}

/* Die Adresszeile in einer Zeile */
.footer-address { 
    font-size: 0.9rem; 
    color: #ffffff; 
    font-weight: 600; 
    margin-bottom: 30px; 
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 15px; /* Abstand um den Strich herum */
}

/* Der "fancy" Trenner */
.footer-address span {
    color: var(--accent-hot); /* Optional: Der Strich in Akzentfarbe? Sonst einfach löschen */
    font-weight: 200;
    opacity: 0.6;
}

.footer-copy { 
    font-size: 0.75rem; 
    opacity: 0.6; 
    line-height: 1.4; 
}

/* Mobil-Optimierung: Falls der Bildschirm zu schmal für eine Zeile ist */
@media (max-width: 600px) {
    .footer-address {
        flex-wrap: wrap;
        gap: 10px;
    }
    .footer-links {
        gap: 20px;
    }
}


        /* --- WALD-SEKTION (buerofeuerfest-Wald, H. 27.08.2026) --- */
        .wald { background-color: var(--bg-secondary); }
        .wald-grid { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
        .wald-logo { width: 150px; height: 150px; object-fit: contain; }
        .wald p { max-width: 720px; }
        .wald-link { color: var(--accent-hot); font-weight: 800; border-bottom: 2px solid var(--accent-hot); }

        /* --- CASES & TERMINE (H., 15.09.2026) --- */
        .cases { background-color: var(--bg-main); border-top: 1px solid var(--bg-secondary); padding: 60px 0 70px; }
        .case-item { border-left: none; padding-left: 0; max-width: 820px; }
        .case-meta { display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hot); font-weight: 800; margin-bottom: 16px; }
        .case-item p { margin-bottom: 14px; }
        .case-label { display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; color: var(--deep-blue); margin-bottom: 2px; }
        .case-note { font-size: 0.85rem; color: #6b7c8f; }
        .termine { background-color: #dceefb; border-top: 1px solid #dceefb; padding: 62px 0 72px; }
        .termine h2 { color: var(--deep-blue); }
        .termine .service-num { color: var(--accent-hot); }
        .termine-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 900px; }
        .termin-block { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid rgba(11, 28, 45, 0.14); }
        .termin-block:first-child { border-top: none; padding-top: 0; }
        .termin-datum { color: var(--accent-hot); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; }
        .termin-text { max-width: 620px; }
        .termin-text strong { display: block; margin-bottom: 6px; }
        .termin-text a { display: inline-block; margin-top: 8px; }

        @media (max-width: 700px) {
            .termin-block { grid-template-columns: 1fr; gap: 6px; }
            .case-item { padding-left: 0; }
        }
        .wald-banner { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center; margin: 18px 0 24px; }

        /* --- RESPONSIVE --- */
        @media (min-width: 901px) {
            .service-col:hover { transform: translateY(-5px); }
            .service-col:hover .image-frame img { filter: grayscale(0%); transform: scale(1.05); }
            .profile-card:hover:not(.static-open) { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(11, 28, 45, 0.05); }
        }

        @media (max-width: 900px) {
            .intro-grid { grid-template-columns: 1fr; gap: 50px; }
            .intro-content { order: 2; }
            .profile-image-container { order: 1; }
            .service-text { display: none; margin-top: 15px; }
            .service-col.open .service-text { display: block; animation: fadeIn 0.3s ease-in; }
            .wald-grid { grid-template-columns: 1fr; gap: 30px; }
            .wald-logo { width: 110px; height: 110px; }
            /* Banner bleibt auf schmalen Screens ein sichtbarer Streifen:
               feste Höhe + Beschnitt (kein Verzerren), da 7,14:1 sonst auf ~55 px zusammenfällt */
            .wald-banner { height: 140px; object-fit: cover; object-position: center; }
        }

        @media (max-width: 600px) {
            .wald-banner { height: 120px; }
            .wald-grid { gap: 22px; }
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* --- NAVIGATION (H., 15.09.2026) --- */
        .nav-toggle { display: none; }
        .main-nav { display: flex; flex-wrap: wrap; gap: 32px; justify-content: flex-end; align-items: center; }
        .main-nav a { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #3d5066; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
        .main-nav a:hover, .main-nav a.aktiv { color: var(--accent-hot); border-bottom-color: var(--accent-hot); font-weight: 700; }
        @media (max-width: 700px) {
            header { flex-wrap: wrap; row-gap: 10px; }
            .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 42px; height: 34px; background: none; border: 0; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--deep-blue); cursor: pointer; }
            .main-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 15px; padding: 14px 0 18px; }
            .main-nav.offen { display: flex; }
            .main-nav a { font-size: 0.74rem; }
        }

        /* --- TEASER für Netzwerk & Cases (H., 15.09.2026) --- */
        .text-link { color: var(--accent-hot); font-weight: 800; border-bottom: 2px solid var(--accent-hot); text-decoration: none; }
        .text-link:hover { color: var(--deep-blue); border-bottom-color: var(--deep-blue); }
        .netzwerk-teaser { display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: center; }
        .netzwerk-teaser img { width: 100%; height: auto; display: block; }
        .netzwerk-teaser .teaser-link { margin-top: 24px; }
        @media (max-width: 700px) { .netzwerk-teaser { grid-template-columns: 1fr; gap: 24px; } .netzwerk-teaser img { width: 50%; max-width: 170px; } }
        .kontakt-daten { margin-top: 46px; border-top: 1px solid var(--bg-secondary); padding-top: 26px; }
        .kontakt-daten a { color: var(--deep-blue); }
        .teaser-link { margin-top: 30px; }
        .teaser-link a, .zurueck a { display: inline-block; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-hot); text-decoration: none; border-bottom: 2px solid var(--accent-hot); padding-bottom: 2px; }
        .teaser-link a:hover, .zurueck a:hover { color: var(--deep-blue); border-bottom-color: var(--deep-blue); }
        .zurueck { margin: 0 0 40px; }
        .unterseite-kopf { padding: 60px 0 10px; }

        /* --- Case-Kopf mit Bild (H., 15.09.2026) --- */
        .case-kopf { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; margin-bottom: 46px; }
        .case-kopf img { width: 100%; height: auto; display: block; justify-self: start; }
        @media (max-width: 700px) { .case-kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 34px; } .case-kopf img { width: 55%; justify-self: start; } }
        .cases-teaser { display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: center; }
        .cases-teaser img { width: 100%; height: auto; display: block; justify-self: start; }
        @media (max-width: 700px) { .cases-teaser { grid-template-columns: 1fr; gap: 24px; } .cases-teaser img { width: 50%; max-width: 170px; justify-self: start; } }

        /* --- Teaser-Reihe: Cases und Netzwerk nebeneinander (H., 15.09.2026) --- */
        .teaser-reihe { background-color: var(--bg-main); border-top: 1px solid var(--bg-secondary); padding: 60px 0 70px; }
        .teaser-reihe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
        .teaser-spalte + .teaser-spalte { border-left: 1px solid var(--bg-secondary); padding-left: 60px; }
        @media (max-width: 980px) {
            .teaser-reihe-grid { grid-template-columns: 1fr; gap: 50px; }
            .teaser-spalte + .teaser-spalte { border-left: none; padding-left: 0; border-top: 1px solid var(--bg-secondary); padding-top: 46px; }
        }