/* === Mandat-Detail (Legacy Variante B Split) === */
/* === Mandat-Detail (Variante B: Split-Screen) === */
.site-main--full {
    /* Voll-Breite-Container für Detail-Pages, ersetzt .site-main */
    width: 100%;
}

.mandat-detail {
    color: var(--color-text-primary);
    /* Padding-top weil Header fixed ist — Hero beginnt direkt darunter */
    padding-top: 60px;
}
.mandat-detail > *:last-child { margin-bottom: 0; }

/* Hero: Foto links 50%, Content rechts 50% */
.mandat-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: clamp(560px, calc(100vh - 60px), 880px);
    background: var(--fresh-dark-d);
}
@media (max-width: 820px) {
    .mandat-hero { grid-template-columns: 1fr; min-height: 0; }
    .mandat-hero__photo-wrap { min-height: 0; height: 420px; }
    .mandat-hero__photo { background-position: center 22%; }
}

.mandat-hero__photo-wrap {
    position: relative;
    overflow: visible;
}

.mandat-hero__photo {
    position: absolute;
    inset: 0;
    bottom: -28px;   /* Kerben-Regel: Foto ragt als Dreieck in die Folge-Sektion */
    background-size: cover;
    background-position: center;
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 28px),
        calc(var(--notch-x, 62%) + 28px) calc(100% - 28px),
        var(--notch-x, 62%) 100%,
        calc(var(--notch-x, 62%) - 28px) calc(100% - 28px),
        0 calc(100% - 28px)
    );
    z-index: 1;
}
.mandat-hero__photo--placeholder {
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}

/* Stamp am Foto-Unterrand, halb auf Foto, halb in Content (Bridge) */
.mandat-hero__stamp {
    position: absolute;
    bottom: var(--space-7);
    right: 0;
    transform: translateX(40%);
    z-index: 3;
}
.mandat-hero__stamp .fresh-word--stamp {
    font-size: clamp(2.5rem, 4vw, 4rem);
    padding: 0.5rem 1.2rem 0.6rem;
}

.mandat-hero__deco {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    display: flex;
    gap: 4px;
    z-index: 3;
}

.mandat-hero__content {
    padding: var(--space-7) var(--space-7) var(--space-7) var(--space-9);
    background: var(--fresh-dark-d);
    color: #ffffff;
    overflow-y: auto;
}

.mandat-hero__name {
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, var(--fs-700));
    line-height: 0.95;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
}

.mandat-hero__role {
    color: var(--fresh-wind);
    font-weight: 700;
    font-size: var(--fs-200);
    margin: 0 0 var(--space-6);
}

.mandat-hero__section {
    margin-top: var(--space-6);
}

.mandat-hero__section h2 {
    font-weight: 800;
    font-size: var(--fs-400);
    margin: 0 0 var(--space-3);
    color: #ffffff;
}

.mandat-hero__list,
.mandat-hero__contact-list {
    list-style: none;
    padding-left: var(--space-5);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-300);
    line-height: 1.6;
}
/* Dreieck statt Quadrat als Marker — dasselbe Motiv wie in der Navigation */
.mandat-hero__list li,
.mandat-hero__contact-list li { position: relative; }
.mandat-hero__list li::before,
.mandat-hero__contact-list li::before {
    content: '';
    position: absolute;
    left: calc(var(--space-5) * -1);
    top: 0.62em;
    width: 7px;
    height: 9px;
    background: var(--fresh-wind);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Fallback-Angaben, solange person_facts/gremien_funktionen fehlen */
.mandat-hero__period {
    margin: var(--space-5) 0 0;
    font-size: var(--fs-300);
    color: var(--color-text-secondary);
}
.mandat-hero__ref {
    display: inline-block;
    margin-left: var(--space-2);
    background: var(--fresh-river-mid);
    color: #ffffff;
    font-size: var(--fs-100);
    font-weight: 700;
    padding: 0.2rem 0.5rem 0.25rem;
}
.mandat-hero__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}
.mandat-hero__chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: var(--fs-200);
    font-weight: 600;
    padding: 0.28rem 0.7rem 0.33rem;
}

/* === Personenseite: Bio neben den Stellungnahmen (06) === */
.mandat-two {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    align-items: start;
}
.mandat-two--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mandat-two__title {
    font-size: var(--fs-500);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 var(--space-4);
}
.mandat-two__bio .page-content p { color: var(--color-text-secondary); line-height: 1.65; }

.mandat-says { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-glass); }
.mandat-says__row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-5);
    align-items: center;
    padding: var(--space-4) var(--space-1);
    border-bottom: 1px solid var(--color-border-glass);
    color: #ffffff;
    text-decoration: none;
}
.mandat-says__date {
    font-weight: 700;
    font-size: var(--fs-200);
    color: var(--fresh-river-light);
    white-space: nowrap;
}
.mandat-says__title {
    display: block;
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1.12;
}
.mandat-says__topics {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
}
.mandat-says__tri { color: var(--fresh-rose); transition: transform 180ms ease; }
.mandat-says__row:hover .mandat-says__title { color: var(--fresh-wind); }
.mandat-says__row:hover .mandat-says__tri { transform: translateX(4px); }

@media (max-width: 900px) {
    .mandat-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}
@media (max-width: 560px) {
    .mandat-says__row { grid-template-columns: minmax(0, 1fr) auto; }
    .mandat-says__date { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .mandat-says__tri { transition: none; }
}


/* === Stellungnahme-Detail (Legacy) === */
/* === Stellungnahme-Detail === */
.stellungnahme-detail {
    max-width: 720px;
    margin: 0 auto;
}

.stellungnahme-detail__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

.stellungnahme-detail__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}
.stellungnahme-detail__author:hover .stellungnahme-detail__name { color: var(--fresh-rose); }

.stellungnahme-detail__photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
}
.stellungnahme-detail__name {
    display: block;
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1.1;
    transition: color 200ms;
}
.stellungnahme-detail__role {
    display: block;
    font-size: var(--fs-100);
    color: var(--fresh-wind);
    font-weight: 700;
    margin-top: 2px;
}
.stellungnahme-detail__date {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: var(--fs-200);
}

.stellungnahme-detail__body {
    font-size: var(--fs-400);
    line-height: 1.55;
}
.stellungnahme-detail__body p:first-child {
    font-size: var(--fs-500);
    color: var(--color-text-secondary);
    line-height: 1.4;
}


/* === Erfahrung-Detail === */
/* === Erfahrung-Detail === */
.erfahrung-detail {
    max-width: 720px;
    margin: var(--space-7) auto;
    text-align: center;
}
.erfahrung-detail__photo {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-md);
    object-fit: cover;
    margin: 0 auto var(--space-5);
    box-shadow: var(--shadow-card);
}
.erfahrung-detail__quote {
    font-weight: 700;
    font-size: var(--fs-600);
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}
.erfahrung-detail__meta {
    color: var(--color-text-secondary);
    font-size: var(--fs-300);
    margin: 0;
}


/* === Inverted-Body / Mitmachen-Plakat === */
/* === Inverted-Body (weiß für Mitmachen-Style) === */
.inverted-body {
    background: #ffffff;
    color: var(--fresh-dark-d);
}
.inverted-body strong { color: var(--fresh-dark-d); font-weight: 800; }

