/* === Bilanz als Satz (01) ===
   Die Zahlen sind Sticker im Fließtext. Der Default ist der Endzustand —
   ohne JS ist nichts versteckt. Erst wenn scrollhover.js die Animation
   scharfstellt (.is-armed), startet sie vom Anfangszustand. */
.bilanz { padding: 0; }

.bilanz__satz {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 3.2rem);
    line-height: 1.3;
    max-width: 24ch;
    margin: 0;
    text-wrap: balance;
}

.bilanz__zahl {
    position: relative;
    display: inline-block;
    padding: 0 0.16em;
    line-height: 1.08;
    box-shadow: var(--shadow-sticker);
    transform: rotate(var(--rot-end, -2deg));
}
.bilanz__zahl:nth-of-type(even) { --rot-end: 1.6deg; }

/* Die Farbfläche liegt hinter der Zahl, damit sie allein einwischen kann */
.bilanz__zahl::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--zahl-bg);
    transform-origin: left center;
}
.bilanz__zahl-wert {
    position: relative;
    font-variant-numeric: tabular-nums;
}

.bilanz__zahl--rose  { --zahl-bg: var(--fresh-rose);      color: var(--color-text-on-rose); }
.bilanz__zahl--wind  { --zahl-bg: var(--fresh-wind);      color: var(--fresh-dark-d); }
.bilanz__zahl--river { --zahl-bg: var(--fresh-river-mid); color: #ffffff; }
.bilanz__zahl--weiss { --zahl-bg: #ffffff;                color: var(--color-text-on-sticker); }

/* Anfangszustand: Fläche weggewischt, Drehung bei 0° */
.bilanz__satz.is-armed .bilanz__zahl { transform: rotate(0deg); }
.bilanz__satz.is-armed .bilanz__zahl::before { transform: scaleX(0); }

.bilanz__satz.is-armed.is-in .bilanz__zahl {
    transform: rotate(var(--rot-end, -2deg));
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms);
}
.bilanz__satz.is-armed.is-in .bilanz__zahl::before {
    transform: scaleX(1);
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms);
}

@media (max-width: 760px) {
    .bilanz__satz { max-width: none; }
}

/* === Phase-Card (Vorhaben + Mandat + Hover) === */
/* === Phase-Card (Vorhaben + Erfolg gemeinsam) === */
.phase-card {
    position: relative;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #ffffff;
    transition: background 180ms ease, color 180ms ease, transform var(--hover-ease), box-shadow var(--hover-ease);
}

.phase-card__hero {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--fresh-river-soft) 0%, var(--fresh-dark-a) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 350ms ease;
}

.phase-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Illustrationen kommen beschnitten (*-card.webp), damit breite Motive die
   breite Kopfzeile auch nutzen statt in einem Quadrat zu schrumpfen */
.phase-card__img--illustration {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-5) var(--space-7);
}
.phase-card__hero-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}

/* Muster-Platzhalter, wo noch kein Bild existiert: Raster aus Pfeil-Dreiecken
   (Markenmotiv) im Farbverlauf der Akzentfarbe. Die Dreiecke sind eine Maske
   auf einem Pseudo-Element, damit die Farben aus den Tokens kommen statt fest
   im SVG zu stehen. Der Host muss positioniert sein. */
.fresh-pattern {
    --pattern-a: var(--fresh-rose);
    --pattern-b: var(--fresh-wind);
    background: var(--fresh-dark-a);
    overflow: hidden;
}
.fresh-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pattern-a), var(--pattern-b));
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Cpath d='M6 4L24 14L6 24zM34 28L52 38L34 48z'/%3E%3C/svg%3E") 0 0 / 56px 48px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Cpath d='M6 4L24 14L6 24zM34 28L52 38L34 48z'/%3E%3C/svg%3E") 0 0 / 56px 48px;
}
.fresh-pattern--rose  { --pattern-a: var(--fresh-rose);  --pattern-b: var(--fresh-river-soft); }
.fresh-pattern--wind  { --pattern-a: var(--fresh-wind);  --pattern-b: var(--fresh-river-soft); }
.fresh-pattern--river { --pattern-a: var(--fresh-river-light); --pattern-b: var(--fresh-wind-dark-c); }

/* Illustration statt Foto in großen Heros: Grafik auf dunkler Fläche, eingepasst */
.hero-illustration {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* oben Platz für Navbar + Zacken, unten für den Wort-Sticker; feste Werte,
       weil Prozent-Padding sich auf die Breite bezieht */
    padding: calc(var(--nav-total) + var(--space-4)) 10% var(--space-9);
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}
.hero-illustration img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Region-Sticker: glassmorph */
.phase-card__region {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.28rem 0.65rem 0.32rem;
    border-radius: var(--radius-none);
    color: #ffffff;
    font-weight: 700;
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    --rot: -1.5deg;
}

/* Erfolg-Check: eckig, weiß auf river-light, oben rechts */
.phase-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fresh-river-light);
    color: #ffffff;
    border-radius: var(--radius-none);
    box-shadow: var(--shadow-sticker);
}

.phase-card__body {
    padding: var(--space-4) var(--space-4) var(--space-5);
}

.phase-card__title {
    font-weight: 800;
    font-size: 1.4rem;
    margin: 0 0 var(--space-2);
    line-height: 1.05;
}
.phase-card__title a {
    color: inherit;
    text-decoration: none;
}
.phase-card__title a:hover { text-decoration: underline; }

