/* ==========================================================
   DGNB FRAMEWORK 2.0
   Energy Consultant
   Version 2.0
========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
========================================================== */

:root{

    /* Farben */

    --dgnb-primary: #007A6C;
    --dgnb-primary-dark: #005B52;

    --dgnb-secondary: #1F2937;

    --dgnb-text: #4B5563;
    --dgnb-text-light: #6B7280;

    --dgnb-bg: #FFFFFF;
    --dgnb-bg-light: #F7F9F8;
    --dgnb-bg-highlight: #EEF7F3;

    --dgnb-border: #E5EAEA;

    /* Schatten */

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

    /* Radius */

    --dgnb-radius:16px;

    /* Übergänge */

    --dgnb-transition:.30s ease;

    /* Container */

    --dgnb-container:1200px;

    /* Abstände */

    --dgnb-space-xs:10px;
    --dgnb-space-sm:20px;
    --dgnb-space-md:35px;
    --dgnb-space-lg:60px;
    --dgnb-space-xl:100px;

}

/* ==========================================================
   02. DGNB BASIS
========================================================== */

.dgnb-page{

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

    font-size:16px;

    line-height:1.7;

    color:var(--dgnb-text);

    background:var(--dgnb-bg);

}

/* ==========================================================
   03. CONTAINER
========================================================== */

.dgnb-container{

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

    margin:auto;

}

/* ==========================================================
   04. TYPOGRAPHIE
========================================================== */

.dgnb-page h1{

    font-size:3rem;

    line-height:1.15;

    color:var(--dgnb-secondary);

    font-weight:700;

}

.dgnb-page h2{

    font-size:2.4rem;

    line-height:1.2;

    color:var(--dgnb-secondary);

    font-weight:700;

}

.dgnb-page h3{

    font-size:1.45rem;

    font-weight:600;

    color:var(--dgnb-secondary);

}

.dgnb-page p{

    color:var(--dgnb-text);

    line-height:1.8;

}

/* ==========================================================
   05. BUTTONS
========================================================== */

.dgnb-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 30px;

    border-radius:var(--dgnb-radius);

    font-weight:600;

    text-decoration:none;

    transition:var(--dgnb-transition);

}

.dgnb-btn-primary{

    background:var(--dgnb-primary);

    color:#fff;

}

.dgnb-btn-primary:hover{

    background:var(--dgnb-primary-dark);

}

.dgnb-btn-secondary{

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

    color:var(--dgnb-primary);

    background:#fff;

}

.dgnb-btn-secondary:hover{

    background:var(--dgnb-primary);

    color:#fff;

}

/* ==========================================================
   06. HERO
========================================================== */

.dgnb-hero{

    padding:120px 0 90px;

    background:#fff;

}

.dgnb-hero-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}

.dgnb-hero-content{

    flex:1;

    max-width:650px;

}

.dgnb-badge{

    display:inline-block;

    padding:10px 20px;

    margin-bottom:25px;

    border-radius:999px;

    background:#E9F5EF;

    color:var(--dgnb-primary);

    font-weight:600;

}

.dgnb-hero h1{

    margin-bottom:30px;

}

.dgnb-lead{

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:40px;

}

.dgnb-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.dgnb-hero-image{

    flex:0 0 430px;

}

.dgnb-hero-image img{

    display:block;

    width:100%;

    height:auto;

}

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

@media (max-width:1100px){

.dgnb-hero-wrapper{

    flex-direction:column;

}

.dgnb-hero-content{

    max-width:100%;

}

.dgnb-hero-image{

    flex:0 0 auto;

    max-width:500px;

    width:100%;

}

}


/* ==========================================================
   07. SECTIONS
========================================================== */

.dgnb-section{
    padding: var(--dgnb-space-xl) 0;
}

.dgnb-section-light{
    background: var(--dgnb-bg-light);
}

.dgnb-section-highlight{
    background: var(--dgnb-bg-highlight);
}

/* ==========================================================
   08. SECTION HEADER
========================================================== */

.dgnb-section-header{
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.dgnb-section-header h2{
    margin-bottom: 20px;
}

.dgnb-section-header p{
    font-size: 1.1rem;
    color: var(--dgnb-text-light);
}

.dgnb-section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--dgnb-primary);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================================
   09. SPLIT LAYOUT
========================================================== */

.dgnb-split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.dgnb-split-image img{

    width:100%;

    display:block;

    border-radius:var(--dgnb-radius);

}

@media(max-width:992px){

.dgnb-split{

    grid-template-columns:1fr;

}

}


/* ==========================================================
   10. CARDS
========================================================== */

.dgnb-card{

    background:#fff;

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

    border-radius:var(--dgnb-radius);

    padding:35px;

    box-shadow:var(--dgnb-shadow);

    transition:var(--dgnb-transition);

}

.dgnb-card:hover{

    transform:translateY(-6px);

}

.dgnb-grid{

    display:grid;

    gap:35px;

}

.dgnb-grid-2{

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

}


.dgnb-grid-3{

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

}

.dgnb-grid-4{

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

}