/* Mitmachen-Lead */
.mitmachen-lead {
    background: #ffffff;
    padding: var(--space-8) var(--space-6);
}
.mitmachen-lead__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
}
.mitmachen-lead__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, var(--fs-500));
    line-height: 1.2;
    color: var(--fresh-dark-d);
    margin: 0;
}
.mitmachen-lead__triple-tri {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Mitmachen Steps */
.mitmachen-steps {
    background: var(--fresh-dark-d);
    color: #ffffff;
    padding: var(--space-8) var(--space-6);
    position: relative;
    overflow: hidden;
}
.mitmachen-steps::before,
.mitmachen-steps::after {
    content: '';
    position: absolute;
    background: var(--fresh-rose);
    width: 200px;
    height: 200px;
}
.mitmachen-steps::before {
    top: 0; left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.mitmachen-steps::after {
    bottom: 0; right: 0;
    background: var(--fresh-wind);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.mitmachen-steps__head {
    max-width: 1100px;
    margin: 0 auto var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.mitmachen-steps__eyebrow {
    background: #ffffff;
    color: var(--fresh-dark-d);
    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);
    --rot: -2deg;
}
.mitmachen-steps__title { display: inline-block; }
.mitmachen-steps__title .fresh-word--stamp {
    font-size: clamp(2rem, 4vw, var(--fs-600));
    padding: 0.55rem 1.2rem 0.65rem;
}

.mitmachen-steps__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--space-5);
    align-items: start;
    position: relative;
    z-index: 1;
}
@media (max-width: 860px) {
    .mitmachen-steps__grid { grid-template-columns: 1fr; }
    .mitmachen-step__arrow { transform: rotate(90deg); justify-self: start; margin-left: var(--space-6); }
}

/* Entboxt: Schritte stehen frei, Pfeile verbinden den Prozess */
.mitmachen-step {
    padding: var(--space-4) 0;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    transition: transform var(--hover-ease), background 220ms ease, box-shadow var(--hover-ease);
}
.mitmachen-step--link {
    padding: var(--space-4) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    cursor: pointer;
}
.mitmachen-step--link:hover {
    background: var(--color-bg-elevated);
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card);
}
.mitmachen-step__cta {
    display: inline-block;
    margin-top: var(--space-4);
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.35rem 0.75rem 0.4rem;
    font-weight: 800;
    font-size: var(--fs-200);
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sticker);
}
.mitmachen-step--link:hover .mitmachen-step__cta { background: var(--fresh-rose-light); }
.mitmachen-step__arrow {
    align-self: center;
    display: flex;
    gap: 4px;
    opacity: 0.9;
}
.mitmachen-step__num {
    font-size: 5rem;
    font-weight: 900;
    line-height: 0.8;
    color: var(--fresh-rose);
    margin-bottom: var(--space-3);
}
.mitmachen-step__title {
    font-weight: 800;
    font-size: var(--fs-500);
    margin: 0 0 var(--space-3);
    color: #ffffff;
}
.mitmachen-step__body {
    font-size: var(--fs-300);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Stammtisch-Hinweis */
.mitmachen-stammtisch {
    background: #ffffff;
    padding: var(--space-9) var(--space-6);
    text-align: center;
}
.mitmachen-stammtisch__inner {
    max-width: 720px;
    margin: 0 auto;
}
.mitmachen-stammtisch__eyebrow {
    display: inline-block;
    background: var(--fresh-wind);
    color: #ffffff;
    padding: 0.35rem 0.75rem 0.4rem;
    font-weight: 700;
    font-size: var(--fs-200);
    margin-bottom: var(--space-3);
    --rot: -1.5deg;
    box-shadow: var(--shadow-sticker);
}
.mitmachen-stammtisch__title {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, var(--fs-700));
    line-height: 0.95;
    color: var(--fresh-dark-d);
    margin: 0 0 var(--space-4);
}
.mitmachen-stammtisch__body {
    font-size: var(--fs-400);
    color: var(--fresh-dark-a);
    line-height: 1.5;
    margin: 0 0 var(--space-5);
}
.mitmachen-stammtisch__cta {
    display: inline-block;
    background: var(--fresh-dark-d);
    color: #ffffff;
    padding: 0.6rem 1.2rem 0.7rem;
    text-decoration: none;
    font-weight: 800;
    font-size: var(--fs-300);
    box-shadow: var(--shadow-sticker);
    transition: background 200ms;
}
.mitmachen-stammtisch__cta:hover { background: var(--fresh-rose); }

/* Voices-Section */
.mitmachen-voices {
    background: var(--fresh-dark-d);
    padding: var(--space-9) var(--space-6);
}
.mitmachen-voices__head {
    max-width: 1100px;
    margin: 0 auto var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mitmachen-voices__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);
    --rot: -2deg;
}
.mitmachen-voices__title { display: inline-block; }
.mitmachen-voices__title .fresh-word--sticker {
    font-size: clamp(2rem, 4vw, var(--fs-600));
    padding: 0.55rem 1.2rem 0.65rem;
}

.voices-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* FAQ-Section */
.mitmachen-faq {
    background: #ffffff;
    padding: var(--space-9) var(--space-6);
}
.mitmachen-faq__head {
    max-width: 800px;
    margin: 0 auto var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mitmachen-faq__eyebrow {
    background: var(--fresh-dark-d);
    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);
    --rot: -2deg;
}
.mitmachen-faq__title { display: inline-block; }
.mitmachen-faq__title .fresh-word--stamp {
    font-size: clamp(2rem, 4vw, var(--fs-600));
    padding: 0.55rem 1.2rem 0.65rem;
}

@media (max-width: 768px) {
    .mitmachen-lead__inner { grid-template-columns: 1fr; }
}


/* === Landing-Page === */
/* === Landing-Page === */
.home-hero {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 580px;
    max-height: 880px;
    margin-top: calc(-1 * var(--space-7));  /* bleed bis Viewport-Oberkante */
    overflow: hidden;
    /* Claim und Wege-Leiste stapeln sich an der Unterkante */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Kerbe kommt von der Folge-Sektion (Peek-Stack) — Regel: Kerbe gehört
       zur oberen Sektion, d.h. das sichtbare Dreieck zeigt diese Sektion */
}
.home-hero__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* kein scale(): object-fit füllt die Fläche schon, der Zoom zog die Seite
       am Laptop 36px horizontal auf */
}
.home-hero__gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(5,10,13,0.05) 0%, rgba(5,10,13,0.55) 100%),
        linear-gradient(to bottom, rgba(5,10,13,0.30) 0%, rgba(5,10,13,0.10) 40%, rgba(5,10,13,0.85) 100%);
}
.home-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
}
.home-hero__claim {
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.home-hero__claim-line {
    display: inline-block;
    padding: 0.05em 0.6rem 0.15em;
    box-shadow: var(--shadow-sticker);
}
.home-hero__claim-line--1 {
    background: var(--fresh-dark-d);
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
}
.home-hero__claim-line--2 {
    background: var(--fresh-rose);
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    transform: rotate(-1.2deg);
}
.home-hero__sub {
    font-size: var(--fs-400);
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    margin: 0;
    max-width: 40ch;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* === Die drei Wege am Hero-Fuß (08) === */
.home-wege {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* schräge Oberkante — Echo der diagonalen Bahnen */
    clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%);
}
.home-weg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-6) clamp(var(--space-4), 2vw, var(--space-6)) var(--space-5);
    text-decoration: none;
    transition: filter 180ms ease;
}
.home-weg:hover { filter: brightness(1.12); }
.home-weg__title { font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.8rem); line-height: 1; }
.home-weg__sub { font-size: var(--fs-200); font-weight: 600; line-height: 1.35; opacity: 0.88; }
.home-weg__tri {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: currentColor;
    transition: transform 180ms ease;
}
.home-weg:hover .home-weg__tri { transform: translateX(4px); }

/* Farben: Wind trägt dunkle Schrift — Weiß auf #36c9c5 käme nur auf ~2:1 */
.home-weg--rose  { background: var(--fresh-rose);   color: var(--color-text-on-rose); }
.home-weg--wind  { background: var(--fresh-wind);   color: var(--fresh-dark-d); }
.home-weg--river { background: var(--fresh-dark-a); color: #ffffff; }

@media (max-width: 760px) {
    /* Handy: Wege gestapelt, nur Titel und Dreieck */
    .home-wege { grid-template-columns: minmax(0, 1fr); clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); }
    .home-weg { padding: var(--space-4) var(--space-5); }
    .home-weg:first-child { padding-top: var(--space-6); }
    .home-weg__sub { display: none; }
    .home-weg__tri { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .home-weg,
    .home-weg__tri { transition: none; }
}

.home-paths__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}
/* Plakat-Panels: Vollfarbe statt Card, 45°-Schnittecke als Markengeometrie */
.home-path {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    text-decoration: none;
    position: relative;
    min-height: 260px;
    border-radius: 0;
    /* 45°-Ecke oben rechts abgeschnitten (Logo-Dreieck) */
    clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
    transition: transform 220ms ease, filter 220ms ease;
}
.home-path--rose  { background: var(--fresh-rose);  color: #ffffff; }
.home-path--wind  { background: var(--fresh-wind);  color: var(--fresh-dark-d); }
.home-path--river { background: var(--fresh-river); color: #ffffff; }
/* mittleres Panel: Schnitt unten links — bewusste Asymmetrie */
.home-path--wind {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px));
}
.home-path:hover {
    transform: translateY(-4px);
    filter: brightness(1.06);
}
.home-path__num {
    font-size: var(--fs-700);
    font-weight: 800;
    line-height: 0.9;
    color: currentColor;
    opacity: 0.34;
    letter-spacing: -0.02em;
}
.home-path__title {
    color: currentColor;
    font-size: var(--fs-500);
    font-weight: 800;
    margin: 0;
    line-height: 1.05;
}
.home-path__body {
    color: currentColor;
    opacity: 0.82;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    font-weight: 600;
}
.home-path__cta {
    color: currentColor;
    font-size: var(--fs-300);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: auto;
}

