/* -------------------------------------------------------
   DIWA – Website-Kosten
   Seitenspezifische Ergänzungen zu style.css
   ------------------------------------------------------- */


/* -------------------------------------------------------
   HERO
   Grundaufbau kommt aus dem bestehenden Diwa-Cover-System
   ------------------------------------------------------- */

.cover-costs .cover-photo img {
    object-position: center center;
}

.cover-costs .cover-wash {
    background:
        linear-gradient(
            90deg,
            rgba(8, 18, 22, 0.62) 0%,
            rgba(8, 18, 22, 0.38) 34%,
            rgba(8, 18, 22, 0.10) 62%,
            rgba(8, 18, 22, 0) 84%
        ),
        linear-gradient(
            180deg,
            rgba(8, 18, 22, 0.10),
            rgba(8, 18, 22, 0.02) 56%,
            rgba(8, 18, 22, 0.18)
        );
}

.cover-costs .hero-copy,
.cover-costs .site-head {
    color: #f3f0ea;
}

.cover-costs .main-nav a:hover {
    border-color: #f3f0ea;
}

.cover-costs .main-nav .contact-link {
    border-color: rgba(243, 240, 234, 0.72);
}

.cover-costs .hero-copy h1 {
    max-width: 720px;
}

.cover-costs .hero-copy h1 em {
    color: #a8c0b8;
}

.cover-costs .short-rule {
    background: #a8c0b8;
}


/* -------------------------------------------------------
   TYPOGRAFIE
   ------------------------------------------------------- */

.costs h2,
.costs-finale h2,
.costs-contact h2,
.diwa-answer h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -.028em;
}


/* -------------------------------------------------------
   INTRO
   ------------------------------------------------------- */

.costs-intro {
    background: var(--paper);
}

.costs-intro-inner {
    padding-top: 145px;
    padding-bottom: 150px;
}

.costs-intro h2 {
    font-size: clamp(50px, 5.5vw, 84px);
    line-height: 1.03;
    margin: 0 0 70px;
    max-width: 1050px;
}

.costs-intro-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 10vw;
    max-width: 1100px;
}

.costs-intro-grid p {
    font-size: 18px;
    margin: 0;
}

.costs-intro-grid .lead {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 27px;
    line-height: 1.42;
}


/* -------------------------------------------------------
   KAPITEL
   ------------------------------------------------------- */

.costs-chapter {
    border-top: 1px solid var(--line);
}

.costs-01,
.costs-04 {
    background: #e9e5de;
}

.costs-02,
.costs-05 {
    background: #f3f0ea;
}

.costs-03 {
    background: #dce4e1;
}

.costs-chapter-inner {
    display: grid;
    grid-template-columns: 220px minmax(0, 850px);
    gap: 7vw;
    align-items: start;
}

.costs-label {
    padding-top: 8px;
}

.costs-label > span {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 50px;
    line-height: 1;
    margin-bottom: 18px;
    opacity: .42;
}

.costs-label .eyebrow {
    margin: 0;
}

.costs-copy h2 {
    font-size: clamp(48px, 5vw, 78px);
    line-height: 1.04;
    margin: 0 0 52px;
}

.costs-copy > p {
    font-size: 18px;
    max-width: 790px;
    margin: 0 0 26px;
}

.costs-copy .lead {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 27px;
    line-height: 1.45;
    max-width: 760px;
    margin-bottom: 35px;
}

.chapter-statement {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px !important;
    line-height: 1.35;
    margin-top: 55px !important;
}


/* -------------------------------------------------------
   FRAGEN
   ------------------------------------------------------- */

.question-list {
    border-top: 1px solid rgba(16, 38, 45, .24);
    margin: 48px 0 42px;
}

.question-list p {
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(16, 38, 45, .18);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 21px;
}


/* -------------------------------------------------------
   SO HANDHABEN WIR DAS BEI DIWA
   ------------------------------------------------------- */

.diwa-answer {
    background: #10262d;
    color: #f3f0ea;
}

.diwa-answer-inner {
    display: grid;
    grid-template-columns: .75fr 1fr 1fr;
    gap: 6vw;
    align-items: start;
    padding-top: 105px;
    padding-bottom: 110px;
}

.diwa-answer .eyebrow {
    color: #b7c9c2;
    opacity: 1;
    margin-top: 8px;
}

.diwa-answer h3 {
    font-size: clamp(36px, 3.8vw, 58px);
    line-height: 1.08;
    margin: 0;
}

.diwa-answer-text p {
    font-size: 17px;
    margin: 0 0 24px;
    max-width: 650px;
}

.diwa-answer .answer-note {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 23px;
    line-height: 1.4;
    margin-top: 38px;
}


/* -------------------------------------------------------
   5-JAHRES-RECHNUNG
   ------------------------------------------------------- */

.five-year-wrap {
    background: #b7c9c2;
    border-top: 1px solid rgba(16, 38, 45, .15);
    border-bottom: 1px solid rgba(16, 38, 45, .15);
}

.five-year {
    padding-top: 95px;
    padding-bottom: 100px;
}

.five-year-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(16, 38, 45, .32);
    border-bottom: 1px solid rgba(16, 38, 45, .32);
    margin-top: 38px;
}

