/* === Bilanz-Counter === */
/* === Bilanz-Counter === */
.bilanz {
    /* kein Kachel-Container mehr — Zahlen stehen frei im Sektions-Hintergrund */
    padding: 0;
}

.bilanz__head { margin-bottom: var(--space-6); }

.bilanz__eyebrow {
    position: relative;
    z-index: 2;   /* Eyebrow liegt VOR dem Titel-Sticker */
    background: var(--color-accent-primary);
    color: var(--color-text-on-rose);
    padding: 0.4rem 0.85rem 0.45rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--fs-300);
}

.bilanz__title-wrap { margin: -0.7rem 0 0 1.6rem; }

.bilanz__title {
    background: #ffffff;
    color: var(--fresh-dark-d);
    padding: 0.5rem 1.1rem 0.6rem;
    font-weight: 800;
    font-size: var(--fs-500);
    margin: 0;
    box-shadow: var(--shadow-sticker);
}

.bilanz__title-accent { color: var(--fresh-river); }

.bilanz__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-6) var(--space-5);
}

/* Monumentale Zahl + Dreieck-Marker statt KPI-Kachel */
.bilanz__item {
    color: var(--color-text-primary);
    position: relative;
    padding-left: var(--space-4);
}

.bilanz__tri {
    position: absolute;
    left: 0;
    top: 0.75rem;
}

.bilanz__num {
    font-weight: 800;
    font-size: clamp(4.5rem, 8vw, var(--fs-700));
    line-height: 0.9;
    letter-spacing: -0.01em;
}

.bilanz__label {
    font-size: var(--fs-300);
    margin-top: var(--space-2);
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text-secondary);
}


/* === 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 180ms 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;
}
.phase-card__img--illustration {
    width: auto;
    height: 88%;
    object-fit: contain;
}
.phase-card__hero-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
}

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

.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(-3px);
    box-shadow: var(--shadow-card);
}
.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-card {
    position: relative;
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 4px);
    transition: background 200ms, transform 200ms;
}
.stellungnahme-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fresh-rose);
}
.stellungnahme-card:hover {
    background: var(--color-bg-elevated);
    transform: translateX(2px);
    box-shadow: var(--shadow-card);
}
.stellungnahme-card__link { display: block; color: inherit; text-decoration: none; }

.stellungnahme-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.stellungnahme-card__photo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.stellungnahme-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fresh-river-soft), var(--fresh-dark-a));
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    font-size: var(--fs-200);
}

.stellungnahme-card__author { display: flex; flex-direction: column; }
.stellungnahme-card__name { font-weight: 800; font-size: var(--fs-300); }
.stellungnahme-card__role {
    font-size: var(--fs-100);
    color: var(--fresh-river-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stellungnahme-card__date {
    margin-left: auto;
    font-size: var(--fs-100);
    color: var(--color-text-tertiary);
}

.stellungnahme-card__title {
    font-weight: 800;
    font-size: 1.4rem;
    margin: 0 0 var(--space-2);
    line-height: 1.1;
}
.stellungnahme-card__summary {
    color: var(--color-text-secondary);
    font-size: var(--fs-200);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}
.stellungnahme-card__more {
    display: inline-block;
    background: var(--fresh-dark-d);
    color: #ffffff;
    padding: 0.3rem 0.7rem 0.4rem;
    font-size: var(--fs-100);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sticker);
    transition: background 200ms;
}
.stellungnahme-card:hover .stellungnahme-card__more {
    background: var(--fresh-rose);
}


/* === Stimmen-Card „voice“ (Wix-Original + Cutout) === */
.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 240ms 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(0deg) translateY(-3px); 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 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.voice__cutoutimg {
    z-index: 1;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
/* Hover: Inhalt zoomt in Foto UND Cutout gleichermaßen — der Rahmen-Crop
   bleibt, nur der Cutout wächst sichtbar darüber hinaus */
.voice:hover .voice__photo,
.voice:hover .voice__cutoutimg,
.voice.is-scrollhover .voice__photo,
.voice.is-scrollhover .voice__cutoutimg {
    transform: translateX(-50%) scale(1.08);
}
.voice.is-scrollhover { transform: rotate(0deg) translateY(-3px); }

.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 sichtbar: Illustration darf bei Hover über die Card hinauswachsen */
    overflow: visible;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 250ms, background 250ms;
}
.thema-card:hover { transform: translateY(-3px); background: var(--color-bg-elevated); box-shadow: var(--shadow-card); z-index: 3; }

