/* =====================================================

   NORMALE SEITEN

===================================================== */

.standard-page {

    min-height: 70vh;

    background: var(--fdp-white);

}

.standard-page__article {

    width: 100%;

}



/* =====================================================

   GEMEINSAME SEITENBREITE

===================================================== */

.standard-page__hero .container,

.standard-page__body .container,

.standard-page__image-section .container {

    width: 100%;

    max-width: none;

    padding-right: 32px;

    padding-left: 32px;

}

.standard-page__hero-inner,

.standard-page__content,

.standard-page__featured-image {

    width: min(

        920px,

        100%

    );

    margin-right: auto;

    margin-left: auto;

}



/* =====================================================

   SEITENTITEL

===================================================== */

.standard-page__hero {

    padding: 76px 0 34px;

    background: var(--fdp-white);

}

.standard-page__title {

    width: 100%;

    margin: 0;

    color: var(--fdp-blue);

    font-size: clamp(

        2.5rem,

        4vw,

        3.8rem

    );

    font-weight: 800;

    letter-spacing: -0.04em;

    line-height: 1;

}

.standard-page__title-line {

    display: block;

    width: 140px;

    height: 8px;

    margin-top: 16px;

    background: var(--fdp-cyan);

}



/* =====================================================

   BEITRAGSBILD

===================================================== */

.standard-page__image-section {

    padding: 12px 0 44px;

}

.standard-page__featured-image {

    margin-top: 0;

    margin-bottom: 0;

}

.standard-page__featured-image img {

    display: block;

    width: 100%;

    height: auto;

    max-height: 620px;

    object-fit: cover;

    border-radius: 26px;

}

.standard-page__featured-image figcaption {

    margin-top: 12px;

    color: #181818;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

}



/* =====================================================

   SEITENINHALT

===================================================== */

.standard-page__body {

    padding: 28px 0 100px;

}



/*

 * Standardtypografie:

 *

 * Fließtext = Medium 500

 * Überschriften = ExtraBold 800

 */

.standard-page__content {
    width: min(
        var(--fdp-body-content-width),
        100%
    );

    margin-inline: auto;

    color: #171717;

    font-family: var(--fdp-font);
    font-size: var(--fdp-body-font-size);
    font-weight: var(--fdp-body-weight);
    line-height: var(--fdp-body-line-height);
    letter-spacing: var(--fdp-body-letter-spacing);

    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal;
    overflow-wrap: normal;
}

.standard-page__content > *:first-child {

    margin-top: 0;

}



/* =====================================================

   FLIESSTEXT

===================================================== */

.standard-page__content p {
    width: 100%;
    max-width: none;

    margin-top: 0;
    margin-bottom: 1.7rem;

    color: #171717;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    hyphens: inherit;
    -webkit-hyphens: inherit;
    word-break: inherit;
    overflow-wrap: inherit;
}



/*

 * Erster Absatz bleibt zunächst normaler Fließtext.

 *

 * Nicht automatisch fett, weil nicht jede Seite

 * mit einem Lead beginnt.

 */

