/* ==========================================================
   ENERGY CONSULTANT 2.0
   Design System
   ========================================================== */

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter","Segoe UI",Arial,sans-serif;

    font-size:16px;

    line-height:1.7;

    color:#374151;

    background:#ffffff;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    font:inherit;

    cursor:pointer;

}

/* ---------- DESIGN SYSTEM ---------- */

:root{

    --primary:#0F6A52;
    --primary-hover:#0B5643;

    --secondary:#1F2937;

    --text:#4B5563;

    --text-light:#6B7280;

    --white:#FFFFFF;

    --light:#F8FAFC;

    --border:#E5E7EB;

    --shadow:
        0 12px 35px rgba(0,0,0,.08);

    --radius:12px;

    --transition:.30s ease;

    --container:1280px;
--surface-accent:#eef8f4;

--gold:#D4A017;

}

/* ---------- CONTAINER ---------- */

.container{

    width:min(var(--container),92%);

    margin:auto;

}

/* ---------- TYPOGRAPHY ---------- */

h1{

    font-size:3.4rem;

    line-height:1.1;

    font-weight:700;

    color:var(--secondary);

}

h2{

    font-size:2.5rem;

    line-height:1.2;

    font-weight:700;

    color:var(--secondary);

}

h3{

    font-size:1.55rem;

    font-weight:600;

    color:var(--secondary);

}

p{

    color:var(--text);

}

/* ---------- BUTTONS ---------- */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 30px;

    border-radius:var(--radius);

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-secondary{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   HEADER
========================================================== */

.site-header{

    position:sticky;
    top:0;
    z-index:1000;

    background:#fff;

    border-bottom:1px solid var(--border);

    box-shadow:0 3px 18px rgba(0,0,0,.05);

}

/* ==========================================================
   HEADER TOP
========================================================== */

.header-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:95px;

}

.logo-area{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo-link img{

    width:82px;

    height:auto;

}

.company-info h1{

    font-size:1.8rem;

    margin-bottom:4px;

    line-height:1.1;

}

.company-info p{

    font-size:.95rem;

    color:var(--text-light);

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:90px 0;

    background:#ffffff;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

}

.hero-content{

    max-width:650px;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:25px;

    border-radius:50px;

    background:var(--surface-accent);

    color:var(--primary);

    font-size:.90rem;

    font-weight:600;

    letter-spacing:.04em;

}

.hero-content h1{

    margin-bottom:25px;

    font-size:3.6rem;

    line-height:1.08;

}

.hero-intro{

    font-size:1.18rem;

    font-weight:600;

    color:var(--primary);

    margin-bottom:20px;

    line-height:1.7;

}

.hero-content p:last-of-type{

    font-size:1.05rem;

    color:var(--text);

    margin-bottom:40px;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-image{

    display:flex;

    justify-content:flex-end;

}
.hero-image img{

    width:100%;

    display:block;

}


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero{

    background:var(--light);

    padding:70px 0;

    border-bottom:1px solid var(--border);

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:.95rem;

    color:var(--text-light);

}

.breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.breadcrumb a:hover{

    text-decoration:underline;

}

.page-hero h1{

    margin-bottom:20px;

}

.page-intro{

    max-width:760px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--text);

}

/* ==========================================================
   PAGE SECTIONS
========================================================== */

.page-section{

    padding:70px 0;

    background:#ffffff;

}

.page-section.light{

    background:var(--light);

}

.page-content{

    max-width:900px;

    margin:0 auto;

}

.page-content p{

    margin-bottom:22px;

    line-height:1.9;

    font-size:1.05rem;

}

.page-content ul{

    margin:25px 0;

    padding-left:20px;

}

.page-content li{

    margin-bottom:12px;

    line-height:1.8;

}


/* ==========================================================
   CTA SECTION
========================================================== */

.cta-section{

    padding:90px 0;

    background:var(--primary);

    color:#ffffff;

    text-align:center;

}

.cta-section h2{

    color:#ffffff;

    margin-bottom:20px;

}

.cta-section p{

    color:rgba(255,255,255,.90);

    max-width:700px;

    margin:0 auto 35px;

    font-size:1.1rem;

}

.cta-section .btn{

    background:#ffffff;

    color:var(--primary);

}

.cta-section .btn:hover{

    background:#f3f4f6;

}

/* ==========================================================
   RESPONSIVE HERO
========================================================== */

@media(max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.hero-content{

    max-width:100%;

}

.hero-image{

    justify-content:center;

}

.hero-content h1{

    font-size:3rem;

}

}

@media(max-width:768px){

.hero{

    padding:70px 0;

}

.hero-content h1{

    font-size:2.3rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

}

.hero-small{
    padding:70px 0 60px;
}


/* ==========================================================
   CONTACT
========================================================== */

.header-contact{

    display:flex;

    gap:32px;

    align-items:center;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:10px;

}

.contact-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--light);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:1rem;

}

.contact-text{

    display:flex;

    flex-direction:column;

}

.contact-label{

    font-size:.75rem;

    text-transform:uppercase;

    color:var(--text-light);

    letter-spacing:.08em;

}