/* Aktuelles Grid (Vorhaben/Erfolg/Stellungnahme) */
.home-aktuell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

/* Stimmen-Strip auf Home: nur 3, optisch klar als Vorschau */
.home-stimmen-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Footer-CTA */
.home-cta {
    background:
        linear-gradient(135deg, rgba(229,0,70,0.05), rgba(54,201,197,0.05)),
        var(--color-bg-section-c);
    padding: var(--space-9) var(--space-6);
    margin-top: 0;
    position: relative;
    overflow: hidden;
    /* 45°-Kerbe oben mittig — Logo-Geometrie als Sektionsübergang */
    clip-path: polygon(0 0, calc(50% - 48px) 0, 50% 48px, calc(50% + 48px) 0, 100% 0, 100% 100%, 0 100%);
}
.home-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.home-cta__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.25rem 0.7rem 0.3rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
}
.home-cta__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.05;
    color: #ffffff;
}
.home-cta__sub {
    color: var(--color-text-secondary);
    font-size: var(--fs-400);
    margin: 0;
    max-width: 620px;
}
.home-cta .kontakt-channels__list {
    max-width: 720px;
    margin-top: var(--space-3);
    width: 100%;
}

@media (max-width: 768px) {
    .home-hero { height: 88vh; min-height: 620px; }
}


