/*
Theme Name:  DS_THEME_2026
Theme URI:   https://davidschliesing.de
Author:      Daniel
Description: Theme für davidschliesing.de – Mitglied des Deutschen Bundestages
Version:     1.0.0
Text Domain: ds_theme_2026
*/

/* @font-face wird dynamisch via ds_build_font_css() ausgegeben */

:root {
    --color-red-400: #393939;
    --color-red-300: #59353b;
    --color-red-200: #802b36;
    --color-red-100: #ae1928;
    --color-red: #e3000f;
    --color-red--100: #ff2020;
    --color-red--200: #ff4040;
    --color-red--300: #ff6060;
    --color-red--400: #ff8080;

    --color-yellow-muted: #802b36;
    --color-blue-muted: #345995;
    --color-orange-muted: #c16200;
    --color-green-muted: #5b8c5a;
    --color-pink-muted: #f49fbc;

    --color-bg-light: #ffe3dc;
    --color-bg-dark: #121113;

    --color-blue-active: #0c6291;
    --color-orange-active: #f79824;
    --color-green-active: #688e26;
    --color-violet-active: #550527;
    --color-violet-active-dark: #59344f;

    --color-white: #ffffff;

    --color-black-transparent: #00000026;

    /* ── Fluid Type Base — einzige Quelle der Wahrheit ────────
       16 px @ ≤ 320 px (mobile min)
       24 px @ 768 px   (tablet, exakt: 12.8 + 1.46 × 7.68 = 24.0)
       32 px @ ≥ 2560 px (ultra-wide max)
    ─────────────────────────────────────────────────────────── */
    --font-size-base: clamp(16px, 12.8px + 1.46vw, 32px);

    /* Colors */
    --pr-color-brand-primary: #fe3000;
    --pr-color-white: #ffffff;
    --pr-color-black: #1a1a1a;
    --pr-color-gray-100: #f4f4f4;
    --pr-color-gray-800: #333333;

    /*
    10% shades of --pr-color-gray-800
*/

    --pr-color-gray-800-shade-100: #2e2e2e;
    --pr-color-gray-800-shade-200: #292929;
    --pr-color-gray-800-shade-300: #242424;
    --pr-color-gray-800-shade-400: #1f1f1f;
    --pr-color-gray-800-shade-500: #1a1a1a;
    --pr-color-gray-800-shade-600: #141414;
    --pr-color-gray-800-shade-700: #0f0f0f;
    --pr-color-gray-800-shade-800: #0a0a0a;
    --pr-color-gray-800-shade-900: #050505;

    /*
    10% tints of --pr-color-gray-800
*/
    --pr-color-gray-800-tint-100: #474747;
    --pr-color-gray-800-tint-200: #5c5c5c;
    --pr-color-gray-800-tint-300: #707070;
    --pr-color-gray-800-tint-400: #858585;
    --pr-color-gray-800-tint-500: #999999;
    --pr-color-gray-800-tint-600: #adadad;
    --pr-color-gray-800-tint-700: #c2c2c2;
    --pr-color-gray-800-tint-800: #d6d6d6;
    --pr-color-gray-800-tint-900: #ebebeb;

    --footer-bg-color: var(--pr-color-gray-800-shade-700);
    --footer-title-color: var(--pr-color-gray-800-tint-700);
    --footer-title-border-color: var(--pr-color-gray-800-tint-200);
    --footer-link-color-muted: var(--pr-color-gray-800-tint-400);
    --footer-link-color-hovered: var(--pr-color-gray-800-tint-900);
    --footer-link-bg-color-hovered: var(--pr-color-gray-800-tint-100);
    --footer-link-border-color: var(--pr-color-gray-800-tint-100);

    /* ── Type Scale — Major Third (×1.25) ─────────────────────
       Alle Größen leiten sich von --font-size-base ab.
       calc() mit unitlosem --scale-factor ist valides CSS:
         length ÷ number = length  ✓
         length × number = length  ✓

       @ 768 px (Tablet):
         hero  = 24 × 1.25²  = 37.5 px
         l     = 24 × 1.25   = 30.0 px
         m     = 24           = 24.0 px
         s     = 24 ÷ 1.25   = 19.2 px
    ─────────────────────────────────────────────────────────── */
    --scale-factor: 1.68;

    --pr-font-size-s: calc(var(--font-size-base) / var(--scale-factor));
    --pr-font-size-m: var(--font-size-base);
    --pr-font-size-l: calc(var(--font-size-base) * var(--scale-factor));
    --pr-font-size-hero: calc(
        var(--font-size-base) * var(--scale-factor) * var(--scale-factor)
    );

    /* Border Radius */
    --pr-radius-base: 0.25vw;

    /* Spacing Scale (rem = --font-size-base, da html { font-size: var(--font-size-base) }) */
    --pr-spacing-1: 0.25rem;
    --pr-spacing-2: 0.5rem;
    --pr-spacing-3: 1rem;
    --pr-spacing-4: 2rem;
    --pr-spacing-5: 4rem;

    /* Brand Semantics */
    --color-brand-primary: var(--pr-color-brand-primary);
    --color-brand-accent: var(--pr-color-black);

    /* ── Kategorie-Farben ──────────────────────────────────────
       Palette abgeleitet von --color-brand-primary (#fe3000)
       Warm-analog: David → Themen → Bundestag
       Komplementär-kühl: Wahlkreis → Service
    ────────────────────────────────────────────────────────── */

    /* David (Lebenslauf, Transparenz) — Tiefrot */
    --color-cat-david: #c1121f;
    --color-cat-david-fg: #ffffff;

    /* Themen (Medien, Kultur, Frieden) — Amber-Orange */
    --color-cat-themen: #f4831f;
    --color-cat-themen-fg: #1a1a1a;

    /* Bundestag (Funktionen, Reden, Besuchergruppen) — Goldgelb */
    --color-cat-bundestag: #e9c46a;
    --color-cat-bundestag-fg: #1a1a1a;

    /* Wahlkreis — Waldgrün */
    --color-cat-wahlkreis: #2a7d5f;
    --color-cat-wahlkreis-fg: #ffffff;

    /* Service (Pressefotos, Presseerklärungen, Team) — Marineblau */
    --color-cat-service: #1b4f8a;
    --color-cat-service-fg: #ffffff;

    /* Functional UI Colors */
    --color-text-main: var(--pr-color-gray-800);
    --color-text-inverse: var(--pr-color-white);
    --color-bg-surface: var(--pr-color-white);
    --color-bg-muted: var(--pr-color-gray-100);

    /* Layout Semantics (Spacings) */
    --space-container-padding: var(--pr-spacing-4);
    --space-element-gap: var(--pr-spacing-2);
    --space-stack-small: var(--pr-spacing-1);
    --space-stack-medium: var(--pr-spacing-3);
    --space-section-margin: var(--pr-spacing-5);
    --space-p-width: calc(var(--pr-font-size-m) * 40);

    /* ── Typography Semantics ──────────────────────────────────
       Primitive → Semantisch (4 Stufen)
    ─────────────────────────────────────────────────────────── */
    --font-size-caption: var(--pr-font-size-s); /* klein   */
    --font-size-body: var(--pr-font-size-m); /* normal  */
    --font-size-heading: var(--pr-font-size-l); /* groß    */
    --font-size-hero: var(--pr-font-size-hero); /* hero    */

    /* Shape Semantics */
    --radius-button: var(--pr-radius-base);
    --radius-card: calc(var(--pr-radius-base) * 2);
    --border-radius: 0;

    /* Breakpoint Primitives */
    --bp-mobile-max: 767px;
    --bp-tablet-min: 768px;
    --bp-desktop-min: 1440px;
    --bp-ultra-min: 1920px;

    /* Typography Semantics (Erweiterung) */
    --letter-spacing-heading: 0.04em; /* Entspricht 4% */
}

