*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--fdp-white);

    color: var(--fdp-blue);

    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);

    -webkit-font-smoothing: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fdp-blue);

    font-weight: 700;

    line-height: 1.08;
}

/*
 * Lange Wörter wie „Stadtratsabgeordnete“ dürfen auf dem
 * Handy nicht über den Rand ragen. Zuerst wird nach
 * deutschen Regeln getrennt („Stadtrats-abgeordnete“),
 * nur wenn das nicht geht, wird das Wort umbrochen.
 * Kurze Wörter bleiben ganz.
 */

@media (max-width: 767px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;

        -webkit-hyphens: auto;
        hyphens: auto;

        hyphenate-limit-chars: 12 5 5;
    }
}

h1 {
    font-size:
        clamp(
            3rem,
            5.5vw,
            5.25rem
        );
}

h2 {
    font-size:
        clamp(
            2.25rem,
            4vw,
            4rem
        );
}

h3 {
    font-size:
        clamp(
            1.5rem,
            2.2vw,
            2.25rem
        );
}

p {
    margin-bottom: 1.25rem;
}

a {
    color: inherit;

    text-decoration: none;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

ul,
ol {
    margin: 0;

    padding: 0;
}

section {
    position: relative;
}


/* =====================================================
   STANDARD-ABSCHNITTSÜBERSCHRIFT
===================================================== */

.section-heading {
    margin-bottom: 40px;
}

.section-heading h2 {
    position: relative;

    display: inline-block;

    margin: 0;

    padding-bottom: 16px;

    color: var(--fdp-blue);

    font-size:
        clamp(
            2.2rem,
            3.2vw,
            3.4rem
        );

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.035em;
}

.section-heading h2::after {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 140px;
    height: 8px;

    background: var(--fdp-cyan);

    content: "";
}

@media (max-width: 767px) {

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        padding-bottom: 14px;

        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }

    .section-heading h2::after {
        width: 105px;
        height: 7px;
    }

}


/* =====================================================
   GLOBALE NUMMERIERTE LISTEN
   FDP ANHALT-BITTERFELD
===================================================== */

/*
 * Jede nummerierte Liste innerhalb des Hauptinhalts
 * erhält automatisch die FDP-Darstellung.
 *
 * Im WordPress-Editor reicht:
 * "Nummerierte Liste" auswählen.
 */

main ol {
    counter-reset: fdp-list;

    display: grid;

    width: 100%;
    max-width: 100%;

    gap: 14px;

    margin:
        28px
        0
        32px;

    padding:
        0
        0
        0
        12px;

    list-style: none;
}


/* =====================================================
   EINZELNER LISTENPUNKT
===================================================== */

main ol > li {
    position: relative;

    counter-increment: fdp-list;

    min-width: 0;
    max-width: 100%;

    margin: 0;

    padding-left: 38px;

    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;
}


/* =====================================================
   GELBE ZAHL
===================================================== */

main ol > li::before {
    position: absolute;

    top: 1px;
    left: 0;

    display: inline-flex;

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    background: var(--fdp-yellow);

    color: var(--fdp-blue);

    content: counter(fdp-list);

    font-family: var(--fdp-font);

    font-size: 0.82rem;

    font-weight: 800;

    line-height: 1;
}


/* =====================================================
   ABSÄTZE INNERHALB EINES LISTENPUNKTES
===================================================== */

main ol > li > p {
    margin:
        0
        0
        10px;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    line-height: inherit;

    letter-spacing: inherit;

    hyphens: inherit;
    -webkit-hyphens: inherit;

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

main ol > li > p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   FETTER TEXT INNERHALB DER LISTE
===================================================== */

main ol > li strong,
main ol > li b {
    font-weight: 700;
}


/* =====================================================
   LINKS INNERHALB DER LISTE
===================================================== */

main ol > li 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);
}


/* =====================================================
   VERSCHACHTELTE NUMMERIERTE LISTEN
===================================================== */

main ol ol {
    counter-reset: fdp-sub-list;

    gap: 12px;

    margin:
        16px
        0
        8px;
}

main ol ol > li {
    counter-increment: fdp-sub-list;

    padding-left: 34px;
}

main ol ol > li::before {
    width: 22px;
    height: 22px;

    content: counter(fdp-sub-list);

    font-size: 0.72rem;
}


/* =====================================================
   WORDPRESS DETAILS-BLOCK
   NATIVES AKKORDEON

   Im Gutenberg-Editor einfach:
   + → Details

   Kein zusätzliches HTML oder JavaScript notwendig.
===================================================== */