.five-year-grid div {
    min-height: 150px;
    padding: 27px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.five-year-grid div + div {
    border-left: 1px solid rgba(16, 38, 45, .28);
}

.five-year-grid small {
    font-size: 11px;
    opacity: .55;
}

.five-year-grid span {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.12;
}

.five-year-result {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(30px, 3vw, 45px);
    margin: 45px 0 0;
    text-align: right;
}


/* -------------------------------------------------------
   GROSSER DIWA-ANTWORTBLOCK
   ------------------------------------------------------- */

.diwa-answer-large > .section {
    padding-top: 105px;
    padding-bottom: 115px;
}

.diwa-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(243, 240, 234, .25);
    margin-top: 42px;
}

.diwa-facts article {
    padding: 38px 5vw 44px 0;
    border-bottom: 1px solid rgba(243, 240, 234, .25);
}

.diwa-facts article:nth-child(even) {
    border-left: 1px solid rgba(243, 240, 234, .25);
    padding-left: 5vw;
}

.diwa-facts article > span {
    font-size: 11px;
    opacity: .5;
}

.diwa-facts h3 {
    font-size: clamp(31px, 3vw, 45px);
    margin: 12px 0 22px;
}

.diwa-facts p {
    font-size: 16px;
    margin: 0;
    max-width: 560px;
}

.diwa-principle {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.35;
    margin: 70px 0 0;
    max-width: 1050px;
}


/* -------------------------------------------------------
   FINALE
   ------------------------------------------------------- */

.costs-finale {
    background: #b7c9c2;
}

.costs-finale-inner {
    padding-top: 145px;
    padding-bottom: 155px;
}

.costs-finale h2 {
    font-size: clamp(52px, 6vw, 92px);
    line-height: 1.02;
    max-width: 1050px;
    margin: 0 0 60px;
}

.costs-finale-inner > p:not(.eyebrow):not(.final-statement) {
    font-size: 18px;
    max-width: 760px;
    margin: 0;
}

.final-statement {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.18;
    max-width: 1050px;
    margin: 85px 0 0;
}

.final-statement em {
    font-style: normal;
    color: #f3f0ea;
}


/* -------------------------------------------------------
   KONTAKT
   ------------------------------------------------------- */

.costs-contact {
    background: var(--paper);
}

.costs-contact-inner {
    padding-top: 120px;
    padding-bottom: 130px;
}

.costs-contact h2 {
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.04;
    margin: 0 0 38px;
}

.costs-contact p:not(.eyebrow) {
    font-size: 18px;
    max-width: 720px;
    margin: 0 0 42px;
}


/* -------------------------------------------------------
   TABLET / MOBILE
   ------------------------------------------------------- */

@media (max-width: 960px) {

    /* Hero wie Arbeitsweise ----------------------------- */

    .cover-costs .cover-photo {
        background: #11191d;
    }

    .cover-costs .cover-photo picture {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .cover-costs .cover-photo picture::after {
        display: none;
    }

    .cover-costs .cover-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 58% center;
    }

   .cover-costs .cover-wash {
    background:
        linear-gradient(
            180deg,
            rgba(7, 17, 21, .72) 0%,
            rgba(7, 17, 21, .62) 38%,
            rgba(7, 17, 21, .68) 72%,
            rgba(7, 17, 21, .78) 100%
        ),
        linear-gradient(
            90deg,
            rgba(7, 17, 21, .38) 0%,
            rgba(7, 17, 21, .16) 100%
        );
}

    .cover-costs .hero-copy h1 {
        max-width: 90vw;
    }

    .cover-costs .menu-toggle span {
        background: #f3f0ea;
    }

    .cover-costs .main-nav,
    .cover-costs .main-nav a {
        color: var(--ink);
    }

    .nav-open .cover-costs .menu-toggle span {
        background: var(--ink);
    }


    /* Inhalt -------------------------------------------- */

    .costs-intro-grid,
    .costs-chapter-inner,
    .diwa-answer-inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .costs-label {
        display: flex;
        align-items: baseline;
        gap: 18px;
    }

    .costs-label > span {
        font-size: 34px;
        margin: 0;
    }

    .five-year-grid {
        grid-template-columns: 1fr;
    }

    .five-year-grid div {
        min-height: auto;
        padding: 22px 0;
        display: grid;
        grid-template-columns: 45px 1fr;
        align-items: center;
        gap: 15px;
    }

    .five-year-grid div + div {
        border-left: 0;
        border-top: 1px solid rgba(16, 38, 45, .22);
    }

    .five-year-result {
        text-align: left;
    }

    .diwa-facts {
        grid-template-columns: 1fr;
    }

    .diwa-facts article,
    .diwa-facts article:nth-child(even) {
        padding: 32px 0;
        border-left: 0;
    }

    .costs-intro-inner,
    .costs-chapter-inner {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .diwa-answer-inner,
    .diwa-answer-large > .section {
        padding-top: 85px;
        padding-bottom: 90px;
    }
}


/* -------------------------------------------------------
   KLEINE MOBILES
   ------------------------------------------------------- */

@media (max-width: 520px) {

    .cover-costs .cover-photo img {
        object-position: 60% center;
    }

    .costs-intro h2,
    .costs-copy h2,
    .costs-finale h2,
    .costs-contact h2 {
        font-size: clamp(39px, 11vw, 54px);
    }

    .costs-intro-grid .lead,
    .costs-copy .lead {
        font-size: 23px;
    }

    .costs-intro-grid p,
    .costs-copy > p {
        font-size: 16px;
    }

    .question-list p {
        font-size: 18px;
    }

    .diwa-answer h3 {
        font-size: 36px;
    }

    .costs-finale-inner {
        padding-top: 105px;
        padding-bottom: 115px;
    }
}
.diwa-facts article .text-link {
    margin-top: 20px;
}