/* ==========================================================================
   FWO Site-weite Korrekturen & Vereinheitlichung
   Wird auf allen Frontend-Seiten geladen (fwo-core).
   ========================================================================== */

/* --- Header: Grid war "200px 100%" — die Nav-Spalte lief damit um die
       Logo-Breite über den Viewport (horizontaler Scrollbalken überall) ------ */

.elementor-element-c253a01 {
    grid-template-columns: 200px 1fr !important;
    align-items: center !important;
}

.elementor-element-15458367 {
    min-width: 0;
}

/* Logo bekommt Luft (Runde 10): 100px im 135px-Header statt randbündiger 135px */
.elementor-element-6dbf77cc img {
    height: 100px !important;
    width: auto !important;
}

/* Nav-Widget trägt margin-top 40px aus den Daten — verschob Nav (Desktop) und
   Burger (mobil) aus der Header-Mitte */
.elementor-element-372b1f90 {
    margin-top: 0 !important;
}

/* --- Footer-Bottom-Bar: ©-Zeilen lagen auf der Diagonale und rutschten je
       nach Fensterbreite ins Lila (links ist die Gelb-Fläche am dünnsten).
       Feedback-Runde 7: unterste Footer-Zeile wird durchgehend gelber Balken;
       der Shape-Divider in Section 16307921 verschwindet damit (gelb auf gelb). */