/* === Vorhaben-Detail A + B === */
/* === Vorhaben-Detail Variante A — Editorial Long-Read === */
.vorhaben-detail { padding: 0; }
.vorhaben-a-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 380px;
    max-height: 600px;
    margin-top: calc(-1 * var(--space-7));
    overflow: visible;
}
.vorhaben-a-hero__photo {
    position: absolute; inset: 0;
    bottom: -28px;   /* Kerben-Regel: Foto ragt als Dreieck in den Content */
    background-size: cover;
    background-position: center;
    background-color: var(--fresh-river);
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 28px),
        calc(var(--notch-x, 30%) + 28px) calc(100% - 28px),
        var(--notch-x, 30%) 100%,
        calc(var(--notch-x, 30%) - 28px) calc(100% - 28px),
        0 calc(100% - 28px)
    );
}
.vorhaben-a-hero__photo--placeholder { background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a)); }
.vorhaben-a-hero__photo--illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-total) + 2rem) 10% 9rem;
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}
.vorhaben-a-hero__photo--illustration img { max-width: min(100%, 420px); max-height: 100%; object-fit: contain; }
/* Der Lesbarkeits-Verlauf ist für Fotos gedacht; über Illustrationen nur angedeutet */
.vorhaben-a-hero__photo--illustration ~ .vorhaben-a-hero__gradient { opacity: 0.35; }
.vorhaben-a-hero__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(5,10,13,0.30) 0%, rgba(5,10,13,0.05) 35%, rgba(5,10,13,0.6) 100%);
}
.vorhaben-a-hero__bridge {
    position: absolute;
    left: max(var(--space-6), 50% - 600px + var(--space-6));
    bottom: 0;
    transform: translateY(40%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - var(--space-7));
}
.vorhaben-a-hero__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    margin-left: 0.6rem;
    margin-bottom: -0.4rem;
    --rot: -2deg;
    box-shadow: var(--shadow-sticker);
    position: relative;
    z-index: 4;
}
.vorhaben-a-hero__title {
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.55rem 1.1rem 0.7rem;
    font-size: clamp(1.6rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    box-shadow: var(--shadow-sticker);
    max-width: 100%;
    margin: 0;
    --rot: -1deg;
    transform: rotate(var(--rot));
    transform-origin: left center;
}

/* Status-Track unter Hero — große Pfeile */
.vorhaben-a-track-wrap {
    max-width: 1100px;
    margin: var(--space-7) auto var(--space-6);
    padding: 0 var(--space-6);
}
.vorhaben-a-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
}
.vorhaben-a-track__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    flex: 1 1 0;
    min-width: 160px;
}
.vorhaben-a-track__tri.tri--arrow-right.tri--md { width: 16px; height: 32px; }
.vorhaben-a-track__step--done .vorhaben-a-track__tri    { color: #ffffff; }
.vorhaben-a-track__step--future .vorhaben-a-track__tri  { color: rgba(255,255,255,0.18); }
.vorhaben-a-track__step--current.vorhaben-a-track__step--accent-rose  .vorhaben-a-track__tri { color: var(--fresh-rose); }
.vorhaben-a-track__step--current.vorhaben-a-track__step--accent-wind  .vorhaben-a-track__tri { color: var(--fresh-wind); }
.vorhaben-a-track__step--current.vorhaben-a-track__step--accent-river .vorhaben-a-track__tri { color: var(--fresh-river-light); }
.vorhaben-a-track__label {
    font-size: var(--fs-200);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vorhaben-a-track__step--done .vorhaben-a-track__label    { color: var(--color-text-secondary); }
.vorhaben-a-track__step--future .vorhaben-a-track__label  { color: var(--color-text-tertiary); }
.vorhaben-a-track__step--current .vorhaben-a-track__label { color: #ffffff; font-size: var(--fs-300); }

/* 2-Spalter Body + Sticky Side */
.vorhaben-a-layout {
    max-width: 1100px;
    margin: var(--space-7) auto var(--space-9);
    padding: 0 var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-7);
    align-items: start;
}
.vorhaben-a-body { font-size: var(--fs-400); line-height: 1.65; }
.vorhaben-a-body h2 { font-size: var(--fs-500); margin: var(--space-6) 0 var(--space-3); }
.vorhaben-a-body h3 { font-size: var(--fs-400); margin: var(--space-5) 0 var(--space-2); }
.vorhaben-a-body p { margin: 0 0 var(--space-4); }
.vorhaben-a-side {
    position: sticky;
    top: var(--space-9);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.vorhaben-a-side__block {
    background: var(--color-bg-surface);
    border-left: 3px solid var(--fresh-rose);
    padding: var(--space-3) var(--space-4);
}
.vorhaben-a-side__label {
    display: block;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    color: var(--fresh-river-light);
    margin: 0 0 var(--space-2);
}
.vorhaben-a-side__lead { color: #ffffff; font-size: var(--fs-300); line-height: 1.45; margin: 0; }
.vorhaben-a-side__list { list-style: square; padding-left: var(--space-4); margin: 0; color: var(--color-text-secondary); }
.vorhaben-a-side__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vorhaben-a-side__tags a {
    color: var(--fresh-wind);
    text-decoration: none;
    font-size: var(--fs-200);
    font-weight: 600;
}
.vorhaben-a-side__date { color: var(--color-text-secondary); font-size: var(--fs-300); }

@media (max-width: 900px) {
    .vorhaben-a-layout { grid-template-columns: 1fr; }
    .vorhaben-a-side { position: static; }
}

/* === Vorhaben-Detail Variante B — Tape-Reel === */
.vorhaben-b-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 60vh;
    margin-top: calc(-1 * var(--space-7));
}
.vorhaben-b-hero__photo { position: relative; overflow: hidden; background: var(--fresh-river); }
.vorhaben-b-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vorhaben-b-hero__placeholder { position: relative; background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a)); width: 100%; height: 100%; }
.vorhaben-b-hero__text {
    padding: var(--space-9) var(--space-6) var(--space-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    background: var(--color-bg-section-b);
}
.vorhaben-b-hero__eyebrow {
    align-self: flex-start;
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
}
.vorhaben-b-hero__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.0;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.vorhaben-b-hero__desc { font-size: var(--fs-400); color: var(--color-text-secondary); margin: 0; }
.vorhaben-b-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vorhaben-b-hero__chip {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vorhaben-b-hero__topic { color: var(--fresh-wind); text-decoration: none; font-size: var(--fs-200); font-weight: 600; }

.vorhaben-b-body {
    max-width: 720px;
    margin: var(--space-8) auto var(--space-8);
    padding: 0 var(--space-6) var(--space-9);
}
.vorhaben-b-body__inner { font-size: var(--fs-400); line-height: 1.65; }
.vorhaben-b-body__inner h2 { font-size: var(--fs-500); margin: var(--space-6) 0 var(--space-3); }
.vorhaben-b-body__inner h3 { font-size: var(--fs-400); margin: var(--space-5) 0 var(--space-2); }

/* Sticky Status-Footer-Bar */
.vorhaben-b-statusbar {
    position: sticky;
    bottom: 0;
    z-index: 80;
    background: rgba(10,17,20,0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border-glass);
    padding: var(--space-3) var(--space-4);
}
.vorhaben-b-statusbar__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.vorhaben-b-statusbar__label { color: var(--fresh-river-light); font-size: var(--fs-100); letter-spacing: 0.08em; }
.vorhaben-b-statusbar__track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.vorhaben-b-statusbar__step {
    font-size: var(--fs-200);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem 0.3rem;
    border-radius: 2px;
}
.vorhaben-b-statusbar__step--done    { color: rgba(255,255,255,0.4); }
.vorhaben-b-statusbar__step--future  { color: rgba(255,255,255,0.25); }
.vorhaben-b-statusbar__step--current { color: #ffffff; background: var(--fresh-rose); }
.vorhaben-b-statusbar__step--current { color: #ffffff; background: var(--fresh-river-mid); }

@media (max-width: 768px) {
    .vorhaben-b-hero { grid-template-columns: 1fr; }
    .vorhaben-b-hero__photo { min-height: 240px; }
}


/* === Stellungnahme-Detail A + B === */
/* === Stellungnahme-Detail Variante A — Op-Ed === */
.stellungnahme-detail { padding: 0; }
.stellungnahme-a {
    max-width: 680px;
    margin: calc(var(--nav-h) + var(--space-7)) auto var(--space-9);
    padding: 0 var(--space-6);
}
.stellungnahme-a__head { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.stellungnahme-a__eyebrow {
    align-self: flex-start;
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
}
.stellungnahme-a__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    color: #ffffff;
}
.stellungnahme-a__lead {
    font-size: var(--fs-400);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}
.stellungnahme-a__byline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.stellungnahme-a__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
}
.stellungnahme-a__author-photo {
    width: 52px; height: 52px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background: var(--fresh-river-mid);
}
.stellungnahme-a__author-photo--placeholder { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); font-size: var(--fs-400); }
.stellungnahme-a__author-text { display: flex; flex-direction: column; }
.stellungnahme-a__author-name { font-weight: 800; font-size: var(--fs-300); color: #ffffff; }
.stellungnahme-a__author-role { font-size: var(--fs-100); letter-spacing: 0.06em; color: var(--fresh-river-light); }
.stellungnahme-a__date { color: var(--color-text-tertiary); font-size: var(--fs-200); margin-left: auto; }

.stellungnahme-a__body { font-size: var(--fs-400); line-height: 1.7; }
.stellungnahme-a__body h2 { font-size: var(--fs-500); margin: var(--space-6) 0 var(--space-3); color: #ffffff; }
.stellungnahme-a__body h3 { font-size: var(--fs-400); margin: var(--space-5) 0 var(--space-2); color: #ffffff; }
.stellungnahme-a__body p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.stellungnahme-a__body strong { color: #ffffff; }
.stellungnahme-a__related { margin-top: var(--space-8); }
.stellungnahme-a__related-eyebrow {
    background: var(--fresh-wind);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    --rot: -2deg;
    display: inline-block;
}

/* === Stellungnahme-Detail Variante B — Split === */
.stellungnahme-b {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-7);
    max-width: 1200px;
    margin: calc(var(--nav-h) + var(--space-7)) auto var(--space-9);
    padding: 0 var(--space-6);
    align-items: start;
}
.stellungnahme-b__side {
    position: sticky;
    top: var(--space-8);
}
.stellungnahme-b__side-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-bg-surface);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
}
.stellungnahme-b__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-river));
}
.stellungnahme-b__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 3rem;
    font-weight: 800;
}
.stellungnahme-b__author-name { font-size: var(--fs-400); font-weight: 800; color: #ffffff; }
.stellungnahme-b__author-role { font-size: var(--fs-100); letter-spacing: 0.06em; color: var(--fresh-river-light); }
.stellungnahme-b__divider { display: flex; gap: 4px; align-items: center; }
.stellungnahme-b__date { color: var(--color-text-secondary); font-size: var(--fs-200); }
.stellungnahme-b__topics { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stellungnahme-b__topics a { color: var(--fresh-wind); text-decoration: none; font-size: var(--fs-200); font-weight: 600; }
.stellungnahme-b__share-label { font-size: var(--fs-100); color: var(--fresh-river-light); letter-spacing: 0.08em; margin-top: var(--space-2); }
.stellungnahme-b__share { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }

.stellungnahme-b__main { max-width: 720px; min-width: 0; }
.stellungnahme-b__head { margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.stellungnahme-b__eyebrow {
    align-self: flex-start;
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
}
.stellungnahme-b__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.0;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.stellungnahme-b__lead {
    font-size: var(--fs-400);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
    padding-left: var(--space-4);
    border-left: 3px solid var(--fresh-rose);
}
.stellungnahme-b__body { font-size: var(--fs-400); line-height: 1.7; }
.stellungnahme-b__body h2 { font-size: var(--fs-500); margin: var(--space-6) 0 var(--space-3); color: #ffffff; }
.stellungnahme-b__body p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.stellungnahme-b__body strong { color: #ffffff; }
.stellungnahme-b__related { margin-top: var(--space-7); }
.stellungnahme-b__related-label { display: block; font-size: var(--fs-100); color: var(--fresh-river-light); letter-spacing: 0.08em; margin-bottom: var(--space-3); }

@media (max-width: 900px) {
    .stellungnahme-b { grid-template-columns: 1fr; }
    .stellungnahme-b__side { position: static; }
}


/* === Mandat-Detail Fullhero === */
/* === Mandat-Detailseite: Foto-Hero bis Top, Themen mit Icons, dezentes Zitat === */
.mandat-detail-main { padding: 0; }
.mandat-detail { color: #ffffff; }

.mandat-fullhero {
    position: relative;
    width: 100%;
    height: 76vh;
    min-height: 480px;
    max-height: 820px;
    margin-top: calc(-1 * var(--space-7));  /* eats site-main top padding so photo bleeds to viewport edge */
    overflow: visible;
}
.mandat-fullhero__photo {
    position: absolute;
    inset: 0;
    background-color: var(--fresh-river);
    background-image: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
.mandat-fullhero__photo--placeholder {
    background: linear-gradient(135deg, var(--fresh-river-mid), var(--fresh-dark-c));
}
.mandat-fullhero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5,10,13,0.55) 0%,
        rgba(5,10,13,0.10) 25%,
        rgba(5,10,13,0.10) 65%,
        rgba(5,10,13,0.85) 100%
    );
    pointer-events: none;
}
.mandat-fullhero__sticker-bridge {
    position: absolute;
    left: max(var(--space-6), 50% - 600px + var(--space-6));
    bottom: 0;
    transform: translateY(40%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    z-index: 4;
    max-width: calc(100% - var(--space-7));
}
.mandat-fullhero__firstname-sticker {
    background: var(--fresh-river-mid);
    color: #ffffff;
    padding: 0.3rem 0.7rem 0.36rem;
    font-weight: 700;
    font-size: var(--fs-300);
    letter-spacing: 0.02em;
    margin-left: 0.6rem;
    margin-bottom: -0.4rem;
    --rot: -2deg;
    z-index: 4;
    box-shadow: var(--shadow-sticker);
}
.mandat-fullhero__lastname-sticker {
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.6rem 1.2rem 0.7rem;
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    text-transform: uppercase;
    line-height: 1;
    --rot: -1.5deg;
    z-index: 3;
    box-shadow: var(--shadow-sticker);
}
.mandat-fullhero__role {
    margin-top: var(--space-3);
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.3rem 0.7rem 0.35rem;
    font-size: var(--fs-200);
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-sticker);
    align-self: flex-start;
}

@media (max-width: 768px) {
    .mandat-fullhero { height: 62vh; min-height: 360px; }
    .mandat-fullhero__sticker-bridge { left: var(--space-4); right: var(--space-4); max-width: calc(100% - var(--space-6)); }
}

/* Themen-Section auf der Detail-Page — full-bleed für die Flächen-Bänder,
   nur der Header bleibt im Content-Maß */
.mandat-themen-section {
    margin: 0;
}
.mandat-themen-section__head {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-6);
}
.mandat-themen-section__head { margin-bottom: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; }
.mandat-themen-section__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    padding: 0.22rem 0.6rem 0.28rem;
    font-size: var(--fs-100);
    letter-spacing: 0.06em;
    margin-left: var(--space-3);
    margin-bottom: -0.4rem;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
    position: relative;
    z-index: 2;
}
.mandat-themen-section__title { display: inline-block; }
.mandat-themen-section__title .fresh-word--sticker {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    padding: 0.5rem 1rem 0.6rem;
}

.mandat-themen-list { display: flex; flex-direction: column; gap: 0; }

/* ===== Variante "flaechen" (Default): 2 horizontale Flächen je Band,
   schmal (Icon) / breit (Text) alternierend — Echo der alten Website.
   Band-Farbe via --band (aus Frontmatter bg), Icon-Fläche automatisch
   dunkler abgesetzt. Kerbe wandert mit der Icon-Seite. ===== */
.mandat-thema {
    display: grid;
    grid-template-columns: 38fr 62fr;
    min-height: clamp(320px, 46vh, 520px);
    position: relative;
    background: var(--band, var(--fresh-dark-c));
    --notch-x: 20%;
}
.mandat-thema--reverse { grid-template-columns: 62fr 38fr; --notch-x: 80%; }
.mandat-thema--reverse .mandat-thema__visual { order: 2; }

/* Kerbe (Ausschnitt, siehe Kerben-Regel in components.css) sitzt unter der
   Icon-Seite des Bands DARÜBER. Die Seiten wechseln sich ab, also liegt sie
   gegenüber der eigenen Icon-Seite. */
.mandat-thema + .mandat-thema { --cut-x: calc(100% - var(--notch-x)); }

.mandat-thema__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-6);
}
/* Icon-Fläche: gleiche Band-Farbe, dunkler abgesetzt (2-Flächen-Look) */
.mandat-thema__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
}
.mandat-thema__visual img {
    position: relative;
    width: min(260px, 60%);
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
    transition: transform var(--hover-ease);
}
.mandat-thema:hover .mandat-thema__visual img,
.mandat-thema.is-scrollhover .mandat-thema__visual img { transform: scale(var(--hover-zoom)); }