.phase-card__desc {
    font-weight: 400;
    font-size: var(--fs-200);
    line-height: 1.45;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

/* Status-Sticker oberhalb der Timeline */
.phase-card__status {
    margin: var(--space-3) 0 var(--space-2);
}
.phase-card__status-label {
    display: inline-block;
    background: var(--fresh-dark-a);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-weight: 700;
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sticker);
}
.phase-card__status-label--rose  { background: var(--fresh-rose); }
.phase-card__status-label--wind  { background: var(--fresh-wind); color: #ffffff; }
.phase-card__status-label--river { background: var(--fresh-river); color: #ffffff; }
.phase-card__status-label--red   { background: var(--fresh-red); }

/* Pipeline-Current-Color richtet sich nach Status-Accent der Card */
.phase-card--accent-river .phase-card__step--current .phase-card__step-tri { color: var(--fresh-river-light); }
.phase-card--accent-wind  .phase-card__step--current .phase-card__step-tri { color: var(--fresh-wind); }
.phase-card--accent-rose  .phase-card__step--current .phase-card__step-tri { color: var(--fresh-rose); }

/* Timeline: Pfeil-Triangles nach rechts */
.phase-card__timeline {
    list-style: none;
    padding: 0; margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.phase-card__step {
    display: inline-flex;
    align-items: center;
}
.phase-card__step + .phase-card__step::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 1px;
    background: rgba(255,255,255,0.18);
    margin-right: 5px;
}
.phase-card__step--done .phase-card__step-tri    { color: #ffffff; }
.phase-card__step--current .phase-card__step-tri { color: var(--fresh-rose); }
.phase-card__step--future .phase-card__step-tri  { color: rgba(255,255,255,0.22); }

/* Erfolg-Mode: aktuelle Phase ist immer umgesetzt → wind statt rose */
.phase-card--erfolg .phase-card__step--current .phase-card__step-tri { color: var(--fresh-wind); }

.phase-card.is-abgelehnt { opacity: 0.7; }

/* Topics */
.phase-card__topics { display: flex; flex-wrap: wrap; gap: 4px; }
.phase-card__topic {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem 0.24rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 250ms, color 250ms;
}

/* === Mandat-Variante (nutzt phase-card-Basis) === */
.phase-card--mandat { background: var(--color-bg-elevated); }
.phase-card__cover-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
/* Card-Link liegt über allem; nur die Social-Buttons liegen noch darüber */
.phase-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}
.phase-card__stretched-link:focus-visible { outline: 3px solid var(--fresh-wind); outline-offset: 3px; }
.phase-card--mandat .card-mini-buttons { position: relative; z-index: 5; }

.phase-card__hero--mandat {
    height: 240px;
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}
.phase-card__hero--mandat .phase-card__img {
    object-position: center top;
}
.phase-card__hero-placeholder--mandat {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-weight: 800;
    font-size: 5rem;
}

/* Name-Block: bridges Foto-Unterkante via negativem Margin (außerhalb Hero, nichts geclippt) */
.phase-card__name-block {
    position: relative;
    z-index: 3;
    margin: -1.6rem 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: var(--space-2);
}

.phase-card__firstname-sticker {
    background: var(--fresh-river-mid);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-weight: 700;
    font-size: var(--fs-200);
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sticker);
    margin-left: 0.6rem;
    margin-bottom: -0.35rem;
    --rot: -2deg;
    position: relative;
    z-index: 4;
    transition: background 200ms ease, color 200ms ease;
}

.phase-card__name-sticker {
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.4rem 0.95rem 0.5rem;
    font-weight: 800;
    font-size: var(--fs-500);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: var(--shadow-sticker);
    --rot: -1.5deg;
    position: relative;
    z-index: 3;
    transition: background 200ms ease, color 200ms ease;
}

.phase-card__body--mandat { padding-top: var(--space-3); }

.phase-card__role-text {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-300);
    font-weight: 700;
    color: var(--fresh-river-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.is-ehemalig { opacity: 0.65; filter: saturate(0.7); }

/* === Hover: dezenter Lift + hellerer Shade (Invertierung nur für :active/Klick).
   Farbakzent-Wechsel auf Text-Stickern bleibt — das ist das lebendige Element. === */
.phase-card:hover {
    background: var(--color-bg-elevated);
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card);
}
.phase-card__img { transition: transform var(--hover-ease); }
.phase-card:hover .phase-card__img,
.phase-card.is-scrollhover .phase-card__img { transform: scale(var(--hover-zoom)); }
.phase-card:active {
    background: var(--fresh-dark-a);
    transform: translateY(-1px);
}
.phase-card--mandat:hover .phase-card__name-sticker {
    background: var(--fresh-rose);
    color: #ffffff;
}

/* Legacy-Kompatibilität: alte .vorhaben-card-Klassen leiten auf phase-card um.
   Wenn sie noch irgendwo gerendert werden, gibt's keinen visuellen Bruch. */
.vorhaben-grid,
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.listing-grid--mandat { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-7); }
.listing-grid--stellungnahme { grid-template-columns: 1fr; max-width: 720px; gap: var(--space-4); }
.listing-grid--erfahrung {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-7) var(--space-6);
    padding-top: var(--space-4);
    padding-bottom: var(--space-7);
}

/* Detail-Page-Komponenten (für Erfolg, Vorhaben usw.) */
.lead {
    font-size: var(--fs-400);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5);
    line-height: 1.4;
}

.related-vorhaben,
.page-press {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
}
.related-vorhaben h2,
.page-press h2 {
    font-size: var(--fs-400);
    font-weight: 800;
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
}



/* === Stellungnahme-Card === */
/* === Stellungnahme-Card === */
/* === Stellungnahme als Sprechblase (07a) ===
   Die Aussage steht in der Blase, das Dreieck zeigt auf die Person darunter. */
.stmt-card {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    text-decoration: none;
}
.stmt-card__bubble {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--fresh-dark-d);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-4) var(--space-5) var(--space-5);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background 220ms ease;
}
/* Sprech-Dreieck: erbt die Blasenfarbe, damit der Hover mitläuft */
.stmt-card__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--space-6);
    width: 26px;
    height: 18px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.stmt-card:hover .stmt-card__bubble,
.stmt-card:focus-visible .stmt-card__bubble {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card);
    background: var(--fresh-dark-c);
}