main .wp-block-details {
    width: 100%;

    margin: 0;

    padding: 0;

    border-top:
        1px solid
        rgba(
            3,
            45,
            103,
            0.13
        );

    color: #171717;

    font-family: var(--fdp-font);
}


/*
 * Liegen mehrere Details-Blöcke direkt
 * untereinander, entsteht nur eine Trennlinie.
 */

main .wp-block-details
+ .wp-block-details {
    border-top: 0;
}


/*
 * Jeder Block erhält unten eine Linie.
 */

main .wp-block-details {
    border-bottom:
        1px solid
        rgba(
            3,
            45,
            103,
            0.13
        );
}


/* =====================================================
   AKKORDEON-ÜBERSCHRIFT
===================================================== */

main .wp-block-details > summary {
    position: relative;

    display: flex;

    width: 100%;

    min-height: 76px;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 0;

    padding:
        20px
        48px
        20px
        0;

    color: var(--fdp-blue);

    cursor: pointer;

    font-family: var(--fdp-font);

    font-size: 1.45rem;

    font-weight: 800;

    letter-spacing: -0.025em;

    line-height: 1.15;

    list-style: none;

    transition:
        color 160ms ease;
}


/* =====================================================
   NATIVEN BROWSER-PFEIL ENTFERNEN
===================================================== */

main .wp-block-details > summary::-webkit-details-marker {
    display: none;
}

main .wp-block-details > summary::marker {
    display: none;

    content: "";
}


/* =====================================================
   EIGENER PFEIL
===================================================== */

main .wp-block-details > summary::after {
    position: absolute;

    top: 50%;
    right: 6px;

    display: block;

    width: 10px;
    height: 10px;

    border-right:
        3px solid
        var(--fdp-blue);

    border-bottom:
        3px solid
        var(--fdp-blue);

    content: "";

    transform:
        translateY(-70%)
        rotate(45deg);

    transform-origin: center;

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}


/* =====================================================
   GEÖFFNETER ZUSTAND
===================================================== */

main .wp-block-details[open]
> summary {
    color: var(--fdp-cyan);
}

main .wp-block-details[open]
> summary::after {
    border-color: var(--fdp-cyan);

    transform:
        translateY(-25%)
        rotate(225deg);
}


/* =====================================================
   HOVER
===================================================== */

@media (hover: hover) and (pointer: fine) {

    main .wp-block-details
    > summary:hover {
        color: var(--fdp-cyan);
    }

    main .wp-block-details
    > summary:hover::after {
        border-color: var(--fdp-cyan);
    }

}


/* =====================================================
   FOCUS
===================================================== */

main .wp-block-details
> summary:focus-visible {
    outline:
        3px solid
        rgba(
            0,
            167,
            231,
            0.32
        );

    outline-offset: 5px;
}


/* =====================================================
   INHALT DES AKKORDEONS
===================================================== */

main .wp-block-details
> :not(summary) {
    max-width: 100%;

    margin-right: 0;
    margin-left: 0;
}


/*
 * Nach dem Öffnen bleibt zwischen Überschrift
 * und Inhalt ein ruhiger Abstand.
 */

main .wp-block-details[open]
> summary {
    margin-bottom: 4px;
}


/* =====================================================
   ABSÄTZE
===================================================== */

main .wp-block-details > p {
    margin:
        0
        0
        18px;

    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;
}

main .wp-block-details > p:last-child {
    margin-bottom: 26px;
}


/* =====================================================
   ALLGEMEINER INHALT
===================================================== */

main .wp-block-details
> div,
main .wp-block-details
> figure,
main .wp-block-details
> ul,
main .wp-block-details
> ol,
main .wp-block-details
> blockquote {
    margin-bottom: 26px;
}


/* =====================================================
   FETTUNGEN
===================================================== */

main .wp-block-details strong,
main .wp-block-details b {
    font-weight: 700;
}


/* =====================================================
   LINKS
===================================================== */

main .wp-block-details 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);
}

main .wp-block-details a:hover {
    color: var(--fdp-cyan);
}


/* =====================================================
   UNGEORDNETE LISTEN IM AKKORDEON
===================================================== */

main .wp-block-details ul {
    margin:
        0
        0
        26px;

    padding-left: 24px;

    color: #171717;

    list-style: disc;
}

main .wp-block-details ul li {
    margin-bottom: 8px;

    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;
}

main .wp-block-details ul li:last-child {
    margin-bottom: 0;
}


/* =====================================================
   NUMMERIERTE LISTEN IM AKKORDEON

   Nutzen automatisch unser globales FDP-Design.
===================================================== */

main .wp-block-details ol {
    margin-bottom: 26px;
}


