/* ========================================================= Widget-Bridge — WordPress-Kontext-Angleichungen (girocard) Der Prototyp setzte Grundschrift/-farbe global auf (style.css). Im WordPress-/Elementor-Kontext überstimmt die Kit-CSS diese Kaskade — die Bridge hebt die Prototyp-Grundwerte auf den .zeus-section-Scope, in dem alle Zeus-Widgets rendern. ZWEI EBENEN (Messbefund girocard.eu, 2026-08-05): 1. GRUNDWERTE als :where(.zeus-section) — Spezifität (0,0,0)+Element. Reine Fallbacks: JEDE gc-*-Klassenregel aus gc-theme.css gewinnt dagegen. (v1.0.2-Bug: .zeus-section{color} überschrieb die .gc-hero-Vererbung → Hero-Copy navy statt weiß.) 2. KASKADEN-PANZER mit !important — girocard.eu klobbert per Kit-Regeln (.elementor-kit-6 h2 → font-weight 700, line-height) und Theme-ID-Selektoren (alle → #5DC4E9). Gegen ID-Selektoren und Kit-Heading-Regeln hilft nur !important (G12). Sollwerte 1:1 aus source/assets/css/style.css (= visuelle Wahrheit). ========================================================= */ :where(.zeus-section) { font-family: var(--font-body, 'Girocard', 'Segoe UI', system-ui, sans-serif); font-weight: var(--fw-regular, 400); font-size: 1rem; line-height: 1.6; color: var(--gc-nachtblau, #1F3A6A); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings erben im WP-Kontext nicht zuverlässig vom Section-Scope (Elementor-Kit-Heading-Regeln) — Familie explizit nachziehen. Farben/Größen kommen aus den gc-*-Klassen (gc-theme.css). */ .zeus-section h1, .zeus-section h2, .zeus-section h3, .zeus-section h4, .zeus-section h5, .zeus-section h6 { font-family: var(--font-display, 'Girocard', 'Segoe UI', system-ui, sans-serif); } /* ---------- Typo-Panzer: Kit klobbert Heading-Weight/Line-Height ---------- Gemessen: fw 800→700, lh 55→58px auf allen gc-h*-Headings. */ .zeus-section .gc-h1 { font-weight: 800 !important; line-height: 1.05 !important; margin: 0 !important; } .zeus-section .gc-h2 { font-weight: 800 !important; line-height: 1 !important; margin: 0 !important; } .zeus-section .gc-h3 { font-weight: 800 !important; line-height: 1 !important; margin: 0 !important; } .zeus-section .gc-benefit__title { font-weight: 800 !important; line-height: 1.05 !important; } .zeus-section .gc-faq__q { color: var(--gc-nachtblau, #1F3A6A) !important; } .zeus-section .gc-video__play { color: var(--gc-nachtblau, #1F3A6A) !important; } /* ---------- Abstands-Panzer: Prototyp-Margins (style.css) ---------- Der gescopte Element-Reset + Kit-Margins nullten die Klassen-Margins (gemessen: kicker 14→0, copy 20→0, shop 44→0 …). !important stellt die Prototyp-Rhythmik unabhängig von der Host-Kaskade sicher. */ .zeus-section .gc-kicker { margin: 0 0 14px !important; } .zeus-section .gc-label { margin: 0 0 20px !important; } .zeus-section .gc-hero__kicker { margin: 0 0 12px !important; } .zeus-section .gc-hero__copy { margin-block: 22px 0 !important; margin-inline: auto !important; } .zeus-section .gc-lead { margin-block: 20px 0 !important; margin-inline: auto !important; } .zeus-section .gc-split .gc-copy { margin-block: 20px 0 !important; } .zeus-section .gc-split__cta { margin-block: 28px 0 !important; } .zeus-section .gc-fact__label { margin-block: 10px 0 !important; } .zeus-section .gc-choice { margin-block: 44px 0 !important; } .zeus-section .gc-benefit__icon { margin: 0 0 26px !important; } .zeus-section .gc-benefit__title { margin: 0 0 8px !important; } .zeus-section .gc-shop { margin-block: 44px 0 !important; } .zeus-section .gc-product__name { margin: 20px 0 6px !important; } .zeus-section .gc-shop__cta { margin-block: 40px 0 !important; } .zeus-section .gc-quote figcaption { margin-block: 30px 0 !important; } .zeus-section .gc-quote blockquote { margin-inline: auto !important; } .zeus-section .gc-dots { margin-block: 56px 0 !important; } .zeus-section .gc-videos { margin-block: 48px 0 !important; } .zeus-section .gc-faq { margin-block: 48px 0 !important; } .zeus-section .gc-faq__body p + p { margin-block-start: 12px !important; } /* ---------- Button-Panzer: .gc-btn (CTA-Rechtecke, 6px-Radius) ---------- */ a.gc-btn, button.gc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border: 0; border-radius: var(--radius-btn, 6px); font-family: var(--font-body, 'Girocard', 'Segoe UI', system-ui, sans-serif); font-size: clamp(0.875rem, 0.7822rem + 0.3810vw, 1.125rem); line-height: 1; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* !important: das Host-Theme färbt Links per ID-Selektor — anders nicht zu schlagen (G12). Navy-Button = --lp-navy #000E34 (Hover Nachtblau) — Sollwerte style.css Z.125f. */ a.gc-btn--sky, button.gc-btn--sky { background: var(--gc-hellblau, #5DC4E9); color: #000000 !important; } a.gc-btn--sky:hover, button.gc-btn--sky:hover { background: var(--gc-hellblau-700, #2BAFDC); } a.gc-btn--navy, button.gc-btn--navy { background: var(--lp-navy, #000E34); color: #FFFFFF !important; } a.gc-btn--navy:hover, button.gc-btn--navy:hover { background: var(--gc-nachtblau, #1F3A6A); } a.gc-btn--white, button.gc-btn--white { background: #FFFFFF; color: var(--gc-nachtblau, #1F3A6A) !important; } a.gc-btn--white:hover, button.gc-btn--white:hover { background: var(--gc-gray-100, #ECEFF3); } /* ---------- Link-Panzer: verlinkte Kacheln (nackte mit Komponenten-Klasse) ---------- color:inherit !important — Theme-ID-Selektor färbt sonst alle hellblau. */ a.gc-choice__item { position: relative; display: block; border-radius: var(--radius-image, 20px); overflow: hidden; text-decoration: none; color: inherit !important; } a.gc-video { position: relative; display: block; border-radius: var(--radius-image, 20px); overflow: hidden; text-decoration: none; color: inherit !important; } a.gc-product__link { display: block; text-decoration: none; color: inherit !important; } /* ---------- Bild-Panzer (G12): fixe Maße gegen `.elementor img { height:auto }` ---------- */ .zeus-section .gc-benefit__icon { width: 63px; height: 63px; }