.mandat-thema__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) clamp(var(--space-6), 6vw, var(--space-9));
    max-width: 720px;
}
.mandat-thema__title { font-size: clamp(1.8rem, 3.5vw, var(--fs-600)); font-weight: 800; margin: 0 0 var(--space-4); line-height: 1; }
.mandat-thema__body  { color: rgba(255,255,255,0.78); line-height: 1.65; }
.mandat-thema__body p { margin: 0 0 var(--space-2); }
.mandat-thema__body ul { list-style: square; padding-left: var(--space-5); }

/* ===== Variante "szenen": eine Szene pro Thema, zentriert, Gradient,
   Kerbe wandernd — Landing-Page-Ästhetik ===== */
.mandat-themen-list--szenen .mandat-thema,
.mandat-themen-list--szenen .mandat-thema--reverse {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: clamp(420px, 62vh, 640px);
    background: linear-gradient(165deg, var(--band, var(--fresh-dark-c)) 0%, var(--fresh-dark-omega) 130%) border-box;
}
.mandat-themen-list--szenen .mandat-thema--reverse {
    background: linear-gradient(15deg, var(--band, var(--fresh-dark-c)) 0%, var(--fresh-dark-omega) 130%) border-box;
}
.mandat-themen-list--szenen .mandat-thema__visual { padding: 0 0 var(--space-4); order: 0; }
.mandat-themen-list--szenen .mandat-thema__visual::before { display: none; }
.mandat-themen-list--szenen .mandat-thema__visual img { width: min(200px, 40vw); }
.mandat-themen-list--szenen .mandat-thema__text {
    padding: 0 var(--space-6) var(--space-8);
    max-width: 640px;
    align-items: center;
}

@media (max-width: 640px) {
    .mandat-thema, .mandat-thema--reverse { grid-template-columns: 1fr; }
    .mandat-thema__visual { max-width: 120px; }
    .mandat-thema--reverse .mandat-thema__visual { order: 0; }
}

/* Zitat dezent + spielerisch — wie eine Notiz am Rand */
.mandat-quote-aside {
    max-width: 540px;
    margin: var(--space-7) auto var(--space-7) calc(var(--space-7) + 12vw);
    position: relative;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border-left: 4px solid var(--fresh-wind);
    transform: rotate(-0.8deg);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.mandat-quote-aside__mark {
    position: absolute;
    top: -22px;
    left: -8px;
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--fresh-wind);
}
.mandat-quote-aside__text {
    margin: 0;
    padding: 0;
    font-size: var(--fs-400);
    font-style: italic;
    color: #ffffff;
    line-height: 1.35;
    font-weight: 600;
}
.mandat-quote-aside__attr {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-200);
    color: var(--fresh-river-light);
    letter-spacing: 0.03em;
}
@media (max-width: 768px) { .mandat-quote-aside { margin-left: var(--space-5); margin-right: var(--space-5); } }

/* Kontakt-Icons als runde Quadrate (wiederverwendet site-footer__social-link) */
.mandat-contact-section {
    max-width: 1100px;
    margin: var(--space-7) auto var(--space-9);
    padding: 0 var(--space-6);
}
.mandat-contact-icons {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.mandat-contact-icons .site-footer__social-link {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
}


/* === Unterstützen — editorial Look (PayPal/IBAN Diptychon, Förder-Sticker, Mithelfen-Liste, Quittung-Strips) === */

/* Diptychon-Grid */
.spenden-diptychon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-6);
}

/* Card: dunkles Surface, große Nummer, fresh.{wort}-ähnlicher Titel */
.spenden-card {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-7) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: background 200ms ease, border-color 200ms ease;
}
.spenden-card:hover { border-color: var(--fresh-river-mid); }

.spenden-card__num {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: var(--fresh-river-mid);
    opacity: 0.55;
    line-height: 0.85;
    letter-spacing: -0.02em;
    pointer-events: none;
}
.spenden-card__title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.spenden-card__hint {
    margin: 0;
    font-size: var(--fs-300);
    color: var(--color-text-secondary);
    line-height: 1.5;
    max-width: 38ch;
}

/* CTA — kompakter, editorial, mit Arrow-Triangle */
.spenden-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-3);
    padding: 0.85rem 1.4rem 0.95rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-400);
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.spenden-cta::after {
    content: '';
    width: 11px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spenden-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
.spenden-cta:hover::after { transform: translateX(4px); }
.spenden-cta--rose { background: var(--fresh-rose); }
.spenden-cta--rose:hover { background: var(--fresh-rose-light); }
.spenden-cta--wind { background: var(--fresh-wind); }
.spenden-cta--wind:hover { background: var(--fresh-wind-light); }

/* IBAN-Display — die Nummer wird zur Headline */
.iban-display {
    margin: var(--space-4) 0 var(--space-3);
    display: grid;
    gap: var(--space-4);
}
.iban-display__row { display: grid; gap: 6px; }
.iban-display__label {
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    color: var(--fresh-river-light);
    margin: 0;
}
.iban-display__value-wrap {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.iban-display__value {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    user-select: all;
}
.iban-display__value--small { font-size: var(--fs-400); letter-spacing: 0.05em; }
.iban-display__meta {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-300);
}

/* Copy-Button als Icon-Button (kein Text-Sticker mehr) */
.iban-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
    border-radius: 3px;
}
.iban-copy:hover { background: var(--fresh-wind); color: #ffffff; }
.iban-copy.is-copied { background: var(--fresh-wind); color: #ffffff; }
.iban-copy.is-copied::after {
    content: '✓ kopiert';
    margin-left: 8px;
    font-family: var(--font-display);
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.iban-copy.is-copied { width: auto; padding: 0 0.7rem; }

/* Förder-Block: Preis-Sticker neben Body */
.foerder-block {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: var(--space-7);
    align-items: start;
    margin-top: var(--space-4);
}
.foerder-block__price {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--fresh-wind);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transform: rotate(-2deg);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.foerder-block__price::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px;
    height: 80px;
    background: var(--fresh-rose);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0.85;
}
.foerder-block__from   { font-size: var(--fs-200); letter-spacing: 0.12em; opacity: 0.85; line-height: 1; }
.foerder-block__amount { font-size: clamp(3.2rem, 8vw, 5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em; }
.foerder-block__period { font-size: var(--fs-300); letter-spacing: 0.08em; line-height: 1.1; opacity: 0.9; }

.foerder-block__lead { font-size: var(--fs-400); color: #ffffff; margin: 0 0 var(--space-4); line-height: 1.45; }
.foerder-block__perks {
    list-style: square;
    padding-left: var(--space-5);
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.foerder-block__perks li::marker { color: var(--fresh-rose); }

@media (max-width: 700px) {
    .foerder-block { grid-template-columns: 1fr; gap: var(--space-5); }
    .foerder-block__price { align-self: flex-start; max-width: 240px; }
}

/* Mithelfen — Editorial Numbered List, keine Cards */
.mithelfen-list {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-7);
}
.mithelfen-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.mithelfen-item__num {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 0.85;
    color: var(--fresh-rose);
    letter-spacing: -0.02em;
}
.mithelfen-item:nth-child(2) .mithelfen-item__num { color: var(--fresh-wind); }
.mithelfen-item:nth-child(3) .mithelfen-item__num { color: var(--fresh-river-light); }
.mithelfen-item:nth-child(4) .mithelfen-item__num { color: var(--fresh-rose); }
.mithelfen-item__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-500);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.05;
    letter-spacing: -0.005em;
}
.mithelfen-item__text p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-300); line-height: 1.55; max-width: 42ch; }