.contact-value{

    font-size:.95rem;

    color:var(--secondary);

    font-weight:600;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.main-navigation{

    border-top:1px solid var(--border);

}

.main-navigation ul{

    display:flex;

    justify-content:center;

    gap:42px;

}

.main-navigation li{

    display:flex;

}

.main-navigation a{

    display:flex;

    align-items:center;

    height:64px;

    position:relative;

    color:var(--secondary);

    font-weight:600;

    transition:.30s;

}

.main-navigation a:hover{

    color:var(--primary);

}

.main-navigation a.active{

    color:var(--primary);

}

.main-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--primary);

    transition:.30s;

}

.main-navigation a:hover::after,

.main-navigation a.active::after{

    width:100%;

}

/* ==========================================================
   FACHGEBIETE
========================================================== */

.expertise{

    padding:90px 0;

    background:#F8FAFC;

}

.section-title{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    font-size:1.1rem;

    color:var(--text-light);

}

.expertise-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.expertise-card{

    background:#fff;

    padding:35px;

    border-radius:16px;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.expertise-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

    border-color:var(--primary);

}

.expertise-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

}

.expertise-card p{

    color:var(--text);

    line-height:1.8;

}


@media(max-width:1000px){

    .expertise-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:700px){

    .expertise-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   LEISTUNGEN
========================================================== */

.services-overview{

    padding:100px 0;

    background:#ffffff;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.service-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:35px;

    overflow:hidden;

transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

    box-shadow:0 8px 25px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    min-height:240px;
    text-decoration:none;
    color:inherit;
    cursor:pointer;



}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

    border-color:var(--primary);

}

.service-card:hover h3{

    color:var(--primary);

}

.service-card h3{

    margin-bottom:18px;

    color:var(--secondary);

    font-size:1.35rem;

    line-height:1.3;

    transition:color .30s ease;

}

.service-card p{

    color:var(--text);

    line-height:1.8;

    flex:1;

}

.service-card a{

    margin-top:25px;

    color:var(--primary);

    font-weight:600;

}

.service-card a:hover{

    color:var(--primary-hover);

}

.service-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px 12px 0 0;
}

.info-card,
.static-card{

    cursor:default;
    transition:none;

}

.info-card:hover,
.static-card:hover{

    cursor:default;

    transform:none;

    border-color:var(--border);

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

/* ==========================================================
   KOMPETENZBEREICHE (ohne Hover)
========================================================== */

.expertise-static .expertise-card{

    cursor:default;
    transition:none;

}

.expertise-static .expertise-card:hover{

    transform:none;
    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

/* ==========================================================
   SERVICES GRID
========================================================== */
.services-grid.three-columns{

    grid-template-columns: repeat(3, minmax(340px, 1fr));

}

@media (max-width:992px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .services-grid.three-columns{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:700px){

    .services-grid,
    .services-grid.three-columns{
        grid-template-columns:1fr;
    }

}
/* ==========================================================
   RESOURCE BOX
========================================================== */
.resource-box{
    margin:25px 0;
}

.resource-box a{
    display:inline-block;
    padding:12px 18px;
    background:var(--surface-accent);
    border:1px solid var(--primary);
    border-radius:8px;
    color:var(--secondary);
    font-weight:600;
    text-decoration:none;
    transition:all .2s ease;
}

.resource-box span{
    margin-left:10px;
    font-size:1.1em;
}

.resource-box a{
    cursor:pointer;
}

.resource-box a:hover{
    background:var(--primary);
    border:1px solid var(--primary);
    color:#fff;
    transform:translateY(-2px);
}

/* ==========================================================
   COMPARISON TABLE
========================================================== */

.comparison-table{
    width:100%;
    border-collapse:collapse;
    margin:30px 0;
}

.comparison-table th{
    background:var(--primary);
    border:1px solid var(--primary);
    color:#fff;
    padding:12px;
    text-align:left;
}

.comparison-table td{
    padding:12px;
    border:1px solid var(--border);
}

.comparison-table tr:nth-child(even){
    --surface-alt:#f7f9fc;
}

.comparison-table td:first-child{
    font-weight:600;
    width:28%;
}

/* ==========================================================
   FAQ
========================================================== */
.faq-item {
    margin:15px 0;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f7f9fc;
}

.faq-item summary {
    padding:15px 20px;
    cursor:pointer;
    font-weight:bold;
    color:var(--secondary);
}

.faq-item summary::before{
    content:"▶ ";
    color:var(--primary);
}

.faq-item[open] summary::before {
    content:"▼ ";
}

.faq-item p {
    padding:0 20px 15px 20px;
}

.faq-item summary {
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

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

.site-footer{

    background:#1F2937;

    color:#E5E7EB;

    margin-top:100px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1.2fr 1fr 1fr;

    gap:50px;

    padding:70px 0;

}

.footer-col h3,
.footer-col h4{

    color:#ffffff;

    margin-bottom:20px;

}

.footer-col p{

    color:#D1D5DB;

    margin-bottom:14px;

    line-height:1.8;

}

.footer-col ul{

    list-style:none;

}

.footer-col li{

    margin-bottom:12px;

}

.footer-col a{

    color:#D1D5DB;

    transition:.30s;

}

.footer-col a:hover{

    color:#ffffff;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;

    padding:25px 0;

    color:#9CA3AF;

    font-size:.9rem;

}

@media(max-width:1000px){

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:700px){

    .footer-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Intro Leistungsseiten
========================================================== */

.intro-grid{

    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:center;

}

.intro-image img{

    width:100%;
    border-radius:16px;
    display:block;

}

@media (max-width:992px){

    .intro-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   FEATURE LIST
========================================================== */

.feature-list{

    list-style:none;
    padding:0;
    margin:0;

}

.feature-list li{

    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    line-height:1.7;

}

.feature-list li::before{

    content:"✓";

    position:absolute;
    left:0;
    top:0;

    color:var(--gold);

    font-weight:700;
    font-size:20px;

}

/* =====================================================
   Fachkarten
===================================================== */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin:35px 0;
}

.feature-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.feature-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.feature-card h3{
    padding:18px 20px 10px;
    margin:0;
    color:#005fa3;
}

.feature-card p{
    padding:0 20px 22px;
    line-height:1.7;
    color:#555;
}



/* ==========================================================
   HERO FOTO
========================================================== */

.hero-photo-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    max-width:620px;
    box-shadow:var(--shadow);
}

.cloud{

    position:absolute;
    pointer-events:none;
    z-index:5;
    opacity:.40;
    mix-blend-mode:screen;

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 40%,
        rgba(0,0,0,.7) 55%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 40%,
        rgba(0,0,0,.7) 55%,
        transparent 100%
    );
}

/* Sonne */
.cloud1{
    width:170px;
    top:-80px;
    left:-35px;
    animation:cloudLeft 30s ease-in-out infinite alternate;
}

.cloud2{
    width:170px;
    top:-60px;
    right:-30px;
    animation:cloudRight 35s ease-in-out infinite alternate;
}

.cloud3{
    width:130px;
    top:-5px;
    left:45%;
    animation:cloudFloat 45s ease-in-out infinite;
}

.cloud4{
    width:90px;
    top:-60px;
    left:72%;
    animation:cloudFloat2 40s ease-in-out infinite;
}

@keyframes cloudLeft{

    from{
        transform:translateX(-40px);
    }

    to{
        transform:translateX(40px);
    }

}

@keyframes cloudRight{
    from{transform:translateX(15px);}
    to{transform:translateX(-15px);}
}

@keyframes cloudFloat{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,8px);}
}

@keyframes cloudFloat2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}


