/*
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, 28px);

    /* 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-text-muted: var(--pr-color-gray-800-tint-400);
    --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    */

    /* Fließtext-Dynamik — einzige Quelle für Fließtext in Posts, Pages,
       Archiven, Frontpage-Blöcken und .news__item-excerpt.

       Steigt monoton bis 24px (erreicht bei 1000px Viewport) und bleibt
       dort. Bewusst ein fester Deckel statt --font-size-body: sonst liefe
       der Wert auf großen Screens bis 32px hoch, was für Fließtext zu
       groß ist. Ein Deckel per Media Query würde am Breakpoint springen. */
    --font-size-body-fluid: clamp(var(--font-size-caption), 2.4vw, 28px);

    /* ── Icons (als mask-image, damit sie currentColor erben) ──── */

    /* Pfeil aus Kasten heraus — Markierung für externe Links.
       stroke ist bewusst schwarz: mask-image wertet den Alpha-Kanal aus,
       currentColor würde im Data-URI-Dokument ohnehin nicht auflösen. */
    --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");

    /* Lupe — Such-Toggle im Header und Submit-Button im Suchformular */
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

    /* 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: -0.04em;
    line-height: 1 !important;
}

h2,
h3 {
    letter-spacing: -0.04em;
    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);
    font-size: var(--font-size-body-fluid);
}

.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);
}
/* Nur im gestapelten Mobile-Layout. Ab 768px sind die Items Subgrid-Elemente –
   dort würde ein Margin nur auf Item 1+2 die geerbten Zeilen-Tracks verschieben
   und die Karten unterschiedlich hoch enden lassen. */
@media (max-width: 767px) {
    .news__item:not(:last-of-type) {
        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(--pr-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);
}

/* Tablet: Box läuft über die volle Breite → deutlich flacheres Farbband.
   Höhe aus dem bestehenden Spacing-Token, skaliert fluid mit --font-size-base
   (4rem ≈ 96px @768px). Mobil bleibt es bei aspect-ratio 2.39/1, ab 1440px
   übernimmt die Grid-Spalte weiter unten. */
@media (min-width: 768px) and (max-width: 1439px) {
    .feature-area__box {
        aspect-ratio: auto;
        height: var(--space-section-margin);
    }
}

@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: flex;
    justify-content: center;
    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;
    line-height: 1;
    white-space: nowrap;
}

.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 6;
        grid-template-rows: subgrid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-element-gap);
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    /* Feste Zeilenzuordnung statt Auto-Placement: Bild und Eyebrow werden im
       Template nur bedingt ausgegeben. Ohne feste Zeilen rutscht bei einem Item
       ohne Bild/Kategorie alles Nachfolgende eine Zeile nach oben – dadurch
       enden die drei Karten (v.a. die CTA) auf unterschiedlichen Höhen. */
    .news__item .news__item-image {
        grid-row: 1;
    }
    .news__item .frontpage-eyebrow {
        grid-row: 2;
    }
    .news__item .news__item-title {
        grid-row: 3;
    }
    .news__item .news__item-date {
        grid-row: 4;
    }
    .news__item .news__item-excerpt {
        grid-row: 5;
    }
    .news__item .news__item-cta {
        grid-row: 6;
        align-self: end;
        padding-top: 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;
}

/* ── Fließtext-Fontsize: identische Dynamik wie .news__item-excerpt ──
   Gilt für Single Posts, Pages, Archive und die Textblöcke der
   Startseite. archive.php nutzt .single-post__body, ist damit mit
   abgedeckt. */
.single-post__body p,
.page__body p,
.archive__description p,
.feature-area__body p {
    font-size: var(--font-size-body-fluid);
}

/* Ü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;
}

/* ══════════════════════════════════════════════════════════════
   Screenreader-only Text
   ══════════════════════════════════════════════════════════════ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sichtbar, sobald ein Skip-Link o. Ä. den Fokus bekommt */