@media (max-width: 800px) {
    .mithelfen-list { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Quittung — Info-Strips */
.quittung-intro {
    font-size: var(--fs-400);
    color: var(--color-text-secondary);
    max-width: 56ch;
    margin: 0 0 var(--space-6);
    line-height: 1.55;
}
.quittung-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.quittung-rule {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4) var(--space-5) var(--space-5) 0;
    border-top: 1px solid var(--color-border-subtle);
}
.quittung-rule__marker { padding-top: 6px; }
.quittung-rule__title { margin: 0 0 var(--space-1); font-size: var(--fs-400); font-weight: 800; color: #ffffff; line-height: 1.1; }
.quittung-rule p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-300); line-height: 1.55; }
.quittung-outro { color: var(--color-text-secondary); font-size: var(--fs-300); margin: 0; }
.quittung-outro a { color: var(--fresh-wind); text-decoration: underline; }


/* === Themen-Cloud (Standalone-Page) === */
/* === Themen Cloud === */
.themen-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.themen-cloud__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    background: var(--color-bg-elevated);
    padding: 0.6rem 1.1rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-subtle);
    transition: background 200ms, transform 200ms;
}

.themen-cloud__item:hover {
    background: var(--fresh-rose);
    color: var(--color-text-on-rose);
}

.themen-cloud__name {
    font-weight: 800;
    font-size: var(--fs-400);
    letter-spacing: -0.01em;
}

.themen-cloud__count {
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.themen-cloud__item:hover .themen-cloud__count {
    color: var(--color-text-on-rose);
    opacity: 0.8;
}

.themen-filter-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.themen-filter-eyebrow {
    background: var(--color-accent-primary);
    color: var(--color-text-on-rose);
    padding: 0.3rem 0.7rem 0.35rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--fs-200);
}

.themen-filter-title {
    font-weight: 800;
    font-size: var(--fs-500);
    margin: 0;
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.35rem 0.9rem 0.45rem;
    box-shadow: var(--shadow-sticker);
}

.themen-filter-clear {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--fs-200);
    margin-left: auto;
    font-weight: 600;
}
.themen-filter-clear:hover { color: var(--fresh-rose); }

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

.generic-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.generic-card a {
    display: block;
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}
.generic-card h3 { margin: 0 0 var(--space-2); font-weight: 800; }
.generic-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-200); }
.generic-card:hover { background: var(--color-bg-elevated); }


/* === Unterstützen: Transparenz / Kosten === */
.kosten-hero { margin-bottom: var(--space-6); }
.kosten-hero__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.kosten-hero__amount {
    font-weight: 800;
    font-size: clamp(3.5rem, 7vw, var(--fs-700));
    line-height: 0.9;
    color: var(--fresh-wind);
    letter-spacing: -0.01em;
}
.kosten-hero__label {
    max-width: 460px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.kosten-hero__label strong { color: #ffffff; }
.kosten-intro { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }

.kosten-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}
.kosten-item { position: relative; padding-top: 1.3rem; }
.kosten-item__amount {
    position: absolute;
    top: 0; left: 0;
    background: var(--fresh-rose);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--fs-400);
    padding: 0.25rem 0.8rem 0.35rem;
    box-shadow: var(--shadow-sticker);
    z-index: 1;
    --rot: -2deg;
}
.kosten-item--wind .kosten-item__amount { background: var(--fresh-wind); color: var(--fresh-dark-d); }
.kosten-item--river .kosten-item__amount { background: var(--fresh-river); }
.kosten-item__box {
    background: var(--color-bg-surface);
    padding: 2.4rem 1.3rem 1.3rem;
    min-height: 140px;
}
.kosten-item__title { font-weight: 800; font-size: var(--fs-400); margin: 0 0 var(--space-2); }
.kosten-item__body { color: var(--color-text-secondary); font-size: var(--fs-200); margin: 0; line-height: 1.5; }