/* 1. Global Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-box-trim: trim-both;
}

/* 2. Document Setup */
html {
    /* Setzt die Fluid-Basis — 1rem = --font-size-base überall im Dokument */
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* 3. Body Defaults */
body {
    font-family: var(--font-family-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Integration deiner Tokens */
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    font-size: var(--font-size-body);
}

/* 4. Media Elements */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 5. Form Elements Reset */
input,
button,
textarea,
select {
    font: inherit;
}

/* 6. Remove List Styles */
ul,
ol {
    list-style: none;
}

h3.feature-area__title,
h2.news__title,
h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-heading);
    font-size: var(--pr-font-size-l);
    margin-bottom: calc(var(--space-stack-medium) * var(--scale-factor));
    letter-spacing: -4%;
    line-height: 1 !important;
}

h2,
h3 {
    letter-spacing: -4%;
    line-height: 0.75;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-size: calc(var(--font-size-heading) * 0.75);
    margin-bottom: calc(var(--space-stack-medium) * var(--scale-factor));
}

p {
    letter-spacing: 0.015em;
}

.header {
    width: 100%;
    background-color: var(--color-bg-surface);
    border-bottom: 1px solid var(--pr-color-gray-100);
    position: sticky;
    top: 0;
    z-index: 100;
    /* padding-top: var(--space-stack-medium); */
    padding-bottom: 0;
    margin-bottom: var(--space-container-padding);
    box-shadow:
        rgb(14 30 37 / calc(0.12 * var(--header-shadow, 0))) 0px 2px 4px 0px,
        rgb(14 30 37 / calc(0.32 * var(--header-shadow, 0))) 0px 2px 16px 0px;
}

@media (min-width: 1440px) {
    .header {
        margin-bottom: var(--space-section-margin);
    }
}

.header__container {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding: var(--space-element-gap) var(--space-container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-bar-logo-image,
.header__logo-img {
    height: 2rem; /* Skaliert über das Root-Font-Size-Token */
    width: auto;
    display: block;
}

/* Navigation Desktop Default */
.header__menu {
    display: flex;
    gap: var(--space-stack-medium);
    align-items: center;
}

.header__menu-link {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 900;
    transition: color 0.2s ease;
}

.header__menu-link:hover {
    color: var(--item-accent-color, var(--color-brand-primary));
}

/* ── Hamburger-Button ────────────────────────────────────────── */
.header__menu-toggle {
    display: none; /* Desktop: unsichtbar */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    /* Kein farbiger Hintergrund – lebt vom Kontext */
}

.hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text-main);
    border-radius: var(--border-radius);
    transform-origin: center;
    /* Alle drei Balken transitionieren gemeinsam */
    transition:
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.2s ease,
        scale 0.2s ease;
}

/* ── X-Zustand (Klasse .is-open auf dem Button) ── */
.header__menu-toggle.is-open .hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header__menu-toggle.is-open .hamburger__bar:nth-child(2) {
    opacity: 0;
    scale: 0 1; /* horizontal wegblenden */
}
.header__menu-toggle.is-open .hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* -----------------------------------------------------------
   Hero Section
----------------------------------------------------------- */

.hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-element-gap) var(--space-container-padding);
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
}

/* Name-Banner */
.hero__image-wrapper {
    width: 100%;
    overflow: hidden; /* Verhindert horizontalen Scrollbar beim JS-Messen */
    margin-bottom: calc(var(--space-container-padding) * 0.15);
}