.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* ══════════════════════════════════════════════════════════════
   Externe Links im Fließtext
   ══════════════════════════════════════════════════════════════

   Die Klasse .is-external setzt ds_mark_external_links() serverseitig
   (nur dort ist die eigene Domain bekannt). Das CSS entscheidet, WO
   gezeichnet wird — dadurch greift die Markierung exakt nur in <p>,
   ohne dass der Content-Filter die HTML-Struktur parsen muss.

   Icon via mask-image + currentColor, damit es die Linkfarbe erbt und
   in em skaliert — also mit --font-size-body-fluid mitwächst.
   ══════════════════════════════════════════════════════════════ */

.single-post__body p a.is-external::after,
.page__body p a.is-external::after,
.archive__description p a.is-external::after,
.feature-area__body p a.is-external::after {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.25em;
    vertical-align: baseline;
    background-color: currentColor;
    -webkit-mask: var(--icon-external) no-repeat center / contain;
    mask: var(--icon-external) no-repeat center / contain;
}

/* Im Fokus bleibt das Icon sichtbar, auch wenn text-decoration entfällt */
.single-post__body p a.is-external:focus-visible::after,
.page__body p a.is-external:focus-visible::after,
.archive__description p a.is-external:focus-visible::after,
.feature-area__body p a.is-external:focus-visible::after {
    background-color: currentColor;
}

@media print {
    .single-post__body p a.is-external::after,
    .page__body p a.is-external::after,
    .archive__description p a.is-external::after,
    .feature-area__body p a.is-external::after {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SUCHE — Formular
   ══════════════════════════════════════════════════════════════ */

.ds-search-form {
    display: flex;
    align-items: stretch;
    gap: var(--space-stack-small);
    width: 100%;
}

.ds-search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-body-fluid);
    font-family: var(--font-family-body);
    color: var(--color-text-main);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--pr-color-gray-800-tint-600);
    border-radius: var(--border-radius);
    padding: var(--space-stack-small) var(--space-element-gap);
}

.ds-search-form__input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.ds-search-form__input:focus-visible {
    outline: none;
    outline-offset: 0px;
    border-color: var(--color-brand-primary);
}

.ds-search-form__submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--border-radius);
    background-color: var(--color-brand-primary);
    color: var(--pr-color-white);
    padding: var(--space-stack-small) var(--space-element-gap);
    transition: background-color 0.2s ease;
}

.ds-search-form__submit:hover {
    background-color: var(--color-text-main);
    border-color: var(--color-text-main);
}

.ds-search-form__submit:focus-visible {
    outline: 2px solid var(--color-text-main);
    outline-offset: 2px;
}

.ds-search-form__submit-icon {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon-search) no-repeat center / contain;
    mask: var(--icon-search) no-repeat center / contain;
}

/* ══════════════════════════════════════════════════════════════
   SUCHE — Toggle und Panel im Header
   ══════════════════════════════════════════════════════════════ */

/* Der Toggle sitzt als <li> in .header__menu und erbt dadurch dessen
   gap und align-items — kein eigener margin nötig. */
.header__search-item {
    display: flex;
    align-items: center;
}

.header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    /* 1em Icon + 2 × 0.25em Padding = 1.5em, also exakt die Höhe eines
       Menü-Items (font-size × line-height 1.5). Dadurch wächst der Header
       durch den Button nicht. */
    padding: 0.25em;
    line-height: 1;
    color: var(--color-text-main);
    transition: color 0.2s ease;
}

.header__search-toggle:hover {
    color: var(--color-brand-primary);
}

.header__search-toggle:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* 1em — button erbt via `font: inherit` (Reset) die Schriftgröße von
   .header__menu, das Icon ist damit so groß wie der Text der Menüpunkte. */
.header__search-icon {
    display: block;
    width: var(--font-size-caption);
    height: var(--font-size-caption);
    background-color: currentColor;
    -webkit-mask: var(--icon-search) no-repeat center / contain;
    mask: var(--icon-search) no-repeat center / contain;
}

.header__search-toggle {
    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;
    padding-top: var(--space-stack-small);
    padding-bottom: var(--space-stack-small);
}

/* [hidden] muss display:flex des Panels schlagen */
.header__search-panel[hidden] {
    display: none;
}

.header__search-panel {
    border-top: 1px solid var(--pr-color-gray-100);
    background-color: var(--color-bg-surface);
}

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

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