.thema-card__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: visible;
    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%;
    /* Pop-out: wächst bei Hover aus der Card heraus (origin unten) */
    transform-origin: bottom center;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    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(1.24) translateY(-7%);
}
/* Textzone blockt den unteren Teil der wachsenden Grafik */
.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;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--fresh-river-mid);
    color: #ffffff;
    overflow: hidden;
    transition: transform 180ms ease, opacity 180ms ease;
    text-decoration: none;
}
.card-mini-button:hover { transform: translateY(-1px) scale(1.06); }
.card-mini-button img { width: 70%; height: 70%; object-fit: contain; }
.card-mini-button--sz img,
.card-mini-button--mm img { filter: brightness(0) invert(1); }
.card-mini-button__abbr { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; }

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

.kontakt-form-section {
    margin: var(--space-8) 0 var(--space-9);
    background: var(--color-bg-surface);
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-lg);
}
.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;
}


/* === Modern Forms === */
/* ===================================================================
   Modern Forms — underline-only Inputs, custom Radio/Check, generous Padding
   Scope: .kontakt-form-section UND #mitgliedsformular (Mitmachen-Page).
   =================================================================== */
.kontakt-form-section,
#mitgliedsformular .form-wrapper {
    --form-line: rgba(255,255,255,0.18);
    --form-line-focus: var(--fresh-rose);
    --form-text: #ffffff;
    --form-muted: rgba(255,255,255,0.55);
}

.kontakt-form-section form,
#mitgliedsformular form {
    display: grid;
    gap: var(--space-6);
    max-width: 720px;
}

/* Field-Wrapper */
.kontakt-form-section .form-field,
#mitgliedsformular .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.kontakt-form-section .form-field[aria-hidden="true"],
#mitgliedsformular .form-field[aria-hidden="true"] { display: none; }

/* Label */
.kontakt-form-section .form-label label,
#mitgliedsformular .form-label label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--form-muted);
    transition: color 180ms ease;
}
.kontakt-form-section .form-label .required,
#mitgliedsformular .form-label .required {
    color: var(--fresh-rose);
    margin-left: 4px;
}

/* Text-Inputs — Underline-only */
.kontakt-form-section input[type=text],
.kontakt-form-section input[type=email],
.kontakt-form-section input[type=tel],
.kontakt-form-section input[type=number],
.kontakt-form-section textarea,
.kontakt-form-section select,
#mitgliedsformular input[type=text],
#mitgliedsformular input[type=email],
#mitgliedsformular input[type=tel],
#mitgliedsformular input[type=number],
#mitgliedsformular textarea,
#mitgliedsformular select {
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--form-line);
    color: var(--form-text);
    padding: 0.55rem 0.1rem 0.7rem;
    font-family: var(--font-body);
    font-size: var(--fs-400);
    font-weight: 500;
    width: 100%;
    border-radius: 0;
    transition: border-color 220ms cubic-bezier(.4, 0, .2, 1), background 220ms ease;
    appearance: none;
    -webkit-appearance: none;
}
.kontakt-form-section input::placeholder,
#mitgliedsformular input::placeholder,
.kontakt-form-section textarea::placeholder,
#mitgliedsformular textarea::placeholder { color: rgba(255,255,255,0.32); font-style: italic; }