.hero__name {
    display: block;
    white-space: nowrap;
    line-height: 1;
    font-family: var(--font-family-heading, system-ui);
    font-weight: 700;
    color: currentColor;
    visibility: hidden; /* sichtbar erst nach JS-Berechnung */
    padding: 0.5rem 0;
}

/* Inhalt unter dem Bild */
.hero__content {
    text-align: center;
    /* Nutzen unsere Spacing-Tokens für vertikalen Abstand */
    /* padding-top: var(--space-section-margin); */
    padding-bottom: var(--space-stack-medium);
    /* Horizontaler Abstand, damit Text auf Mobile nicht am Rand klebt */
    padding-left: var(--space-container-padding);
    padding-right: var(--space-container-padding);
}

.hero__title {
    color: var(--color-text-main);
    /* Nutzen Heading-Size-Token (evtl. für Hero noch ein größeres XL-Token nötig?) */
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.2;

    /* Anwendung des neuen Letter-Spacing Tokens */
    letter-spacing: var(--letter-spacing-heading);
    text-transform: uppercase; /* Oft genutzt bei weitem Letter-Spacing */
}

@media (min-width: 1440px) {
    .hero__title {
        font-size: var(--font-size-heading);
    }
}

/*
/* Container analog zum Header */
.news__container {
    padding: var(--space-element-gap) var(--space-container-padding);
    padding-bottom: calc(var(--space-container-padding) * 1);
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
}

*/ .news__item-excerpt {
    padding-top: var(--space-element-gap);
}

.frontpage-contact-form-wrapper {
    padding: 0;
}

@media (min-width: 1440px) {
    .news__secondary,
    .news__featured {
        padding: 0 var(--space-container-padding);
    }

    .news__container {
        padding: var(--space-element-gap) var(--space-container-padding);
        padding-top: 0;
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
    }

    .news-secondary,
    .news__featured {
        padding: 0 var(--space-container-padding);
    }
}

@media (min-width: 1440px) {
    .news__item-excerpt {
        padding-top: 0;
    }

    .news__container {
        padding: var(--space-element-gap) var(--space-container-padding);
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
        padding-bottom: calc(var(--space-container-padding) * 1);
    }
}

/*
.news__container {
    padding: var(--space-element-gap) var(--space-container-padding);
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
}

@media screen(min-width: 1440px) {
    .news__container {
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
        border: 3px solid blue !important;
    }
}

*/

.real_news__container {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding: var(--space-section-margin) 0;
    margin-bottom: var(--space-stack-medium);
    padding-left: var(--pr-spacing-5);
    padding-right: var(--pr-spacing-5);
    background: var(--color-red--400);
}

.news__excerpt a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-brand-primary) 35%,
        transparent
    );
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition:
        text-decoration-color 0.15s ease,
        text-decoration-thickness 0.15s ease;
}

.news__content a:hover {
    text-decoration-color: var(--color-brand-primary);
    text-decoration-thickness: 2px;
}

/* Volle Breite, leicht abgesetzter Hintergrund */
.news-secondary {
    background-color: var(--color-black-transparent);
    padding-top: var(--space-container-padding);
}
.news__item:not(:last-of-type) {
    margin-bottom: var(--space-container-padding);
}

@media (min-width: 1440px) {
    .news__item {
        background: var(--color-bg-muted);
        padding: var(--space-stack-medium);
        border-radius: var(--border-radius);
    }

    .news-secondary {
        background-color: var(--color-black-transparent);
        padding-top: calc(var(--space-container-padding) * 2);
        padding-bottom: calc(var(--space-container-padding) * 1);
        margin-bottom: var(--space-container-padding);
    }
}

/* Gemeinsame Category-Styles */
.news__category {
    display: inline-block;
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    padding: 0.2rem 0.6rem;
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-stack-small);
}

/* Links als Block-Elemente ohne Standard-Styling */

.news__featured {
    padding-bottom: 0;
}

.news__featured,
.news__item {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Featured Beitrag */
.news__image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-element-gap) var(--space-container-padding);
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    margin-bottom: var(--space-container-padding);
}

.news__featured .news__category {
    position: absolute;
    top: var(--space-stack-small);
    left: var(--space-stack-small);
}

.news__title {
    margin-bottom: var(--space-stack-small);
}
.features {
    padding-top: calc(var(--space-container-padding) * 2);
    /* padding-bottom: calc(var(--space-container-padding) * 2); */
}

.features__container {
    gap: var(--space-section-margin);
    /* max-width: var(--bp-ultra-min); */
    margin: 0 auto;
    /* padding: var(--space-section-margin) 0; */
    display: flex;
    flex-direction: column;

    margin-bottom: var(--space-section-margin);
}

.feature-area {
    display: flex;
    flex-direction: column; /* Mobile Default: Untereinander */
    gap: var(--space-stack-medium);
}

.frontpage-eyebrow {
    display: block;
    font-size: var(--pr-font-size-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-primary);
    margin-bottom: var(--space-stack-medium);
    margin-bottom: calc(var(--space-stack-small) * var(--scale-factor));
    text-decoration: none;
}

.monochrome {
    color: var(--color-black);
}

/* Die farbige Box */
.feature-area__box {
    position: relative;
    width: 100%;
    aspect-ratio: 2.39 / 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-stack-small);
}

@media (min-width: 1440px) {
    .feature-area__box {
        aspect-ratio: 16 / 9;
    }
}

.feature-area__img-wrap {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply; /* Farbe bleibt sichtbar, Bild scheint durch */
    opacity: 0.55;
}