.stmt-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.stmt-card__topics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stmt-card__topic {
    display: inline-block;
    font-weight: 700;
    font-size: var(--fs-100);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.5rem 0.35rem;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2deg);
}
.stmt-card__topic--rose  { background: var(--fresh-rose);      color: var(--color-text-on-rose); }
.stmt-card__topic--wind  { background: var(--fresh-wind);      color: var(--fresh-dark-d); transform: rotate(1.5deg); }
.stmt-card__topic--river { background: var(--fresh-river-mid); color: #ffffff; }
.stmt-card__date { font-size: var(--fs-200); color: var(--color-text-tertiary); white-space: nowrap; }

.stmt-card__title {
    display: block;
    margin-top: var(--space-4);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.08;
}
.stmt-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-3);
    font-size: var(--fs-200);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.stmt-card__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-left: var(--space-1);
    min-width: 0;
}
.stmt-card__photo {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.stmt-card__photo--placeholder {
    display: grid;
    place-items: center;
    background: var(--fresh-river-mid);
    font-weight: 800;
    font-size: var(--fs-200);
}
.stmt-card__person { min-width: 0; }
.stmt-card__name { display: block; font-weight: 800; font-size: var(--fs-300); line-height: 1.1; }
/* Rolle einzeilig mit Auslassung — sonst bricht sie die Karten unterschiedlich hoch */
.stmt-card__role {
    display: block;
    font-size: var(--fs-200);
    color: var(--fresh-river-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .stmt-card__bubble { transition: none; }
}

.erfahrung-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    margin: var(--space-6) 0;
    align-items: stretch;
}

.voice {
    position: relative;
    background: var(--fresh-river);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-4) var(--space-5);
    margin-top: 90px;               /* Platz fürs herausragende Foto-Rechteck */
    color: #ffffff;
    transform: rotate(var(--rot, 0deg));
    transition: transform var(--hover-ease), box-shadow var(--hover-ease);
    display: flex;
    flex-direction: column;
}
.voice--rose  { background: var(--fresh-rose); }
.voice--wind  { background: var(--fresh-wind-dark-a); }
.voice--river { background: var(--fresh-river); }
.voice:hover { transform: rotate(var(--rot, 0deg)) translateY(var(--hover-lift)); z-index: 3; }

/* Foto-Rechteck: ragt über die Card-Oberkante, Cutout wächst weiter raus */
.voice__media {
    position: relative;
    width: min(190px, 70%);
    margin: -110px auto var(--space-4);
}
.voice__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sticker);
    background: var(--fresh-dark-a);
}
/* Beide Bilder identisch: 128% der Rahmenhöhe, unten/mittig verankert.
   Der Rahmen clippt das Foto — der Cutout (ungeclippt) ragt oben ~28% raus.
   Funktioniert für Hoch- UND Querformat, bleibt pixel-aligned. */
.voice__photo,
.voice__cutoutimg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% * var(--zoom, 1.35));
    width: auto;
    max-width: none;
    display: block;
}
/* Cutout liegt pixelgenau über dem Foto (gleiche Quelle/Maße), unclipped */
.voice__photo,
.voice__cutoutimg {
    transform-origin: bottom center;
    transition: transform var(--hover-ease);
}
.voice__cutoutimg {
    z-index: 1;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
/* Hover: Foto UND Cutout zoomen gleich stark (sonst verrutschen sie
   gegeneinander); der Rahmen-Crop bleibt gleich groß */
.voice:hover .voice__photo,
.voice:hover .voice__cutoutimg,
.voice.is-scrollhover .voice__photo,
.voice.is-scrollhover .voice__cutoutimg {
    transform: translateX(-50%) scale(var(--hover-zoom));
}
.voice.is-scrollhover { transform: rotate(var(--rot, 0deg)) translateY(var(--hover-lift)); }

.voice__quote {
    font-weight: 700;
    font-size: var(--fs-300);
    line-height: 1.35;
    margin: 0;
    flex: 1;
}
.voice__meta {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.voice__name {
    display: inline-block;
    background: #ffffff;
    color: var(--fresh-dark-d);
    font-weight: 800;
    font-size: var(--fs-200);
    padding: 0.2rem 0.6rem 0.25rem;
    box-shadow: var(--shadow-sticker);
    --rot: -1.5deg;
}
.voice__sub { font-size: var(--fs-100); color: rgba(255,255,255,0.75); font-style: italic; }


/* === FAQ-List === */
/* === FAQ-List === */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.inverted-body .faq-item { background: var(--fresh-dark-d); color: #ffffff; }

.faq-item__summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    transition: background 200ms;
    color: #ffffff;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { background: var(--color-bg-elevated); }
.inverted-body .faq-item__summary:hover { background: var(--fresh-dark-c); }

.faq-item__q {
    font-size: var(--fs-400);
    font-weight: 700;
    line-height: 1.2;
    flex: 1;
}

.faq-item__indicator {
    flex-shrink: 0;
    transition: transform 200ms;
    display: inline-flex;
}
.faq-item[open] .faq-item__indicator { transform: rotate(90deg); }

.faq-item__body {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: var(--space-5);
    align-items: start;
    padding: 0 var(--space-5) var(--space-5);
}
.faq-item__short {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--fresh-rose);
    margin: 0;
    padding-top: 0.15em;
    --rot: -2deg;
    transform: rotate(var(--rot));
    transform-origin: left center;
}
.faq-item__answer {
    font-size: var(--fs-300);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.faq-item__answer a { color: rgba(255,255,255,0.95); text-decoration: underline; }
.inverted-body .faq-item__short  { color: var(--fresh-rose-dark-c); }
.inverted-body .faq-item__answer { color: var(--fresh-dark-a); }
.inverted-body .faq-item__answer a { color: var(--fresh-dark-d); }

@media (max-width: 640px) {
    .faq-item__body { grid-template-columns: 1fr; gap: var(--space-2); }
    .faq-item__short { font-size: 2.2rem; }
}


/* === Themen-Section === */
/* === Themen-Section === */
.themen-section {
    margin: var(--space-9) 0;
}

.themen-section__head {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.themen-section__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.35rem 0.75rem 0.4rem;
    font-weight: 700;
    font-size: var(--fs-200);
    margin-left: var(--space-4);
    margin-bottom: -0.5rem;
    box-shadow: var(--shadow-sticker);
    z-index: 2;
    position: relative;
    --rot: -2deg;
}

.themen-section__title { display: inline-block; margin: 0; }
.themen-section__title .fresh-word--sticker {
    font-size: clamp(2rem, 4vw, var(--fs-600));
    padding: 0.55rem 1.2rem 0.65rem;
}

.themen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.thema-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: visible;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform var(--hover-ease), background 250ms, box-shadow var(--hover-ease);
}
.thema-card:hover { transform: translateY(var(--hover-lift)); background: var(--color-bg-elevated); box-shadow: var(--shadow-card); z-index: 3; }

.thema-card__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* PNG-Bg in verschiedenen River-Shades — wechseln nach Akzent-Klasse,
   inhaltlich bleibt rose/wind/river als Sortierung im YAML, optisch sind alle River. */
.thema-card--rose  .thema-card__visual { background: var(--fresh-river-mid); }
.thema-card--wind  .thema-card__visual { background: var(--fresh-river); }
.thema-card--river .thema-card__visual { background: var(--fresh-dark-a); }

.thema-card__illustration {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3%;
    transition: transform var(--hover-ease);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}
.thema-card:hover .thema-card__illustration,
.thema-card.is-scrollhover .thema-card__illustration {
    transform: scale(var(--hover-zoom));
}
.thema-card__content {
    position: relative;
    z-index: 2;
    background: inherit;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.thema-card__tri-composition {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: var(--space-5);
}
.thema-card__tri-composition .tri:nth-child(1) { transform: rotate(-5deg); }
.thema-card__tri-composition .tri:nth-child(2) { transform: rotate(8deg) translateY(-12px); }
.thema-card__tri-composition .tri:nth-child(3) { transform: rotate(-3deg) translateY(20px); }

.thema-card__content {
    padding: var(--space-4);
}

.thema-card__title {
    font-weight: 800;
    font-size: var(--fs-400);
    margin: 0 0 var(--space-2);
    line-height: 1.05;
    color: #ffffff;
}

.thema-card__desc {
    font-size: var(--fs-200);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.45;
}


/* === Section-Übersicht === */
/* === Section-Übersicht === */
.section-intro {
    max-width: 720px;
    margin: 0 auto var(--space-7);
}
.section-intro p { font-size: var(--fs-400); line-height: 1.5; color: var(--color-text-secondary); }
.section-intro strong { color: #ffffff; font-weight: 700; }


/* === Photo-Section-Divider === */
/* === Photo-Section-Divider === */
.photo-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: calc(-1 * var(--space-7));  /* nachfolgende Sektion ragt in den Streifen */
    z-index: 0;
}
.photo-divider--sm { height: 180px; }
.photo-divider--md { height: 280px; }
.photo-divider--lg { height: 380px; }
.photo-divider__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.photo-divider__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5,10,13,0.15) 0%,
        rgba(5,10,13,0.05) 35%,
        rgba(5,10,13,0.55) 80%,
        var(--color-bg-page) 100%
    );
}