/* Bild */
.hero-photo{
    display:block;
    width:100%;
    height:auto;

    filter:saturate(1.05);

    animation:heroZoom 35s ease-in-out infinite alternate;
}



@keyframes heroZoom{

    from{
        transform:scale(1.00);
    }

    to{
        transform:scale(1.05);
    }

}




@keyframes skyMove{
    from{
        transform:translateX(-12px);
    }
    to{
        transform:translateX(12px);
    }
}








/* -------------------------------------------------
   Grüne Landschaft
-------------------------------------------------- */





.section-cta{
    margin-top:60px;
    padding:40px;
    background:#f7f9fb;
    border:1px solid #e6e9ed;
    border-radius:14px;
    text-align:center;
}

.section-cta h3{
    margin-bottom:15px;
    font-size:2rem;
    color:#1f2937;
}

.section-cta p{
    max-width:850px;
    margin:0 auto 30px;
    line-height:1.8;
    color:#4b5563;
}

.section-cta .btn{
    padding:14px 34px;
}

.section-cta{
    position:relative;
}

.section-cta::before{
    content:"";
    display:block;
    width:70px;
    height:3px;
    background:#0f6b55;
    margin:0 auto 25px;
    border-radius:3px;
}

.about-hero{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:center;
    margin-top:40px;
}

.about-image img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.subtitle{
    display:inline-block;
    color:#0f6b55;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.about-content h1{
    margin-bottom:10px;
}

.about-content h2{
    font-size:1.35rem;
    font-weight:500;
    color:#555;
    margin-bottom:25px;
    line-height:1.5;
}

.intro{
    font-size:1.08rem;
    line-height:1.8;
    margin-bottom:30px;
}

.about-highlights{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:35px;
}

.about-highlights div{
    font-weight:600;
}



@media (max-width:900px){

.about-hero{
    grid-template-columns:1fr;
}

.about-image{
    max-width:520px;
    margin:auto;
}

}

/* =======================================================
   Fachkompetenzen
======================================================= */

.competence-columns{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;

    margin-top:60px;

}

.competence-box{

    padding-bottom:35px;
    margin-bottom:35px;

    border-bottom:1px solid #e8e8e8;

}

.competence-box:last-child{

    margin-bottom:0;

}

.competence-box h3{

    display:flex;
    align-items:center;
    gap:12px;

}

.competence-box p{

    margin:0;

    line-height:1.75;

    color:#5b6472;

}