.feature-area__cat-label {
    position: relative; /* über dem Bild */
    display: inline-block;
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading);
    text-transform: uppercase;
    /* --box-fg wird per inline-style aus PHP gesetzt (var(--color-cat-{slug}-fg))
       und schaltet automatisch mit dem aktiven Farbschema mit.
       Fallback: weiß, damit das Label auch ohne PHP-Kontext lesbar bleibt. */
    color: var(--box-fg, var(--color-text-inverse));
    background-color: rgba(0, 0, 0, 0.25);
    padding: 0.2em 0.6em;
    border-radius: var(--border-radius);
    align-self: flex-start;
}

.feature-area__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-stack-small);
    padding: var(--space-element-gap) var(--space-container-padding);
    padding-top: var(--space-container-padding);
}

@media (min-width: 1440px) {
    .feature-area__content {
        padding: var(--space-element-gap) var(--space-container-padding);
    }
}

.feature-area__body {
    width: 100%;
    text-align: center;
}

/* ── Links in feature-area__body ────────────────────────────────
   Strategie: Farbe + Underline als doppeltes visuelles Merkmal
   (WCAG 1.4.1), da #fe3000 auf Weiß nur ~3,6:1 erreicht.
   Im Ruhezustand gedämpft, im Hover/Focus klar erkennbar.
   ──────────────────────────────────────────────────────────── */
.feature-area__body a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-brand-primary) 35%,
        transparent
    );
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition:
        text-decoration-color 0.15s ease,
        text-decoration-thickness 0.15s ease;
}

.feature-area__body a:hover {
    text-decoration-color: var(--color-brand-primary);
    text-decoration-thickness: 2px;
}

/* Sichtbarer Fokusrahmen für Tastaturnavigation (WCAG 2.4.7) */
.feature-area__body a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 3px;
    border-radius: var(--border-radius);
    text-decoration: none; /* Outline reicht als alleiniger Indikator im Fokus */
}

.feature-area__title {
    width: 100%;
    max-width: var(--space-p-width); /* Anforderung */
    margin: 0 auto;
    text-align: left;
    margin-bottom: var(--space-element-gap);
}

.feature-area__excerpt {
    color: var(--color-text-main);
    line-height: 1.6;
    width: 100%;
    max-width: var(--space-p-width);
    margin: 0 auto;
}

.feature-area__body h3,
.feature-area__body p,
.archive__description p {
    width: 100%;
    max-width: calc(var(--pr-font-size-m) * 40) !important;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
    flex-flow: row;
}

.archive__description {
    margin-bottom: calc(var(--space-container-padding) * 2);
}

.feature-area__body p,
.archive__description p,
.feature-area__body p {
    margin-bottom: calc(var(--space-container-padding) * 1);
}

.feature-area__body img {
    margin: var(--space-section-margin) auto;
}

/* ── Kontaktbereich ──────────────────────────────────────────── */
.frontpage-contact-wrapper {
    background-color: var(--color-black-transparent);
    padding-top: var(--space-section-margin);
    padding-bottom: var(--space-section-margin);
}

/* Zentrierender Container + 2-Spalten-Grid */
.frontpage-contact-form-wrapper {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding-left: var(--space-container-padding);
    padding-right: var(--space-container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-section-margin);
    align-items: start;
}

@media (min-width: 1024px) {
    .frontpage-contact-form-wrapper {
        grid-template-columns: 1fr 1.5fr;
    }
}

@media (min-width: 1440px) {
    .frontpage-contact-form-wrapper {
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
    }
}

/* ── Linke Inhaltsspalte ── */
.frontpage-contact-eyebrow {
    display: block;
    font-size: var(--pr-font-size-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-primary);
    margin-bottom: var(--space-stack-medium);
}

.frontpage-contact-title {
    font-size: var(--pr-font-size-l);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-main);
    margin-top: 0;
    margin-bottom: var(--space-stack-medium);
}

.frontpage-contact-text {
    color: var(--color-text-main);
    line-height: 1.7;
    margin-bottom: var(--space-section-margin);
}

.frontpage-contact-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-stack-medium);
}

/* ── Button-System ───────────────────────────────────────────── */

.forminator-button,
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: var(--border-radius) !important;
    font-size: var(--pr-font-size-s);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        outline-color 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
}

.forminator-button-submit {
    border-radius: var(--border-radius) !important;
}

.btn--primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: color-mix(
        in srgb,
        var(--color-brand-primary) 80%,
        #0f0f0f 20%
    );
    outline-color: var(--color-brand-primary);
}

.forminator-button-submit,
.btn--outline {
    background-color: transparent;
    color: var(--color-text-main);
    outline: 2px solid currentColor;
}

.forminator-button-submit:hover,
.btn--outline:hover,
.btn--outline:focus-visible {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    outline-color: var(--color-brand-primary);
}

.forminator-button-submit {
    float: right;
}

#footer-area {
    width: 100%;
    padding-top: 5vh;
}

.footer {
    width: 100%;
    background-color: var(--footer-bg-color); /* Dunkler Hintergrund */
    color: var(--color-text-inverse);
    padding: var(--space-section-margin) 0;
    margin-top: var(--space-section-margin);
}

.footer__container {
    /* max-width: var(--bp-ultra-min); */
    margin: 0 auto;
    padding: 0 var(--space-container-padding);

    /* Responsive Grid Logic */
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Spalte */
    gap: var(--space-stack-medium);
}

.footer__column ul {
    padding: var(--space-element-gap);
}