/* Section direkt nach einem photo-divider: erlaubt dem Header-Sticker, in den Streifen reinzuragen */
.photo-divider + .politik-section .politik-block__head {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--space-7));
}


/* === Threads-Embeds === */
/* === Threads-Embeds === */
.threads-embeds {
    margin: var(--space-7) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.threads-embeds__label {
    display: block;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    color: var(--fresh-river-light);
}
.threads-embed {
    background: var(--color-bg-elevated);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    overflow-x: auto;
}
.threads-embed iframe { max-width: 100%; }
.threads-embed-fallback {
    color: var(--fresh-wind);
    text-decoration: none;
    font-weight: 700;
}


/* === Mini-Buttons === */
/* === Mini-Buttons auf Cards (Press-Logos / Social-Icons) === */
.card-mini-buttons {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.card-mini-button {
    display: inline-flex;
    transition: transform 180ms ease;
    text-decoration: none;
}
.card-mini-button:hover { transform: translateY(-1px) scale(1.06); }

/* Medien-Quadrat — geteilt von den Mini-Buttons und den Presse-Ausschnitten.
   Daten dazu: user/data/outlets.yaml */
.outlet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}
.outlet-icon--sm { width: 20px; height: 20px; }
.outlet-icon--md { width: 30px; height: 30px; }
.outlet-icon img { width: 72%; height: 72%; object-fit: contain; }
/* SZ- und Merkur-Logo sind schwarz — auf der CI-Fläche weiß ziehen */
.outlet-icon--sz img,
.outlet-icon--mm img { filter: brightness(0) invert(1); }
.outlet-icon__abbr { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; }
.outlet-icon--md .outlet-icon__abbr { font-size: 0.68rem; }

/* Social-Mini-Buttons: nutzen .site-footer__social-link Plattform-Farben, aber kleiner */
.card-mini-button.site-footer__social-link {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85);
}
.card-mini-button.site-footer__social-link svg { width: 16px; height: 16px; }

/* Bei Card-Hover (Card wird weiß) muss der Mini-Button sichtbar bleiben.
   Die Card-Hover-Regel setzt die Card auf weiß; wir geben den Mini-Buttons dann
   einen dunklen Hintergrund, damit sie nicht verschwinden. */