@media(max-width:900px){

    .competence-columns{

        grid-template-columns:1fr;

        gap:0;

    }

}

/* ===========================================
   Qualifikationen
=========================================== */

.qualification-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:35px;
    margin-top:50px;

}

.qualification-item{

    padding:28px;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:12px;

    transition:.25s;

}

.qualification-item:hover{

    box-shadow:0 8px 22px rgba(0,0,0,.06);

}

.qualification-item h3{

    margin-bottom:14px;

    font-size:1.25rem;

    color:#1f2937;

}

.qualification-item p{

    margin:0;

    line-height:1.7;

    color:#5b6472;

}

@media(max-width:900px){

    .qualification-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   HERO HIGHLIGHTS
========================================================== */

.hero-highlights {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

    margin-top: 40px;

}

.hero-item {

    background: #ffffff;

    min-width: 170px;

    padding: 22px 20px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    transition: all .3s ease;

}

.hero-item span {

    display: block;

    font-size: 2rem;

    margin-bottom: 10px;

}

.hero-item strong {

    display: block;

    color: #1f2937;

    font-size: 1rem;

}

.hero-item:hover{

    transform: translateY(-6px);

    box-shadow: 0 12px 24px rgba(0,0,0,.15);

}





/* ==========================================================
   EC INFO BOX
========================================================== */

.info-box{
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:24px;

    margin:35px 0;

    background:#f4f8fd;

    border-left:6px solid #2d6cdf;

    border-radius:12px;
}

.info-box-icon{
    font-size:2rem;
    line-height:1;
    flex-shrink:0;
}

.info-box-content h3{
    margin:0 0 10px;
    color:#2d6cdf;
}

.info-box-content p{
    margin:0;
}

.answer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:30px;
}

.answer-btn{
    padding:20px;
    font-size:18px;
    cursor:pointer;
    border-radius:10px;
    border:1px solid #ddd;
    background:#fff;
    transition:.25s;

}

.answer-btn:hover{
    transform:translateY(-3px);
}

.answer-btn.selected{
    background:#0f5fa8;
    color:#fff;
    border-color:#0f5fa8;
}

/* =======================================================
   EC-NAVIGATOR
======================================================= */

#navigator-steps{

    max-width:900px;
    margin:0 auto;

}

.navigator-step{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:24px;

    margin-bottom:20px;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.step-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.step-header h3{

    margin:0;

}

.change-link{

    background:none;

    border:none;

    color:#2563eb;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

}

.change-link:hover{

    text-decoration:underline;

}

.navigator-step p{

    margin:12px 0 0;

    color:#666;

}

.answer-grid{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

.answer-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 22px;

    background:#fff;

    border:1px solid #d9dee5;
    border-radius:10px;

    font-size:1rem;
    font-weight:600;

    color:var(--secondary);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    cursor:pointer;

}

.answer-btn:hover{

    background:#f7fcfa;

    border-color:var(--primary);

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(15,106,82,.08);

}

.result-card{

    border-left:6px solid #1f7a3d;

    background:#f6fff8;

}

.result-card h2{

    color:#1f7a3d;

    margin-top:0;

}

.result-actions{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;

}

.result-actions .btn{

    display:flex;
    justify-content:center;
    align-items:center;

    min-width:240px;
    height:54px;

    padding:0 28px;

    border-radius:10px;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    transition:.25s;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.10);

}

.result-actions a.btn{

    background:#198754;

    color:#fff;

    border:2px solid #198754;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.10);

}

.result-actions a.btn:hover{

    background:#157347;

    border-color:#157347;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.12);

}

.result-actions button.btn{

    background:#fff;

    color:#198754;

    border:2px solid #198754;

}

.result-actions button.btn:hover{

    background:#eef9f0;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.10);

}

.answer-icon{

    color:var(--primary);

    font-size:18px;

    flex-shrink:0;

}
.answer-label{

      white-space:nowrap;


}

/* ============================= */
/* Mehrfachauswahl */
/* ============================= */

.multi-grid{

    display:grid;

    gap:12px;

    margin:20px 0;

}

.multi-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px;

    border:2px solid #d8dee5;

    border-radius:10px;

    cursor:pointer;

    transition:.2s;

    background:#fff;

}

.multi-item:hover{

    border-color:#0b6aa2;

    background:#f5fbff;

}

.multi-item input{

    transform:scale(1.3);

}

.multi-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}

.measure-overview{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin:30px 0;

}

.measure-box{

    flex:1;

    min-width:170px;

    padding:15px;

    border-radius:12px;

}

.measure-box:hover{

    border-color:#1d7a39;

    transform:translateY(-3px);

}

.measure-icon{

    font-size:46px;

    margin-bottom:15px;

}

#summary-detail{

    margin-top:30px;

}

.measure-box.active{

    background:#eef9f0;

    border:2px solid #1b7d39;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transform:translateY(-4px);

}

.measure-box h3{

    margin:8px 0;

    font-size:26px;

}

.measure-box span{

    color:#666;

    font-size:14px;

}