/* =====================================================
   ÜBERSCHRIFTEN IM AKKORDEON
===================================================== */

main .wp-block-details h2,
main .wp-block-details h3,
main .wp-block-details h4 {
    color: var(--fdp-blue);

    font-family: var(--fdp-font);

    font-weight: 800;
}

main .wp-block-details h2 {
    margin:
        24px
        0
        16px;

    font-size: 1.65rem;
}

main .wp-block-details h3 {
    margin:
        22px
        0
        14px;

    font-size: 1.35rem;
}

main .wp-block-details h4 {
    margin:
        20px
        0
        12px;

    font-size: 1.12rem;
}


/* =====================================================
   BILDER IM AKKORDEON
===================================================== */

main .wp-block-details img {
    max-width: 100%;
    height: auto;
}


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

@media (max-width: 767px) {

    main ol {
        gap: 14px;

        margin:
            24px
            0
            28px;
    }


    main ol > li {
        padding-left: 35px;
    }


    main ol > li::before {
        width: 24px;
        height: 24px;

        font-size: 0.78rem;
    }


    /* =================================================
       AKKORDEON
    ================================================= */

    main .wp-block-details
    > summary {
        min-height: 66px;

        padding:
            17px
            42px
            17px
            0;

        font-size: 1.2rem;

        letter-spacing: -0.02em;

        line-height: 1.2;
    }


    main .wp-block-details
    > summary::after {
        right: 5px;

        width: 9px;
        height: 9px;

        border-right-width: 2.5px;
        border-bottom-width: 2.5px;
    }


    main .wp-block-details
    > p:last-child {
        margin-bottom: 22px;
    }


    main .wp-block-details
    > div,
    main .wp-block-details
    > figure,
    main .wp-block-details
    > ul,
    main .wp-block-details
    > ol,
    main .wp-block-details
    > blockquote {
        margin-bottom: 22px;
    }


    main .wp-block-details h2 {
        font-size: 1.5rem;
    }


    main .wp-block-details h3 {
        font-size: 1.28rem;
    }

}


/* =====================================================
   WORDPRESS AKKORDEON-BLOCK

   Der neuere Block „Akkordeon“ (+ → Akkordeon)
   sieht genauso aus wie der Details-Block oben:
   Linien, Schrift, Pfeil, Farben, Abstände.
===================================================== */

main .wp-block-accordion {
    width: 100%;

    margin-right: 0;
    margin-left: 0;

    padding: 0;

    color: #171717;

    font-family: var(--fdp-font);
}

main .wp-block-accordion > .wp-block-accordion-item {
    margin: 0;

    padding: 0;

    border-bottom:
        1px solid
        rgba(3, 45, 103, 0.13);
}

main .wp-block-accordion > .wp-block-accordion-item:first-child {
    border-top:
        1px solid
        rgba(3, 45, 103, 0.13);
}


/* Überschrift */

main .wp-block-accordion .wp-block-accordion-heading {
    width: 100%;

    margin: 0;

    padding: 0;

    color: var(--fdp-blue);

    font-family: var(--fdp-font);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

main .wp-block-accordion .wp-block-accordion-heading__toggle {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 76px;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 0;

    padding: 20px 48px 20px 0;

    border: 0;

    background: none;
    color: inherit;

    cursor: pointer;

    font: inherit;
    letter-spacing: inherit;
    text-align: left;

    transition: color 160ms ease;
}

main .wp-block-accordion .wp-block-accordion-heading__toggle-title {
    flex: 1;

    text-decoration: none;
}

main .wp-block-accordion .wp-block-accordion-heading__toggle:hover
.wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}


/* Pfeil statt „+“, immer rechts */

main .wp-block-accordion .wp-block-accordion-heading__toggle-icon {
    position: absolute;

    top: 50%;
    right: 6px;

    display: block;

    width: 10px;
    height: 10px;

    overflow: hidden;

    border-right: 3px solid var(--fdp-blue);
    border-bottom: 3px solid var(--fdp-blue);

    color: transparent;

    font-size: 0;

    transform:
        translateY(-70%)
        rotate(45deg);

    transform-origin: center;

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}


/* Geöffnet */

main .wp-block-accordion .wp-block-accordion-item.is-open
> .wp-block-accordion-heading {
    margin-bottom: 4px;

    color: var(--fdp-cyan);
}

main .wp-block-accordion .wp-block-accordion-item.is-open
> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    border-color: var(--fdp-cyan);

    transform:
        translateY(-25%)
        rotate(225deg);
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

    main .wp-block-accordion .wp-block-accordion-heading__toggle:hover {
        color: var(--fdp-cyan);
    }

    main .wp-block-accordion .wp-block-accordion-heading__toggle:hover
    .wp-block-accordion-heading__toggle-icon {
        border-color: var(--fdp-cyan);
    }
}