.phase-card:hover .card-mini-button.site-footer__social-link {
    background: var(--fresh-dark-d);
    color: #ffffff;
}
.phase-card:hover .card-mini-button.site-footer__social-link:hover { color: #ffffff; }

/* Plattform-Farben gewinnen IMMER bei Direct-Hover auf den Button selbst,
   auch wenn die Card-Hover-Regel zuvor dark-d gesetzt hatte */
.card-mini-button.site-footer__social-link--instagram:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--instagram:hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #ffffff;
}
.card-mini-button.site-footer__social-link--facebook:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--facebook:hover  { background: #1877F2; color: #ffffff; }
.card-mini-button.site-footer__social-link--whatsapp:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--whatsapp:hover  { background: #25D366; color: #ffffff; }
.card-mini-button.site-footer__social-link--threads:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--threads:hover   { background: var(--fresh-river-mid); color: #ffffff; }
.card-mini-button.site-footer__social-link--tiktok:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--tiktok:hover    { background: var(--fresh-dark-c); color: #ffffff; }
.card-mini-button.site-footer__social-link--mail:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--mail:hover      { background: var(--fresh-river-soft); color: #ffffff; }
.card-mini-button.site-footer__social-link--linkedin:hover,
.phase-card:hover .card-mini-button.site-footer__social-link--linkedin:hover  { background: #0A66C2; color: #ffffff; }


/* === Kontakt-Channels === */
/* === Kontakt: Channels-Block + Formular === */
.kontakt-channels { margin: var(--space-7) 0; }
.kontakt-channels__title {
    font-size: var(--fs-500);
    font-weight: 800;
    margin: 0 0 var(--space-5);
    line-height: 1.1;
}
.kontakt-channels__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.kontakt-channel { display: contents; }

.kontakt-channel__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-bg-surface);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.kontakt-channel__link:hover {
    background: var(--color-bg-elevated);
    border-color: var(--fresh-river-mid);
    transform: translateY(-2px);
}

.kontakt-channel__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.88);
    transition: background 220ms ease, color 220ms ease;
}
.kontakt-channel__icon svg { width: 22px; height: 22px; }

/* Single Hover-Target: anywhere on the link colors the icon in Plattform-Farbe */
.kontakt-channel--instagram .kontakt-channel__link:hover .kontakt-channel__icon {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #ffffff;
}
.kontakt-channel--facebook  .kontakt-channel__link:hover .kontakt-channel__icon { background: #1877F2; color: #ffffff; }
.kontakt-channel--whatsapp  .kontakt-channel__link:hover .kontakt-channel__icon { background: #25D366; color: #ffffff; }
.kontakt-channel--threads   .kontakt-channel__link:hover .kontakt-channel__icon { background: var(--fresh-river-mid); color: #ffffff; }
.kontakt-channel--tiktok    .kontakt-channel__link:hover .kontakt-channel__icon { background: var(--fresh-dark-c); color: #ffffff; box-shadow: inset 0 0 0 1px #25F4EE, 0 0 0 1px #FE2C55; }
.kontakt-channel--mail      .kontakt-channel__link:hover .kontakt-channel__icon { background: var(--fresh-river-soft); color: #ffffff; }
.kontakt-channel--linkedin  .kontakt-channel__link:hover .kontakt-channel__icon { background: #0A66C2; color: #ffffff; }

.kontakt-channel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kontakt-channel__label {
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--fresh-river-light);
    transition: color 180ms ease;
}
.kontakt-channel__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-400);
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 180ms ease;
}
.kontakt-channel__link:hover .kontakt-channel__label { color: rgba(255, 255, 255, 0.7); }

/* Kontaktformular: gleiches Layout wie der Mitgliedsantrag (.fresh-form in
   pages.css), deshalb keine eigene Box mehr */
.kontakt-form-section {
    max-width: 860px;
    margin: var(--space-8) 0 var(--space-4);
}
.kontakt-form__head {
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.kontakt-form__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
    margin-left: var(--space-3);
    margin-bottom: -0.45rem;
    position: relative;
    z-index: 2;
    align-self: flex-start;
}
.kontakt-form__title {
    font-size: var(--fs-500);
    font-weight: 800;
    background: #ffffff;
    color: var(--fresh-dark-d);
    display: inline-block;
    padding: 0.45rem 1rem 0.55rem;
    margin: 0 0 var(--space-3);
    box-shadow: var(--shadow-sticker);
}
.kontakt-form__hint {
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
    margin: 0;
}


/* Erfolgs-Meldung nach Submit (Kontakt und Antrag) */
.fresh-form .alert {
    background: var(--fresh-wind);
    color: #ffffff;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-300);
    line-height: 1.5;
    grid-column: 1 / -1;
}

/* === Aktivitäts-Card === */
/* === Aktivitäts-Card (Verein) === */
.phase-card--aktivitaet .phase-card__hero { height: 200px; }
.phase-card__hero-placeholder--aktivitaet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.phase-card__hero-placeholder--rose  { background: linear-gradient(135deg, var(--fresh-rose-dark-a),  var(--fresh-river-mid)); }
.phase-card__hero-placeholder--wind  { background: linear-gradient(135deg, var(--fresh-wind-dark-b), var(--fresh-river-mid)); }
.phase-card__hero-placeholder--river { background: linear-gradient(135deg, var(--fresh-river),       var(--fresh-dark-a)); }

/* Title-Bridge: bridges Hero-Unterkante via negativem Margin (analog Mandat-Name-Block) */
.phase-card__title-bridge {
    position: relative;
    z-index: 3;
    margin: -1.4rem 0 0 var(--space-4);
    padding-bottom: var(--space-2);
}

.phase-card__title-sticker {
    display: inline-block;
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.4rem 0.95rem 0.5rem;
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1;
    letter-spacing: -0.005em;
    box-shadow: var(--shadow-sticker);
    --rot: -1.5deg;
    transition: background 200ms ease, color 200ms ease;
}

/* Aktivitäts-Hover: Title-Sticker wechselt Akzent — analog Mandat-Card */
.phase-card--aktivitaet:hover .phase-card__title-sticker--rose  { background: var(--fresh-rose);  color: #ffffff; }
.phase-card--aktivitaet:hover .phase-card__title-sticker--wind  { background: var(--fresh-wind);  color: #ffffff; }
.phase-card--aktivitaet:hover .phase-card__title-sticker--river { background: var(--fresh-river); color: #ffffff; }

.phase-card__motto {
    margin: var(--space-3) 0 0;
    font-style: italic;
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
    line-height: 1.45;
}
/* „…weil“-Zeile auf Detailseiten (Vorhaben, Erfolge) */
.motto {
    margin: var(--space-2) 0 var(--space-5);
    font-style: italic;
    color: var(--color-text-secondary);
}


/* === Section-Divider (Chapter-Marker) === */
/* === Section-Divider (Kapitel-Marker zwischen One-Page-Sektionen) === */
.section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-8) 0 var(--space-6);
    color: var(--fresh-river-light);
}
.section-divider__num {
    font-size: var(--fs-600);
    font-weight: 800;
    line-height: 0.9;
    color: var(--fresh-river-mid);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.section-divider__line {
    flex: 1;
    height: 1px;
    background: var(--color-border-glass);
    min-width: var(--space-5);
}
.section-divider__triple {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.section-divider__label {
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--fresh-dark-d);
    color: #ffffff;
    padding: 0.25rem 0.6rem 0.3rem;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .section-divider__num { font-size: var(--fs-500); }
    .section-divider { gap: var(--space-3); margin: var(--space-7) 0 var(--space-5); }
}


/* === Politik Sections + Blocks === */
/* === Politik One-Page Sections === */
.politik-section {
    padding: var(--space-9) var(--space-6);
    position: relative;
}
/* Kerben-Regel: die Kerbe ist ein AUSSCHNITT, kein aufgesetztes Dreieck.
   Die untere Fläche rückt um die Kerbentiefe unter die obere und schneidet
   sich oben ein V aus. Im Ausschnitt erscheint, was darüber liegt (Farbe,
   Verlauf, Foto), die Kerbe kann also nie eine falsche Farbe tragen.
   border-top schafft den Platz, ohne das Padding der Sektion anzufassen; der
   Hintergrund malt darunter weiter (background-clip: border-box).
   Position wandert per nth-child, --cut-x erlaubt Abweichungen. Landing hat
   stattdessen die Peek-Stack-Kerben (pages.css), der Footer seine eigene. */
main:not(.home-stack) > :is(.politik-section, .photo-divider) + :is(.politik-section, .photo-divider),
.mandat-detail > :is(.politik-section, .mandat-themen-section) + .politik-section,
.mandat-thema + .mandat-thema {
    margin-top: -28px;
    border-top: 28px solid transparent;
    background-origin: border-box;   /* Verläufe beginnen am Rand, nicht darunter */
    clip-path: polygon(
        0 0,
        calc(var(--cut-x, var(--notch-x, 30%)) - 28px) 0,
        var(--cut-x, var(--notch-x, 30%)) 28px,
        calc(var(--cut-x, var(--notch-x, 30%)) + 28px) 0,
        100% 0, 100% 100%, 0 100%
    );
}
/* Foto-Streifen haben eine feste Höhe: kein Rand, das Foto selbst rückt hoch */
main:not(.home-stack) > .politik-section + .photo-divider { border-top: 0; }
main:not(.home-stack) > *:nth-child(4n+1) { --notch-x: 84%; }
main:not(.home-stack) > *:nth-child(4n+2) { --notch-x: 26%; }
main:not(.home-stack) > *:nth-child(4n+3) { --notch-x: 70%; }
main:not(.home-stack) > *:nth-child(4n)   { --notch-x: 44%; }
.politik-section__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.politik-section--a { background: var(--color-bg-section-a); }
.politik-section--b { background: var(--color-bg-section-b); }
.politik-section--c { background: var(--color-bg-section-c); }
.politik-section--d { background: var(--color-bg-section-d); }

.phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* Teil-gefülltes Raster: eine einzelne Karte stand bisher schmal links im
   Dreier-Raster. Bei einem Eintrag Querformat (Bild links, Text rechts),
   bei zweien zwei Spalten. */
.phase-grid:has(> .phase-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.phase-grid:has(> .phase-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 720px) {
    .phase-grid > .phase-card:only-child {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        align-items: stretch;
    }
    .phase-grid > .phase-card:only-child .phase-card__hero {
        height: 100%;
        min-height: 260px;
    }
    .phase-grid > .phase-card:only-child .phase-card__body {
        padding: var(--space-5) var(--space-6) var(--space-6);
        align-self: center;
    }
    .phase-grid > .phase-card:only-child .phase-card__title { font-size: 1.8rem; }
}

.mandat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}

.stellungnahme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-7) var(--space-5);
    align-items: stretch;
}

/* === Politik One-Page Blocks (Header der Section) === */
.politik-block {
    margin: var(--space-9) 0;
}

/* Sektionskopf: der „Alle …"-Button sitzt überall gleich — rechtsbündig an
   der Inhaltskante, unten bündig mit dem Sticker. Die linke Seite darf
   versetzt stehen, aber bewusst: --head-shift in Rasterschritten. */
.politik-block__head {
    --head-shift: 0;
    --head-step: 2.75rem;
    display: grid;
    grid-template-columns: auto minmax(var(--space-5), 1fr) auto;
    grid-template-areas: "eyebrow . ." "title . more";
    column-gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-6);
    position: relative;
}
.politik-block__head--shift-1 { --head-shift: 1; }
.politik-block__head--shift-2 { --head-shift: 2; }

.politik-block__eyebrow { grid-area: eyebrow; justify-self: start; }  /* sonst auf Sticker-Breite gestreckt */
.politik-block__title   { grid-area: title; }
.politik-block__more    { grid-area: more; justify-self: end; }


.politik-block__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.55rem 0.28rem;
    font-weight: 700;
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: calc(var(--head-shift) * var(--head-step) + var(--space-3));
    margin-bottom: -0.4rem;
    align-self: end;
    box-shadow: var(--shadow-sticker);
    z-index: 2;
    position: relative;
    --rot: -2deg;
}

.politik-block__title { display: inline-block; margin: 0 0 0 calc(var(--head-shift) * var(--head-step)); align-self: end; justify-self: start; }
.politik-block__title .fresh-word--sticker {
    font-size: clamp(2.2rem, 5vw, 4rem);
    padding: 0.5rem 1.1rem 0.6rem;
    letter-spacing: -0.01em;
}

.politik-block__more {
    align-self: end;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--fs-300);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem 0.4rem;
    background: var(--fresh-river-mid);
    box-shadow: var(--shadow-sticker);
    transition: background 200ms;
    white-space: nowrap;
}
.politik-block__more:hover { background: var(--fresh-river-soft); }

.politik-block__sub {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}
.politik-block__sub-title {
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-4);
}

.section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin: var(--space-7) 0;
}

.section-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 250ms, border-color 250ms, background 250ms;
}
.section-card:hover {
    transform: translateY(var(--hover-lift));
    background: var(--color-bg-elevated);
}