.result-section-title{

    margin:30px 0 15px;

    padding-bottom:8px;

    border-bottom:2px solid #d9d9d9;

    font-size:1.15rem;

    font-weight:700;

    color:#1d3557;

}

.result-info{

    background:#f8fafc;

    border:1px solid #dce6f2;

    border-left:4px solid #1d3557;

    border-radius:8px;

    padding:16px 18px;

    margin-bottom:20px;

}

.result-info ul{

    margin:0;

    padding-left:20px;

}

.result-info p{

    margin:0;

}

/* ==========================================================
   Berater-Box
   ========================================================== */

.consultant-box{

    margin-top:35px;

    padding:24px;

    background:#f4f9f6;

    border-left:5px solid #2e7d32;

    border-radius:10px;

}

.consultant-box h4{

    margin-top:0;

    color:#1b5e20;

}

.consultant-intro{

    margin:12px 0 18px;

    color:#555;

    line-height:1.6;

}

.consultant-box ul{

    margin:0;

    padding-left:22px;

}

/* ==========================================================
   Empfehlung
   ========================================================== */

.recommendation-box{

    margin-top:30px;

    padding:20px;

    background:#fff8e8;

    border-left:5px solid #d39e00;

    border-radius:10px;

}

.recommendation-box h4{

    margin-top:0;

    color:#8a6d00;

}

.recommendation-box p{

    margin:10px 0;

    line-height:1.7;

}

/* ==========================================================
   Ergebnis-Highlights
   ========================================================== */

.result-highlight{

    display:flex;

    gap:20px;

    margin:25px 0;

    flex-wrap:wrap;

}

.highlight-item{

    flex:1;

    min-width:240px;

    background:#eef5fb;

    border-left:5px solid #1d3557;

    border-radius:8px;

    padding:18px;

}

.highlight-item strong{

    display:block;

    margin-bottom:8px;

    color:#1d3557;

}

.status-box{

    background:#eef8ee;

    border-left:5px solid #2e7d32;

    padding:18px;

    margin:20px 0;

    border-radius:8px;

}

.highlight-item a{
    color:#0b7a39;
    font-weight:600;
    text-decoration:underline;
}

.highlight-item a:hover{
    color:#095f2c;
}

.official-information-box{

    margin-top:24px;

    padding:20px 24px;

    background:#f8fbf8;

    border-left:5px solid #198754;

    border-radius:10px;

}

.official-information-box strong{

    display:block;

    font-size:18px;

    margin-bottom:12px;

    color:#1d3557;

}

.official-information-link a{

    color:#198754;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}

.official-information-link a:hover{

    text-decoration:underline;

}

/* ==========================================
   Strategie-Hinweis Komplettsanierung
========================================== */

.strategy-card{

    margin-top:30px;

    border:2px solid #d6e6f8;

    background:#f8fbff;

    border-radius:12px;

    padding:28px;

}

.strategy-card h3{

    color:#0d5ea8;

    margin-bottom:12px;

}

.strategy-card h4{

    margin-top:22px;

    margin-bottom:12px;

}

.strategy-card ul{

    margin:15px 0;

    padding-left:22px;

}

.strategy-card li{

    margin-bottom:10px;

}

.strategy-card .result-actions{

    margin-top:25px;

}

/* ======================================================
   SANIERUNGSPROZESS
====================================================== */

.renovation-process{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:50px;

}

.process-card{

    flex:1;

    min-width:260px;

    max-width:320px;

    text-align:center;

}

.process-card img{

    width:100%;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

    margin-bottom:20px;

}

.process-arrow{

    font-size:34px;

    color:#0d6efd;

    font-weight:bold;

}

@media(max-width:900px){

    .process-arrow{

        transform:rotate(90deg);

    }

}

.process-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:12px;

}


/* ==========================================================
   PROCESS TIMELINE
========================================================== */

.process-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    margin:70px 0 50px;

    padding-top:22px;

}

/* Verbindungslinie */

.process-line{

    position:absolute;

    left:7%;

    right:7%;

    top:28px;

    height:4px;

    background:#dfe5e9;

    border-radius:20px;

    z-index:0;

}

/* Schritt */

.process-step{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}

/* Nummern-Kreis */

.process-circle{

    width:46px;

    height:46px;

    margin:0 auto;

    border-radius:50%;

    background:#ffffff;

    border:4px solid var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
        0 10px 24px rgba(0,0,0,.10);

    transition:.30s ease;

    background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%);

    border:3px solid #1d7c5b;
}

.process-circle span{

    font-size:1.05rem;

    font-weight:700;

    color:inherit;

}


.process-step:nth-child(2){
    color:#7f8c8d;
}

.process-step:nth-child(3){
    color:#3b82f6;
}

.process-step:nth-child(4){
    color:#16a34a;
}

.process-step:nth-child(5){
    color:#d4a017;
}

.process-step:nth-child(6){
    color:#ea7b17;
}

.process-step:nth-child(7){
    color:#0f7a43;
}

/* Hover */

.process-step:hover .process-circle{

    transform:translateY(-6px);

    box-shadow:

        0 18px 36px rgba(0,0,0,.18);

}

