/* =====================================================
   SINGLE POST
   FDP ANHALT-BITTERFELD
===================================================== */
/* =====================================================
   GRUNDLAYOUT
===================================================== */
body.single-post {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--fdp-white);
}
.single-post-page {
    width: 100%;
    font-family: var(--fdp-font);
    padding:
        0
        0
        88px;
    background: var(--fdp-white);
}
.article-post {
    width: min(
        var(--container),
        calc(100% - 64px)
    );
    margin-inline: auto;
    background: var(--fdp-white);
}
/* =====================================================
   KOPFBEREICH
===================================================== */
.single-post__header {
    padding:
        72px
        0
        62px;
}
.single-post__header-container {
    width: min(
        860px,
        calc(100% - 80px)
    );
    margin-inline: auto;
}
/* =====================================================
   KATEGORIE + DATUM
===================================================== */
.single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}
.single-post__category {
    color: var(--fdp-blue);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
}
.single-post__category:hover {
    color: var(--fdp-cyan);
}
.single-post__meta-separator {
    display: block;
    width: 1px;
    height: 20px;
    background: #919191;
}
.single-post__date {
    color: #747474;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
}
/* =====================================================
   TITEL
===================================================== */
.single-post__title {
    max-width: 860px;
    margin:
        0
        0
        34px;
    color: var(--fdp-blue);
    font-size: clamp(
        2.8rem,
        4.5vw,
        4.3rem
    );
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}
.single-post__title::after {
    display: block;
    width: 140px;
    height: 8px;
    margin-top: 16px;
    background: var(--fdp-cyan);
    content: "";
}
/* =====================================================
   LEAD
===================================================== */
.single-post__lead {
    max-width: 840px;
    margin: 0;
    color: #181818;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.65;
}
.single-post__lead p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/* =====================================================
   BEITRAGSBILD
===================================================== */
.single-post__featured-image {
    margin: 0;
}
.single-post__image-container {
    width: min(
        1040px,
        calc(100% - 64px)
    );
    margin-inline: auto;
}
.single-post__featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: cover;
    object-position: center;
}
.single-post__image-caption {
    margin:
        12px
        0
        0;
    color: #181818;
    font-family: var(--fdp-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
/* =====================================================
   ARTIKELINHALT
===================================================== */
.single-post__main {
    padding:
        48px
        0
        42px;
}
.single-post__content-container {
    width: min(var(--fdp-body-content-width), calc(100% - 80px));
    margin-inline: auto;
}
/* =====================================================
   SHARE-LEISTE
===================================================== */
.single-post__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}
/* =====================================================
   SHARE-BUTTON
===================================================== */
.single-post__share-button {
    display: inline-flex !important;
    box-sizing: border-box;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex:
        0
        0
        50px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 50%;
    background: var(--fdp-yellow);
    color: var(--fdp-blue);
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}
.single-post__share-button:hover {
    background: var(--fdp-cyan);
    transform:
        translateY(-2px);
    box-shadow:
        0 6px 14px
        rgba(3, 45, 103, 0.12);
}
/* =====================================================
   SHARE-ICONS
   Wichtig:
   Wir verwenden jetzt ausschließlich normale IMG-Dateien.
===================================================== */
svg.single-post__share-icon {
    display: block !important;
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex:
        0
        0
        24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
/* Instagram */
/* Facebook */
/* Threads */
/* TikTok */
/* E-Mail */
/* Native-Share Status */
.single-post__share-button.is-copied {
    background: var(--fdp-cyan);
}
/* =====================================================
   FLIESSTEXT
===================================================== */
.single-post__content {
    color: #181818;
    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;
}
.single-post__content > *:first-child {
    margin-top: 0;
}

.single-post__content > *:last-child {
    margin-bottom: 0;
}
.single-post__content p {
    margin-top: 0;
    margin-bottom: 1.7rem;
    color: #181818;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.single-post__content strong,
.single-post__content b {
    font-weight: 700;
}
/* =====================================================
   ÜBERSCHRIFTEN
===================================================== */
.single-post__content h2 {
    margin-top: 58px;
    margin-bottom: 22px;
    color: var(--fdp-blue);
    font-size: clamp(
        2rem,
        3.3vw,
        2.9rem
    );
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.single-post__content h3 {
    margin-top: 44px;
    margin-bottom: 18px;
    color: var(--fdp-blue);
    font-size: clamp(
        1.55rem,
        2.5vw,
        2.15rem
    );
    font-weight: 800;
    line-height: 1.15;
}
.single-post__content h4 {
    margin-top: 34px;
    margin-bottom: 14px;
    color: var(--fdp-blue);
    font-size: 1.35rem;
    font-weight: 800;
}
/* =====================================================
   LINKS
===================================================== */
.single-post__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);
}
.single-post__content a:hover {
    color: var(--fdp-cyan);
}
/* =====================================================
   LISTEN
===================================================== */
.single-post__content ul,
.single-post__content ol {
    margin:
        0
        0
        28px
        24px;
    padding: 0;
}
.single-post__content li {
    margin-bottom: 10px;
    padding-left: 5px;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
/* =====================================================
   ZITATE
   Zitate werden in Newsbeiträgen nicht mehr als
   eigener hervorgehobener Bereich dargestellt.
   Sie erscheinen wie normaler Fließtext.
===================================================== */
.single-post__content blockquote,
.single-post__content .wp-block-quote {
    margin:
        0
        0
        1.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #181818;
    font-family: var(--fdp-font);
    font-size: inherit;
    font-style: normal;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.single-post__content blockquote p,
.single-post__content .wp-block-quote p {
    margin:
        0
        0
        1.7rem;
    color: #181818;
    font-family: var(--fdp-font);
    font-size: inherit;
    font-style: normal;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.single-post__content blockquote p:last-child,
.single-post__content .wp-block-quote p:last-child {
    margin-bottom: 0;
}
.single-post__content blockquote cite,
.single-post__content .wp-block-quote cite {
    display: block;
    margin-top: 10px;
    color: #505861;
    font-family: var(--fdp-font);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
}
/* =====================================================
   TYPOGRAFIE ABSICHERN
   Public Sans wird für den gesamten Artikelbereich
   ausdrücklich verwendet.
===================================================== */
.single-post__title,
.single-post__lead,
.single-post__meta,
.single-post__category,
.single-post__date,
.single-post__image-caption,
.single-post__content,
.single-post__content p,
.single-post__content ul,
.single-post__content ol,
.single-post__content li,
.single-post__content h1,
.single-post__content h2,
.single-post__content h3,
.single-post__content h4,
.single-post__content blockquote,
.single-post__content figcaption,
.single-post__back,
.related-posts__heading h2,
.related-post-card__category,
.related-post-card__title {
    font-family: var(--fdp-font);
}
/* =====================================================
   MEDIEN
===================================================== */
.single-post__content figure {
    margin:
        44px
        0;
}
.single-post__content figure img {
    width: 100%;
    height: auto;
}
.single-post__content figcaption {
    margin-top: 8px;
    color: var(--fdp-grey);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
}
.single-post__content iframe {
    max-width: 100%;
}
.single-post__content .wp-block-image,
.single-post__content .wp-block-video,
.single-post__content .wp-block-embed {
    margin-top: 44px;
    margin-bottom: 44px;
}
/* =====================================================
   EMBEDS ZENTRIEREN
   Unterstützt sowohl Gutenberg-Embeds als auch direkt
   eingefügten Instagram-Embed-Code.
===================================================== */
.single-post__content .wp-block-embed {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin:
        44px
        auto
        54px;
}
.single-post__content .wp-block-embed__wrapper {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
}
/* Gutenberg-Instagram-Block */
.single-post__content .wp-block-embed-instagram,
.single-post__content .is-provider-instagram {
    width: 100%;
    max-width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
}
/* Originales Instagram-Blockquote vor der JS-Umwandlung */
.single-post__content blockquote.instagram-media,
.single-post__content blockquote[data-instgrm-permalink],
.single-post__content .instagram-media {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 540px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-bottom: 54px !important;
    margin-left: auto !important;
}
/* Von Instagram erzeugtes iframe */
.single-post__content iframe.instagram-media,
.single-post__content iframe.instagram-media-rendered,
.single-post__content .instagram-media-rendered {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 540px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-bottom: 54px !important;
    margin-left: auto !important;
}
/* Andere schmalere iframe-Embeds ebenfalls mittig */
.single-post__content
.wp-block-embed__wrapper
> iframe {
    display: block;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.single-post__content .alignwide {
    width: min(
        1040px,
        calc(100vw - 128px)
    );
    max-width: none;
    margin-left: 50%;
    transform:
        translateX(-50%);
}
/* =====================================================
   WEITERE BEITRÄGE
===================================================== */
.related-posts {
    width: min(
        var(--container),
        calc(100% - 64px)
    );
    margin-inline: auto;
    padding:
        42px
        0
        20px;
    background: transparent;
}
.related-posts__container {
    width: 100%;
}
.related-posts__heading {
    margin-bottom: 36px;
}
.related-posts__heading h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 14px;
    color: var(--fdp-blue);
    font-size: clamp(
        2rem,
        3vw,
        2.8rem
    );
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}
.related-posts__heading h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 6px;
    background: var(--fdp-cyan);
    content: "";
}
/* =====================================================
   RELATED GRID
===================================================== */
.related-posts__grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    align-items: stretch;
    gap: 28px;
}
/* =====================================================
   RELATED CARD
===================================================== */
.related-post-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: var(--fdp-white);
    box-shadow:
        0 8px 30px
        rgba(3, 45, 103, 0.08);
    color: var(--fdp-blue);
    text-decoration: none;
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}
.related-post-card:hover {
    color: var(--fdp-blue);
    transform:
        translateY(-6px);
    box-shadow:
        0 18px 44px
        rgba(3, 45, 103, 0.14);
}
/* Bild */
.related-post-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--fdp-yellow);
}
.related-post-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.4s ease;
}
.related-post-card:hover
.related-post-card__image img {
    transform:
        scale(1.04);
}
/* Platzhalter */
.related-post-card__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--fdp-blue);
}
.related-post-card__placeholder strong {
    font-size: 3rem;
    line-height: 1;
}
.related-post-card__placeholder small {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}
/* Inhalt */
.related-post-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px;
}
.related-post-card__content::before {
    display: block;
    width: 58px;
    height: 5px;
    margin-bottom: 18px;
    background: var(--fdp-cyan);
    content: "";
}
/* Kategorie */
.related-post-card__category {
    display: block;
    margin-bottom: 10px;
    color: var(--fdp-grey);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
/* Titel */
.related-post-card__title {
    display: block;
    color: var(--fdp-blue);
    font-size: clamp(
        1.35rem,
        1.7vw,
        1.75rem
    );
    font-weight: 800;
    line-height: 1.14;
}
.related-post-card:hover
.related-post-card__title {
    color: var(--fdp-cyan);
}
/* =====================================================
   TABLET
===================================================== */
@media (max-width: 900px) {
    .related-posts__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
    .related-post-card:last-child {
        display: none;
    }
}
/* =====================================================
   SMARTPHONE
===================================================== */
@media (max-width: 767px) {
    .single-post-page {
        padding-bottom: 0;
        background: var(--fdp-white);
    }
    .article-post {
        width: 100%;
    }
    /* Kopf */
    .single-post__header {
        padding:
            46px
            0
            38px;
    }
    .single-post__header-container,
    .single-post__image-container,
    .single-post__content-container {
        width: min(
            calc(100% - 32px),
            860px
        );
    }
    .single-post__meta {
        gap: 9px;
        margin-bottom: 20px;
    }
    .single-post__category,
    .single-post__date {
        font-size: 0.8rem;
    }
    .single-post__meta-separator {
        height: 18px;
    }
    /* Titel */
    .single-post__title {
        margin-bottom: 24px;
        font-size: clamp(
            2.2rem,
            10vw,
            3.2rem
        );
        line-height: 1;
    }
    .single-post__title::after {
        width: 105px;
        height: 7px;
        margin-top: 14px;
    }
    /* Lead */
    .single-post__lead {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.6;
    }
    /* Bild */
    .single-post__featured-image img {
        max-height: none;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    /* Inhalt */
    .single-post__main {
        padding:
            32px
            0
            32px;
    }
    /* Share */
    .single-post__share {
        gap: 10px;
        margin-bottom: 34px;
    }
    .single-post__share-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px;
    }
    svg.single-post__share-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
/* Überschriften */
    .single-post__content h2 {
        margin-top: 46px;
        font-size: clamp(
            1.8rem,
            9vw,
            2.4rem
        );
    }
    .single-post__content h3 {
        margin-top: 36px;
        font-size: clamp(
            1.45rem,
            7vw,
            1.9rem
        );
    }
    /* Embeds */
    .single-post__content .wp-block-embed {
        margin-top: 34px;
        margin-bottom: 42px;
    }
    .single-post__content .wp-block-embed-instagram .instagram-media,
    .single-post__content blockquote.instagram-media,
    .single-post__content blockquote[data-instgrm-permalink],
    .single-post__content iframe.instagram-media,
    .single-post__content iframe.instagram-media-rendered,
    .single-post__content .instagram-media-rendered {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-bottom: 42px !important;
        margin-left: auto !important;
    }
    /* Wide */
    .single-post__content .alignwide {
        width:
            calc(100vw - 32px);
    }
/* Related */
    .related-posts {
        width: 100%;
        padding:
            36px
            16px
            64px;
        background: var(--fdp-white);
    }
    .related-posts__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .related-post-card {
        border-radius: 22px;
    }
    .related-post-card:last-child {
        display: flex;
    }
    .related-post-card__content {
        padding:
            24px
            22px;
    }
}
/* =====================================================
   KLEINE SMARTPHONES
===================================================== */
@media (max-width: 440px) {
    .single-post__header-container,
    .single-post__image-container,
    .single-post__content-container {
        width:
            calc(100% - 28px);
    }
    .single-post__title {
        font-size: 2.15rem;
    }
    .single-post__share {
        gap: 8px;
    }
    .single-post__share-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-basis: 44px;
    }
    svg.single-post__share-icon {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;
        max-width: 21px !important;
        max-height: 21px !important;
    }
    .single-post__lead {
        font-size: 1rem;
        font-weight: 700;
    }
}