/* Mobil steht die Suche im Footer — dort, wohin der Hamburger scrollt */
@media (max-width: 767px) {
    .header__search-toggle,
    .header__search-panel {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SUCHE — Feld im Footer (nur mobil)
   ══════════════════════════════════════════════════════════════ */

.footer__search {
    padding: var(--space-element-gap);
    margin-bottom: var(--space-stack-medium);
}

.footer__search-title {
    font-family: var(--font-family-body);
    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);
    text-transform: uppercase;
    line-height: 1.5;
}

.footer__search .ds-search-form__input {
    background-color: var(--pr-color-gray-800-shade-500);
    border-color: var(--footer-link-border-color);
    color: var(--color-text-inverse);
}

.footer__search .ds-search-form__input::placeholder {
    color: var(--footer-link-color-muted);
}

@media (min-width: 768px) {
    .footer__search {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SUCHE — Ergebnisseite
   ══════════════════════════════════════════════════════════════ */

.search-results__count {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    max-width: var(--space-p-width);
    margin: var(--space-stack-medium) auto 0;
}

.search-results__toolbar,
.search-results,
.search-results__empty {
    max-width: var(--bp-ultra-min);
    margin: 0 auto;
    padding: 0 var(--space-container-padding);
}

.search-results__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-element-gap);
    margin-bottom: var(--space-container-padding);
}

.search-results__toolbar > *,
.search-results__empty > * {
    max-width: var(--space-p-width);
}

.search-results__sort-label {
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-muted);
}

.search-results__sort {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-element-gap);
    list-style: none;
}

.search-results__sort-link {
    font-size: var(--font-size-caption);
    color: var(--color-text-main);
    text-decoration: none;
    padding: 0.15em 0.5em;
    border: 1px solid var(--pr-color-gray-800-tint-700);
    border-radius: var(--border-radius);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.search-results__sort-link:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

.search-results__sort-link.is-active {
    background-color: var(--color-text-main);
    border-color: var(--color-text-main);
    color: var(--color-text-inverse);
}

.search-results__sort-link:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* ── Einzelner Treffer ──────────────────────────────────────── */

.search-result {
    max-width: var(--space-p-width);
    margin: 0 auto var(--space-section-margin);
    padding-bottom: var(--space-container-padding);
    border-bottom: 1px solid var(--pr-color-gray-100);
}

.search-result:last-child {
    border-bottom: none;
}

.search-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-element-gap);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-muted);
    margin-bottom: var(--space-stack-small);
}

.search-result__type {
    color: var(--color-brand-primary);
    font-weight: 700;
}

.search-result__title {
    font-size: calc(var(--font-size-heading) * 0.75);
    line-height: 1.25;
    margin-bottom: var(--space-element-gap);
}

.search-result__title a {
    color: inherit;
    text-decoration: none;
}

.search-result__title a:hover {
    color: var(--color-brand-primary);
}

.search-result__title a:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 3px;
}

/* ── Ausrisse ───────────────────────────────────────────────── */

.search-result__snippets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-element-gap);
    margin-bottom: var(--space-element-gap);
}

.search-result__snippet {
    font-size: var(--font-size-body-fluid);
    font-weight: 400;
    line-height: 1.5;
    padding-left: var(--space-element-gap);
    border-left: 2px solid var(--pr-color-gray-800-tint-800);
}

.search-result__snippet--fallback {
    color: var(--color-text-muted);
}

.search-result__matches {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
}

/* ── Vollständiger Beitrag (details/summary) ────────────────── */

.search-result__full {
    margin-top: var(--space-element-gap);
}

.search-result__full-toggle {
    cursor: pointer;
    font-size: var(--font-size-caption);
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    list-style: none;
}

.search-result__full-toggle::-webkit-details-marker {
    display: none;
}

.search-result__full-toggle::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4em;
    transition: transform 0.2s ease;
}

.search-result__full[open] .search-result__full-toggle::before {
    transform: rotate(90deg);
}

.search-result__full-toggle:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.search-result__full-body {
    margin-top: var(--space-element-gap);
    padding: var(--space-element-gap);
    background-color: var(--color-bg-muted);
    border-radius: var(--border-radius);
    max-height: 60vh;
    overflow-y: auto;
}