.standard-page__content > p:first-child {
    margin-top: 0;
    margin-bottom: 28px;

    color: #171717;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}



/* =====================================================

   HERVORHEBUNGEN

===================================================== */

.standard-page__content strong,

.standard-page__content b {

    font-weight: 700;

}



/*

 * Optional:

 * Wenn im Gutenberg-Editor ein Absatz als

 * "Groß" formatiert wird, behandeln wir ihn

 * wie einen Lead.

 */

.standard-page__content p.has-large-font-size {

    color: #171717;

    font-size: 1.08rem !important;

    font-weight: 700;

    line-height: 1.65;

}



/* =====================================================

   ZWISCHENÜBERSCHRIFTEN

===================================================== */

.standard-page__content h2 {

    width: 100%;

    margin: 46px 0 20px;

    padding: 0;

    color: var(--fdp-blue);

    font-size: clamp(

        1.9rem,

        3vw,

        2.65rem

    );

    font-weight: 800;

    letter-spacing: -0.035em;

    line-height: 1.08;

}



/*

 * Nur der Seitentitel bekommt den

 * türkisen Strich.

 */

.standard-page__content h2::after {

    display: none;

    content: none;

}



.standard-page__content h3 {

    width: 100%;

    margin: 40px 0 18px;

    color: var(--fdp-blue);

    font-size: clamp(

        1.55rem,

        2.3vw,

        2rem

    );

    font-weight: 800;

    letter-spacing: -0.025em;

    line-height: 1.15;

}



.standard-page__content h4 {

    width: 100%;

    margin: 32px 0 15px;

    color: var(--fdp-blue);

    font-size: 1.3rem;

    font-weight: 800;

    line-height: 1.25;

}



/* =====================================================

   LINKS

===================================================== */

.standard-page__content a {

    color: var(--fdp-blue);

    font-weight: 700;

    text-decoration: underline;

    text-decoration-color: var(--fdp-link-underline-color);

    text-decoration-thickness: var(--fdp-link-underline-thickness);

    text-underline-offset: var(--fdp-link-underline-offset);

    transition:

        color var(--transition);

}

.standard-page__content a:hover {

    color: var(--fdp-cyan);

}



/*

 * E-Mail-Adressen auf Desktop

 * nicht mitten im Wort umbrechen.

 */

.standard-page__content a[href^="mailto:"] {

    white-space: nowrap;

}



/* =====================================================

   LISTEN

===================================================== */

.standard-page__content ul,
.standard-page__content ol {
    width: 100%;

    margin:
        0
        0
        30px
        0;

    padding-left: 24px;

    color: #171717;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    hyphens: inherit;
    -webkit-hyphens: inherit;
}

.standard-page__content li {
    margin-bottom: 10px;
    padding-left: 5px;

    color: #171717;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.standard-page__content li::marker {

    color: #171717;

}



/* =====================================================

   ZITATE

===================================================== */

.standard-page__content blockquote,

.standard-page__content .wp-block-quote {

    width: 100%;

    margin:

        42px

        0;

    padding:

        8px

        0

        8px

        24px;

    border-left:

        7px solid

        var(--fdp-yellow);

    color: var(--fdp-blue);

    font-size: 1.16rem;

    font-weight: 700;

    line-height: 1.55;

}

.standard-page__content blockquote p,

.standard-page__content .wp-block-quote p {

    width: 100%;

    margin-bottom: 18px;

    color: inherit;

    font-size: inherit;

    font-weight: inherit;

    line-height: inherit;

}

.standard-page__content blockquote p:last-child,

.standard-page__content .wp-block-quote p:last-child {

    margin-bottom: 0;

}



/* =====================================================

   BILDER UND MEDIEN

===================================================== */

.standard-page__content figure,

.standard-page__content .wp-block-image,

.standard-page__content .wp-block-video,

.standard-page__content .wp-block-embed {

    width: 100%;

    max-width: 980px;

    margin-top: 42px;

    margin-bottom: 42px;

}

.standard-page__content img {

    max-width: 100%;

    height: auto;

}

.standard-page__content figure img {

    display: block;

    width: 100%;

    border-radius: 22px;

}

.standard-page__content figcaption {

    margin-top: 9px;

    color: var(--fdp-grey);

    font-size: 0.8rem;

    font-weight: 500;

    line-height: 1.5;

}

.standard-page__content iframe {

    max-width: 100%;

}



/* =====================================================

   BREITE GUTENBERG-BLÖCKE

===================================================== */

.standard-page__content .alignwide {

    width: min(

        1100px,

        calc(100vw - 96px)

    );

    max-width: none;

    margin-right: auto;

    margin-left: 50%;

    transform:

        translateX(-50%);

}

.standard-page__content .alignfull {

    position: relative;

    left: 50%;

    width: 100vw;

    max-width: none;

    margin-left: -50vw;

}



/* =====================================================

   BUTTONS

===================================================== */

.standard-page__content .wp-block-buttons {

    gap: 14px;

    margin-top: 32px;

    margin-bottom: 40px;

}

.standard-page__content

.wp-block-button__link {

    display: inline-flex;

    min-height: 52px;

    align-items: center;

    justify-content: center;

    padding: 12px 26px;

    border:

        2px solid

        var(--fdp-yellow);

    border-radius: 999px;

    background:

        var(--fdp-yellow);

    color:

        var(--fdp-blue);

    font-size: 0.95rem;

    font-weight: 800;

    text-decoration: none;

    transition:

background var(--transition),

        border-color var(--transition),

        color var(--transition),

        transform var(--transition);

}

.standard-page__content

.wp-block-button__link:hover {

    border-color:

        var(--fdp-blue);

    background:

        var(--fdp-blue);

    color:

        var(--fdp-white);

    transform:

        translateY(-2px);

}



/* =====================================================

   TABELLEN

===================================================== */

.standard-page__content table {

    width: 100%;

    margin: 38px 0;

    border-collapse: collapse;

    color: #171717;

    font-weight: 500;

}

.standard-page__content th,

.standard-page__content td {

    padding: 15px 16px;

    border-bottom:

        1px solid

        rgba(

            3,

            45,

            103,

            0.16

        );

    text-align: left;

}

.standard-page__content td {

    color: #171717;

    font-weight: 500;

}

.standard-page__content th {

    background:

        var(--fdp-blue);

    color:

        var(--fdp-white);

    font-weight: 800;

}



/* =====================================================

   TABLET

===================================================== */

@media (max-width: 1050px) {

    .standard-page__hero-inner,

    .standard-page__content,

    .standard-page__featured-image {

        width: min(

            860px,

            100%

        );

    }

}



/* =====================================================

   SMARTPHONE

===================================================== */

@media (max-width: 767px) {

    /*

     * Weniger horizontaler Rand.

     */

    .standard-page__hero .container,

    .standard-page__body .container,

    .standard-page__image-section .container {

        padding-right: 16px;

        padding-left: 16px;

    }

    .standard-page__hero-inner,

    .standard-page__content,

    .standard-page__featured-image {

        width: 100%;

    }



    /* Seitentitel */

    .standard-page__hero {

        padding:

            48px

            0

            28px;

    }

    .standard-page__title {

        font-size: clamp(

            2.2rem,

            11vw,

            3rem

        );

        line-height: 1;

    }

    .standard-page__title-line {

        width: 105px;

        height: 7px;

        margin-top: 14px;

    }



    /* Beitragsbild */

    .standard-page__image-section {

        padding:

            6px

            0

            28px;

    }

    .standard-page__featured-image img {

        aspect-ratio: 16 / 10;

        object-fit: cover;

        border-radius: 20px;

    }



    /* Inhalt */

    .standard-page__body {

        padding:

            20px

            0

            70px;

    }





    .standard-page__content

    > p:first-child {

        margin-bottom: 26px;
    }



    /*

     * Optionaler Gutenberg-Lead.

     */

    .standard-page__content

    p.has-large-font-size {

        font-size: 1rem !important;

        font-weight: 700;

        line-height: 1.6;

    }



    /* Überschriften */

    .standard-page__content h2 {

        margin:

            42px

            0

            20px;

        font-size: clamp(

            1.75rem,

            8vw,

            2.25rem

        );

    }

    .standard-page__content h3 {

        margin-top: 34px;

        font-size: clamp(

            1.45rem,

            7vw,

            1.85rem

        );

    }

    .standard-page__content h4 {

        margin-top: 30px;

        font-size: 1.2rem;

    }



    /* Mail-Adressen dürfen mobil umbrechen */

    .standard-page__content

    a[href^="mailto:"] {

        white-space: normal;

        overflow-wrap: anywhere;

    }



    /* Wide-Blöcke */

    .standard-page__content .alignwide {

        width: 100%;

        margin-left: 0;

        transform: none;

    }



    /* Zitate */

    .standard-page__content blockquote,

    .standard-page__content

    .wp-block-quote {

        margin:

            32px

            0;

        padding-left: 18px;

        border-left-width: 6px;

        font-size: 1.05rem;

        font-weight: 700;

    }



    /* Medien */

    .standard-page__content figure,

    .standard-page__content

    .wp-block-image,

    .standard-page__content

    .wp-block-video,

    .standard-page__content

    .wp-block-embed {

        margin-top: 34px;

        margin-bottom: 34px;

    }

}



/* =====================================================

   KLEINE SMARTPHONES

===================================================== */

@media (max-width: 440px) {

    .standard-page__hero .container,

    .standard-page__body .container,

    .standard-page__image-section .container {

        padding-right: 14px;

        padding-left: 14px;

    }



}