@media(max-width:992px){

.dgnb-grid-2,
.dgnb-grid-3,
.dgnb-grid-4{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   11. FEATURE CARDS
========================================================== */

.dgnb-feature-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.dgnb-feature-card{

    background:#fff;
    border:1px solid var(--dgnb-border);
    border-radius:var(--dgnb-radius);
    padding:35px;
    box-shadow:var(--dgnb-shadow);
    transition:var(--dgnb-transition);

}

.dgnb-feature-card:hover{

    transform:translateY(-6px);

}

.dgnb-feature-icon{

    width:70px;
    height:70px;

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

    margin-bottom:25px;

    border-radius:50%;

    background:var(--dgnb-bg-highlight);

    font-size:30px;

}

.dgnb-feature-card h3{

    margin-bottom:18px;

}

.dgnb-feature-card p{

    margin:0;

}

/* ==========================================================
   12. PROCESS
========================================================== */

.dgnb-process-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:35px;

}

.dgnb-process-card{

    position:relative;

    background:#fff;

    border-radius:var(--dgnb-radius);

    padding:40px 30px;

    text-align:center;

    box-shadow:var(--dgnb-shadow);

}

.dgnb-process-number{

    width:55px;
    height:55px;

    margin:auto auto 25px;

    border-radius:50%;

    background:var(--dgnb-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

}

/* ==========================================================
   13. INFO BOX
========================================================== */

.dgnb-info-box{

    background:var(--dgnb-bg-highlight);

    border-left:6px solid var(--dgnb-primary);

    padding:30px;

    border-radius:var(--dgnb-radius);

    margin:40px 0;

}

.dgnb-info-box h3{

    margin-top:0;

}


/* ==========================================================
   14. BENEFITS
========================================================== */

.dgnb-benefit-list{

    display:grid;

    gap:18px;

    margin-top:30px;

}

.dgnb-benefit{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.dgnb-benefit-icon{

    color:var(--dgnb-primary);

    font-size:22px;

    margin-top:3px;

}


/* ==========================================================
   15. CTA
========================================================== */

.dgnb-cta{

    padding:90px 60px;

    background:linear-gradient(
        135deg,
        var(--dgnb-primary),
        var(--dgnb-primary-dark)
    );

    color:#fff;

    border-radius:var(--dgnb-radius);

    text-align:center;

}

.dgnb-cta h2{

    color:#fff;

}

.dgnb-cta p{

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

    max-width:700px;

    margin:20px auto 40px;

}

/* ==========================================================
   16. FAQ
========================================================== */

.dgnb-faq{

    display:grid;

    gap:20px;

}

.dgnb-faq-item{

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

    border-radius:var(--dgnb-radius);

    overflow:hidden;

}

.dgnb-faq-question{

    padding:22px 28px;

    cursor:pointer;

    font-weight:600;

    background:#fff;

}

.dgnb-faq-answer{

    display:none;

    padding:28px;

    background:var(--dgnb-bg-light);

}

.dgnb-faq-item.active .dgnb-faq-answer{

    display:block;

}

.dgnb-split-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dgnb-split-content h2{
    margin-bottom: 25px;
}

.dgnb-split-content p{
    margin-bottom: 20px;
}

.dgnb-split-content .dgnb-btn{
    align-self: flex-start;
    margin-top: 15px;
}

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

.dgnb-timeline{

    display:grid;

    gap:30px;

}

.dgnb-timeline-item{

    display:flex;

    gap:30px;

    align-items:flex-start;

}

.dgnb-timeline-number{

    width:55px;

    height:55px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--dgnb-primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:20px;

}

.dgnb-timeline-content{

    flex:1;

}

.dgnb-timeline-content h3{

    margin-bottom:12px;

}

/* ==========================================================
   SERVICES
========================================================== */

.dgnb-service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.dgnb-service-card{

    background:#fff;

    padding:35px;

    border-radius:var(--dgnb-radius);

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

    box-shadow:var(--dgnb-shadow);

    transition:var(--dgnb-transition);

}

.dgnb-service-card:hover{

    transform:translateY(-6px);

}

.dgnb-service-content h3{

    margin-bottom:15px;

}

.dgnb-process-number{
    margin-bottom:20px;
}

.dgnb-service-card:hover{

    transform:translateY(-6px);

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

}

/* ==========================================================
   BENEFITS
========================================================== */

.dgnb-benefit-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.dgnb-benefit-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:#fff;

    padding:25px;

    border-radius:var(--dgnb-radius);

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

    box-shadow:var(--dgnb-shadow);

    transition:var(--dgnb-transition);

}

.dgnb-benefit-card:hover{

    transform:translateY(-4px);

}

.dgnb-benefit-icon{

    width:46px;

    height:46px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--dgnb-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.dgnb-benefit-card h3{

    margin-bottom:10px;

}

.dgnb-benefit-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#fff;

    padding:24px;

    border-radius:var(--dgnb-radius);

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

    box-shadow:var(--dgnb-shadow);

    transition:var(--dgnb-transition);

}

.dgnb-benefit-card:hover{

    transform:translateY(-4px);

}

.dgnb-benefit-card i{

    color:var(--dgnb-primary);

    font-size:1.35rem;

    margin-top:3px;

    flex-shrink:0;

}

.dgnb-benefit-card span{

    line-height:1.6;

}

/* ==========================================================
   FAQ
========================================================== */

.dgnb-faq{

    max-width:900px;

    margin:0 auto;

}

.dgnb-faq-item{

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

    border-radius:var(--dgnb-radius);

    background:#fff;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:var(--dgnb-shadow);

}

.dgnb-faq-question{

    width:100%;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:600;

    text-align:left;

}

.dgnb-faq-toggle{

    font-size:1.8rem;

    color:var(--dgnb-primary);

}

.dgnb-faq-answer{

    display:none;

    padding:0 28px 24px;

}

.dgnb-faq-item.active .dgnb-faq-answer{

    display:block;

}