.section-card__deco {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: 4px;
    opacity: 0.7;
}

.section-card__title {
    font-weight: 800;
    font-size: var(--fs-500);
    line-height: 1;
    margin: 0 0 var(--space-3);
    color: #ffffff;
}

.section-card__desc {
    font-size: var(--fs-300);
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5);
    flex-grow: 1;
}

.section-card__meta {
    color: var(--fresh-rose);
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* === Region-Filter === */
/* === Region-Filter (ohne umrahmendes Element) === */
.region-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 var(--space-5);
    width: fit-content;
}

.region-filter__btn {
    background: transparent;
    border: 0;
    padding: 0.3rem 0.6rem 0.35rem;
    border-radius: 0;
    color: var(--color-text-tertiary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-200);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}

.region-filter__btn:hover {
    color: var(--color-text-primary);
}

.region-filter__btn.is-active {
    background: var(--fresh-rose);
    color: var(--color-text-on-rose);
}

/* Erstes/letztes aktive Element ohne Padding-Lücke */
.region-filter__btn.is-active + .region-filter__btn,
.region-filter__btn:has(+ .region-filter__btn.is-active) {
    /* keine spezielle Behandlung nötig — Buttons sind eckig und schließen direkt an */
}


/* === Pressespiegel === */
/* === Pressespiegel (im phase-card-Stil) === */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6) var(--space-5);
    margin: var(--space-6) 0 0;
    align-items: start;
}

