/* fec-members.css — scoped styles for the FEC Membership relaunch (post 3615, slug membership-relaunch-2026).
   Body scope: body.fec-members. Loaded only on this page via functions.php (filemtime cache-bust).
   2026-06-23: CSS moved out of the in-page code module; Google Fonts @import repaired (was malformed);
   OUR MEMBERS section converted from a logo slider to a static tile grid (see end of file).
   Avenir is provided by the theme; Fraunces + Rubik imported below. The global footer and the
   'Get in touch' contact form are never selected here (locked theme defaults). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap');
html{scroll-behavior:smooth}

/* =========================================================================
   FEC — MEMBERSHIP RELAUNCH 2026   (lädt NUR auf /membership/, Page-ID 142)
   Alle Regeln gescoped unter body. Avenir kommt aus style.css
   (lokal), Fraunces + Rubik hier importiert (Fraunces wird sonst nur auf der
   Redesign-Home-Seite geladen).
   ========================================================================= */

/* ---------- SEKTION A: HERO ---------- */
body.fec-members .fec-mem-hero.et_pb_section {
    background-color: #283582 !important;
    padding: 236px 0 110px !important;
    margin: 0 !important;
    border-radius: 0 0 100px 100px !important;
    overflow: hidden;
}
body.fec-members .fec-mem-hero .et_pb_row { max-width: 1200px !important; width: 92% !important; }
body.fec-members .fec-mem-hero-eyebrow p {
    font-family: 'Rubik','Helvetica Neue',Arial,sans-serif !important;
    font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #3ca3dd !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important;
}
body.fec-members .fec-mem-hero-h1 {
    font-family: 'Avenir-Black','Avenir','Helvetica Neue',Arial,sans-serif !important;
    font-weight: 900 !important; color: #ffffff !important;
    font-size: 64px !important; line-height: 1.08 !important;
    letter-spacing: -0.01em !important; margin: 0 0 22px !important;
}
body.fec-members .fec-mem-hero-h1 span { display: block; }
body.fec-members .fec-mem-hero-h1 em {
    font-family: 'Fraunces',Georgia,'Times New Roman',serif !important;
    font-style: italic !important; font-weight: 400 !important; color: #3ca3dd !important;
}
body.fec-members .fec-mem-hero-lede p {
    font-family: 'Rubik',sans-serif !important; color: rgba(255,255,255,0.92) !important;
    font-size: 20px !important; line-height: 1.55 !important; font-weight: 400 !important;
    max-width: 640px; margin: 0 0 34px !important;
}
body.fec-members .fec-mem-cta {
    position: relative; display: inline-flex; align-items: center;
    margin: 0; width: max-content;
    font-family: 'Rubik',sans-serif !important; font-size: 18px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase; line-height: 100%;
    text-decoration: none; padding: 22px 34px; border-radius: 35px;
    color: #ffffff !important; background-color: transparent;
    transition: all 0.3s ease-in-out; transform: translateZ(0);
}
body.fec-members .fec-mem-cta--primary   { box-shadow: inset 0 0 0 2px #3ca3dd; }
body.fec-members .fec-mem-cta--secondary { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
body.fec-members .fec-mem-cta:hover { transform: scale(1.03); color: #ffffff !important; }
body.fec-members .fec-mem-cta--primary:hover { background-color: #3ca3dd; box-shadow: 10px 0 50px #3ca3dd, inset 0 0 0 2px #3ca3dd; }
body.fec-members .fec-mem-cta--secondary:hover { box-shadow: 10px 0 50px #3ca3dd, inset 0 0 0 1px rgba(255,255,255,0.65); }
@media (max-width: 980px) {
    body.fec-members .fec-mem-hero.et_pb_section { padding: 150px 0 80px !important; border-radius: 0 0 36px 36px !important; }
    body.fec-members .fec-mem-hero-h1 { font-size: clamp(34px, 9vw, 52px) !important; }
}
@media (max-width: 600px) {
    body.fec-members .fec-mem-cta { display: flex; justify-content: center; width: 100%; margin-right: 0; }
}

/* Fix: aweos färbt Headings; Textfarbe der Hero-H1 + Spans explizit auf Weiß
   (em-Akzent bleibt Cyan). Höhere Spezifität via .fec-mem-hero-Vorfahre. */
body.fec-members .fec-mem-hero .fec-mem-hero-h1,
body.fec-members .fec-mem-hero .fec-mem-hero-h1 span,
body.fec-members .fec-mem-hero .fec-mem-hero-h1-l1,
body.fec-members .fec-mem-hero .fec-mem-hero-h1-l2 {
    color: #ffffff !important;
}
body.fec-members .fec-mem-hero .fec-mem-hero-h1 em {
    color: #3ca3dd !important;
}

/* ---------- SEKTION A finalisiert: alten Template-Hero ausblenden ---------- */
body.fec-members .head-container { display: none !important; }

/* ---------- SEKTION B: HOW TO JOIN (3 PDFs als Karten) ---------- */
body.fec-members .fec-mem-join.et_pb_section {
    background-color: #f5f7fb !important;
    padding: 90px 0 !important;
    margin: 0 !important;
}
body.fec-members .fec-mem-join .et_pb_row { max-width: 1200px !important; width: 92% !important; }
body.fec-members .fec-mem-eyebrow {
    font-family:'Rubik','Helvetica Neue',Arial,sans-serif !important;
    font-size:13px !important; font-weight:500 !important; letter-spacing:0.18em !important;
    text-transform:uppercase !important; color:#3ca3dd !important; line-height:1 !important; margin:0 0 16px !important; padding:0 !important;
}
body.fec-members .fec-mem-join .fec-mem-h2 {
    font-family:'Avenir-Black','Avenir','Helvetica Neue',Arial,sans-serif !important;
    font-weight:900 !important; color:#2a2e3f !important; font-size:42px !important;
    line-height:1.12 !important; margin:0 0 16px !important;
}
body.fec-members .fec-mem-join .fec-mem-h2 em {
    font-family:'Fraunces',Georgia,'Times New Roman',serif !important;
    font-style:italic !important; font-weight:400 !important; color:#3ca3dd !important;
}
body.fec-members .fec-mem-join .fec-mem-lede {
    font-family:'Rubik',sans-serif !important; color:#5a6072 !important;
    font-size:19px !important; line-height:1.55 !important; max-width:620px; margin:0 0 40px !important;
}
body.fec-members .fec-mem-cards { display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; }
body.fec-members .fec-mem-card {
    display:flex; flex-direction:column; background:#ffffff; border:1px solid #e1e6ef;
    border-radius:20px; padding:32px 28px; text-decoration:none;
    transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s, border-color .4s;
}
body.fec-members .fec-mem-card:hover { transform: translateY(-6px); box-shadow:0 18px 40px rgba(40,53,130,0.12); border-color:#c9d4ea; }
body.fec-members .fec-mem-card-kicker {
    font-family:'Rubik',sans-serif !important; font-size:13px; font-weight:500; letter-spacing:0.16em;
    text-transform:uppercase; color:#3ca3dd; margin-bottom:16px; display:block;
}
body.fec-members .fec-mem-card-title {
    font-family:'Avenir-Black','Avenir',sans-serif !important; font-weight:900; font-size:21px;
    color:#2a2e3f; margin-bottom:10px; display:block; line-height:1.2;
}
body.fec-members .fec-mem-card-desc {
    font-family:'Rubik',sans-serif !important; font-size:15px; line-height:1.5; color:#5a6072;
    margin-bottom:22px; flex:1 1 auto; display:block;
}
body.fec-members .fec-mem-card-open {
    font-family:'Rubik',sans-serif !important; font-size:14px; font-weight:600; letter-spacing:0.04em;
    text-transform:uppercase; color:#283582; display:block; transition:color .3s;
}
body.fec-members .fec-mem-card:hover .fec-mem-card-open { color:#3ca3dd; }
body.fec-members .fec-mem-join-cta { margin-top:40px !important; }
body.fec-members .fec-mem-cta-solid {
    display:inline-flex; align-items:center; padding:22px 34px; border-radius:35px; line-height:100%;
    background:#283582; color:#ffffff !important; border:0;
    font-family:'Rubik',sans-serif !important; font-size:18px; font-weight:500; letter-spacing:0.04em;
    text-transform:uppercase; text-decoration:none; transition: all .3s ease-in-out;
}
body.fec-members .fec-mem-cta-solid:hover { background:#3ca3dd; border-color:#3ca3dd; box-shadow:0 0 40px rgba(60,163,221,0.45); transform:scale(1.03); }
@media (max-width:980px){
    body.fec-members .fec-mem-join.et_pb_section { padding:60px 0 !important; }
    body.fec-members .fec-mem-cards { grid-template-columns:1fr; }
    body.fec-members .fec-mem-join .fec-mem-h2 { font-size:32px !important; }
}

/* ---------- Top-Leiste: Hintergrund voll bis zum Rand (NUR /membership/) ----------
   Global ist .kontakt-head auf max-width:1200px/90% zentriert → Navy scheint seitlich
   durch. Hier: Hintergrund full-width, Inhalt (.row) bleibt mittig bei 1200px. */
body.fec-members .v2 { width: 100% !important; max-width: none !important; }
body.fec-members .kontakt-head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.fec-members .kontakt-head .row {
    width: 90% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Hero: exakte Abstände — Eyebrow→H1 = 16px (Module sitzen getrennt) */
body.fec-members .fec-mem-hero-eyebrow { margin: 0 !important; }
body.fec-members .fec-mem-hero-headline { margin: 16px 0 0 !important; }
body.fec-members .fec-mem-hero-headline .et_pb_text_inner { margin: 0 !important; }

/* Hero: untere Kante sauber — CTA-Buttons per flex-gap statt Außenabstand,
   damit der Abstand Buttons→Unterkante exakt = padding-bottom (110px) ist.
   Oben padding-top:236px => Logo→MEMBERSHIP ~110px = gleich wie unten. */
body.fec-members .fec-mem-hero-cta { margin: 0 !important; }
body.fec-members .fec-mem-hero-cta .et_pb_text_inner {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}

/* ---------- SEKTION C: BENEFITS (8 Punkte als Karten-Grid) ---------- */
body.fec-members .fec-mem-benefits.et_pb_section { background:#ffffff !important; padding:90px 0 !important; margin:0 !important; }
body.fec-members .fec-mem-benefits .et_pb_row { max-width:1200px !important; width:92% !important; }
body.fec-members .fec-mem-benefits .fec-mem-h2 {
    font-family:'Avenir-Black','Avenir','Helvetica Neue',Arial,sans-serif !important;
    font-weight:900 !important; color:#2a2e3f !important; font-size:42px !important;
    line-height:1.12 !important; margin:0 0 40px !important;
}
body.fec-members .fec-mem-benefits .fec-mem-h2 em {
    font-family:'Fraunces',Georgia,'Times New Roman',serif !important;
    font-style:italic !important; font-weight:400 !important; color:#3ca3dd !important;
}
body.fec-members .fec-mem-benefits-grid { display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; }
body.fec-members .fec-mem-benefit {
    background:#f5f7fb; border:1px solid #e1e6ef; border-radius:16px; padding:26px 24px;
    transition: transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s, border-color .4s;
}
body.fec-members .fec-mem-benefit:hover { transform:translateY(-5px); box-shadow:0 14px 32px rgba(40,53,130,0.10); border-color:#c9d4ea; }
body.fec-members .fec-mem-benefit-title { display:block; font-family:'Avenir-Black','Avenir',sans-serif !important; font-weight:900; font-size:18px; color:#2a2e3f; margin-bottom:8px; line-height:1.25; }
body.fec-members .fec-mem-benefit-desc { display:block; font-family:'Rubik',sans-serif !important; font-size:14px; line-height:1.5; color:#5a6072; }
@media (max-width:980px){
    body.fec-members .fec-mem-benefits.et_pb_section{ padding:60px 0 !important; }
    body.fec-members .fec-mem-benefits-grid{ grid-template-columns:repeat(2,1fr); }
    body.fec-members .fec-mem-benefits .fec-mem-h2{ font-size:32px !important; }
}
@media (max-width:600px){ body.fec-members .fec-mem-benefits-grid{ grid-template-columns:1fr; } }

/* Übergang Hero→Inhalt: die abgerundeten unteren Hero-Ecken geben den Seiten-
   hintergrund frei → der war weiß. Hinter dem Inhalt auf #F5F7FB setzen, damit
   das Navy in #F5F7FB (= How-to-join-BG) übergeht statt in Weiß. */
body.fec-members #main-content { background-color: #F5F7FB !important; }

/* ---------- SEKTION F: OUR MEMBERS (einheitliches Logo-Grid) ---------- */
body.fec-members .fec-mem-members.et_pb_section { background:#f5f7fb !important; padding:90px 0 !important; margin:0 !important; }
body.fec-members .fec-mem-members .et_pb_row { max-width:1200px !important; width:92% !important; }
body.fec-members .fec-mem-members .fec-mem-h2 {
    font-family:'Avenir-Black','Avenir','Helvetica Neue',Arial,sans-serif !important;
    font-weight:900 !important; color:#2a2e3f !important; font-size:42px !important; line-height:1.12 !important; margin:0 0 40px !important;
}
body.fec-members .fec-mem-members .fec-mem-h2 em {
    font-family:'Fraunces',Georgia,'Times New Roman',serif !important; font-style:italic !important; font-weight:400 !important; color:#3ca3dd !important;
}
body.fec-members .fec-mem-logos { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
body.fec-members .fec-mem-logo {
    display:flex; align-items:center; justify-content:center; background:#ffffff;
    border:1px solid #e1e6ef; border-radius:12px; height:112px; padding:18px;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
body.fec-members .fec-mem-logo:hover { border-color:#c9d4ea; box-shadow:0 10px 24px rgba(40,53,130,0.10); transform:translateY(-3px); }
body.fec-members .fec-mem-logo img {
    max-width:100%; max-height:62px; width:auto; height:auto; object-fit:contain;
    filter:grayscale(100%); opacity:.72; transition: filter .3s, opacity .3s;
}
body.fec-members .fec-mem-logo:hover img { filter:none; opacity:1; }
@media (max-width:980px){
    body.fec-members .fec-mem-members.et_pb_section{ padding:60px 0 !important; }
    body.fec-members .fec-mem-members .fec-mem-h2{ font-size:32px !important; }
    body.fec-members .fec-mem-logos{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
}

/* ---------- SEKTION C: Benefits (links) + Sidebar (rechts) nebeneinander ---------- */
body.fec-members .fec-mem-benefits-row { align-items: flex-start !important; }
body.fec-members .fec-mem-benefits-grid { grid-template-columns:repeat(2,1fr) !important; }
body.fec-members .fec-mem-side { margin-top: 0 !important; }
@media (max-width:980px){ body.fec-members .fec-mem-benefits-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:600px){ body.fec-members .fec-mem-benefits-grid{ grid-template-columns:1fr !important; } }

/* ---------- FIX: Benefits + Sidebar echt NEBENEINANDER (kein Umbruch) ----------
   Divi-Gutter ließ 3_4+1_4 >100% laufen → rechte Spalte brach um (gestapelt).
   Jetzt Flex: Sidebar fix 320px, Benefits füllt den Rest, oben bündig. */
body.fec-members .fec-mem-benefits-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 48px !important;
    max-width: 1200px !important;
    width: 92% !important;
}
body.fec-members .fec-mem-benefits-row > .et_pb_column { float: none !important; margin: 0 !important; }
body.fec-members .fec-mem-benefits-main { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; }
body.fec-members .fec-mem-side { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; }
@media (max-width: 980px) {
    body.fec-members .fec-mem-benefits-row { flex-wrap: wrap !important; gap: 40px !important; }
    body.fec-members .fec-mem-benefits-main,
    body.fec-members .fec-mem-side { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* ---------- FIX: beide Spalten enden auf gleicher Höhe ("rote Linie") ----------
   Linke Benefits-Spalte nimmt die Höhe der (höheren) Sidebar mit; die 4 Karten-
   Zeilen verteilen sich gleichmäßig über die volle Höhe. */
body.fec-members .fec-mem-benefits-row { align-items: stretch !important; }
body.fec-members .fec-mem-benefits-main { display: flex !important; flex-direction: column !important; }
body.fec-members .fec-mem-benefits-grid-mod { flex: 1 1 auto !important; }
body.fec-members .fec-mem-benefits-grid-mod .et_pb_text_inner { height: 100% !important; }
body.fec-members .fec-mem-benefits-grid { height: 100% !important; grid-auto-rows: 1fr !important; }
body.fec-members .fec-mem-benefit { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
@media (max-width: 980px) {
    body.fec-members .fec-mem-benefits-grid { height: auto !important; grid-auto-rows: auto !important; }
}

/* ---------- FIX 2: Karten natürliche Höhe, Zeilen-Abstand verteilt sich,
   sodass linke Spalte exakt auf Höhe der rechten Sidebar-Unterkante endet ---------- */
body.fec-members .fec-mem-benefits-grid {
    grid-auto-rows: min-content !important;   /* Karten nicht mehr strecken */
    align-content: space-between !important;  /* Restplatz in die Zeilen-Abstände → unten bündig */
}
body.fec-members .fec-mem-benefit { justify-content: flex-start !important; }

/* ===================================================================
   FINALE, MASSGEBLICHE BENEFITS-LAYOUT-REGELN (html-Präfix = höhere
   Spezifität → überschreibt ALLE vorherigen, teils widersprüchlichen
   Benefits-Regeln darüber).
   Ziel: linke + rechte Spalte enden exakt auf einer Linie.
   - Karten: natürliche Höhe, einheitlicher 20px-Abstand (v = h)
   - Restplatz automatisch in den Headline→Karten-Abstand (margin-top:auto),
     dadurch Karten-Block unten bündig mit der Sidebar.
   =================================================================== */
html body.fec-members .fec-mem-benefits-row {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: 48px !important;
    width: 92% !important; max-width: 1200px !important;
}
html body.fec-members .fec-mem-benefits-main {
    flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important;
    display: flex !important; flex-direction: column !important;
}
html body.fec-members .fec-mem-side { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; }
html body.fec-members .fec-mem-benefits-head { flex: 0 0 auto !important; }
html body.fec-members .fec-mem-benefits .fec-mem-h2 { margin: 0 0 24px !important; }
html body.fec-members .fec-mem-benefits-grid-mod { flex: 1 1 auto !important; }
html body.fec-members .fec-mem-benefits-grid-mod .et_pb_text_inner { display: flex !important; flex-direction: column !important; height: 100% !important; }
html body.fec-members .fec-mem-benefits-grid {
    display: grid !important; grid-template-columns: repeat(2,1fr) !important;
    gap: 20px !important; grid-auto-rows: min-content !important;
    align-content: start !important; height: auto !important; margin-top: auto !important;
}
html body.fec-members .fec-mem-benefit { display: block !important; }
@media (max-width: 980px) {
    html body.fec-members .fec-mem-benefits-row { flex-wrap: wrap !important; gap: 40px !important; }
    html body.fec-members .fec-mem-benefits-main,
    html body.fec-members .fec-mem-side { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
    html body.fec-members .fec-mem-benefits-grid { margin-top: 24px !important; }
}
@media (max-width: 600px) { html body.fec-members .fec-mem-benefits-grid { grid-template-columns: 1fr !important; } }

/* Rechte Spalte: unsichtbaren Abstand unter der letzten Karte (Contact Us) entfernen,
   damit das Spalten-Ende exakt auf der Contact-Unterkante liegt. Dann sitzt die
   unterste linke Karten-Zeile (margin-top:auto) genau auf dieser Linie. */
html body.fec-members .fec-mem-side { padding-bottom: 0 !important; }
html body.fec-members .fec-mem-side .et_pb_widget:last-child { margin-bottom: 0 !important; }

/* Benefit-Karten je 2px höher (27px statt 26px vertikal). Da der Karten-Block
   unten verankert ist (margin-top:auto), wächst er nach OBEN → Abstand H2→Karten
   wird kleiner, Unterkante bleibt exakt auf der Linie. */
html body.fec-members .fec-mem-benefit { padding-top: 27px !important; padding-bottom: 27px !important; }

/* Abstand H2→Karten fix 40px (wie "How to join"); Karten füllen die Resthöhe
   gleichmäßig bis zur Sidebar-Unterkante (rote Linie bleibt). */
html body.fec-members .fec-mem-benefits .fec-mem-h2 { margin: 0 0 40px !important; }
html body.fec-members .fec-mem-benefits-grid { margin-top: 0 !important; grid-auto-rows: 1fr !important; align-content: stretch !important; }

/* ===== ZURÜCKGESETZT: letzter Schritt (1fr-Füllung + 40px-Fixgap) rückgängig =====
   Karten wieder unten verankert (margin-top:auto = rote Linie bleibt), natürliche
   Zeilenhöhe. Danach werden die Karten höher gemacht -> wachsen NACH OBEN, Unterkante
   bleibt fix. */
html body.fec-members .fec-mem-benefits .fec-mem-h2 { margin: 0 0 24px !important; }
html body.fec-members .fec-mem-benefits-grid { margin-top: auto !important; grid-auto-rows: min-content !important; align-content: start !important; }
/* Karten höher (y-Achse) -> da unten verankert, wächst es nach oben, Abstand H2->Karten wird kleiner */
html body.fec-members .fec-mem-benefit { padding-top: 31px !important; padding-bottom: 31px !important; }

/* Karten nochmal +2px höher (31px -> 32px) -> Abstand H2->Karten weiter verkleinern */
html body.fec-members .fec-mem-benefit { padding-top: 32px !important; padding-bottom: 32px !important; }

/* ZURÜCK: Padding wieder 31px (32px hatte die Unterkante unter die Linie geschoben) */
html body.fec-members .fec-mem-benefit { padding-top: 31px !important; padding-bottom: 31px !important; }

/* ---------- SEKTION F: Members-SLIDER (3 Reihen × 7 Logos pro Slide, Loop) ---------- */
body.fec-members .fec-mem-slider { width:100%; }
body.fec-members .fec-mem-slider-viewport { overflow:hidden; min-height:368px; }
body.fec-members .fec-mem-slider-track { display:flex; transition: transform .55s cubic-bezier(.22,1,.36,1); will-change:transform; }
body.fec-members .fec-mem-slide { flex:0 0 100%; min-width:100%; }
body.fec-members .fec-mem-slide .fec-mem-logos { grid-template-columns: repeat(7,1fr) !important; grid-auto-rows:112px !important; align-content:start !important; }
/* Navigation (Buttons + Punkte) unter den Logos */
body.fec-members .fec-mem-slider-nav { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px; }
body.fec-members .fec-mem-slider-btn {
    width:48px; height:48px; border-radius:50%; border:2px solid #283582; background:transparent;
    color:#283582; font-size:20px; line-height:1; cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; transition: all .25s ease; padding:0;
}
body.fec-members .fec-mem-slider-btn:hover { background:#283582; color:#ffffff; box-shadow:0 0 24px rgba(60,163,221,.45); }
body.fec-members .fec-mem-slider-dots { display:flex; align-items:center; gap:10px; }
body.fec-members .fec-mem-slider-dot { width:10px; height:10px; border-radius:50%; border:0; padding:0; background:#cbd3e3; cursor:pointer; transition: all .25s ease; }
body.fec-members .fec-mem-slider-dot.is-active { background:#3ca3dd; transform:scale(1.3); }
@media (max-width:980px){
    body.fec-members .fec-mem-slider-viewport { min-height:0; }
    body.fec-members .fec-mem-slide .fec-mem-logos { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width:600px){ body.fec-members .fec-mem-slide .fec-mem-logos { grid-template-columns: repeat(2,1fr) !important; } }

/* Abstand Members-Slider -> Send-Application-Formular (Footer):
   Das Formular wird per bottom:110px/margin-bottom:-110px nach oben gezogen.
   Unteres Padding der Members-Sektion = 90px Sektionsabstand + 110px Overlap = 200px. */
html body.fec-members .fec-mem-members.et_pb_section { padding-bottom: 200px !important; }
@media (max-width:980px){ html body.fec-members .fec-mem-members.et_pb_section { padding-bottom: 150px !important; } }

/* Fix: Divi/wpautop verpackt die Slider-Buttons automatisch in <p> (mit Margins),
   was die Nav asymmetrisch macht. <p> layout-neutral schalten -> Buttons sind wieder
   direkte Flex-Kinder -> 22px-Abstand beidseitig gleich. */
html body.fec-members .fec-mem-slider-nav p { display: contents !important; margin: 0 !important; }

/* Rechte Spalte (Sidebar) an den rechten Content-Rand drücken (bündig mit allen
   Sektionen). space-between: Benefits links, Sidebar rechts, Restplatz = breiterer
   Zwischenabstand. */
html body.fec-members .fec-mem-benefits-row { justify-content: space-between !important; gap: 0 !important; }
html body.fec-members .fec-mem-benefits-main { flex: 0 1 63% !important; max-width: 63% !important; }
html body.fec-members .fec-mem-side { flex: 0 0 320px !important; margin-left: 0 !important; }
@media (max-width:980px){
    html body.fec-members .fec-mem-benefits-main { flex: 1 1 100% !important; max-width: 100% !important; }
    html body.fec-members .fec-mem-benefits-row { gap: 40px !important; }
}

/* ZURÜCK: letzter Schritt (space-between + Benefits 63%) rückgängig -> Stand davor */
html body.fec-members .fec-mem-benefits-row { justify-content: flex-start !important; gap: 48px !important; }
html body.fec-members .fec-mem-benefits-main { flex: 1 1 auto !important; max-width: none !important; }

/* Sidebar-Card an den rechten Content-Rand pinnen (Benefits links unverändert).
   margin-left:auto schiebt nur die rechte Spalte nach rechts -> bündig mit allen Sektionen. */
html body.fec-members .fec-mem-side { margin-left: auto !important; }

/* Cards der rechten Spalte exakt bis zum rechten Content-Rand:
   Divi floatet Widgets mit auto-Breite -> Cards blieben schmaler als die Spalte.
   Widgets + Widget-Area auf volle Spaltenbreite, ohne Rest-Margin/Padding rechts. */
html body.fec-members .fec-mem-side .et_pb_widget_area,
html body.fec-members .fec-mem-side .et_pb_module.et_pb_widget_area {
    width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
}
html body.fec-members .fec-mem-side .et_pb_widget {
    float: none !important; display: block !important;
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
}

/* MESS-FIX rote Linie rechts: Card endete bei R=1272 statt 1320 (48px Rest),
   weil ">.et_pb_column{margin:0}" (spezifischer) das margin-left:auto schlug.
   Diese Regel ist noch spezifischer -> Card wird an den rechten Row-Rand
   gedrückt; Benefits links unverändert, nur der Zwischenabstand wird breiter. */
html body.fec-members .fec-mem-benefits-row > .et_pb_column.fec-mem-side {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* URSACHE GEFUNDEN: Divis Clearfix ::after auf der Row ist im Flex-Layout ein
   unsichtbares 3. Item -> gap:48px davor frass exakt die 48px (Card endete
   immer bei R=1272). Clearfix im Flex-Kontext entfernen -> margin-left:auto
   drückt die Card an den Row-Rand (R=1320). */
html body.fec-members .fec-mem-benefits-row::after,
html body.fec-members .fec-mem-benefits-row::before {
    display: none !important;
    content: none !important;
}

/* Slider-Pfeile in CI-Hellblau (Cyan) statt Navy */
html body.fec-members .fec-mem-slider-btn {
    border-color: #3ca3dd !important;
    color: #3ca3dd !important;
}
html body.fec-members .fec-mem-slider-btn:hover {
    background: #3ca3dd !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(60,163,221,.45) !important;
}

/* MOBILE-FIX: spätere Desktop-Regeln (320px fix + margin-left:auto) hatten die
   Sidebar-Card auf dem Handy schmal+rechts geschoben. Unter 980px: volle Breite. */
@media (max-width: 980px) {
    html body.fec-members .fec-mem-benefits-row > .et_pb_column.fec-mem-side,
    html body.fec-members .fec-mem-side {
        flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* MOBILE: aweos rundet Sektionen mit 50px (Karten-Stapel). Hintergrund dahinter
   WEISS, damit die grauen Rundungen sauber sichtbar sind (statt Zacken-Artefakte).
   Hero-Ausnahme: Join-Sektion rutscht hinter den Hero, damit dessen Ecken
   weiterhin auf Grau (#F5F7FB) liegen. */
@media (max-width: 980px) {
    body.fec-members #main-content { background-color: #ffffff !important; }
    body.fec-members .fec-mem-hero.et_pb_section { position: relative; z-index: 2; }
    body.fec-members .fec-mem-join.et_pb_section {
        position: relative; z-index: 1;
        margin-top: -40px !important;
        padding-top: 100px !important;
    }
}

/* =====================================================================
   OUR MEMBERS — editorial members register (replaces the former slider).
   One UNIFIED, ROUNDED hairline grid rather than 52 separate cards: reads
   as an institutional member roster (European policy-platform register),
   not a SaaS card wall. Logos lead (large, height-normalised, greyscale →
   colour on hover); names are a quiet caption (small, → navy on hover).
   FEC tokens only.
   Column counts are exact DIVISORS of 52 (4×13 desktop, 2×26 mobile) so
   every row is full — there is never an empty trailing cell. The rounded
   container border is the only outer frame; nth-child strips the matching
   outer cell borders so the frame never doubles. Section bg/padding/H2
   rules above still apply (kept).
   ===================================================================== */
body.fec-members .fec-mem-tiles {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);   /* 52 = 4 x 13 -> full rows */
    gap: 0;
    background: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 24px;                      /* clearly rounded, like the other sections */
    overflow: hidden;                         /* clip cells to the rounded frame */
}
body.fec-members .fec-mem-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px;
    background: #ffffff;
    border-right: 1px solid #e3e6ec;          /* internal hairline gridlines */
    border-bottom: 1px solid #e3e6ec;
    padding: 30px 24px;
    min-height: 196px; text-decoration: none;
    transition: background-color .35s cubic-bezier(.22,1,.36,1);
}
/* full grid (4 cols): drop the outer cell borders -> the rounded container
   border is the single clean frame (no doubling, no stray edge line) */
body.fec-members .fec-mem-tile:nth-child(4n) { border-right: 0; }
body.fec-members .fec-mem-tile:nth-last-child(-n+4) { border-bottom: 0; }
body.fec-members .fec-mem-tile:hover { background-color: #f4f7fc; }
body.fec-members .fec-mem-tile:focus-visible { outline: 2px solid #3ca3dd; outline-offset: -3px; }
/* UNIFORM footprint: every logo fills the SAME fixed box (object-fit:contain,
   no crop, no distortion) so they all read the same visual size regardless of
   their shape, and each logo is as large as it can be -> fills the space. */
body.fec-members .fec-mem-tile-logo {
    width: 100%; height: 100px;
}
body.fec-members .fec-mem-tile-logo img {
    width: 100%; height: 100%; object-fit: contain;
    filter: grayscale(100%); opacity: 1;      /* full opacity so faint marks are still visible */
    transition: filter .35s ease;
}
body.fec-members .fec-mem-tile:hover .fec-mem-tile-logo img { filter: none; }
body.fec-members .fec-mem-tile-name {
    font-family: 'Rubik','Helvetica Neue',Arial,sans-serif !important;
    font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: .4px;
    color: #8a90a0; text-align: center;       /* smaller + quieter so logos lead */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 28px; transition: color .35s ease;
}
body.fec-members .fec-mem-tile:hover .fec-mem-tile-name { color: #283582; }
@media (max-width: 768px) {
    body.fec-members .fec-mem-tiles { grid-template-columns: repeat(2, 1fr); }  /* 52 = 2 x 26 */
    body.fec-members .fec-mem-tile { padding: 28px 18px; min-height: 172px; }
    /* re-base the edge borders for the 2-col full grid */
    body.fec-members .fec-mem-tile:nth-child(4n) { border-right: 1px solid #e3e6ec; }
    body.fec-members .fec-mem-tile:nth-last-child(-n+4) { border-bottom: 1px solid #e3e6ec; }
    body.fec-members .fec-mem-tile:nth-child(2n) { border-right: 0; }
    body.fec-members .fec-mem-tile:nth-last-child(-n+2) { border-bottom: 0; }
}


/* =====================================================================
   CURVED SECTION RHYTHM — match the approved homepage.
   Every section: FLAT top, ROUNDED bottom; each section's bottom curve
   reveals the NEXT section's colour, so the bands flow into one another
   (exactly like fec-home-2026). Mechanism = z-index ladder + a small
   negative-margin overlap only where the parent bg ≠ the next colour:
     hero(navy)   curve → reveals #f5f7fb (= join)         [parent bg matches, no overlap]
     join(grey)   curve → reveals benefits WHITE           [benefits pulled up under join]
     benefits(wh) curve → reveals #f5f7fb (= members)      [parent bg matches, no overlap]
     members(grey) FLAT  → navy footer                     [last section flat, like the home CTA]
   First kill the theme's stray rounded TOP corners (the source of the
   inconsistent notches), then set the bottom curves.
   ===================================================================== */
/* hero: keep its signature navy bottom-curve (flat top) */
html body.fec-members .fec-mem-hero.et_pb_section {
    border-radius: 0 0 90px 90px !important;
    position: relative !important; z-index: 4 !important;
}
/* how-to-join (grey): flat top, curved bottom; sits above benefits */
html body.fec-members .fec-mem-join.et_pb_section {
    border-radius: 0 0 80px 80px !important;
    position: relative !important; z-index: 3 !important;
}
/* benefits (white): pulled up 80px UNDER join so join's grey curve reveals
   white; its own bottom curve reveals the grey members section (parent bg) */
html body.fec-members .fec-mem-benefits.et_pb_section {
    border-radius: 0 0 80px 80px !important;
    position: relative !important; z-index: 2 !important;
    margin-top: -80px !important;
    padding-top: 170px !important;   /* 90 base + 80 overlap, so content isn't hidden */
}
/* members (grey): curved bottom that flows into the NAVY footer (the footer is
   pulled up underneath this curve to fill it) — so the grey section melts into
   navy instead of meeting it with a hard line + sharp navy corners. This is the
   spot David circled; it makes the form zone read as all-navy like the homepage. */
html body.fec-members .fec-mem-members.et_pb_section {
    border-radius: 0 0 80px 80px !important;
    position: relative !important; z-index: 1 !important;
    /* pulled UP under the benefits curve, so the benefits white bottom-curve
       actually reveals this grey section behind it (same proven trick as the
       footer under members). Without this the benefits curve had nothing behind
       it and rendered as a flat line. */
    margin-top: -80px !important;
    padding-top: 170px !important;   /* 90 base + 80 overlap, content stays put */
}
/* mobile: gentler curves + smaller overlap (matches the existing mobile rhythm) */
@media (max-width: 980px) {
    html body.fec-members .fec-mem-hero.et_pb_section { border-radius: 0 0 40px 40px !important; }
    html body.fec-members .fec-mem-join.et_pb_section { border-radius: 0 0 40px 40px !important; }
    html body.fec-members .fec-mem-benefits.et_pb_section {
        border-radius: 0 0 40px 40px !important;
        margin-top: -40px !important; padding-top: 100px !important;
    }
    html body.fec-members .fec-mem-members.et_pb_section {
        border-radius: 0 0 40px 40px !important;
        margin-top: -40px !important; padding-top: 130px !important;
    }
    html body.fec-members #main-footer { margin-top: -40px !important; padding-top: 140px !important; }
}

/* ---------------------------------------------------------------------
   CONTACT-FORM -> FOOTER transition: match the approved homepage exactly.
   The aweos default pulls the white form card UP (-110px) so it overlaps
   the grey members section, leaving a sharp navy wedge at the boundary
   (what David circled). The homepage (fec-custom.css) resets that overlap
   and gives the navy footer a top padding, so the white form card sits
   CLEANLY inside the navy footer with navy breathing room around it.
   These are layout-position fixes only (same as the homepage); the locked
   form fields + footer content are not restyled.
   --------------------------------------------------------------------- */
/* members section no longer needs the +110px overlap pad */
html body.fec-members .fec-mem-members.et_pb_section { padding-bottom: 90px !important; }
@media (max-width: 980px) {
    html body.fec-members .fec-mem-members.et_pb_section { padding-bottom: 60px !important; }
}
/* reset the aweos -110 form overlap */
html body.fec-members .formular.form-grid { bottom: 0 !important; margin-bottom: 0 !important; }
/* navy footer pulled UP under the members curve (so the grey curve reveals navy),
   plus navy breathing room above the form. padding compensates the overlap so the
   form sits clear below the curve. */
html body.fec-members #main-footer {
    margin-top: -80px !important;       /* slide navy up into the members curve */
    padding-top: 180px !important;      /* 100 navy breathing + 80 overlap */
    position: relative !important; z-index: 0 !important;
}
html body.fec-members .formular.form-grid .wps-form { margin-top: -40px !important; }
html body.fec-members .formular.form-grid .header-text { padding-top: 30px !important; }
/* grey html bg (matches the contact band) so no white wedge shows at any
   rounded corner / viewport edge -- same fix the homepage uses */
html:has(body.fec-members) { background-color: rgb(235, 235, 235) !important; }