/* Icon */
.process-icon{

    width:90px;
    height:90px;

    margin:24px auto;

    border-radius:50%;

    background:#edf8f2;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.process-icon svg{

    width:44px;

    height:44px;

    color:#0f7a43;

}

/* Überschrift */

.process-step h3{

    margin-bottom:12px;

    font-size:1.10rem;

    line-height:1.35;

    min-height:52px;

}

/* Beschreibung */

.process-step p{

    margin:0;

    color:#6d7680;

    line-height:1.55;

    font-size:.96rem;

    min-height:45px;

}

/* Footer */

.process-footer{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid #e7ecef;

}

.process-footer div{

    padding:10px 18px;

    border-radius:30px;

    background:#f6f8f9;

    font-size:.92rem;

    color:#5d666f;

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

.process-timeline{

    flex-wrap:wrap;

}

.process-line{

    display:none;

}

.process-step{

    flex:0 0 calc(33.333% - 20px);

    margin-bottom:45px;

}

}

/* ==========================================================
   SMARTPHONE
========================================================== */

@media(max-width:768px){

.process-timeline{

    display:block;

    margin-top:35px;

}

.process-step{

    position:relative;

    text-align:left;

    padding-left:95px;

    margin-bottom:55px;

}

.process-line{

    display:none;

}

.process-circle{

    position:absolute;

    left:0;

    top:0;

}

.process-icon{

    display:none;

}

.process-step::before{

    content:"";

    position:absolute;

    left:30px;

    top:60px;

    width:4px;

    height:80px;

    background:#dfe5e9;

}

.process-step:last-child::before{

    display:none;

}

.process-step h3{

    min-height:auto;

}

.process-step p{

    min-height:auto;

}

.process-footer{

    justify-content:flex-start;

}

}

/* Kreisgrößen */

.process-step:nth-child(2) .process-circle{
    width:46px;
    height:46px;
}

.process-step:nth-child(3) .process-circle{
    width:50px;
    height:50px;
}

.process-step:nth-child(4) .process-circle{
    width:54px;
    height:54px;
}

.process-step:nth-child(5) .process-circle{
    width:58px;
    height:58px;
}

.process-step:nth-child(6) .process-circle{
    width:62px;
    height:62px;
}

.process-step:nth-child(7) .process-circle{
    width:66px;
    height:66px;
}

/* ==========================================================
   Individuelle Farben der Kreise
========================================================== */