/* Tablet: 3 Spalten */
@media (min-width: 768px) {
    .footer__container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: 7 Spalten */
@media (min-width: 1440px) {
    .footer__container {
        grid-template-columns: repeat(7, 1fr);
        gap: var(--space-element-gap);
    }

    .footer__column {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

    .footer__column ul {
        width: 100%;
    }
}

.footer__title {
    font-weight: 700;
    font-size: var(--font-size-caption);
    padding-bottom: var(--space-stack-small);
    border-bottom: 1px solid var(--footer-title-border-color);
    color: var(--footer-title-color);
    margin-bottom: var(--space-element-gap);
    letter-spacing: var(--letter-spacing-heading);
    list-style: none;
}

/* Standalone-Spalte (z. B. „Start") */
.footer__column--standalone {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: var(--space-element-gap);
}

.footer__standalone-link {
    font-weight: 700;
    font-size: var(--font-size-caption);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--footer-title-color);
    text-decoration: none;
    padding-bottom: var(--space-stack-small);
    border-bottom: 1px solid var(--footer-title-border-color);
    display: block;
    width: 100%;
}

.footer__standalone-link:hover {
    color: var(--footer-link-color-hovered);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-small);
}

header .menu-item a {
    font-size: var(--font-size-caption);
    text-decoration: none;
    color: currentColor;
    display: flex;
    align-items: center;
    border-top: calc(var(--pr-font-size-s) / var(--scale-factor)) solid
        transparent;
    border-bottom: calc(var(--pr-font-size-s) / var(--scale-factor)) solid
        transparent;
    text-transform: uppercase;
    display: block;
    padding-top: var(--space-stack-small);
    padding-bottom: var(--space-stack-small);
}

header .menu-item a:hover {
    border-bottom: calc(var(--pr-font-size-s) / var(--scale-factor)) solid
        var(--item-accent-color, var(--color-brand-primary)) !important;
}

.footer__list a {
    text-decoration: none;
    color: var(--footer-link-color-muted);
    font-size: var(--font-size-caption);
    transition: color 0.2s ease;
    text-transform: none;

    display: block;
    padding-top: var(--space-stack-small);
    padding-bottom: var(--space-stack-small);
    border-bottom: 1px dotted var(--footer-link-border-color);
}

.footer__list a:hover {
    color: var(--footer-link-color-hovered);
}

/* --- Large Screens (1440px+) --- */
@media (min-width: 1440px) {
    .feature-area {
        display: grid;
        /* Spaltenaufteilung 3fr zu 7fr */
        grid-template-columns: 3fr 7fr;
        align-items: stretch;
        gap: var(--space-container-padding);
    }

    .feature-area__box {
        aspect-ratio: unset;
        height: 100%;
        min-height: 280px;
    }

    /* Logik für "Even" (Jedes 2. Element spiegelt sich) */
    .feature-area:nth-of-type(even) {
        grid-template-columns: 7fr 3fr;
    }

    .feature-area:nth-of-type(even) .feature-area__box {
        grid-column: 2; /* Box nach rechts */
    }

    .feature-area:nth-of-type(even) .feature-area__content {
        grid-column: 1;
        grid-row: 1;
        /* text-align: right; /* Optional: Text rechtsbündig für Symmetrie */
        align-items: flex-end;
    }

    .features__container {
        gap: 0;
    }

    .feature-area__content {
        padding-top: var(--space-section-margin);
        padding-bottom: var(--space-section-margin);
    }
}

/* --- RESPONSIVE LOGIC --- */

/* Mobile: Alles untereinander (Default durch display: block) */
.news__secondary {
    display: grid;
    gap: var(--space-stack-medium);
}

/* Ab Tablet (min-width: 768px): 3 Beiträge nebeneinander — bleibt auf allen größeren Screens */

/* Responsive Anpassung für größere Screens */
@media (min-width: 768px) {
    .hero__title {
        /* Optional: Ein Primitive für eine sehr große Hero-Schrift einführen */
        font-size: var(--font-size-heading);
    }
}

@media (max-width: 767px) {
    .header__menu-toggle {
        display: flex; /* sichtbar auf Mobile */
    }

    /* Desktop-Nav auf Mobile verstecken */
    .header__nav {
        display: none;
    }
}

/* Breakpoint Handling für größere Screens */
@media (min-width: 1440px) {
    .hero,
    .header__container {
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
    }

    .news {
        padding: 0 var(--space-container-padding);

        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--space-element-gap) var(--space-container-padding);
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
    }
}

/* ── News Image Wrapper: Bild als Hintergrund, responsive Ratio  */
.news__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news__image-wrapper .news__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
@media (min-width: 1440px) {
    .news__image-wrapper {
        padding: var(--space-element-gap) var(--pr-spacing-2);
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
        padding-bottom: calc(var(--space-container-padding) * 1);
    }
}
*/

/* Ab Tablet: 2.39:1 Seitenverhältnis (Items in 3-Spalten-Grid, keine Sidebar mehr) */
@media (min-width: 768px) {
    .news__image-wrapper {
        aspect-ratio: 2.39 / 1;
    }
}

/* ── News Secondary: gleichmäßige Zeilenhöhen via Subgrid ───── */
/* Ab Tablet (768px): 3 Items nebeneinander auf allen größeren Screens */
@media (min-width: 768px) {
    .news__secondary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .news__item {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        gap: var(--space-element-gap);
    }

    @supports not (grid-template-rows: subgrid) {
        .news__item {
            display: flex;
            flex-direction: column;
        }
        .news__item-title {
            flex: 1;
        }
    }
}