/* Ausschnitt: weißer Schnipsel, leicht gedreht, richtet sich beim Hover auf */
.press-clip {
    display: block;
    background: #ffffff;
    color: var(--fresh-dark-d);
    text-decoration: none;
    padding: var(--space-4) var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sticker);
    transform: rotate(var(--clip-rot, -1deg));
    transition: transform var(--hover-ease), box-shadow var(--hover-ease);
}
.press-clip:nth-child(2n) { --clip-rot: 0.8deg; }
.press-clip:nth-child(3n) { --clip-rot: -0.5deg; }
.press-clip:hover,
.press-clip:focus-visible { transform: rotate(var(--clip-rot, -1deg)) translateY(var(--hover-lift)); box-shadow: var(--shadow-card); }

.press-clip__src {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--fresh-dark-d);
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fresh-river-mid);
}
.press-clip__outlet {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.press-clip__src time { color: var(--fresh-river-soft); white-space: nowrap; letter-spacing: 0.02em; }

.press-clip__headline {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.05;
    margin: var(--space-3) 0 0;
}
.press-clip__teaser {
    font-size: var(--fs-200);
    line-height: 1.5;
    color: #3b4f58;
    margin: var(--space-3) 0 0;
}
.press-clip__about {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--fs-200);
    font-weight: 700;
    color: var(--fresh-rose-dark-a);
}
.press-clip__about .tri { transition: transform 180ms ease; }
.press-clip:hover .press-clip__about .tri { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .press-clip,
    .press-clip__about .tri { transition: none; }
}

.press-empty {
    color: var(--color-text-tertiary);
    font-size: var(--fs-300);
    margin: var(--space-6) 0;
}


/* === Mandats-Timeline === */
.mtl {
    position: relative;
    margin-top: var(--space-7);
    padding-top: var(--space-6);
}
.mtl__axis {
    position: absolute;
    top: 0; left: 160px; right: 0;
    height: 100%;
    pointer-events: none;
}
.mtl__tick {
    position: absolute;
    left: var(--pos);
    top: 0;
    bottom: 2.2rem;
    transform: translateX(-50%);
    color: var(--color-text-tertiary);
    font-weight: 700;
    font-size: var(--fs-100);
    border-left: 1px dashed rgba(255,255,255,0.12);
    padding-left: 5px;
}
.mtl__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-3);
}
.mtl__row-label {
    font-weight: 700;
    font-size: var(--fs-100);
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    padding-right: var(--space-4);
}
.mtl__track {
    position: relative;
    height: 42px;
    background: rgba(255,255,255,0.04);
}
.mtl__seg {
    position: absolute;
    left: var(--pos);
    width: var(--len);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 14px 0 10px;
    background: var(--fresh-river-mid);
    color: #ffffff;
    font-weight: 700;
    font-size: var(--fs-200);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    transition: filter 180ms ease, transform 180ms ease;
}
/* Pfeilspitze rechts = Übergabe an Nachfolger:in */
.mtl__seg--uebergabe {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.mtl__seg--aktiv { background: var(--fresh-rose); }
a.mtl__seg:hover { filter: brightness(1.15); transform: translateY(-2px); z-index: 2; }
.mtl__seg-name { text-overflow: ellipsis; overflow: hidden; }
.mtl__legend {
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-4);
    font-size: var(--fs-100);
    color: var(--color-text-tertiary);
    padding-left: 160px;
}
.mtl__dot { display: inline-block; width: 10px; height: 10px; background: var(--fresh-river-mid); margin-right: 4px; }
.mtl__dot--aktiv { background: var(--fresh-rose); }
@media (max-width: 720px) {
    .mtl__row { grid-template-columns: 1fr; gap: 4px; }
    .mtl__row-label { padding: 0; }
    .mtl__axis { left: 0; }
    .mtl__legend { padding-left: 0; }
    .mtl__seg-name { font-size: 0.7rem; }
}

/* Referenten-Badge in der Timeline (Jugend-/Digitalreferent) */
.mtl__ref {
    margin-left: 8px;
    background: rgba(255,255,255,0.92);
    color: var(--fresh-dark-d);
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.4rem 0.14rem;
    flex-shrink: 0;
}


/* Mobile: kleinere Foto-Rahmen + mehr Luft zwischen den voice-Cards,
   damit Cutout-Überstände nicht in die Karte darüber laufen */
@media (max-width: 760px) {
    .erfahrung-grid { row-gap: var(--space-8); }
    .voice { margin-top: 70px; }
    .voice__media { width: min(150px, 58%); margin-top: -95px; }
}