.elementor-element-16307921 {
    background: #F6D06A;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Runde 8: Übergang Lila→Gelb gerade statt Diagonale */
.elementor-location-footer .elementor-shape-bottom {
    display: none;
}

/* Rhythmus v2 (Runde 10): Header→Seitentitel einheitlich 56px auf allen Seiten
   (40px stecken in der Titelsektion selbst; Home behält den bündigen Slider).
   Der Abstand Trenner→Inhalt (64px Desktop / ~40px mobil) steckt in den
   Trenner-Containern — per bin/build-feedback-r10.php in den DATEN gesetzt,
   weil die Trenner-IDs pro Umgebung verschieden sind. */
body:not(.home) .elementor-location-header + .elementor {
    padding-top: 16px;
}

.elementor-element-6ce5627c {
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
}

/* --- Startseiten-Slider: Punkt-Navigation auf gelbem Kasten, damit sie sich
       vom Bildmotiv abhebt ---------------------------------------------------- */

.elementor-element-c7985aa .slick-dots {
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    bottom: 16px;
    padding: 9px 14px 7px;
    background: #F6D06A;
    border-radius: 8px;
    line-height: 0;
    box-shadow: 0 1px 6px rgba(39, 41, 43, 0.25);
}

.elementor-element-c7985aa .slick-dots li button {
    border-color: #783594 !important;
    background: transparent !important;
}

.elementor-element-c7985aa .slick-dots li.slick-active button,
.elementor-element-c7985aa .slick-dots li button:hover {
    background: #783594 !important;
    border-color: #783594 !important;
}

/* --- Sektions-Achse: alle Inhalts-Container rücken auf Desktop 250px ein.
       Der Margin kaskadiert auf Tablet/Mobile und schiebt dort den Inhalt aus
       dem Viewport (horizontaler Scroll auf fast allen Seiten).
       ⚠ Die Grenze lag bis 29.07. bei 1024px — zu niedrig: 250px Einzug plus
       1030px Inhalt brauchen rund 1300px. Zwischen 1025 und 1299 lief die
       Seite deshalb weiter über, auf Tablet quer und schmalem Desktop. ------- */

@media (max-width: 1299px) {
    /* Spenden */
    .elementor-element-c8c74c2,
    .elementor-element-85d2ee2,
    .elementor-element-3c297c3,
    /* Daran arbeiten wir (Intro-Sektion regelt ihre Margins selbst — Klon-ID) */
    .elementor-element-4d02d96,
    .elementor-element-1babe38,
    .elementor-element-577ac58,
    .elementor-element-ea64f7f,
    .elementor-element-62cbc11,
    .elementor-element-d52eb14,
    .elementor-element-a8d7385,
    .elementor-element-8871d65,
    .elementor-element-358288d,
    /* Über uns */
    .elementor-element-c09bc6f,
    .elementor-element-daa5a3b,
    .elementor-element-0987d0b,
    .elementor-element-5f61836,
    .elementor-element-2b2316a,
    /* Kontakt */
    .elementor-element-79bd778,
    /* Datenschutzerklärung */
    .elementor-element-ca96b2b,
    /* Footer — trägt denselben Einzug und war in dieser Liste bisher nicht
       enthalten; er lief dadurch auf JEDER Seite über */
    .elementor-element-6d96b39a,
    .elementor-element-1e562c2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Lange URLs (z. B. Datenschutzerklärung) dürfen umbrechen statt zu überlaufen */
.elementor-widget-text-editor a {
    overflow-wrap: anywhere;
}

/* Satzung-Accordion (Über uns): Unterlisten bekommen sichtbare Punkte —
   das Kit setzt list-style none, die Unterpunkte wirkten wie Fließtextzeilen */
.e-n-accordion .elementor-widget-text-editor ul {
    list-style: disc outside !important;
    padding-left: 1.3em !important;
    margin: 8px 0 14px;
}

.e-n-accordion .elementor-widget-text-editor ul li {
    list-style: disc outside !important;
}

/* Theme rendert zusätzlich ein ›-Pseudo-Element pro li → doppelte Marker */
.e-n-accordion .elementor-widget-text-editor ul li::before {
    content: none !important;
}

/* --- Startseite: Buttons zu den beiden weiteren Websites -------------------- */

.fwo-site-buttons {
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 28px;
}

.fwo-site-buttons .elementor-button {
    white-space: normal;
    text-align: left;
}

/* --- Zeitstrahl (Über uns): mobil einspaltig — Datum über Inhalt, Linie links,
       damit er gut lesbar und bedienbar bleibt --------------------------------- */

@media (max-width: 767px) {
    /* padding braucht !important — verliert sonst gegen htmega-Plugin-CSS,
       und die Linie läuft durch die Datums-Texte */
    .htmega-verticletimeline-style-2 .ht-ver-timeline--2 {
        flex-direction: column !important;
        padding-left: 36px !important;
        margin-bottom: 32px;
    }

    /* Mittellinie des Wrappers nach links */
    .htc-verctimeline-wrapper::before {
        left: 10px !important;
    }

    /* gelbes Hover-Segment auf die Linie legen */
    .htmega-verticletimeline-style-2 .ht-ver-timeline--2::before {
        left: 10px !important;
    }

    /* Punkt auf die Linie setzen (steht sonst abwechselnd links/rechts) */
    .htmega-verticletimeline-style-2 .vertical-time::before {
        left: -33px !important;
        right: auto !important;
        top: 4px !important;
    }

    .htmega-verticletimeline-style-2 .vertical-time,
    .htmega-verticletimeline-style-2 .timeline-content {
        width: 100% !important;
        max-width: none !important;
        text-align: left !important;
        padding: 0 !important;
    }

    /* Datum bleibt zweizeilig (Monat/Jahr), linksbündig über dem Titel;
       htmega rückt gerade Zeilen per margin-left 11px ein — nullen */
    .htmega-verticletimeline-style-2 .vertical-date {
        margin-bottom: 6px;
        margin-left: 0 !important;
    }
}

/* --- Mobile Navigation (Runde 8): Burger weiß; Dropdown vollbreit unter dem
       Header, gelb, Punkte mit Trennlinien, Hover/Aktiv lila. Elementor stellt
       das Nav-Widget ≤1024px auf Burger um (--dropdown-tablet). ---------------- */

@media (max-width: 1024px) {
    .elementor-element-372b1f90 .elementor-menu-toggle,
    .elementor-element-372b1f90 .elementor-menu-toggle svg {
        color: #fff;
        fill: #fff;
    }

    /* Anker für das vollbreite Dropdown ist das Header-Grid (position:relative);
       Nav-Spalte + Widget dürfen deshalb selbst nicht positioniert sein
       (≤767px setzt der spätere Mobile-Block beide wieder auf absolute) */
    .elementor-element-15458367,
    .elementor-element-372b1f90 {
        position: static !important;
    }

    /* Burger ankert direkt am Header-Grid (Nav-Spalte + Widget bleiben static,
       siehe oben) — top:50% zentriert ihn in jeder Header-Höhe, auch im
       geschrumpften Zustand.
       ⚠ Diese Regel stand bis 29.07. im ≤767px-Block. Elementor blendet den
       Burger aber schon ab 1024px ein: auf Tablet stand er dadurch ohne
       Ausrichtung mittig im Kopf (Elementors `margin: 0 auto`), 260–376px vom
       rechten Rand entfernt. Gilt jetzt im ganzen Burger-Bereich. */
    .elementor-element-372b1f90 .elementor-menu-toggle {
        position: absolute !important;
        right: 16px !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .elementor-element-372b1f90 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: auto !important;
        margin: 0;
        background: #F6D06A;
        box-shadow: 0 10px 18px rgba(39, 41, 43, 0.3);
        z-index: 199;
    }

    .elementor-element-372b1f90 .elementor-nav-menu--dropdown .elementor-item {
        color: #783594 !important;
        padding: 14px 24px !important;
        border-bottom: 1px solid rgba(120, 53, 148, 0.25);
        font-weight: 600;
    }

    .elementor-element-372b1f90 .elementor-nav-menu--dropdown li:last-child .elementor-item {
        border-bottom: none;
    }

    .elementor-element-372b1f90 .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-element-372b1f90 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
        background: #783594;
        color: #F6D06A !important;
    }
}

/* --- Mobil (Runde 8): Logo mittig, Header sticky, Logo schrumpft beim Scrollen
       (Klasse fwo-header-shrunk via site.js); Burger absolut rechts ------------ */

@media (max-width: 767px) {
    .elementor-location-header {
        position: sticky;
        top: 0;
        z-index: 200;
        background: #783594;
    }

    .elementor-element-c253a01 {
        grid-template-columns: 1fr !important;
    }

    .elementor-element-6dbf77cc {
        justify-self: center;
    }

    .elementor-element-6dbf77cc img {
        transition: height 0.2s ease;
    }

    body.fwo-header-shrunk .elementor-element-6dbf77cc img {
        height: 64px !important;
        width: auto !important;
    }

    /* Header-Grid hat min-height 135px aus dem Template — beim Schrumpfen lösen */
    .elementor-element-c253a01 {
        transition: min-height 0.2s ease;
    }

    body.fwo-header-shrunk .elementor-element-c253a01 {
        min-height: 80px !important;
        height: auto !important;
    }

    /* Slider: kompaktes Querformat statt 580px Höhe; cover behält den
       Bildausschnitt wie auf Desktop (Mitte). Das Widget-CSS setzt 580px auf
       der ganzen Wrapper-Kette — komplett auf auto. */
    .elementor-element-c7985aa,
    .elementor-element-c7985aa .htmega-advanced-slider-wrapper,
    .elementor-element-c7985aa .htmega-template-slide,
    .elementor-element-c7985aa .slick-list,
    .elementor-element-c7985aa .slick-track,
    .elementor-element-c7985aa .slick-slide,
    .elementor-element-c7985aa .slick-slide > div {
        height: auto !important;
        min-height: 0 !important;
    }

    .elementor-element-c7985aa .htmega-advns-slider-item {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
    }

    /* Luft zwischen Header und erster Überschrift (Home behält den bündigen Slider) */
    body:not(.home) .elementor-location-header + .elementor {
        padding-top: 32px;
    }

    /* Footer einspaltig im 24er-Raster: Blöcke mit gleichmäßigem Abstand,
       Bank + Navigation mit Haarlinie getrennt, kein toter Raum vor dem Balken */
    .elementor-element-1ab39431 {
        padding-top: 32px !important;
    }

    /* Haarlinie symmetrisch: über der Linie liegen row-gap 12 + ~15px
       Text-Margen (≈27), darunter padding 28 — !important nötig, das
       Template-CSS überschreibt Container-Paddings */
    .elementor-element-661a882a {
        row-gap: 12px !important;
    }

    .elementor-element-403e30e,
    .elementor-element-3e16ec9f {
        border-top: 1px solid rgba(246, 208, 106, 0.35);
        padding-top: 28px !important;
    }

    .elementor-element-3e16ec9f {
        margin-bottom: 0 !important;
    }

    .elementor-element-6d96b39a {
        margin-bottom: 32px !important;
    }
}

/* --- Vertikaler Rhythmus, seitenübergreifend vereinheitlicht:
       Seitentitel → erster Inhalt 48px · zwischen Inhalts-Sektionen 80px ------ */

/* Titel-Sektionen tragen seit Runde 10 KEINE eigene Marge mehr — der komplette
   Trenner→Inhalt-Abstand liegt im Trenner-Container (Daten, r10-Skript) */
.elementor-element-62dbc6d,     /* Daran arbeiten wir: Titel */
.elementor-element-662714f {    /* Spenden: Titel */
    margin-bottom: 0 !important;
}

.elementor-element-c13c0ef {    /* Home: Slider (war 40) */
    margin-bottom: 48px !important;
}

.elementor-element-cc89dbf,     /* Über uns: Titel + Selbstverständnis (war 0) */
.elementor-element-863d066,     /* Über uns: Vorstand (war 40) */
.elementor-element-cb1d1fb,     /* Über uns: Geschichte (war 40) */
.elementor-element-a13d57a,     /* Über uns: Kampagnen (war 40) */
.elementor-element-c9187be {    /* Spenden: Intro/Fördermitglied (war 40) */
    margin-bottom: 80px !important;
}

/* --- Inhalts-Container tragen aus den Daten eine FESTE Breite (1030px), kein
       Maximum. Sobald der Viewport darunter liegt — also zwischen Tablet und
       schmalem Desktop — schieben sie sich aus dem Bild und die ganze Seite
       bekommt einen horizontalen Balken. Betrifft alle Seiten, nicht nur
       „Über uns". Ein Maximum sticht die feste Breite, ohne sie zu löschen. -- */

@media (max-width: 1299px) {
    .elementor .e-con.e-child {
        max-width: 100% !important;
    }

    /* Den 250px-Einzug strukturell auflösen statt Element-IDs aufzuzählen —
       die Liste weiter oben war lückenhaft und ließ Startseite, Spenden,
       „Daran arbeiten wir" und Impressum weiter überlaufen. Betroffen sind
       immer die Inhalts-Wrapper direkt unter einer Sektion.
       `auto` statt `0`: der Inhalt rückt in die Mitte, statt links zu kleben. */
    .elementor .e-con.e-parent > .e-con.e-child {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Zwischen 1000 und 1299 px ist der Inhalt schmaler als das Fenster, hat aber
   keinen eigenen Seitenrand — unterhalb 1000 px greift der bestehende
   prozentuale Rand (gemessen: 49px bei 985, 19px bei 375). Diese Lücke füllt
   der Deckel hier, damit der Übergang stufenlos bleibt. */
@media (min-width: 1000px) and (max-width: 1299px) {
    .elementor .e-con.e-parent > .e-con.e-child {
        max-width: calc(100% - 80px) !important;
    }
}

/* Der Formular-Titel auf „Spenden" trägt denselben Einzug, seine Regel steht
   aber in spendenformular.css und lädt nach dieser Datei — dort korrigiert. */

/* --- Geschichte: Fließtext + Zeitstrahl bilden eine Einheit und brauchen
       einen sichtbaren Schnitt zu den Dokument-Karten darunter ------------- */

/* !important auch beim Padding — Elementor setzt es auf der Element-Klasse */
.fwo-geschichte-raster {
    padding-bottom: 56px !important;
    margin-bottom: 56px !important;   /* die Daten tragen 40px */
    border-bottom: 1px solid rgba(120, 53, 148, 0.16);
}

/* --- Dokument-Karten (Über uns → Geschichte): Titelseiten-Vorschau statt
       Knopf. Maße bewusst hier und nicht in den Elementor-Daten — die
       Feinabstimmung läuft über CSS, nicht über einen erneuten Build-Lauf. -- */

/* Trenner zwischen den Einheiten — die Karten liegen sonst aufeinander */
.fwo-dok-karte + .fwo-dok-karte {
    padding-top: 44px !important;
    border-top: 1px solid rgba(120, 53, 148, 0.13);
}

/* Einspaltig stehen Vorschau und Metaangaben sonst ohne Luft aufeinander —
   die Daten geben `row: 0` vor */
@media (max-width: 767px) {
    .fwo-dok-karte {
        row-gap: 28px !important;
    }
}

/* Inhalt links breit, rechts nur die Metaangaben. Die Daten geben zwei
   gleiche Spalten vor, deshalb hier überschrieben. */
@media (min-width: 768px) {
    .fwo-dok-karte {
        grid-template-columns: 2fr 1fr !important;
    }

    /* Die rechte Spalte trägt in den Daten width:90% — im schmalen Meta-Feld
       kostet das nur Platz */
    .fwo-dok-karte > .e-con:last-child {
        width: 100% !important;
    }
}

.fwo-dok-vorschau {
    margin-top: 20px;
}

/* Überschrift, die das Vorschaubild bereits gut lesbar trägt: optisch weg,
   für Screenreader und Gliederung aber vorhanden */
.fwo-dok-titel-still {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ohne Überschrift darüber braucht die Vorschau den Abstand nicht */
.fwo-dok-titel-still + .fwo-dok-vorschau {
    margin-top: 0;
}

/* Rand + Schatten, damit der Ausschnitt als Blatt lesbar ist und nicht in
   der Luft hängt; die weiche Kante unten deutet an, dass die Seite weitergeht */
.fwo-dok-vorschau a,
.fwo-dok-vorschau .elementor-widget-container > img {
    position: relative;
    display: block;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(120, 53, 148, 0.16);
    box-shadow: 0 2px 14px rgba(39, 41, 43, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fwo-dok-vorschau img {
    width: 100%;
    height: auto;
    display: block;
}

.fwo-dok-vorschau a:hover,
.fwo-dok-vorschau a:focus-visible {
    box-shadow: 0 8px 24px rgba(39, 41, 43, 0.2);
    transform: translateY(-2px);
}

/* Verweisblock rechts neben dem Ausschnitt */
.fwo-dok-zeile p {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
}

.fwo-dok-zeile .fwo-dok-art {
    color: #783594;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fwo-dok-zeile .fwo-dok-umfang {
    margin-top: 4px !important;
    color: #6b6b6b;
    font-size: 15px;
}

.fwo-dok-zeile .fwo-dok-text {
    margin-top: 14px !important;
    color: #313131;
    font-family: "Source Serif 4", serif;
    font-size: 15px;
    line-height: 1.6;
}

.fwo-dok-zeile .fwo-dok-laden {
    margin-top: 14px !important;
}

/* Verweis, kein Knopf — gleiche Sprache wie „weiterlesen" im Zeitstrahl */
.fwo-dok-zeile .fwo-dok-laden a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #783594;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.fwo-dok-zeile .fwo-dok-laden a span {
    border-bottom: 1px solid rgba(120, 53, 148, 0.35);
}

.fwo-dok-zeile .fwo-dok-laden a::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-bottom: 2px;
    border-bottom: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.fwo-dok-zeile .fwo-dok-laden a:hover span,
.fwo-dok-zeile .fwo-dok-laden a:focus-visible span {
    border-bottom-color: #783594;
}

.fwo-dok-zeile .fwo-dok-laden a:hover::before {
    transform: rotate(45deg) translate(1.5px, 1.5px);
}

/* Abspielen statt Herunterladen: Dreieck statt Pfeil nach unten */
.fwo-dok-zeile .fwo-dok-laden a.fwo-dok-video-start::before {
    width: 0;
    height: 0;
    margin-bottom: 0;
    border: 5px solid transparent;
    border-right-width: 0;
    border-left: 8px solid currentColor;
    transform: none;
}

.fwo-dok-zeile .fwo-dok-laden a.fwo-dok-video-start:hover::before {
    transform: translateX(2px);
}

.fwo-dok-herkunft {
    margin-top: 8px;
}

.fwo-dok-herkunft p {
    margin: 0;
}

/* --- Zeitstrahl „Geschichte des Vereins" (Über uns) ------------------------
       Der Strahl steht als schmales Beiwerk in der rechten Grid-Spalte neben
       dem Fließtext und darf die Seite nicht in die Länge ziehen. Zweispaltig
       liegen deshalb alle 24 Stationen in einem klebenden Feld mit eigenem
       Scrollbereich; einspaltig (mobil) greift stattdessen „Frühere Jahre".
       Jede Station trägt nur einen Anriss, der ausführliche Text steht im
       Overlay. Verhalten in site.js. ----------------------------------------- */

.fwo-zeitstrahl .fwo-tl-anriss {
    margin: 0;
}

.fwo-zeitstrahl .fwo-tl-detail {
    display: none;
}

/* „weiterlesen": Mikro-Verweis statt Knopf — der Strahl soll ruhig bleiben.
   Die Unterstreichung sitzt auf dem span, sonst zieht sie sich auch unter
   Lücke und Chevron durch. */
.fwo-zeitstrahl .fwo-tl-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: #783594;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.fwo-zeitstrahl .fwo-tl-open:hover,
.fwo-zeitstrahl .fwo-tl-open:focus-visible {
    background: none;
    color: #783594;
    text-decoration: none;
}

.fwo-zeitstrahl .fwo-tl-open::after {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

/* ── Ganze Station als eine Schaltfläche ─────────────────────────────────── */

.fwo-zeitstrahl .fwo-tl-klickbar {
    cursor: pointer;
}

.fwo-zeitstrahl .fwo-tl-klickbar:hover .fwo-tl-open span,
.fwo-zeitstrahl .fwo-tl-open:focus-visible span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.fwo-zeitstrahl .fwo-tl-klickbar:hover .fwo-tl-open::after {
    transform: rotate(45deg) translate(1.5px, -1.5px);
}

.fwo-zeitstrahl .fwo-tl-klickbar:hover .vertical-date .month,
.fwo-zeitstrahl .fwo-tl-klickbar:hover .vertical-date .month::after {
    background: #F2C24A !important;
}

/* ── Datumsplakette mit Zeiger zur Achse ─────────────────────────────────── */

/* Einzeilige Plakette: 24 zweizeilige Kästen waren zu viel Gelb im Bild */
.fwo-zeitstrahl .vertical-date .month {
    display: inline-block;
    position: relative;
    padding: 5px 11px 4px;
    border-radius: 6px 0 0 6px;
    background: #F6D06A;
    color: #783594;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.03em;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
}

.fwo-zeitstrahl .vertical-reverse .vertical-date .month {
    border-radius: 0 6px 6px 0;
}

/* Zeiger über die volle Plakettenhöhe — clip-path wächst mit, ein
   Border-Dreieck bräuchte eine feste Höhe.
   HT Mega belegt ::after auf .month bereits und gewinnt über die
   Spezifität, daher !important auf Position und Maßen. */
.fwo-zeitstrahl .vertical-date .month::after {
    content: "";
    position: absolute;
    top: 0 !important;
    bottom: 0 !important;
    right: -9px !important;
    left: auto !important;
    width: 9px !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: #F6D06A !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.fwo-zeitstrahl .vertical-reverse .vertical-date .month::after {
    right: auto !important;
    left: -9px !important;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* Einspaltig steht die Achse links, das Wechselspiel entfällt — alle Zeiger
   nach links */
@media (max-width: 767px) {
    .fwo-zeitstrahl .vertical-date .month {
        border-radius: 0 6px 6px 0;
    }

    .fwo-zeitstrahl .vertical-date .month::after {
        right: auto !important;
        left: -9px !important;
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
    }
}

/* ── Klebendes Scrollfeld (zweispaltig) ──────────────────────────────────── */

@media (min-width: 768px) {
    /* !important: Elementors Container-Regeln setzen position/overflow/align-self
       auf der Element-Klasse und laden nach dieser Datei */
    .e-con.fwo-zeitstrahl-spalte {
        --fwo-tl-rand-oben: 0px;
        --fwo-tl-rand-unten: 0px;

        align-self: start !important;   /* sonst dehnt das Grid die Zelle und sticky greift nie */
        position: sticky !important;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow-y: auto !important;
        padding-right: 14px;
        padding-bottom: 28px;
        scrollbar-width: thin;
        scrollbar-color: rgba(120, 53, 148, 0.35) rgba(120, 53, 148, 0.08);
        /* Ausblendung nur zur Seite, wo wirklich mehr kommt — sonst wirkt das
           Ende des Strahls wie ein Anschnitt (Umschaltung in site.js) */
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--fwo-tl-rand-oben),
            #000 calc(100% - var(--fwo-tl-rand-unten)),
            transparent 100%
        );
    }

    .e-con.fwo-zeitstrahl-spalte.fwo-tl-mehr-oben {
        --fwo-tl-rand-oben: 32px;
    }

    .e-con.fwo-zeitstrahl-spalte.fwo-tl-mehr-unten {
        --fwo-tl-rand-unten: 32px;
    }

    .fwo-zeitstrahl-spalte::-webkit-scrollbar {
        width: 6px;
    }

    .fwo-zeitstrahl-spalte::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(120, 53, 148, 0.08);
    }

    .fwo-zeitstrahl-spalte::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(120, 53, 148, 0.35);
    }

    .fwo-zeitstrahl-spalte:hover::-webkit-scrollbar-thumb {
        background: rgba(120, 53, 148, 0.55);
    }
}

/* Dritte Klasse gegen HT Megas eigenes `display: flex` auf der Station —
   gleiche Spezifität würde am Ladeort verlieren */
.fwo-zeitstrahl .htc-verctimeline-wrapper .fwo-tl-verborgen {
    display: none;
}

.fwo-zeitstrahl.fwo-tl-entfaltet .htc-verctimeline-wrapper .fwo-tl-verborgen {
    display: flex;
}

/* Zwei Klassen gegen die Button-Grundregel des Themes (inline-block, margin 0) */
.fwo-zeitstrahl .fwo-tl-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;   /* ohne definite Breite greift margin:auto am Button nicht */
    margin: 22px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: #783594;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.fwo-zeitstrahl .fwo-tl-toggle i {
    width: 7px;
    height: 7px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.fwo-zeitstrahl.fwo-tl-entfaltet .fwo-tl-toggle i {
    transform: translateY(1px) rotate(-135deg);
}

.fwo-zeitstrahl .fwo-tl-toggle:hover,
.fwo-zeitstrahl .fwo-tl-toggle:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Overlay */

body.fwo-tl-offen {
    overflow: hidden;
}

.fwo-tl-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(39, 41, 43, 0.55);
}

.fwo-tl-overlay[hidden] {
    display: none;
}

.fwo-tl-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px 48px 44px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(39, 41, 43, 0.3);
}

.fwo-tl-dialog:focus {
    outline: none;
}

/* Zwei Klassen gegen die globale Button-Regel des Themes (gelber Chip) */
.fwo-tl-overlay .fwo-tl-close {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 2px 8px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #783594;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

/* Die Theme-Regel für :hover setzt sonst die Schriftfarbe auf Gelb — das
   Kreuz verschwand auf dem gelben Grund */
.fwo-tl-overlay .fwo-tl-close:hover,
.fwo-tl-overlay .fwo-tl-close:focus-visible {
    background: #F6D06A;
    color: #783594;
}

.fwo-tl-odatum {
    margin: 0 0 4px;
    color: #783594;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fwo-tl-otitel {
    margin: 0 0 20px;
    color: #783594;
    font-family: "Source Sans 3", sans-serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.25;
}

.fwo-tl-otext {
    color: #313131;
    font-family: "Source Serif 4", serif;
    font-size: 17px;
    line-height: 1.7;
}

.fwo-tl-otext p {
    margin: 0 0 16px;
}

.fwo-tl-otext p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .fwo-tl-dialog {
        padding: 32px 24px 28px;
        max-height: 86vh;
    }

    .fwo-tl-otitel {
        font-size: 22px;
    }
}