/* ── Sticky Footer ───────────────────────────────────────────── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main,
.main {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    margin-top: auto;
}

.forminator-input,
.forminator-textarea {
    font-size: var(--pr-font-size-m) !important;
}

.forminator-textarea {
    resize: vertical !important;
}

.forminator-row {
    margin-bottom: var(--space-element-gap);
}

/* ══════════════════════════════════════════════════════════════
   Single Post  (single.php)
   ══════════════════════════════════════════════════════════════

   Container-Rhythmus wie auf der Frontpage:
     – max-width: 1920px (--bp-ultra-min), zentriert
     – Padding: 2rem (--space-container-padding) default
     – Padding: 4rem (--pr-spacing-5) ab 1440px
   Lesezone für Header / Body / Footer:
     – max-width: --space-p-width = font-size-base × 40
     – margin: 0 auto  →  zentriert in der Spalte
   ══════════════════════════════════════════════════════════════ */

/* ── Archiv: jeder Beitrag ist als Karte klickbar ──────────── */
article.single-post {
    position: relative; /* Anker für den Stretched Link */
}

/* Permalink-Link sitzt im Titel, ::after streckt ihn auf die ganze Karte */
.archive__post-link {
    color: inherit;
    text-decoration: none;
}
.archive__post-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* Innere Links (Kategorie, Tags) bleiben klickbar */
.frontpage-eyebrow,
.single-post__tag {
    position: relative;
    z-index: 2;
}

/* ── Äußerer Container ─────────────────────────────────────── */
.archive__description,
.single-post__container {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding: var(--space-section-margin) var(--space-container-padding);
    padding-top: var(--space-container-padding);
}

@media (min-width: 1440px) {
    .archive__description,
    .single-post__container {
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
        max-width: var(--bp-ultra-min);
        margin: 0 auto;
        padding-top: 0;
        padding-bottom: var(--space-section-margin);
        padding-left: var(--space-container-padding);
        padding-right: var(--space-container-padding);
    }
}

/* ── Lesezone: Header / Body / Footer zentriert ────────────── */
.single-post__header,
.single-post__body,
.single-post__footer {
    max-width: var(--space-p-width);
    margin-left: auto;
    margin-right: auto;
}

/* ── Post-Header ───────────────────────────────────────────── */
.single-post__meta-top {
    display: flex;
    align-items: center;
    gap: var(--space-stack-medium);
    flex-wrap: wrap;
    margin-bottom: var(--space-stack-medium);
    /* border-top: var(--space-element-gap) solid var(--color-brand-primary);
    padding-top: calc(1rem * var(--scale-factor)); */
}

.single-post__footer.cat-page-border {
    border-bottom: var(--font-size-body) solid var(--color-black-transparent);
    padding-top: 0;
}

.single-post__cat-badge {
    display: inline-block;
    font-size: var(--font-size-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    padding: 0.2em 0.7em;
    border-radius: var(--border-radius);
    text-decoration: none;
    /* Farbe wird per inline-style aus PHP gesetzt */
}

.single-post__date {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

time {
    display: flex;
    align-items: center;
}

.single-post__title {
    font-size: var(--pr-font-size-l);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: calc(var(--space-stack-medium) * var(--scale-factor));
}

@media (min-width: 1140px) {
    .single-post__title {
        font-size: var(--pr-font-size-hero);
    }
}

.single-post__byline {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    gap: var(--space-stack-medium);
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    padding-bottom: var(--space-container-padding);
    /* border-bottom: var(--space-element-gap) solid var(--color-brand-primary);
    padding-bottom: calc(1rem * var(--scale-factor)); */
}

.single-post__reading-time,
.byline-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.byline-content svg {
    height: var(--font-size-caption);
    width: auto;
    margin-top: -4px;
}

.byline-bottom-halfborder {
    margin-top: var(--space-stack-medium);
    width: 50%;
    height: var(--font-size-body);
}

/* ── Featured Image ────────────────────────────────────────── */
/* Bricht absichtlich aus der Lesezone heraus → volle Container-Breite */
.single-post__thumbnail {
    margin: calc(var(--space-container-padding) * 2) 0;
}

.single-post__thumbnail-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

.single-post__thumbnail-caption {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    text-align: center;
    margin-top: var(--space-stack-small);
}

/* ── Prose: Artikeltext ────────────────────────────────────── */
.single-post__body {
    padding-top: calc(1rem * var(--scale-factor));
    line-height: var(--scale-factor);
    -webkit-hyphens: auto; /* Safari/Chrome */
    -ms-hyphens: auto; /* IE/Edge */
    hyphens: auto; /* Standard */
    text-align: justify;
    widows: 3;
    orphans: 3;
    width: 100%;
}

.single-post__body.second_amendment {
    padding-top: 0;
}

/* Vertikaler Rhythmus zwischen Block-Elementen */
.single-post__body > * + * {
    margin-top: var(--space-stack-medium);
}

.page__body p,
.single-post__body p {
    margin-bottom: calc(var(--space-container-padding) * var(--scale-factor));
    max-width: 66ch;
}

/* Überschriften */
.single-post__body h2 {
    font-size: var(--pr-font-size-l);
    font-weight: 700;
    line-height: 1.25;
    margin-top: var(--space-section-margin);
    margin-bottom: var(--space-stack-small);
}

.single-post__body h3 {
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--space-stack-medium);
    margin-bottom: var(--space-stack-small);
}

.single-post__body h4,
.single-post__body h5,
.single-post__body h6 {
    font-weight: 700;
    margin-top: var(--space-stack-medium);
}

/* Listen — Reset rückgängig machen für redaktionellen Content */
.single-post__body ul,
.single-post__body ol {
    list-style: revert;
    padding-left: 1.5em;
}

.single-post__body li + li {
    margin-top: var(--space-stack-small);
}

/* Blockquote */
.single-post__body blockquote {
    border-left: 3px solid var(--color-brand-primary);
    margin-left: 0;
    padding-left: var(--space-stack-medium);
    color: var(--pr-color-gray-800-tint-300);
    font-style: italic;
}

/* Bilder im Text */
.single-post__body figure {
    margin: var(--space-section-margin) 0;
}

.single-post__body figcaption {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    text-align: center;
    margin-top: var(--space-stack-small);
}

/* Links — gleiche Strategie wie feature-area__body */
.single-post__body a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-brand-primary) 35%,
        transparent
    );
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition:
        text-decoration-color 0.15s ease,
        text-decoration-thickness 0.15s ease;
}