/* Schritt 1 */
.process-step:nth-child(2) .process-circle{
    border-color:#7f8c8d;
    background:linear-gradient(180deg,#ffffff,#f6f7f8);
}

/* Schritt 2 */
.process-step:nth-child(3) .process-circle{
    border-color:#3b82f6;
    background:linear-gradient(180deg,#ffffff,#eef6ff);
}

/* Schritt 3 */
.process-step:nth-child(4) .process-circle{
    border-color:#16a34a;
    background:linear-gradient(180deg,#ffffff,#f1fbf4);
}

/* Schritt 4 */
.process-step:nth-child(5) .process-circle{
    border-color:#d4a017;
    background:linear-gradient(180deg,#ffffff,#fff9eb);
}

/* Schritt 5 */
.process-step:nth-child(6) .process-circle{
    border-color:#ea7b17;
    background:linear-gradient(180deg,#ffffff,#fff5ed);
}

/* Schritt 6 */
.process-step:nth-child(7) .process-circle{
    border-color:#0f7a43;
    background:linear-gradient(180deg,#ffffff,#edf9f1);
}

/* ==========================================================
   SANIERUNGSSTRATEGIE
========================================================== */

.strategy-diagram{

    max-width:900px;
    margin:60px auto;
    text-align:center;

}

.strategy-box{

    display:inline-block;

    background:#ffffff;

    border:1px solid #dfe7ef;

    border-radius:14px;

    padding:18px 28px;

    min-width:240px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.3s;

}

.strategy-box strong{

    display:block;

    margin-bottom:6px;

    color:#1f2937;

    font-size:1.05rem;

}

.strategy-main{

    border-top:4px solid #2d6cdf;

}




.strategy-options{

    display:flex;

    justify-content:center;

    gap:40px;

    margin:25px 0;

    flex-wrap:wrap;

}

.strategy-box:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 32px rgba(0,0,0,.10);

}

.strategy-layout{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap:30px;

    align-items:start;

}

/* Einzelmaßnahmen */

.strategy-em{

   background:#f4fbf7;
border-top:4px solid #16a34a;

}

/* iSFP */

.strategy-isfp{

   background:#f5f9ff;
border-top:4px solid #2d6cdf;

}

.strategy-box .btn{

    padding:10px 22px;

    font-size:.92rem;

    border-radius:10px;

}

.efficiency-levels{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0;

}

.level-badge{

    background:#eef9f2;
    color:#13824a;

    border:1px solid #bfe7cf;

    border-radius:25px;

    padding:7px 14px;

    font-size:.90rem;

    font-weight:600;

}

.funding-box{

    background:#f4f8ff;

    border-left:4px solid #2d6cdf;

    border-radius:10px;

    padding:16px;

    margin:25px 0;

}

.funding-box h4{

    margin:0 0 10px;

    color:#2d6cdf;

}

.service-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:20px 0;

}

.service-list div{

    color:#374151;

}

.kfw-link{

    display:inline-block;

    margin-top:20px;

    color:#0f6a52;

    font-weight:600;

    text-decoration:none;

}

.kfw-link:hover{

    color:#2d6cdf;

}

/* ==========================================
   EFFIZIENZKARTEN
========================================== */

.efficiency-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:40px;

}

@media (max-width:900px){

    .efficiency-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   HERO KONTAKT
========================================================== */

.contact-hero{

    display:grid;

    grid-template-columns:minmax(0, 620px) 340px;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    max-width:1040px;

    margin:0 auto 60px;

}

.contact-hero-text{

    max-width:620px;

}

.contact-hero h1{

    font-size:2.8rem;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-0.02em;

    color:var(--secondary);

    margin-bottom:18px;

}

.contact-hero p{

    font-size:1.1rem;

    line-height:1.75;

    color:#555;

    max-width:580px;

    margin:0;

}

@media (max-width:900px){

    .contact-hero{

        grid-template-columns:1fr;

        gap:30px;

    }

    .contact-hero-text{

        max-width:none;

    }

    .vorteile-box{

        width:100%;

    }
}
.hero-info-bar{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:32px;

    padding:14px 18px;

    background:#f7faf8;

    border:1px solid #dce8df;

    border-radius:12px;

    font-size:0.95rem;

    color:#355347;

}

.hero-info-bar span{

    display:flex;

    align-items:center;

    gap:6px;

}



/* ==========================================================
   CONTACT CARD
========================================================== */

.contact-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:36px;

    margin-bottom:32px;

    box-shadow:0 8px 24px rgba(15,23,42,.05);

    transition:box-shadow .25s ease,
               transform .25s ease;

}

.contact-card:hover{

    box-shadow:0 10px 28px rgba(15,23,42,.07);

}

.contact-card-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:1.35rem;

    font-weight:700;

    letter-spacing:-0.02em;

    color:var(--secondary);

    margin-bottom:30px;

    padding-bottom:15px;

    border-bottom:1px solid #e9eef4;

    position:relative;

}

.contact-card-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:70px;

    height:3px;

    background:#2f7d32;

    border-radius:3px;

}


/* ==========================================================
   FLÄCHENÜBERSICHT
========================================================== */

.flaechen-box{

    margin-top:25px;
    padding:24px;

    background:#f8fafc;

    border:1px solid #dbe7f3;

    border-radius:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

}

.flaechen-box h4{

    margin:0 0 18px;

    color:#0066cc;

    font-size:20px;

}

.flaechen-zeile{

    display:flex;

    justify-content:space-between;

    padding:8px 0;

}

.flaechen-trennung{

    border-top:1px solid #dbe7f3;

    margin:15px 0;

}

.flaechen-gesamt{

    font-size:18px;

    font-weight:700;

}

.flaechen-prozent{

    color:#184d2f;

    font-weight:700;

}

.flaechen-hinweis{

    margin-top:18px;

    padding:12px 15px;

    background:#eef6ff;

    border-left:4px solid #0066cc;

    border-radius:6px;

    font-size:14px;

    color:#555;

}

/* ==========================================================
   UNTERÜBERSCHRIFTEN FORMULAR
========================================================== */

.section-subtitle{

    margin:30px 0 20px;

    padding:14px 18px;

    border-radius:12px;

    font-size:20px;

    font-weight:700;

    display:flex;

    align-items:center;

}

.section-subtitle.wohn{

    background:#eef8f1;

    color:#1c5d3a;

    border-left:5px solid #2e8b57;

}

.section-subtitle.nwg{

    background:#eef5ff;

    color:#0066cc;

    border-left:5px solid #0066cc;

}

/* ==========================================================
   FORMULAR-BLÖCKE
========================================================== */

.form-block-wohn{

    background:#f7fcf8;

    border:1px solid #d9eadf;

    border-radius:14px;

    padding:24px;

    margin-bottom:30px;

}

.form-block-nwg{

    background:#f8fbff;

    border:1px solid #dbe8f7;

    border-radius:14px;

    padding:24px;

    margin-bottom:30px;

}

.section-info{

    margin:0 0 20px;

    color:#6b7280;

    font-size:15px;

    line-height:1.6;

}

.contact-hero-card{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    box-shadow:0 10px 28px rgba(0,0,0,.08);

    border:1px solid #e5e7eb;

}

.contact-hero-card h3{

    color:#184d2f;

    margin-bottom:22px;

    font-size:24px;

}

.contact-hero-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.contact-hero-card li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 0;

    font-size:17px;

    border-bottom:1px solid #eef2f7;

}

.contact-hero-card li:last-child{

    border-bottom:none;

}
/* ==========================================
   VORTEILE
========================================== */

.vorteile-box{

    background:#fff;

    border:1px solid #e7edf3;

    border-radius:18px;

    padding:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    max-width:360px;

}