.kontakt-form-section input:focus,
.kontakt-form-section textarea:focus,
.kontakt-form-section select:focus,
#mitgliedsformular input:focus,
#mitgliedsformular textarea:focus,
#mitgliedsformular select:focus {
    outline: 0;
    border-bottom-color: var(--form-line-focus);
    background: linear-gradient(to bottom, transparent 70%, rgba(229,0,70,0.04) 100%);
}
.kontakt-form-section .form-field:focus-within .form-label label,
#mitgliedsformular .form-field:focus-within .form-label label {
    color: var(--fresh-rose);
}
.kontakt-form-section textarea,
#mitgliedsformular textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* Custom Radio + Checkbox */
.kontakt-form-section .radio,
.kontakt-form-section .checkbox,
#mitgliedsformular .radio,
#mitgliedsformular .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 0.4rem 0.6rem 0.4rem 0;
    margin: 0;
}
.kontakt-form-section .form-data[data-grav-field="radio"],
.kontakt-form-section .form-data[data-grav-field="checkbox"],
#mitgliedsformular .form-data[data-grav-field="radio"],
#mitgliedsformular .form-data[data-grav-field="checkbox"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}
.kontakt-form-section input[type=radio],
#mitgliedsformular input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--form-line);
    border-radius: 50%;
    background: transparent;
    margin: 0;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    position: relative;
    flex-shrink: 0;
}
.kontakt-form-section input[type=radio]:hover,
#mitgliedsformular input[type=radio]:hover { border-color: var(--fresh-wind); }
.kontakt-form-section input[type=radio]:checked,
#mitgliedsformular input[type=radio]:checked {
    border-color: var(--fresh-rose);
    background: var(--fresh-rose);
    box-shadow: inset 0 0 0 3px var(--color-bg-surface);
}
.kontakt-form-section input[type=radio]:focus-visible,
#mitgliedsformular input[type=radio]:focus-visible { box-shadow: inset 0 0 0 3px var(--color-bg-surface), 0 0 0 3px rgba(229,0,70,0.4); }

.kontakt-form-section input[type=checkbox],
#mitgliedsformular input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--form-line);
    border-radius: 3px;
    background: transparent;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 180ms ease, background 180ms ease;
    position: relative;
}
.kontakt-form-section input[type=checkbox]:hover,
#mitgliedsformular input[type=checkbox]:hover { border-color: var(--fresh-wind); }
.kontakt-form-section input[type=checkbox]:checked,
#mitgliedsformular input[type=checkbox]:checked {
    background: var(--fresh-rose);
    border-color: var(--fresh-rose);
}
.kontakt-form-section input[type=checkbox]:checked::after,
#mitgliedsformular input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 12px;
    border: solid #ffffff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.kontakt-form-section .radio label,
.kontakt-form-section .checkbox label,
#mitgliedsformular .radio label,
#mitgliedsformular .checkbox label {
    font-family: var(--font-body);
    font-size: var(--fs-300);
    font-weight: 500;
    color: var(--form-text);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
}

/* Two-column-Layout für nebeneinander passende Felder (vorname/nachname, plz/ort) */
.kontakt-form-section form,
#mitgliedsformular form {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .kontakt-form-section form,
    #mitgliedsformular form { grid-template-columns: 1fr 1fr; }
    .kontakt-form-section .form-field--full,
    #mitgliedsformular .form-field--full,
    .kontakt-form-section .form-field:has(textarea),
    #mitgliedsformular .form-field:has(textarea),
    .kontakt-form-section .form-field:has([type="radio"]),
    #mitgliedsformular .form-field:has([type="radio"]),
    .kontakt-form-section .form-field:has([type="checkbox"]),
    #mitgliedsformular .form-field:has([type="checkbox"]) { grid-column: 1 / -1; }
    .kontakt-form-section .buttons,
    #mitgliedsformular .buttons { grid-column: 1 / -1; }
}

/* Submit-Button */
.kontakt-form-section .buttons,
#mitgliedsformular .buttons { margin-top: var(--space-4); }
.kontakt-form-section button[type=submit],
#mitgliedsformular button[type=submit] {
    justify-self: start;
    background: var(--fresh-rose);
    color: #ffffff;
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-400);
    letter-spacing: 0.02em;
    padding: 0.85rem 1.8rem 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(229,0,70,0.35);
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 3px;
}
.kontakt-form-section button[type=submit]::after,
#mitgliedsformular button[type=submit]::after {
    content: '';
    width: 12px;
    height: 20px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kontakt-form-section button[type=submit]:hover,