.single-post__body a:hover {
    text-decoration-color: var(--color-brand-primary);
    text-decoration-thickness: 2px;
}

.single-post__body a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 3px;
    border-radius: var(--border-radius);
    text-decoration: none;
}

/* Inline-Code / Preformatted */
.single-post__body code {
    font-family:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
    font-size: 0.875em;
    background-color: var(--color-bg-muted);
    padding: 0.15em 0.4em;
    border-radius: var(--border-radius);
}

.single-post__body pre {
    background-color: var(--color-bg-muted);
    padding: var(--space-stack-medium);
    border-radius: var(--border-radius);
    overflow-x: auto;
}

.single-post__body pre code {
    background: none;
    padding: 0;
}

/* ── Post-Footer ───────────────────────────────────────────── */
.single-post__footer {
    padding-top: var(--space-section-margin);
    border-top: 1px solid var(--pr-color-gray-100);
    margin-top: var(--space-section-margin);
}

/* Tags */
.single-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-stack-small);
    margin-bottom: var(--space-section-margin);
}

.single-post__tag {
    font-size: var(--font-size-caption);
    padding: 0.25em 0.65em;
    border: 1px solid var(--pr-color-gray-100);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text-main);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.single-post__tag:hover {
    background-color: var(--color-bg-muted);
    border-color: var(--pr-color-gray-800-tint-300);
}

/* Prev / Next Navigation */
.single-post__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-stack-medium);
}

.single-post__nav-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-small);
    text-decoration: none;
    color: var(--color-text-main);
    padding: var(--space-stack-medium);
    border-radius: var(--border-radius);
    border: 1px solid var(--pr-color-gray-100);
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
    background-color: var(--color-black-transparent);
}

.single-post__nav-item--next {
    text-align: right;
}

.single-post__nav-item:hover {
    border-color: var(--color-brand-primary);
    background-color: var(--color-bg-muted);
}

.single-post__nav-label {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    margin-bottom: var(--space-stack-medium);
}

.single-post__nav-title {
    font-weight: 600;
    font-size: var(--font-size-body);
    transition: color 0.15s ease;
}

/* ══════════════════════════════════════════════════════════════
   PAGE TEMPLATE (page.php)
   Statische Seiten ohne Post-Meta.
   Container-Logik identisch mit single-post.
   page__body bleibt breit → Shortcodes (Timeline, Sitemap)
   nutzen volle Container-Breite; Prosa-Elemente werden
   über prose-Selektoren auf Lesezone eingeschränkt.
   ══════════════════════════════════════════════════════════════ */

/* ── Äußerer Container ─────────────────────────────────────── */
.page__container {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: var(--space-section-margin);
    padding-left: var(--space-container-padding);
    padding-right: var(--space-container-padding);
}

@media (min-width: 1440px) {
    .page__container {
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
    }
}

/* ── Seiten-Header ─────────────────────────────────────────── */
.page__header {
    max-width: var(--space-p-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(2rem * var(--scale-factor));
    border-top: var(--font-size-body) solid var(--color-brand-primary);
    padding-top: calc(2rem * var(--scale-factor));
    margin-top: var(--space-container-padding);
}

.page__title {
    font-size: var(--pr-font-size-hero);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0;
}

.page__subtitle {
    margin-top: var(--space-stack-medium);
    font-size: var(--pr-font-size-l);
    line-height: 1.5;
    color: var(--pr-color-gray-800-tint-300);
}

/* ── Featured Image ────────────────────────────────────────── */
.page__thumbnail {
    margin-bottom: var(--space-section-margin);
}

.page__thumbnail-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

.page__thumbnail-caption {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    text-align: center;
    margin-top: var(--space-stack-small);
}

/* ── Seiteninhalt ──────────────────────────────────────────── */
.page__body {
    line-height: 1.8;
    max-width: var(--space-p-width);
    margin-left: auto;
    margin-right: auto;
}

/* Prose-Elemente: Lesezone (gleiche Breite wie page__header) */
.page__body > p,
.page__body > h2,
.page__body > h3,
.page__body > h4,
.page__body > h5,
.page__body > h6,
.page__body > ul,
.page__body > ol,
.page__body > blockquote,
.page__body > figure,
.page__body > table {
    max-width: var(--space-p-width);
    margin-left: auto;
    margin-right: auto;
}

/* Vertikaler Rhythmus */
.page__body > * + * {
    margin-top: var(--space-stack-medium);
}

/* Überschriften */
.page__body h2 {
    font-size: var(--pr-font-size-l);
    font-weight: 700;
    line-height: 1.25;
    margin-top: var(--space-section-margin);
    margin-bottom: var(--space-stack-small);
}

.page__body h3 {
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--space-stack-medium);
    margin-bottom: var(--space-stack-small);
}

/* Listen */
.page__body ul,
.page__body ol {
    list-style: revert;
    padding-left: 1.5em;
}

.page__body li + li {
    margin-top: var(--space-stack-small);
}

/* Blockquote */
.page__body blockquote {
    border-left: 3px solid var(--color-brand-primary);
    margin-left: 0;
    padding-left: var(--space-stack-medium);
    color: var(--pr-color-gray-800-tint-300);
    font-style: italic;
}