.search-result__full-body p {
    font-size: var(--font-size-body-fluid);
    font-weight: 400;
    line-height: 1.5;
}

.search-result__full-body p + p {
    margin-top: var(--space-element-gap);
}

/* ── Leerzustand ────────────────────────────────────────────── */

.search-results__empty {
    padding-bottom: var(--space-section-margin);
}

.search-results__empty p {
    font-size: var(--font-size-body-fluid);
    margin-bottom: var(--space-container-padding);
}

@media (min-width: 1440px) {
    .search-results__toolbar,
    .search-results,
    .search-results__empty {
        padding-left: var(--pr-spacing-5);
        padding-right: var(--pr-spacing-5);
    }
}

/* ══════════════════════════════════════════════════════════════
   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;
}

.news__item-image {
    width: 100%;
    max-width: 100%; /* Zwingt den Container, nicht breiter als sein Eltern-Element zu werden */
    box-sizing: border-box; /* Verhindert, dass eventuelle Rahmen/Abstände den Container vergrößern */
    flex-shrink: 0; /* Wichtig: Verhindert Layout-Fehler, falls .news__item Flexbox nutzt */
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 15px 0; /* Setzt alle anderen Margins sicher auf 0, bis auf unten */
    display: block;
}

/* Sicherheitsnetz für den übergeordneten Container */
.news__item {
    overflow: hidden; /* Schneidet alles gnadenlos ab, was über den Rand dieses Links hinausragt */
}

.news__item-title {
    font-size: var(--font-size-body);
    /* Überschreibt das globale h2/h3 line-height: 0.75 (viel zu eng, sobald der Titel
       im small-media-Bereich mehrzeilig umbricht). Unitless-Wert bleibt dynamisch,
       da er sich automatisch an die fluide font-size anpasst. */
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.news__item-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.news__item-cta .btn {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

    .news__item h3 {
        margin-bottom: 0;
    }
    .news__item .frontpage-eyebrow,
    .news__item .news__item-title,
    .news__item .news__item-excerpt,
    .news__item .news__item-date,
    .news__item-cta {
        padding-left: var(--space-stack-medium);
        padding-right: var(--space-stack-medium);
    }

    .news__item .news__item-date {
        font-size: var(--font-size-caption);
        text-transform: uppercase;
        font-weight: 400;
        color: var(--color-text-muted);
        margin-bottom: calc(var(--space-stack-small) * var(--scale-factor));
    }

    .news__item-cta {
    }
    .news__item .news__item-excerpt {
        padding-bottom: var(--space-stack-medium);
    }

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

.archive__header {
    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);
}

.archive__header .frontpage-eyebrow {
    width: 100%;
    max-width: var(--space-p-width);
    margin: auto;
    margin-bottom: var(--space-stack-medium);
}

.archive__page h1 {
    font-size: calc(var(--font-size-heading) * 1.5);
    width: 100%;
    max-width: var(--space-p-width);
    margin: auto;
    text-box-trim: trim-both;
    transform: translateX(-0.1rem);
}

.archive__page h2 {
    font-size: calc(var(--font-size-heading) * 0.75);
}

/* ── Archiv-/Kategorieseiten: einheitlicher Fließtext ────────────
   Alle Fließtexte gleiches Gewicht (400) und gleicher Zeilenabstand
   (1.5 — unitless, also 1,5 × der jeweils geltenden <p>-Schriftgröße).
   Überschriften bleiben unangetastet.
   Überschreibt u. a. .single-post__body { line-height: var(--scale-factor) }. */
.archive__page .single-post__body,
.archive__page .archive__description {
    line-height: 1.5;
    font-weight: 400;
}

.archive__page .single-post__body p,
.archive__page .single-post__body li,
.archive__page .single-post__body blockquote,
.archive__page .archive__description p,
.archive__page .archive__description li,
.archive__page .archive__description blockquote {
    font-weight: 400;
    line-height: 1.5;
}

/* .archive__post-link::after spannt einen Stretched Link (inset: 0, z-index: 1)
   über die ganze Karte. Ohne das hier wären Links im Fließtext — und damit auch
   die als extern markierten — nicht anklickbar. */
.archive__page .single-post__body a,
.archive__page .archive__description a {
    position: relative;
    z-index: 2;
}