#mitgliedsformular button[type=submit]:hover {
    background: var(--fresh-rose-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(229,0,70,0.45);
}
.kontakt-form-section button[type=submit]:hover::after,
#mitgliedsformular button[type=submit]:hover::after { transform: translateX(4px); }

/* Erfolgs-Meldung nach Submit */
.kontakt-form-section .alert,
#mitgliedsformular .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;
}


/* === 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 auf allen Unterseiten: jede Sektion ragt in IHRER Farbe als
   Dreieck in die nächste (Position wandert per nth-child). Landing hat statt-
   dessen die Peek-Stack-Kerben. Letzte Sektion: Dreieck ragt in den Footer. */
main:not(.home-stack) > .politik-section::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(var(--notch-x, 30%) - 28px);
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 28px solid var(--section-bg, var(--color-bg-section-a));
    z-index: 2;
    pointer-events: none;
}
main:not(.home-stack) > .politik-section:nth-child(4n+1) { --notch-x: 26%; }
main:not(.home-stack) > .politik-section:nth-child(4n+2) { --notch-x: 70%; }
main:not(.home-stack) > .politik-section:nth-child(4n+3) { --notch-x: 44%; }
main:not(.home-stack) > .politik-section:nth-child(4n)   { --notch-x: 84%; }
.politik-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.politik-section--a { background: var(--color-bg-section-a); --section-bg: var(--color-bg-section-a); }
.politik-section--b { background: var(--color-bg-section-b); --section-bg: var(--color-bg-section-b); }
.politik-section--c { background: var(--color-bg-section-c); --section-bg: var(--color-bg-section-c); }
.politik-section--d { background: var(--color-bg-section-d); --section-bg: var(--color-bg-section-d); }

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

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

.stellungnahme-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: var(--space-4);
}

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

.politik-block__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "eyebrow . more" "title title title";
    column-gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-6);
    position: relative;
}
.politik-block__eyebrow { grid-area: eyebrow; }
.politik-block__title   { grid-area: title; }
.politik-block__more    { grid-area: more; }

.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: 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; 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(-3px);
    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-5);
    margin: var(--space-6) 0 0;
}

.phase-card__hero--press {
    height: 180px;
    background: var(--fresh-dark-c);
}
.phase-card__hero-placeholder--press {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--fresh-dark-c), var(--fresh-dark-a));
}

/* Outlet-Badge oben links (statt region) */
.phase-card__outlet-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 0.28rem 0.65rem 0.32rem;
    font-weight: 800;
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sticker);
    --rot: -1.5deg;
}
.phase-card__outlet-badge--rose  { background: var(--fresh-rose);  color: #ffffff; }
.phase-card__outlet-badge--wind  { background: var(--fresh-wind);  color: #ffffff; }
.phase-card__outlet-badge--river { background: var(--fresh-river); color: #ffffff; }
.phase-card__outlet-badge--sz    { background: #29293A;            color: #ffffff; }
.phase-card__outlet-badge--mm    { background: #408dd0;            color: #ffffff; }

/* Outlet-Logo zentriert auf CI-Background (statt Thumbnail) */
.phase-card__outlet-logo {
    max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    filter: brightness(0) invert(1);  /* SZ-Logo ist schwarz, auf dunklem CI-bg weiß ziehen */
}

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

.phase-card__press-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.phase-card__outlet-name { color: var(--fresh-river-light); font-weight: 700; }
.phase-card__date { color: var(--color-text-tertiary); margin-left: auto; }

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

/* Hover-Invert bereits durch .phase-card:hover behandelt */
.phase-card--press:hover .phase-card__outlet-name { color: var(--fresh-river); }
.phase-card--press:hover .phase-card__date { color: var(--fresh-dark-a); }

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