.vorteile-box h3{

    margin:0 0 30px;

    font-size:34px;

    font-weight:700;

    color:#0f5d3f;

}

.vorteile-liste{

    list-style:none;

    margin:0;

    padding:0;

 line-height:1.8;

}

.vorteile-liste li{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px 0;

    border-top:1px solid #edf2f7;

 line-height:1.8;

}

.vorteile-liste span:last-child{

    font-size:24px;

    line-height:1.5;

    color:#2b2b2b;

}

.vorteile-icon{

    width:30px;

    height:30px;

    border:2px solid #198754;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#198754;

    font-size:18px;

    font-weight:bold;

    flex-shrink:0;

}

.vorteile-liste span:last-child{

    font-size:18px;

    line-height:1.5;

    color:#2b2b2b;

}

.gesamtflaeche{

    margin:10px 0;

    padding:6px 0;

    font-size:18px;

    font-weight:600;

}

.ueberwiegend{

    margin-top:18px;

    padding:14px 18px;

    background:#eef6ff;

    border-left:4px solid #0d6efd;

    border-radius:8px;

}

.flaecheninfo strong{

    font-weight:600;

}

/* ==========================================
   ABSENDEN-BUTTON
========================================== */

.submit-btn{

    width:100%;

    padding:16px 28px;

    background:#198754;

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:0 6px 18px rgba(25,135,84,.18);

}

.submit-btn:hover{

    background:#157347;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(25,135,84,.25);

}

.submit-btn:active{

    transform:translateY(0);

}

.formular-hinweis{

    margin-top:12px;

    text-align:center;

    font-size:14px;

    color:#666;

}

.form-hinweis{

    margin:8px 0 25px;

    font-size:14px;

    color:#6b7280;

}

select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        linear-gradient(45deg, transparent 50%, #6b7280 50%),
        linear-gradient(135deg, #6b7280 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% - 2px),
        calc(100% - 16px) calc(50% - 2px);

    background-size:6px 6px;

    background-repeat:no-repeat;

    padding-right:42px;

}

/* ==========================================
   Navigator
========================================== */

.navigator-answer{

    display:flex;
    align-items:center;
    gap:12px;

    min-height:72px;

    padding:18px 22px;

    border:1px solid #dfe5ec;
    border-radius:14px;

    background:#fff;

    font-size:1.05rem;
    font-weight:600;

    transition:
        all .25s ease;

}
.navigator-answer .icon{

    width:22px;

    text-align:center;

    font-size:1.2rem;

    color:var(--primary);

    flex-shrink:0;

}
.navigator-answer:hover{

    border-color:var(--primary);

    background:#f8fcfa;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(15,106,82,.10);

}

.navigator-step.completed{
    background:#f8fafc;
    border:1px solid #dbe5ef;
    border-left:4px solid var(--primary);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:14px;
}

.step-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.step-header h3{
    margin:0;
    font-size:16px;
}

.change-link{
    background:none;
    border:none;
    color:var(--primary);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    padding:0;
}

.change-link:hover{
    text-decoration:underline;
}

<!-- ===================================================== -->
<!-- Meine Unterstützung im Förderprozess -->
<!-- ===================================================== -->

/* ==========================================================
   Förderprozess
========================================================== */

.funding-process{
    padding:80px 0;
    background:#f7fbf8;
}

.funding-process .container{
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
}

.section-header{
    text-align:center;
    margin-bottom:90px;
}

.section-header h2{
    font-size:2.3rem;
    font-weight:700;
    color:#1d2b24;
    margin-bottom:18px;
}

.section-header p{
    max-width:760px;
    margin:auto;
    font-size:1.08rem;
    line-height:1.7;
    color:#6d7772;
}

.funding-roadmap{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;

    position:relative;
}

.funding-roadmap::before{

    content:"";

    position:absolute;

    top:42px;
    left:8%;
    right:8%;

    height:4px;

    background:#d9e9df;

    z-index:0;

    border-radius:20px;

}

.funding-step{

    flex:1;

    position:relative;

    text-align:center;

    z-index:2;

}

.funding-circle{

    width:84px;
    height:84px;

    margin:auto;

    border-radius:50%;

    background:#1b8a56;

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    box-shadow:0 10px 24px rgba(15,106,82,.18);

    margin-bottom:18px;

}

 .funding-number{

    font-size:.9rem;
    font-weight:700;

    opacity:.85;

}

.funding-icon{

    font-size:1.6rem;

    margin-top:3px;
 
   font-size:34px;

    color:#ffffff;

}

 .funding-card{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

    text-align:left;

    height:320px;

}

 .funding-card h3{

    font-size:1.2rem;

    margin-bottom:24px;

    color:#1d2b24;

}

.funding-items{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.funding-item{
    display:flex;
    align-items:flex-start;
    gap:12px;

    font-size:1rem;
    line-height:1.6;
    color:#55615b;
}

.funding-check{
    color:#16a34a;
    font-size:1rem;
    margin-top:2px;
    flex-shrink:0;
}