/* Fokus */

main .wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible {
    outline:
        3px solid
        rgba(0, 167, 231, 0.32);

    outline-offset: 5px;
}


/* Inhalt: wie im Details-Block */

main .wp-block-accordion .wp-block-accordion-panel {
    margin: 0;

    padding: 0;
}

main .wp-block-accordion .wp-block-accordion-panel > * {
    max-width: 100%;

    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
}

main .wp-block-accordion .wp-block-accordion-panel > p {
    margin: 0 0 18px;

    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;
}

main .wp-block-accordion .wp-block-accordion-panel > div,
main .wp-block-accordion .wp-block-accordion-panel > figure,
main .wp-block-accordion .wp-block-accordion-panel > ul,
main .wp-block-accordion .wp-block-accordion-panel > ol,
main .wp-block-accordion .wp-block-accordion-panel > blockquote {
    margin-bottom: 26px;
}

main .wp-block-accordion .wp-block-accordion-panel > :last-child {
    margin-bottom: 26px;
}

main .wp-block-accordion .wp-block-accordion-panel strong,
main .wp-block-accordion .wp-block-accordion-panel b {
    font-weight: 700;
}

main .wp-block-accordion .wp-block-accordion-panel 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);
}

main .wp-block-accordion .wp-block-accordion-panel a:hover {
    color: var(--fdp-cyan);
}

main .wp-block-accordion .wp-block-accordion-panel ul {
    padding-left: 24px;

    color: #171717;

    list-style: disc;
}

main .wp-block-accordion .wp-block-accordion-panel ul li {
    margin-bottom: 8px;

    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);
}

main .wp-block-accordion .wp-block-accordion-panel ul li:last-child {
    margin-bottom: 0;
}

main .wp-block-accordion .wp-block-accordion-panel h2,
main .wp-block-accordion .wp-block-accordion-panel h3,
main .wp-block-accordion .wp-block-accordion-panel h4 {
    color: var(--fdp-blue);

    font-family: var(--fdp-font);
    font-weight: 800;
}

main .wp-block-accordion .wp-block-accordion-panel h2 {
    margin: 24px 0 16px;

    font-size: 1.65rem;
}

main .wp-block-accordion .wp-block-accordion-panel h3 {
    margin: 22px 0 14px;

    font-size: 1.35rem;
}

main .wp-block-accordion .wp-block-accordion-panel h4 {
    margin: 20px 0 12px;

    font-size: 1.12rem;
}

main .wp-block-accordion .wp-block-accordion-panel img {
    max-width: 100%;
    height: auto;
}


@media (max-width: 767px) {

    main .wp-block-accordion .wp-block-accordion-heading {
        font-size: 1.2rem;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    main .wp-block-accordion .wp-block-accordion-heading__toggle {
        min-height: 66px;

        padding: 17px 42px 17px 0;
    }

    main .wp-block-accordion .wp-block-accordion-heading__toggle-icon {
        right: 5px;

        width: 9px;
        height: 9px;

        border-right-width: 2.5px;
        border-bottom-width: 2.5px;
    }

    main .wp-block-accordion .wp-block-accordion-panel > :last-child,
    main .wp-block-accordion .wp-block-accordion-panel > div,
    main .wp-block-accordion .wp-block-accordion-panel > figure,
    main .wp-block-accordion .wp-block-accordion-panel > ul,
    main .wp-block-accordion .wp-block-accordion-panel > ol,
    main .wp-block-accordion .wp-block-accordion-panel > blockquote {
        margin-bottom: 22px;
    }

    main .wp-block-accordion .wp-block-accordion-panel h2 {
        font-size: 1.5rem;
    }

    main .wp-block-accordion .wp-block-accordion-panel h3 {
        font-size: 1.28rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    main .wp-block-accordion .wp-block-accordion-heading__toggle,
    main .wp-block-accordion .wp-block-accordion-heading__toggle-icon {
        transition: none;
    }
}


/* =====================================================
   LINKS IN TEXTBEREICHEN OHNE EIGENE REGEL

   Gleiche Optik wie in Artikeln und auf normalen
   Seiten. Werte zentral in variables.css.
===================================================== */

.person-profile__description a,
.person-profile__article a,
.people-page__intro a,
.resolution-single__lead a,
.initiative-single__lead a,
.home-hero-contact__intro 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);
}