/* === Timeline mobil: vertikal — Zeit läuft nach unten === */
@media (max-width: 720px) {
    .mtl {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
        padding-top: var(--space-4);
    }
    .mtl__axis { display: none; }
    .mtl__row {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
    }
    .mtl__row-label {
        font-size: 0.58rem;
        padding: 0;
        min-height: 2.4em;
    }
    .mtl__track {
        height: 340px;
        width: 100%;
    }
    .mtl__seg {
        left: 0;
        right: 0;
        width: auto;
        top: var(--pos);
        height: var(--len);
        padding: 6px;
        white-space: normal;
        align-items: flex-start;
        font-size: 0.62rem;
        line-height: 1.15;
    }
    .mtl__seg-name { white-space: normal; }
    .mtl__seg--uebergabe {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
    }
    .mtl__ref { display: none; }
    .mtl__legend { grid-column: 1 / -1; padding-left: 0; }
}

/* === Stellungnahmen-Index (07b) === */
.stmt-index__scope {
    margin: var(--space-5) 0 0;
    font-size: var(--fs-200);
    color: var(--color-text-secondary);
}
.stmt-index__scope strong { color: #ffffff; }
.stmt-index__scope a { color: var(--fresh-wind); margin-left: var(--space-3); }

/* Chip-Filter (Themen) — Muster wie der Regionen-Filter, js/region-filter.js */
.chip-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-5);
}
.chip-filter__btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-200);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-none);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.chip-filter__btn:hover { color: #ffffff; border-color: #ffffff; }
.chip-filter__btn.is-active {
    background: var(--fresh-rose);
    border-color: var(--fresh-rose);
    color: var(--color-text-on-rose);
}
.chip-filter__btn:focus-visible { outline: 3px solid var(--fresh-wind); outline-offset: 2px; }

.stmt-index { border-top: 1px solid var(--color-border-glass); }
.stmt-index__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 160px;
    gap: var(--space-2) var(--space-6);
    align-items: start;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border-glass);
    color: #ffffff;
    text-decoration: none;
}
.stmt-index__date b { display: block; font-size: 2.4rem; font-weight: 800; line-height: 0.9; }
.stmt-index__date span {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fresh-river-light);
}
.stmt-index__title {
    display: block;
    font-weight: 800;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.08;
}
.stmt-index__row:hover .stmt-index__title { color: var(--fresh-wind); }
.stmt-index__lead {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-200);
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 62ch;
}
.stmt-index__topics {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-100);
    color: var(--color-text-tertiary);
}
.stmt-index__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: 700;
    font-size: var(--fs-200);
    line-height: 1.2;
}
.stmt-index__author img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }

@media (max-width: 720px) {
    .stmt-index__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .stmt-index__date { display: flex; align-items: baseline; gap: var(--space-2); }
    .stmt-index__date b { font-size: var(--fs-300); line-height: 1; }
    .stmt-index__date span { margin: 0; }
    .stmt-index__author { flex-direction: row; align-items: center; }
    .stmt-index__author img { width: 34px; height: 34px; }
}

/* Sektionskopf innerhalb einer Spalte — kleinerer Sticker */
.politik-block__head--tight { margin-bottom: var(--space-5); }
.politik-block__head--tight .politik-block__title .fresh-word--sticker {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    padding: 0.35rem 0.75rem 0.45rem;
}

/* === Ehemalige Mandate (13) — kompakter als die aktiven Karten === */
.ehemalig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-5) var(--space-4);
}
.ehemalig-card {
    display: block;
    color: #ffffff;
    text-decoration: none;
    transition: transform var(--hover-ease);
}
.ehemalig-card:hover { transform: translateY(var(--hover-lift)); }
.ehemalig-card__photo {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--fresh-dark-a);
    overflow: hidden;
}
.ehemalig-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: grayscale(0.3);
    transition: filter 220ms ease, transform var(--hover-ease);
}
.ehemalig-card:hover .ehemalig-card__photo img { filter: none; transform: scale(var(--hover-zoom)); }
.ehemalig-card__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--fs-500);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, var(--fresh-river-mid), var(--fresh-dark-a));
}
.ehemalig-card__body { display: block; padding: 0 var(--space-1); }
.ehemalig-card__firstname {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: -1.35rem 0 0 var(--space-2);
    background: var(--fresh-river-mid);
    color: #ffffff;
    font-size: var(--fs-100);
    font-weight: 600;
    padding: 0.15rem 0.4rem 0.2rem;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-1.5deg);
}
.ehemalig-card__name {
    display: inline-block;
    margin-top: -0.25rem;
    background: #ffffff;
    color: var(--color-text-on-sticker);
    font-size: var(--fs-400);
    font-weight: 800;
    line-height: 1;
    padding: 0.14rem 0.38rem 0.2rem;
    box-shadow: var(--shadow-sticker);
    transform: rotate(1deg);
}
.ehemalig-card:hover .ehemalig-card__name { background: var(--fresh-wind); }
.ehemalig-card__meta {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--fs-100);
    line-height: 1.35;
    color: var(--color-text-tertiary);
}
.ehemalig-card__ref {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fresh-wind);
}
.ehemalig-card--flat { cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .ehemalig-card__photo img { transition: none; }
}

/* === Platzhalter "Hier wird gerade umgebaut." (partials/umbau) === */
.umbau {
    margin: var(--space-6) 0;
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border-glass);
    border-left: 4px solid var(--fresh-rose);
    background: var(--color-bg-surface);
    max-width: 560px;
}
.umbau__mark { display: flex; gap: 4px; margin-bottom: var(--space-3); }
.umbau__title {
    margin: 0;
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1.1;
    color: #ffffff;
}
.umbau__text {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-300);
    color: var(--color-text-secondary);
}
.umbau--compact { margin: var(--space-4) 0 0; padding: var(--space-4); }
.umbau--compact .umbau__title { font-size: var(--fs-300); }
.umbau--compact .umbau__text { font-size: var(--fs-200); }

/* Einzelfoto ohne Freisteller-Paar: füllt den Rahmen, Ausschnitt per
   photo_position im Frontmatter (die Paar-Geometrie oben braucht es nicht) */
.voice__photo.voice__photo--solo {
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    transform-origin: center;
}
.voice:hover .voice__photo--solo,
.voice.is-scrollhover .voice__photo--solo { transform: scale(var(--hover-zoom)); }