/* Links — gleiche Strategie wie feature-area__body */
.page__body a {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-brand-primary) 35%,
        transparent
    );
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition:
        text-decoration-color 0.15s ease,
        text-decoration-thickness 0.15s ease;
}

.page__body a:hover {
    text-decoration-color: var(--color-brand-primary);
    text-decoration-thickness: 2px;
}

.page__body a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 3px;
    border-radius: var(--border-radius);
    text-decoration: none;
}

/* Code */
.page__body code {
    font-family:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
    font-size: 0.875em;
    background-color: var(--color-bg-muted);
    padding: 0.15em 0.4em;
    border-radius: var(--border-radius);
}

.page__body pre {
    background-color: var(--color-bg-muted);
    padding: var(--space-stack-medium);
    border-radius: var(--border-radius);
    overflow-x: auto;
}

.page__body pre code {
    background: none;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */

.pagination {
    margin: var(--space-section-margin) 0;
    padding: 0 var(--space-container-padding);
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

/* Alle Seitenzahlen: wie .btn--outline */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.8rem;
    border-radius: var(--border-radius);
    font-size: var(--pr-font-size-s);
    font-family: inherit;
    text-decoration: none;
    line-height: 1;
    outline: 2px solid currentColor;
    color: var(--color-text-main);
    background: transparent;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        outline-color 0.2s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    outline-color: var(--color-brand-primary);
}

/* Aktive Seite: wie .btn--primary */
.pagination .page-numbers.current {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    outline-color: var(--color-brand-primary);
    cursor: default;
}

/* Auslassungspunkte: kein Rahmen, kein Hover */
.pagination .page-numbers.dots {
    outline: none;
    min-width: auto;
    padding: 0 0.25rem;
    pointer-events: none;
}

/* Zurück / Weiter: etwas breiter */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
    padding: 0 1.1rem;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   PLUGIN: DS SEO — HTML-Sitemap [ds_sitemap]
   ══════════════════════════════════════════════════════════════ */

.ds-sitemap {
    line-height: 1.7;
}

/* Abschnitte */
.ds-sitemap__section {
    margin-bottom: var(--space-section-margin);
    padding-bottom: var(--space-section-margin);
    border-bottom: 1px solid var(--pr-color-gray-100);
}

.ds-sitemap__section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Überschriften */
.ds-sitemap__heading {
    font-size: var(--pr-font-size-l);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: var(--space-container-padding);
    padding-bottom: var(--space-stack-small);
    border-bottom: 2px solid var(--color-brand-primary);
    display: inline-block;
}

.ds-sitemap__subheading {
    font-size: var(--pr-font-size-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pr-color-gray-800-tint-400);
    margin: var(--space-container-padding) 0 var(--space-stack-small);
}

/* wp_list_pages generiert <ul> ohne Klasse direkt im .ds-sitemap__section */
.ds-sitemap__section > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Alle Listen im Sitemap */
.ds-sitemap__list,
.ds-sitemap__section > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0;
}

/* Listeneinträge */
.ds-sitemap__item,
.ds-sitemap__section > ul li {
    border-bottom: 1px solid var(--pr-color-gray-100);
}

.ds-sitemap__item a,
.ds-sitemap__section > ul li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-stack-medium);
    padding: 0.5em 0.25em;
    text-decoration: none;
    color: var(--color-text-main);
    transition:
        color 0.15s ease,
        padding-left 0.15s ease;
}

.ds-sitemap__item a:hover,
.ds-sitemap__section > ul li a:hover {
    color: var(--color-brand-primary);
    padding-left: 0.5em;
}

.ds-sitemap__item a:focus-visible,
.ds-sitemap__section > ul li a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

/* Zähler und Datum — rechts, gedämpft */
.ds-sitemap__count,
.ds-sitemap__date {
    font-size: var(--font-size-caption);
    color: var(--pr-color-gray-800-tint-400);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Search Highlight (wird auch von ds-seo gesetzt) ────────── */
mark.search-highlight {
    background: color-mix(in srgb, #ffcc00 60%, transparent);
    color: inherit;
    padding: 0 0.15em;
    border-radius: var(--border-radius);
}

/*
    Fade Container
*/

.fade-container > * {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.fade-container > .instant {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.fade-container > .visible {
    opacity: 1;
    opacity: 1;
    transform: translateY(0);
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/*
    Skeleton
*/

/* --- SKELETON LOADER STYLES --- */
.skeleton-wrapper {
    width: 100%;
    padding-bottom: 50px;
}

.skeleton-container {
    max-width: 1200px; /* Adjust to match your site's max-width */
    margin: 0 auto;
    padding: 0 20px;
}

/* The shimmering animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-wrapper > div,
.skeleton-container > div {
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear forwards;
    border-radius: 4px;
}

/* Skeleton Elements Sizing */
.skeleton-header {
    height: 60px;
    width: 100%;
    margin-bottom: 40px !important;
}
.skeleton-heading {
    height: 40px;
    width: 60%;
    margin-bottom: 30px;
}
.skeleton-image {
    height: 400px;
    width: 100%;
    margin-bottom: 30px;
}
.skeleton-paragraph {
    height: 20px;
    width: 100%;
    margin-bottom: 15px;
}
.skeleton-paragraph.short {
    width: 75%;
}

/* Utility class to remove skeleton from DOM flow once loaded */
.skeleton-wrapper.hidden {
    display: none;
}

/* --- MAIN CONTENT FADE-IN STYLES --- */
.fade-in-content {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.8s ease-in-out,
        visibility 0.8s ease-in-out;
}

.fade-in-content.loaded {
    opacity: 1;
    visibility: visible;
}

/* iFrame embedding */

.ds-video-embed {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ds-video-embed iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}