.person-profile__description a:hover,
.person-profile__article a:hover,
.people-page__intro a:hover,
.resolution-single__lead a:hover,
.initiative-single__lead a:hover,
.home-hero-contact__intro a:hover {
    color: var(--fdp-cyan);
}


/* =====================================================
   ZURÜCK-LINK (fdp_ab_back_link in inc/icons.php)
===================================================== */

.fdp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--fdp-blue);

    font-family: var(--fdp-font);
    font-size: var(--fdp-body-font-size);
    font-weight: 700;
    line-height: 1.4;

    text-decoration: none;
}

.fdp-back-link__icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--fdp-blue);

    transition:
        transform var(--transition),
        background var(--transition);
}

.fdp-back-link__icon svg {
    display: block;
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--fdp-white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}

.fdp-back-link__text {
    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);
}

.fdp-back-link:hover .fdp-back-link__text {
    color: var(--fdp-cyan);
}

.fdp-back-link:hover .fdp-back-link__icon {
    transform: translateX(-3px);
}

.fdp-back-link:focus-visible {
    border-radius: 6px;
    outline: 3px solid var(--fdp-cyan);
    outline-offset: 4px;
}

.fdp-back-link[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    .fdp-back-link__icon {
        transition: none;
    }
}



/* =====================================================
   SEITENZAHLEN (fdp_ab_pagination in inc/icons.php)

   Alle Übersichten: Zahlen als ruhige Kreise, aktuelle
   Seite gelb, Vor/Zurück als dunkelblauer Pfeilkreis.
   Hover wie bei den Buttons: weiß mit farbigem Rand.
   Den Abstand nach oben setzt die jeweilige Übersicht.
===================================================== */

.fdp-pagination__list {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.fdp-pagination__list li {
    margin: 0;
    padding: 0;
}

.fdp-pagination__list li::before {
    content: none;
}

.fdp-pagination .page-numbers {
    display: inline-flex;
    width: 46px;
    height: 46px;

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

    border: 2px solid transparent;
    border-radius: 50%;

    background: transparent;
    color: var(--fdp-blue);

    font-family: var(--fdp-font);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    text-decoration: none;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.fdp-pagination a.page-numbers:not(.prev):not(.next):hover {
    border-color: var(--fdp-blue);
}

.fdp-pagination .page-numbers.current {
    border-color: var(--fdp-yellow);

    background: var(--fdp-yellow);

    font-weight: 800;
}

.fdp-pagination .page-numbers.dots {
    width: 24px;

    color: rgba(3, 45, 103, 0.55);
}


/* Vor / Zurück */

.fdp-pagination .page-numbers.prev,
.fdp-pagination .page-numbers.next {
    border-color: var(--fdp-blue);

    background: var(--fdp-blue);
    color: var(--fdp-white);
}

.fdp-pagination .page-numbers.prev {
    margin-right: 8px;
}

.fdp-pagination .page-numbers.next {
    margin-left: 8px;
}

.fdp-pagination .page-numbers svg {
    display: block;
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}

.fdp-pagination a.prev:hover,
.fdp-pagination a.next:hover {
    background: var(--fdp-white);
    color: var(--fdp-blue);
}

.fdp-pagination .page-numbers.is-disabled {
    opacity: 0.25;
}

.fdp-pagination a.page-numbers:focus-visible {
    outline: 3px solid rgba(0, 167, 231, 0.45);
    outline-offset: 3px;
}

.fdp-pagination__sr {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

@media (max-width: 767px) {

    .fdp-pagination__list {
        gap: 4px;
    }

    .fdp-pagination .page-numbers {
        width: 38px;
        height: 38px;

        font-size: 1rem;
    }

    .fdp-pagination .page-numbers.dots {
        width: 18px;
    }

    .fdp-pagination .page-numbers.prev {
        margin-right: 4px;
    }

    .fdp-pagination .page-numbers.next {
        margin-left: 4px;
    }

    .fdp-pagination .page-numbers svg {
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .fdp-pagination .page-numbers {
        transition: none;
    }
}


/* =====================================================
   SLIDER-FORTSCHRITT
   Kurzer Strich unter Handy-Slidern (wie bei den
   FDP-Kacheln). Der dunkle Balken läuft beim Wischen mit.
   Breite und Position setzt fdpSliderProgress() per JS.
===================================================== */

.fdp-slider-progress {
    position: relative;

    display: block;
    width: 64px;
    height: 4px;
    overflow: hidden;

    border-radius: 999px;

    background: rgba(3, 45, 103, 0.14);
}

.fdp-slider-progress__thumb {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 40%;
    height: 100%;

    border-radius: inherit;

    background: var(--fdp-blue);

    transition: transform 120ms linear;
}