.kosten-pledge {
    margin: var(--space-6) 0 0;
    padding-left: var(--space-5);
    list-style: square;
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.kosten-pledge li::marker { color: var(--fresh-wind); }

/* === Entscheidungsphase: Varianten-Label === */
.variant-tag {
    display: inline-block;
    background: var(--fresh-wind);
    color: var(--fresh-dark-d);
    font-weight: 800;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem 0.3rem;
    margin: var(--space-8) 0 var(--space-4);
}
.variant-tag:first-of-type { margin-top: var(--space-6); }

/* === Pfade Variante A1: Diagonale Bahnen === */



/* === Unterstützen: Transparenz / Kosten === */
.kosten-hero { margin-bottom: var(--space-6); }
.kosten-hero__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.kosten-hero__amount {
    font-weight: 800;
    font-size: clamp(3.5rem, 7vw, var(--fs-700));
    line-height: 0.9;
    color: var(--fresh-wind);
    letter-spacing: -0.01em;
}
.kosten-hero__label {
    max-width: 460px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.kosten-hero__label strong { color: #ffffff; }
.kosten-intro { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }

.kosten-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}
.kosten-item { position: relative; padding-top: 1.3rem; }
.kosten-item__amount {
    position: absolute;
    top: 0; left: 0;
    background: var(--fresh-rose);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--fs-400);
    padding: 0.25rem 0.8rem 0.35rem;
    box-shadow: var(--shadow-sticker);
    z-index: 1;
    --rot: -2deg;
}
.kosten-item--wind .kosten-item__amount { background: var(--fresh-wind); color: var(--fresh-dark-d); }
.kosten-item--river .kosten-item__amount { background: var(--fresh-river); }
.kosten-item__box {
    background: var(--color-bg-surface);
    padding: 2.4rem 1.3rem 1.3rem;
    min-height: 140px;
}
.kosten-item__title { font-weight: 800; font-size: var(--fs-400); margin: 0 0 var(--space-2); }
.kosten-item__body { color: var(--color-text-secondary); font-size: var(--fs-200); margin: 0; line-height: 1.5; }

.kosten-pledge {
    margin: var(--space-6) 0 0;
    padding-left: var(--space-5);
    list-style: square;
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.kosten-pledge li::marker { color: var(--fresh-wind); }

/* === Entscheidungsphase: Varianten-Label === */
.variant-tag {
    display: inline-block;
    background: var(--fresh-wind);
    color: var(--fresh-dark-d);
    font-weight: 800;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem 0.3rem;
    margin: var(--space-8) 0 var(--space-4);
}
.variant-tag:first-of-type { margin-top: var(--space-6); }

/* === Pfade Variante A1: Diagonale Bahnen === */



/* === Home-Stack: Sections stapeln beim Scrollen (Prototyp sticky-stack) ===
   Jede Section bleibt mit wachsendem Offset kleben; am Ende ist von jeder
   ein Streifen inkl. Kerben-Oberkante sichtbar. Nur Desktop — auf Mobile
   sind die Sections höher als der Viewport, dort normaler Fluss. */
@media (min-width: 900px) {
    .home-stack > section,
    .home-stack > .photo-divider {
        position: sticky;
    }
    /* Hero scrollt normal weg. Jeder Peek-Streifen liegt vollständig UNTER der
       Navbar samt Logo-Kerbe (--nav-total), sonst verschwindet die erste
       gestapelte Sektion bis auf ihre Kerbe dahinter. Schrittweite 34px,
       damit der Stapel sichtbar bleibt und nicht nahtlos wirkt. */
    .home-stack > *:nth-child(1) { position: static; }
    .home-stack > *:nth-child(2) { top: var(--nav-total);                --notch-x: 22%; }
    .home-stack > *:nth-child(3) { top: calc(var(--nav-total) + 34px);   --notch-x: 64%; }
    .home-stack > *:nth-child(4) { top: calc(var(--nav-total) + 68px);   --notch-x: 38%; }
    .home-stack > *:nth-child(5) { top: calc(var(--nav-total) + 102px);  --notch-x: 80%; }
    .home-stack > *:nth-child(6) { top: calc(var(--nav-total) + 136px);  --notch-x: 30%; }
    .home-stack > *:nth-child(7) { top: calc(var(--nav-total) + 170px);  --notch-x: 58%; }
    .home-stack > *:nth-child(8) { top: calc(var(--nav-total) + 204px);  --notch-x: 74%; }

    /* Kerbe an der Oberkante aller Folge-Sections */
    .home-stack > *:nth-child(n+2) {
        clip-path: polygon(
            0 0,
            calc(var(--notch-x, 50%) - 28px) 0,
            var(--notch-x, 50%) 28px,
            calc(var(--notch-x, 50%) + 28px) 0,
            100% 0, 100% 100%, 0 100%
        );
    }
    /* home-cta hat bereits eine eigene Kerbe — Oberkanten-Kerbe ersetzt sie */
    .home-stack > .home-cta { clip-path: polygon(
        0 0,
        calc(var(--notch-x, 50%) - 28px) 0,
        var(--notch-x, 50%) 28px,
        calc(var(--notch-x, 50%) + 28px) 0,
        100% 0, 100% 100%, 0 100%
    ); }

    /* Szene-Gefühl: Sections füllen den Viewport großzügig, Inhalt zentriert */
    .home-stack > section:not(.home-hero) {
        min-height: 88vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Subtile Gradienten statt flacher Flächen (Prototyp-Ästhetik) — alle Viewports */
.home-stack > .home-bilanz-wrap {
    background: linear-gradient(200deg, var(--fresh-dark-omega) 0%, var(--fresh-dark-d) 60%, #14232b 100%);
}
.home-stack > .politik-section--a {
    background: linear-gradient(160deg, var(--fresh-dark-c) 0%, var(--fresh-dark-d) 70%);
}
.home-stack > .politik-section--c {
    background: linear-gradient(15deg, var(--fresh-dark-d) 0%, var(--fresh-dark-b) 100%);
}
.home-stack > .politik-section--b {
    background: linear-gradient(185deg, var(--fresh-dark-d) 0%, var(--fresh-dark-omega) 100%);
}

/* === Stellungnahme-Detail: Kopf (06) === */
.stmt { padding-bottom: var(--space-8); }
.stmt__head {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + var(--space-8)) var(--space-6) var(--space-6);
}
.stmt__crumb { font-size: var(--fs-200); color: var(--color-text-tertiary); margin: 0; }
.stmt__crumb a { color: var(--color-text-secondary); text-decoration: none; }
.stmt__crumb a:hover { color: var(--fresh-wind); }

.stmt__topics {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: var(--space-5) 0 var(--space-4);
}
.stmt__topic {
    display: inline-block;
    font-weight: 700;
    font-size: var(--fs-100);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.55rem 0.4rem;
    text-decoration: none;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2deg);
}
.stmt__topic--rose  { background: var(--fresh-rose);      color: var(--color-text-on-rose); }
.stmt__topic--wind  { background: var(--fresh-wind);      color: var(--fresh-dark-d); transform: rotate(1.5deg); }
.stmt__topic--river { background: var(--fresh-river-mid); color: #ffffff; }

.stmt__title {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}
.stmt__lead {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-400);
    line-height: 1.45;
    color: var(--color-text-secondary);
    max-width: 58ch;
}

.stmt__by {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-glass);
    border-bottom: 1px solid var(--color-border-glass);
}
.stmt__author { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.stmt__author img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); }
.stmt__author b { display: block; font-size: var(--fs-300); font-weight: 800; line-height: 1.1; }
.stmt__author small { display: block; font-size: var(--fs-200); color: var(--fresh-river-light); }
.stmt__author:hover b { color: var(--fresh-wind); }
.stmt__date { margin-left: auto; font-size: var(--fs-200); color: var(--color-text-secondary); white-space: nowrap; }

@media (max-width: 480px) {
    .stmt__by { flex-wrap: wrap; }
    .stmt__date { margin-left: 0; }
}

.stmt__body {
    max-width: 720px;
    margin: var(--space-8) auto 0;
    padding: 0 var(--space-6);
    font-size: var(--fs-300);
    line-height: 1.7;
}
.stmt__body > p:first-child {
    font-size: var(--fs-400);
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.stmt__extras { max-width: 720px; margin: var(--space-7) auto 0; padding: 0 var(--space-6); }
.stmt__related-eyebrow {
    display: inline-block;
    background: var(--fresh-river-mid);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--fs-100);
    padding: 0.25rem 0.7rem 0.3rem;
    box-shadow: var(--shadow-sticker);
    --rot: -1.5deg;
    margin-bottom: var(--space-4);
}
.stmt__related-grid { display: grid; grid-template-columns: minmax(0, 420px); }


/* === Content-Bilder & Zitate (global für Stellungnahmen/Vorhaben/Themen) === */
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin: var(--space-5) 0;
    display: block;
}
.page-content figure { margin: var(--space-5) 0; }
.page-content figure img { margin: 0; }
.page-content figcaption { font-size: var(--fs-100); color: var(--color-text-tertiary); margin-top: var(--space-2); font-style: italic; }
/* Blockquote: zeilenweise weiße Sticker statt großem Block */
.page-content blockquote {
    margin: var(--space-6) 0;
    transform: rotate(-0.8deg);
    line-height: 1.35;
}
.page-content blockquote p {
    display: inline;
    margin: 0;
    background: #ffffff;
    color: var(--fresh-dark-d);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-400);
    padding: 0.15em 0.45em 0.2em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: var(--shadow-sticker);
}


/* === Mandat: weiße fresh.{nick}-Bridge — hängt ins Hero-Foto === */
.mandat-bridge {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 0;
}
.mandat-bridge__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-62%);
}
.mandat-bridge__eyebrow {
    background: var(--fresh-rose);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--fs-100);
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem 0.3rem;
    box-shadow: var(--shadow-sticker);
    --rot: -2deg;
    margin-bottom: -0.55em;   /* klebt an der Sticker-Oberkante */
    position: relative;
    z-index: 1;
    margin-right: 30%;
}
.mandat-bridge__word {
    background: #ffffff;
    color: var(--fresh-dark-d);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    padding: 0.4rem 1.1rem 0.5rem;
    box-shadow: var(--shadow-sticker);
    --rot: -1.2deg;
}
.mandat-bridge__nick { color: var(--fresh-rose); }

/* Kontakt-Icons in der Hero-Spalte */
.mandat-contact-icons--hero {
    list-style: none;
    display: flex;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
}

/* Zitat klein, weiß, getiltet am Ende der Hero-Infos */
/* Zitat: jede Zeile ihr eigener weißer Sticker (box-decoration-break) */
.mandat-hero__quote {
    margin: var(--space-6) 0 0;
    max-width: 440px;
    /* Zeilen-Sticker stoßen aneinander: 1em Text + 0.42em Padding */
    line-height: 1.42;
}
.mandat-hero__quote > span {
    display: inline;
    background: #ffffff;
    color: var(--fresh-dark-d);
    font-weight: 700;
    font-size: var(--fs-300);
    padding: 0.18em 0.5em 0.24em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: var(--shadow-sticker);
}


/* Mobile: Bänder 1-spaltig und seamless — Icon ohne eigene Fläche,
   ragt in die darüberliegende Sektion hinein (wiederkehrendes Pop-out) */
@media (max-width: 820px) {
    .mandat-thema,
    .mandat-thema--reverse {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .mandat-thema__visual { order: 0; padding: 0; }
    .mandat-thema__visual::before { display: none; }   /* kein dunkler Shade */
    .mandat-thema__visual img {
        width: min(150px, 42vw);
        display: block;
        margin: -55px auto 0;    /* zentriert, ragt in die obere Sektion */
        position: relative;
        z-index: 3;
    }
    /* erstes Band: nicht in den Hero/Bridge-Bereich ragen */
    .mandat-thema:first-child .mandat-thema__visual img { margin-top: var(--space-4); }
    /* Bridge kompakter, damit sie nicht ins Hero-Zitat läuft */
    .mandat-bridge__inner { transform: translateY(-42%); }
    .mandat-hero__content { padding-bottom: var(--space-8); }
    .mandat-thema__text {
        padding: var(--space-4) var(--space-6) var(--space-7);
        max-width: none;
    }
    /* Kerbe mittig, da 1-spaltig keine Icon-Seite mehr existiert */
    .mandat-thema { --notch-x: 50%; }
    .mandat-thema--reverse { --notch-x: 50%; }
}


/* === Mobile Scroll-Interaktionen (aktiv via .sh-on, siehe scrollhover.js) === */
@media (max-width: 760px) {
    /* Mandats-Card in der Mitte: Sticker-Akzent wie Desktop-Hover */
    .phase-card--mandat.is-scrollhover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-card); }
    .phase-card--mandat.is-scrollhover .phase-card__name-sticker {
        background: var(--fresh-rose);
        color: #ffffff;
    }
}

/* Sticky-CTA (Mitmachen): erscheint nach etwas Scroll, verschwindet am Formular */
.sticky-cta {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 90;
    background: var(--fresh-rose);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--fs-200);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.6rem 0.9rem 0.65rem;
    box-shadow: var(--shadow-card);
    transform: translateY(90px) rotate(-1.5deg);
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticky-cta.is-visible { transform: translateY(0) rotate(-1.5deg); }
@media (min-width: 761px) { .sticky-cta { display: none; } }

/* === Wischreihen auf dem Handy (09) ===
   Am Laptop bleiben die Raster, wie sie sind. Unter 760px wird daraus eine
   horizontale Reihe mit Snap; die nächste Karte schaut ~18% herein. */
@media (max-width: 760px) {
    .swipe-row {
        display: flex;
        grid-template-columns: none;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Randabstand der Sektion nach außen ziehen, damit die Reihe bis an
           den Bildschirmrand läuft */
        margin-inline: calc(var(--space-6) * -1);
        padding-inline: var(--space-6);
        scroll-padding-inline: var(--space-6);
        padding-bottom: var(--space-3);
    }
    .swipe-row::-webkit-scrollbar { display: none; }
    .swipe-row > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
        min-width: 0;
    }

    /* Sektionskopf bricht um: Sticker, darunter Button und Zaehler nebeneinander.
       Der bewusste Versatz gilt nur am Laptop. */
    .politik-block__head {
        --head-shift: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eyebrow ."
            "title title"
            "more count";
        row-gap: var(--space-4);
    }
    .politik-block__more { justify-self: start; }
    .politik-block__title .fresh-word--sticker { font-size: clamp(1.7rem, 8vw, 2.4rem); }

    .swipe-count {
        grid-area: count;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: var(--fs-200);
        letter-spacing: 0.04em;
        color: var(--color-text-tertiary);
        white-space: nowrap;
        justify-self: end;
        align-self: center;
    }
}

/* === Formulare: Mitgliedsantrag und Kontakt (.fresh-form) ===
   Nur Darstellung: die Grav-Form-Definitionen und form-conditional.js bleiben
   funktional wie sie waren. Nummerierte Gruppen über `section`-Marker
   (classes: form-step), Felder mit Fläche und klarer Unterkante, Fokus in
   Rose, Auswahl als Kacheln (outerclasses: form-choices). */
#mitgliedsformular .politik-section__inner { max-width: 860px; }

.fresh-form form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    counter-reset: form-step;
}
.fresh-form .form-field { grid-column: span 6; }
.fresh-form .form-field[aria-hidden="true"] { display: none; }
.fresh-form .form-field.is-wide { grid-column: 1 / -1; }
.fresh-form .form-field.is-narrow { grid-column: span 3; }
.fresh-form .form-field.is-narrow + .form-field { grid-column: span 9; }

/* Gruppenkopf mit laufender Nummer — die Nummer steht nicht in den Daten */
.fresh-form .form-step {
    grid-column: 1 / -1;
    counter-increment: form-step;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-1);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-glass);
}
.fresh-form .form-step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fresh-form .form-step h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.fresh-form .form-step h3::before {
    content: counter(form-step);
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--fresh-rose);
    color: var(--color-text-on-rose);
    font-size: var(--fs-300);
    transform: rotate(-3deg);
}
.fresh-form .form-step p {
    margin: 0;
    font-size: var(--fs-200);
    color: var(--color-text-tertiary);
}

/* Beschriftungen in normaler Schrift. Pflicht ist alles, was nicht
   "optional" oder "freiwillig" heißt — deshalb keine Sternchen. */
.fresh-form .form-label { margin-bottom: var(--space-2); }
.fresh-form .form-label label {
    font-size: var(--fs-200);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.fresh-form .required { display: none; }

.fresh-form input[type="text"],
.fresh-form input[type="email"],
.fresh-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-300);
    line-height: 1.4;
    color: #ffffff;
    background: #0f1b21;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 2px solid var(--fresh-river-light);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.8rem;
    transition: border-color 150ms ease, background 150ms ease;
}
.fresh-form textarea { min-height: 110px; resize: vertical; }
.fresh-form input::placeholder,
.fresh-form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.fresh-form input:focus,
.fresh-form textarea:focus {
    outline: 2px solid rgba(229, 0, 70, 0.45);
    outline-offset: 1px;
    border-bottom-color: var(--fresh-rose);
    background: var(--fresh-dark-d);
}
.fresh-form .form-description {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-100);
    color: var(--color-text-tertiary);
}

/* Auswahl als Kacheln (Mitgliedsart, Antwortweg) */
.fresh-form .form-choices .form-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.fresh-form .form-choices--4 .form-data { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fresh-form .form-choices .radio { position: relative; }
.fresh-form .form-choices input { position: absolute; opacity: 0; }
.fresh-form .form-choices label {
    display: block !important;
    cursor: pointer;
    padding: var(--space-4) var(--space-5) var(--space-4) 3.1rem;
    background: #0f1b21;
    border: 2px solid rgba(255, 255, 255, 0.14);
    transition: border-color 150ms ease, background 150ms ease;
}
.fresh-form .form-choices label::before {
    content: '';
    position: absolute;
    left: var(--space-5);
    top: 1.35rem;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}
.fresh-form .form-choices label b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1.1;
}
.fresh-form .form-choices label span {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-200);
    color: var(--color-text-secondary);
}
.fresh-form .form-choices .radio:has(input:checked) label {
    border-color: var(--fresh-rose);
    background: rgba(229, 0, 70, 0.1);
}
.fresh-form .form-choices .radio:has(input:checked) label::before {
    border-color: var(--fresh-rose);
    background: radial-gradient(circle, var(--fresh-rose) 0 4px, transparent 5px);
}
.fresh-form .form-choices .radio:has(input:focus-visible) label {
    outline: 3px solid rgba(229, 0, 70, 0.55);
    outline-offset: 2px;
}

/* Checkboxen und einfache Radios */
.fresh-form .form-field:not(.form-choices) input[type="checkbox"],
.fresh-form .form-field:not(.form-choices) input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0.1rem var(--space-3) 0 0;
    accent-color: var(--fresh-rose);
    flex-shrink: 0;
}
.fresh-form .form-field:not(.form-choices) .form-input-wrapper:has(> input[type="checkbox"]),
.fresh-form .form-field:not(.form-choices) .radio {
    display: flex;
    align-items: flex-start;
    line-height: 1.45;
}
.fresh-form .form-field:not(.form-choices) .radio + .radio { margin-top: var(--space-2); }

/* Betrags-Schnellwahl (js/form-conditional.js) */
.fresh-form .antrag-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.fresh-form .antrag-amounts button {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-300);
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.fresh-form .antrag-amounts button:hover { border-color: var(--fresh-wind); }
.fresh-form .antrag-amounts button[aria-pressed="true"] {
    border-color: var(--fresh-wind);
    background: rgba(54, 201, 197, 0.14);
}
.fresh-form .antrag-amounts button:focus-visible { outline: 3px solid rgba(54, 201, 197, 0.6); outline-offset: 2px; }

.fresh-form .buttons {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-glass);
}
.fresh-form .buttons button {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-400);
    line-height: 1;
    color: var(--color-text-on-rose);
    background: var(--fresh-rose);
    border: 0;
    padding: 0.9rem 1.4rem;
    cursor: pointer;
    box-shadow: var(--shadow-sticker);
}
.fresh-form .buttons button:hover { background: var(--fresh-rose-light); }
.fresh-form .buttons button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

.fresh-form .antrag-note {
    max-width: 40ch;
    margin: var(--space-4) 0 0;
    font-size: var(--fs-200);
    color: var(--color-text-secondary);
}

@media (max-width: 600px) {
    .fresh-form .form-field,
    .fresh-form .form-field.is-narrow,
    .fresh-form .form-field.is-narrow + .form-field { grid-column: 1 / -1; }
    .fresh-form .form-choices .form-data { grid-template-columns: 1fr; }
    .fresh-form .form-choices--4 .form-data { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .fresh-form input,
    .fresh-form textarea,
    .fresh-form .form-choices label { transition: none; }
}

/* Fließtext-Seiten (Manifest, Impressum, Datenschutz …): lesbare Zeilenlänge */
.site-main > .page-content { max-width: 68ch; }