/* ============================================================================ PUSH-UA Gemeinschaft — components.css ---------------------------------------------------------------------------- Hand-translated from docs/design-source/project/responsive/home.css, refactored so every value references a theme.json token (--wp--preset--* / --wp--custom--*). Loaded on the front end (functions.php) AND the editor (add_editor_style) so the two match. PORTED in phase 2 (home.css line refs): - :root font aliases + responsive --gutter/--maxw/--section-y (home.css 16-28) - reset (home.css 30-36) - .wrap (section container) (home.css 38) - .mono / .kicker (home.css 39-41) - .lang / .lang b / .lang a (+ ≥782 reveal) (home.css 79-80, 99) — styles the already-shipped pushua/language-switcher block markup. Phases 3/4 added the chrome + section/pattern families (see their sections). PHASE 6 added the EVENT FAMILY at the end of this file: the .ev-* / .poster / .date-badge / .tax-chip / .reg-badge selectors are the markup contract of the PLUGIN's EventView renderers (pushua-core ships ZERO CSS — these selectors ARE the theme↔plugin API; renaming one is a breaking change for the SSR blocks). PHASE 7 added FILTERING + AKTUELLES after it: .filter-rail, .fr-*, .zeitraum-toggle, .active-filters, .af-* (the FilterView contract); .post-grid, .post-card, .pc-*, .featured-post, .fp-*, .cat-badge (the PostView contract); the Aktuelles pagination restyle; .post-article + .post-cross-links, .pxl-*; and the sidebar post rows — same rule: these selectors are plugin API. The post-card family is VIEWPORT-query only (one photo-top layout at every width — no structural fold to drive off container width; the `ev` container budget stays events-only, §10). ⚠ COMMENT HAZARD (this exact header once broke the whole token layer): a glob list written with a star-slash sequence (".fr-*" directly followed by "/") CLOSES the CSS comment mid-sentence — the leftover prose parses as an invalid selector and the parser drops the ENTIRE NEXT RULE (here: the :root below — every --f-… alias, --gutter, --maxw; computed fonts fell to Times New Roman site-wide). Separate glob lists with COMMAS, never slashes (a Pest guard pins this). CANONICAL BREAKPOINTS (arch-ref §10 is the single source of truth — mirror it, never invent 768/1024/1440). WordPress-aligned tiers: Mobile <600 · Tablet 600-781 · Desktop 782-1199 · Ultra-wide >=1200. AUTHOR AGAINST THE SUPERSET, not just the 4 tiers: 600 / 700 / 782 / 1000 / 1200 / 1600. The token-scale vars below redeclare at 600/782/1200/1600; component LAYOUT *also* reflows at 700 (post cards -> 2-col) and 1000 (the FULL multi-column desktop layout — 4-up grids; 4-up at 782 is too cramped). Mobile-first (min-width) + clamp() for type (scale), media queries for reflow. Container queries are for the plugin's event-card family ONLY (event-card / reihen-strip / event-cross-link-sidebar — the named `ev` container in the PHASE 6 section, incl. the poster→card degrade <420px), never page sections. As built, the plugin block pipeline (T4) ships NO CSS, so no second CSS codebase materialized and no shared breakpoint partial is needed — this file stays the single hand-authored source (arch-ref §10 reconciled in phase 6). ========================================================================== */ :root { /* Design-source font aliases → the theme.json preset families (single source). */ --f-display: var(--wp--preset--font-family--fixel-display); --f-body: var(--wp--preset--font-family--inter); --f-mono: var(--wp--preset--font-family--ibm-plex-mono); /* Fluid layout scale — re-declared per breakpoint (home.css 21-28). */ --gutter: 20px; --maxw: 1280px; --section-y: 40px; /* Sticky-header height — single source for the SectionSubnav sticky offset + the scroll-spy JS rootMargin (codex css-port-2). Matches .site-header .bar at each tier. */ --header-h: 56px; } @media (min-width: 600px) { :root { --gutter: 32px; --section-y: 48px; } } @media (min-width: 782px) { :root { --gutter: 40px; --section-y: 56px; --header-h: 64px; } } @media (min-width: 1200px) { :root { --gutter: 56px; --section-y: 64px; --maxw: 1280px; } } @media (min-width: 1600px) { :root { --gutter: 88px; --section-y: 80px; --maxw: 1440px; } } /* ── Reset (home.css 30-36) ─────────────────────────────────────────────── */ * { box-sizing: border-box; } body { margin: 0; background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; } /* Link color/decoration come from theme.json `styles.elements.link` (blue → blue-deep). Do NOT reset `a` globally here: an `a {…}` rule (specificity 0,0,1) loads after the global stylesheet and would override theme.json's low-specificity `:where(a)` token, flattening content links to body text. Chrome link resets (nav / buttons / cards) are scoped to their component classes in phases 3/4. */ /* Consistent a11y affordance: chrome/component hyperlinks carry NO underline at rest but DO underline on hover/focus. theme.json's own `:hover` underline is unreliable — WP emits a second base `text-decoration: none` for links that clobbers it — so own it here. Buttons are excluded; chrome links (nav, section-subnav, submenu) opt out via their own higher-specificity hover rules, keeping their border/background affordance. */ :where(a):not(.wp-element-button):hover, :where(a):not(.wp-element-button):focus-visible { text-decoration: underline; } /* a11y (WCAG 1.4.1, forms-a11y-audit F2): in-content BODY-PROSE links carry a REST-STATE underline. The brand blue (`--blue` #1c52cf) cannot reach the 3:1 link-vs-text contrast that a color-only affordance would require against the dark ink body text, so color alone is insufficient (axe `link-in-text-block`). This deliberately overrides the no-underline-at- rest convention above for PARAGRAPH prose only — chrome, nav, cards, and CTAs keep their color+border affordance. Scoped to `p a` (not `li a`) on purpose: component panels render their channel links in
  • (e.g. patterns' `.contact-live` list), and `li a` would outrank those components' `text-decoration:none` and underline them (codex review P3). Buttons excluded. */ .wp-block-post-content p a:not(.wp-element-button) { text-decoration: underline; } button { cursor: pointer; font-family: inherit; } img { max-width: 100%; height: auto; display: block; } /* ── Section container + typographic utilities (home.css 38-41) ─────────── */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Ultrawide framing (prototype parity): on screens wider than the content cap, draw a 1px rule at each edge of the --maxw column to separate the content from the overflow. Full page-height lines on the root block wrapper; tracks --maxw (1280 → 1440 @1600). z-index 30 sits ABOVE the sticky header (z-index 20, ~line 261) so the frame reads as one continuous line down the whole page instead of being interrupted by the header band (user 2026-06-20). .wp-site-blocks is position:relative with no z-index → NOT a stacking context, so these pseudos and the header wrapper compare z-indexes directly in the root. */ @media (min-width: 1280px) { .wp-site-blocks { position: relative; } .wp-site-blocks::before, .wp-site-blocks::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 30; background: var(--wp--preset--color--rule); pointer-events: none; } /* max(0px, …): Chrome counts the vertical scrollbar in the min-width media query but NOT in `50%`, so near 1280px the content box is < --maxw and the raw calc goes negative — shoving the line past the edge and adding a horizontal scrollbar (the classic "only when maximized" Win/Chrome bug). Clamp to 0 so the line sits flush. */ .wp-site-blocks::before { left: max(0px, calc(50% - var(--maxw) / 2)); } .wp-site-blocks::after { right: max(0px, calc(50% - var(--maxw) / 2)); } } /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ MONO TYPE SYSTEM (IBM Plex Mono) ║ ║ Three shared archetypes declare the family/size/tracking/transform ONCE ║ ║ here; component rules elsewhere carry only color + their own margin/layout. ║ ║ • Eyebrow / kicker — eyebrow-token size, kicker-tracking, W500, UPPER ║ ║ • Status / role tag — 10.5px, mono-tracking, W700, UPPER ║ ║ • Data / note — 0.04em tracking, W500 (lowercase values + notes) ║ ║ Regular mono weight is 500 (Medium), NOT 400 — IBM Plex Mono 400 reads too ║ ║ thin in-situ. Deliberate divergence from the prototype's 400. 600/700 below. ║ ║ Standalone by design (own geometry/weight, NOT in a base): .hero-badge (the ║ ║ lone W600), the card badges .goal-badge/.vorstand-badge/.dl-flag/.dl-badge/ ║ ║ .steps-list .step-n (W700, pill/circle geometry), index numerals, IBAN. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .mono { font-family: var(--f-mono); font-weight: 500; } /* ════ MONO EYEBROW / KICKER ARCHETYPE ═══════════════════════════════════════ Every uppercase mono section/card kicker shares ONE fingerprint: IBM Plex Mono, eyebrow-token size, kicker-tracking (0.12em), weight 500, uppercase. Members below differ ONLY by color (+ each component keeps its own margin/layout on its own rule). To add a kicker: add its selector here and set its color on the class — never re-declare size/tracking/transform per class (that drift is what this consolidated). Sizes were normalized here (was a 10.5/11/12px spread) onto the eyebrow token. */ .kicker, .opener-eyebrow, .cf-eyebrow, .cl-eyebrow, .cl-lab, .reg-kicker, .reg-konto-kicker, .dl-kicker, .dl-label, .steps-kicker, .cta-band-eyebrow, .nlb-eyebrow, .bank-eyebrow, .bar-eyebrow, .ci-kicker, .ci-visit-label, .es-kicker, .pcc-eyebrow, .topic-label, .help-label, .projekt-eyebrow { font-family: var(--f-mono); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: var(--wp--custom--kicker-tracking); text-transform: uppercase; } .kicker { color: var(--wp--preset--color--blue); } /* ── Canonical eyebrow → heading gap (single source of truth) ───────────────── Every eyebrow that directly precedes a SECTION/CARD heading gets ONE spacing, tiered by heading size to match the prototype: section headers (H2) = 12px, card headers (H3/H4) = 8px. Keyed via :has() on the eyebrow, so standalone labels (no following heading) are untouched. Page heroes (eyebrow → H1) are out of scope and keep their own spacing. The eyebrow's margin-bottom drives the gap; adjacent headings carry no top margin (the grid-child reset above + per-heading `margin:0`). Eyebrows that live in a flex column with its own `gap` are NOT listed here — there the container gap IS the eyebrow→heading spacing (margin would add on top), so those gaps are set to the tier value directly on the card (.projekt-body / .goal-card = 8, .theme-card-bar = 8, .link-card-body = 12). To add a new eyebrow: add its class to both lists (unless it's flex-gap). */ :is(.kicker, .opener-eyebrow, .cta-band-eyebrow, .nlb-eyebrow, .reg-kicker, .reg-konto-kicker, .dl-kicker, .steps-kicker, .pcc-eyebrow, .es-kicker, .cf-eyebrow, .bank-eyebrow, .team-cta-kicker, .ci-kicker):has(+ h2) { margin-block-end: 12px; } :is(.kicker, .opener-eyebrow, .cta-band-eyebrow, .nlb-eyebrow, .reg-kicker, .reg-konto-kicker, .dl-kicker, .steps-kicker, .pcc-eyebrow, .es-kicker, .cf-eyebrow, .bank-eyebrow, .team-cta-kicker, .ci-kicker):has(+ :is(h3, h4)) { margin-block-end: 8px; } /* ════ MONO STATUS / TAG ARCHETYPE (weight 700) ══════════════════════════════ The 700-weight uppercase tags. Shared fingerprint: IBM Plex Mono, 10.5px, W700, mono-tracking, uppercase. Members differ only by color (+ margin/align). Card badges with their own pill geometry (goal/vorstand/dl/step-n) stay standalone. */ .role-commit, .team-role-lead { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; } /* ══ MONO DATA / NOTE ARCHETYPE (lowercase values, notes, "soon" tags) ════ Shared: IBM Plex Mono + 0.04em tracking. Per-member size/color/margin differ. Descendant-scoped .konto .bic / .nl .nl-soon stay standalone (specificity). */ .signup-note, .contact-note, .dl-meta, .reg-bic, .ci-role, .nlb-soon, .form-disabled-cta { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.04em; } /* ── DE/UK language switcher (home.css 79-80, 99) ─────────────────────────── Styles the markup emitted by the shipped pushua/language-switcher block:
    DE·UK
    . Hidden < 782px (the header hosts it from the hamburger overlay in phase 3), shown inline ≥ 782px. The "·" separator is spaced by the flex gap. */ .lang { display: none; gap: 6px; font-family: var(--f-mono); font-weight: 500; font-size: 11px; color: var(--wp--preset--color--ink-soft); } .lang b { color: var(--wp--preset--color--ink); font-weight: 600; } .lang a { color: var(--wp--preset--color--ink-soft); } .lang a:hover { color: var(--wp--preset--color--blue); } /* F3 (2026-06-18): give the DE/UK switcher a 44px-class tap target with NO layout shift. .site-header .lang shows at ALL widths (see :348), so "UK" (14x17) is a mobile touch target. An absolute ::before overlay grows the hit area on BOTH axes (a flex-gap sibling can't use negative margins without overlapping the "·"); the current-language DE is a non-interactive , so only the UK link needs the larger target. */ .lang a { position: relative; display: inline-flex; align-items: center; } .lang a::before { content: ""; position: absolute; inset: -12px -12px; } @media (min-width: 782px) { .lang { display: flex; } } /* ============================================================================ PHASE 3 — CHROME (header + footer) Ported from home.css (.btn 56-63, header 65-103, footer 287-326), retokenized. NOTE: the prototype's .nav-desktop/.nav-mobile/.hamb/.nav-toggle rules are NOT ported — the header uses core/navigation, so we style its emitted classes (.site-nav .wp-block-navigation*) to the same visual intent instead. ========================================================================== */ /* ── Buttons (home.css 56-63) ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--wp--custom--pill-radius); font-weight: 600; font-size: 14px; padding: 12px 18px; white-space: nowrap; border: none; } .btn.lg { padding: 16px 28px; font-size: 15px; } .btn-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } .btn-blue { background: var(--wp--preset--color--blue); color: var(--wp--preset--color--paper); } .btn-yellow { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); } .btn-outline { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--ink); } .ar { width: 1em; height: 1em; } /* ── Header (home.css 65-103, minus the phase-2 .lang rules) ────────────── */ /* Sticky lives on the template-part WRAPPER, not on .site-header. A sticky box only sticks within its PARENT's box: .site-header's parent is the
    template-part wrapper, which is exactly header-tall (~78px), so sticking it THERE un-stuck after ~78px of scroll and the header rode the page off-screen (user 2026-06-20). The wrapper's own parent is .wp-site-blocks (full document height), so the sticky now holds the whole way down. z-index 20 stays above the section sub-nav (10) + content; the ≥1280 frame lines are lifted ABOVE it (z-index 30, ~line 123). */ .wp-site-blocks > header { position: sticky; top: 0; z-index: 20; } .site-header { /* item 3 (user 2026-06-18): translucent until hovered. The header is sticky (via the wrapper above), so no new occlusion (the global section[id] scroll-margin still compensates). The 88% opacity + blur keep nav text readable ON THEIR OWN over scrolled content — touch has no hover, so the resting state can't depend on it (adversarial-review §9.5). Goes fully solid on pointer/keyboard interaction AND whenever the mobile menu is open. */ background: color-mix(in srgb, var(--wp--preset--color--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wp--preset--color--rule); transition: background-color 0.2s ease; } .site-header:hover, .site-header:focus-within, .site-header:has(.is-menu-open) { background: var(--wp--preset--color--bg); } /* Fallback for engines without color-mix(): a fully solid header (never an unreadable one). */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .site-header { background: var(--wp--preset--color--bg); } } .site-header .wrap { padding-block: 0; } .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; } .site-header .wp-block-site-title { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0; } .site-header .wp-block-site-title a { color: var(--wp--preset--color--ink); } @media (min-width: 782px) { .site-header .wp-block-site-title { font-size: 24px; } } /* core/navigation styled to the prototype's .nav-desktop intent */ .site-nav { font-size: 15px; font-weight: 500; } .site-nav .wp-block-navigation__container { gap: 24px; align-items: center; } .site-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); border-bottom: 2px solid transparent; padding-bottom: 2px; } .site-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--blue); border-bottom-color: var(--wp--preset--color--yellow); text-decoration: none; } /* Active page — matches the prototype: blue label + yellow underline. Core never tags our custom-URL nav-links, so functions.php synthesizes the markers: aria-current="page" on the current item, the .is-current-ancestor class on a top-level item whose section the page lives in (e.g. "Über uns" while viewing Aktuelles). The two .current-menu-* selectors keep core's native states working should a page/post link ever be added. */ .site-nav .current-menu-item > .wp-block-navigation-item__content, .site-nav .current-menu-ancestor > .wp-block-navigation-item__content, .site-nav .wp-block-navigation-item__content[aria-current], .site-nav .wp-block-navigation-item__content.is-current-ancestor { color: var(--wp--preset--color--blue); border-bottom-color: var(--wp--preset--color--yellow); text-decoration: none; } /* Submenu chevron ("Über uns"): WP centres it on the tall line-box, which sits below the label's optical centre — lift it level with the text; small left gap off the label. */ .site-nav .wp-block-navigation__submenu-icon { align-self: center; margin: 0 0 0 6px; padding: 0; } .site-nav .wp-block-navigation__submenu-icon svg { display: block; transform: translateY(-3px); } /* Dropdown submenu — rounded card matching the prototype's .gnav-sub-inner: a paper panel with a hairline rule, soft shadow, and pill-rounded items that highlight on hover with a yellow-soft fill (its own affordance, so no underline / border here). Selector mirrors + outranks core's `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container` (0,3,0) so the paper bg + rule border win. */ .site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--rule); border-radius: 14px; padding: 8px; min-width: 240px; box-shadow: 0 22px 50px -22px rgba(20, 28, 50, 0.22); } .site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-bottom: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--wp--preset--color--ink); } .site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--yellow-soft); color: var(--wp--preset--color--blue-deep); border-bottom-color: transparent; text-decoration: none; } /* Active dropdown item — the prototype's .gnav-sub a[data-sub-active]: blue label, no fill or underline (the dropdown highlights with a soft fill on HOVER only). Prefix mirrors the base submenu-item rule so it outranks its `color: ink`. */ .site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] { color: var(--wp--preset--color--blue); } /* Spenden CTA — bridge class (is-style-*-cta stays deferred to phase 4) */ .header-cta-btn .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-radius: var(--wp--custom--pill-radius); font-weight: 600; padding: 12px 18px; white-space: nowrap; border: none; } /* Re-collapse core Navigation's hardcoded 600px breakpoint to the 782 contract (arch-ref §10) */ @media (min-width: 600px) and (max-width: 781.98px) { .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* Language switcher + Spenden are bar siblings (core/navigation drops non-nav inner blocks on SSR), so they stay visible at all widths. Show the DE/UK toggle in the header even < 782 (overriding the phase-2 desktop-only default) so it stays reachable on mobile next to the hamburger; the `gap` spaces the bar-end cluster. */ .bar-end { display: flex; align-items: center; gap: 16px; } .site-header .lang { display: flex; } /* ── Footer (home.css 287-326) ──────────────────────────────────────────── */ /* Core's root block-gap puts 24px above the footer template part, leaving a strip of page background between the last section (often a full-bleed band) and the ink footer. Pull the footer flush to the content, as in the prototype. */ .wp-site-blocks > footer { margin-block-start: 0; } .site-footer { background: var(--wp--preset--color--ink); color: #fff; } .site-footer .wrap { padding-block: clamp(40px, 4vw, 56px) 28px; } .foot-cols { display: grid; grid-template-columns: 1fr; gap: 32px 40px; } @media (min-width: 600px) { .foot-cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .foot-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .foot-cols .about p { margin-top: 18px; font-size: 13px; line-height: 1.6; color: #b3bdd4; max-width: 280px; } .foot-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 900; font-size: 26px; letter-spacing: -0.04em; color: #fff; } .foot-logo .seal { display: flex; gap: 3px; } .foot-logo .seal i { display: block; width: 5px; height: 34px; } /* Footer section headings are

    for valid heading-order (forms-a11y-audit F4); styled here by class, not tag — keep selector + markup level in lock-step. */ .foot-col h2 { font-family: var(--f-body); font-size: 12px; letter-spacing: var(--wp--custom--kicker-tracking); text-transform: uppercase; color: var(--wp--preset--color--yellow); font-weight: 600; margin: 0; } .foot-col ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: 14px; line-height: 2; } .foot-col a { color: #dde3f1; } .foot-lower { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 1000px) { .foot-lower { grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: stretch; } } .nl h2 { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin: 8px 0 14px; } .nl .form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .nl input { flex: 1; min-width: 180px; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #fff; font-family: inherit; font-size: 14px; } .nl input[disabled] { opacity: 0.55; cursor: not-allowed; } .nl .nl-soon { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; color: #b3bdd4; } .konto { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .konto h2 { font-family: var(--f-body); font-size: 12px; letter-spacing: var(--wp--custom--kicker-tracking); text-transform: uppercase; color: var(--wp--preset--color--yellow); font-weight: 600; margin: 0; } .konto .iban { font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: #fff; letter-spacing: 0.02em; line-height: 1.4; margin: 0; } .konto .bic { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; color: #b3bdd4; letter-spacing: 0.04em; margin: 0; } /* PayPal alternative in the footer Spendenkonto box (yellow pill reads on the ink footer). */ .konto .konto-alt { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; color: #b3bdd4; margin: 8px 0 0; } .konto-paypal { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); padding: 9px 16px; border-radius: var(--wp--custom--pill-radius); font-weight: 700; font-size: 13px; text-decoration: none; } .konto-paypal:hover, .konto-paypal:focus-visible { text-decoration: underline; } .foot-util { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; align-items: flex-start; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: #b3bdd4; } .foot-util .links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .foot-util .links a { color: #b3bdd4; } /* F3 (2026-06-18): the social row is 4 short single-line links (IG/FB/TG/YT, 12-17px wide); grow each tap target with the D14 padding+offset (horizontal too, since they're narrow). gap is 18px > 12px offset, so no overlap; visual size is unchanged. The legal links wrap, so they keep the plain hit area to avoid negative-margin row overlap. */ .foot-util .links.social a { display: inline-flex; align-items: center; padding: 12px 6px; margin: -12px -6px; } @media (min-width: 782px) { .foot-util { flex-direction: row; align-items: center; } } /* flag ribbon (blue over yellow) + the C1 logo seal — fills added (absent in home.css) */ .ribbon { display: flex; gap: 4px; width: 200px; height: 4px; margin-top: 32px; } .ribbon .col { display: flex; flex-direction: column; flex: 1; } .ribbon .col i { flex: 1; } .ribbon .col i:first-child, .foot-logo .seal i:first-child { background: var(--wp--preset--color--blue); } .ribbon .col i:last-child, .foot-logo .seal i:last-child { background: var(--wp--preset--color--yellow); } /* col 1 = Ukraine (blue/yellow, above). col 2 = Germany: 3 stripes black/red/gold — the last (gold) reuses the yellow rule above; override first→black, add the red middle. */ .ribbon .col-de i:first-child { background: #161616; } .ribbon .col-de i:nth-child(2) { background: #d83621; } /* ============================================================================ PHASE 4 — STATIC PATTERNS + PAGE TEMPLATES Ported from home.css (home sections) + translated from the per-page JSX (the five non-home pages have NO home.css source), all retokenized to theme.json presets/aliases. Width idiom: every section is an `alignfull` group carrying its bg, wrapping an inner `.wrap` (capped at --maxw). Display headings use weight 700 (Fixel Display ships 500/600/700 — no 800/900 face; using 800 would faux-bold). ========================================================================== */ /* ── core/button CTA styles (register_block_style in functions.php) ────────── Resolves the phase-2 deferral: each registered is-style-*-cta now has matching CSS, so a Site-Editor choice always renders. Base button (ink bg, pill radius, padding, weight 600) comes from theme.json styles.elements.button. */ .wp-block-button.is-style-ink-cta > .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: none; } .wp-block-button.is-style-blue-cta > .wp-block-button__link { background: var(--wp--preset--color--blue); color: var(--wp--preset--color--paper); border: none; } .wp-block-button.is-style-yellow-cta > .wp-block-button__link { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); border: none; } .wp-block-button.is-style-outline-cta > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--ink); } /* CTA glyphs (design source Icon set — arrow / heart, line SVGs). Mask so the glyph inherits the link's currentColor. Per-button (heart only on Spenden, arrow on forward CTAs), so opt-in via class. cta-lg = the design's lg button size. */ .wp-block-button.cta-arrow > .wp-block-button__link, .wp-block-button.cta-heart > .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; } .wp-block-button.cta-arrow > .wp-block-button__link::after, .wp-block-button.cta-heart > .wp-block-button__link::before { content: ""; width: 1.05em; height: 1.05em; flex-shrink: 0; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .wp-block-button.cta-arrow > .wp-block-button__link::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .wp-block-button.cta-heart > .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.35-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.65-9 9-9 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.35-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.65-9 9-9 9z'/%3E%3C/svg%3E"); } .wp-block-button.cta-lg > .wp-block-button__link { padding: 16px 28px; font-size: 15px; } /* ── Photo placeholder (home.css 43-53) ─────────────────────────── */ .ph { position: relative; overflow: hidden; border-radius: var(--wp--custom--card-radius); background: #dad2c4; color: #5a4f3a; min-height: 120px; } .ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 9px); } .ph .lbl { position: absolute; left: 10px; bottom: 10px; font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; opacity: 0.85; } .ph.sky { background: #bcd2ef; color: #1c3f7d; } .ph.warm { background: #e7d9b9; color: #5a4f3a; } .ph.yellow { background: #ffe28a; color: #7a5400; } .ph.crowd { background: #c7baa6; color: #3b3326; } .ph.paper { background: #efe9da; color: #4a4233; } /* ── Section wrapper + section head (home.css 156-171) ──────────────────── */ .sec { padding-block: var(--section-y); } .sec.ruled { border-top: 1px solid var(--wp--preset--color--rule); } /* Divider→kicker breathing (user request 2026-06-18): a ruled section's hairline sits directly above its head, so the kicker hugged the rule. Give the head clear air below the rule and keep the section FOOTPRINT constant by trimming the bottom the same 16px — the §10 --section-y rhythm BETWEEN sections is preserved. Scoped to .sec.ruled (0,2,0) so non-ruled / headless sections are untouched, and applied to the section box (not .sec-head) so it holds whether or not a head is present (adversarial-review §9.4). */ .sec.ruled { padding-block: calc(var(--section-y) + 16px) calc(var(--section-y) - 16px); } /* Full-width sections own their vertical rhythm via padding-block + the .ruled border. The editor's default block-gap (24px) between sibling sections adds an unwanted gap — most visible as a cream strip above the dark stats / yellow band (and it pushed the .ruled divider 24px off the boundary). Zero it so sections sit flush, per the design. */ .wp-block-post-content > .alignfull { margin-block-start: 0; } /* Same block-gap, one level down: every group below is a custom CSS grid that spaces itself with `gap`, but it's also .is-layout-flow, so the editor injects margin-block-start on each non-first child — shifting grid items 2+ DOWN in their cells (theme card 01 sat higher than 02–04; same latent bug on the stats row, hero, footer columns, project/goal cards…). Reset on DIRECT children only — nested prose keeps its own margins; row/column spacing is fully handled by each grid's `gap`. ⚠ MAINTENANCE: adding a new custom CSS grid? Add its selector to the list below, or its first child will float above the rest. */ .foot-cols > *, .foot-lower > *, .hero .grid > *, .hero-photos > *, .stats .grid > *, .themes-grid > *, .band .wrap > *, .partners-grid > *, .sec-head-split > *, .contact-grid > *, .field-grid > *, .section-opener .opener-head > *, .projekt-grid > *, .projekt-card > *, .hero-solo .hero-aside > *, .split > *, .stats-light > *, .goals-grid > *, .goal-card > *, .team-grid > *, .transparenz-row > *, .reg-dl > *, .download-rows > *, .role-grid > *, .signup-grid > *, .steps-list li > *, .partner-cta-grid > *, .cta-band > *, .nlb-grid > *, .ci-rows > *, .bar-cards > *, .geld-panel > *, .bank-rows > *, .link-card > *, .reassure-grid > *, .cf-fields > *, .event-cols > *, .filter-rail > *, .fr-row > *, .fr-group > *, .fr-chips > *, .active-filters > *, .post-grid > *, .post-card > *, .pc-body > *, .featured-post > *, .fp-body > *, .post-cross-links > *, .pxl-section > * { margin-block-start: 0; } .sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; } .sec-head h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; font-size: clamp(30px, 4.2vw, 44px); margin: 0; } /* Feature-headline modifier (home.css 164 .sec-head h2.big). Canonical spec is weight 800, but display headings cap at 700 (Fixel Display ships 500/600/700 — see the Phase-4 header note); the 800→700 down-weight is the intentional font swap. */ .sec-head h2.big { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(32px, 5vw, 56px); } .sec-head .hl, .hero h1 .hl, .band h2 .hl { background: var(--wp--preset--color--yellow); padding: 0 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .sec-head .more { color: var(--wp--preset--color--blue); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } /* item 2b (2026-06-18): bottom-of-section "see all" link (home events slot). The rule above is scoped to .sec-head; this centers an equivalent link beneath a section's body. No underline — the prototype uses colour as the only link affordance. */ .more-foot { margin-block-start: 28px; text-align: center; } .more-foot a { color: var(--wp--preset--color--blue); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } /* Self-service portal link (pushua/self-service-link block, home/archive arrow variant): the block renders a `.more` paragraph + arrow — the SAME affordance/class as „Alle Termine →“. `.sec-head .more` + the post-content rule style it on the home; style the link explicitly so the archive (not post-content, not in .sec-head) matches — blue, 600, underlined. The footer list-item instance is a plain link that inherits `.foot-col a`. */ .more .self-service-link { color: var(--wp--preset--color--blue); font-weight: 600; font-size: 14px; text-decoration: underline; } /* Footer: when the portal page is unseeded the block self-degrades to '' — hide the now-empty list-item so no blank bullet remains (codex P3). The inline authored markup leaves no whitespace inside the
  • , so :empty matches. */ .foot-col li:empty { display: none; } @media (min-width: 782px) { .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } /* ── Hero / PageHero (home.css 105-136) ─────────────────────────────────── */ .hero { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 5vw, 80px); } .hero .grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .hero-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 6px 14px; background: var(--wp--preset--color--yellow-soft); border-radius: var(--wp--custom--pill-radius); /* 500 (Medium) — deliberately aligned to the regular-mono archetype (.mono is W500), NOT the prototype's 600. The proto badge is 600 in JetBrains Mono; in IBM Plex Mono 600 reads heavier, so the consistency pass folds the badge onto the shared 500 weight. */ font-size: 12px; font-weight: 500; font-family: var(--f-mono); color: var(--wp--preset--color--blue-deep); letter-spacing: 0.04em; } .hero-badge .dot { width: 6px; height: 6px; background: var(--wp--preset--color--blue); border-radius: 50%; } .hero h1 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.035em; /* 0.92 not 1.0: Fixel Display sits taller in its line box than the design's Manrope, so 1.0 reads looser — tightened to match the prototype's hero rhythm (font swap). */ line-height: 0.92; margin-top: 18px; font-size: clamp(38px, 8.2vw, 76px); } .hero .lede { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin-top: 22px; max-width: 520px; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-photos { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 22vw); gap: 12px; } .hero-photos .ph:nth-child(1), .hero-photos .ph:nth-child(4) { grid-column: 1 / 3; } @media (min-width: 782px) { .hero-photos { grid-auto-rows: 160px; } } @media (min-width: 1000px) { .hero .grid { grid-template-columns: 1.1fr 1fr; } .hero-photos { grid-auto-rows: 180px; } } @media (min-width: 1600px) { .hero h1 { font-size: clamp(76px, 5.4vw, 92px); } } /* ── Stats / Impact strip (dark) (home.css 138-154) ─────────────────────── */ .stats { background: var(--wp--preset--color--ink); color: #fff; } .stats .wrap { padding-block: clamp(28px, 3vw, 40px); } .stats .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: center; } .stat .num { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(34px, 4vw, 44px); color: var(--wp--preset--color--yellow); } .stat .lab { font-size: 13px; color: #b3bdd4; margin-top: 4px; } .stats .cta { grid-column: 1 / -1; display: flex; } .stats .cta a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--wp--custom--pill-radius); border: 1.5px solid rgba(255, 255, 255, 0.25); color: #fff; font-weight: 600; font-size: 14px; } @media (min-width: 1000px) { .stats .grid { grid-template-columns: repeat(3, 1fr) auto; } .stats .cta { grid-column: auto; justify-content: flex-end; } } /* ── Theme cards — fill variant (home.css 232-248) ──────────────────────── */ .themes-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 600px) { .themes-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .themes-grid { grid-template-columns: repeat(4, 1fr); } } .theme-card { color: #fff; padding: 24px; border-radius: var(--wp--custom--card-radius-lg); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; } /* 4-up only: anchor every card's paragraph on its FIRST LINE (like the prototype), so the heading grows upward from that line and the paragraph flows down. Reserve the heading band to its max height at this tier (3 lines) and bottom-align the heading into it — then idx + gap + heading-band are all fixed, so the paragraph starts at the same y in every card regardless of heading/paragraph length. At ≤2-up the copy already balances (equal line counts), so space-between is kept. */ @media (min-width: 1000px) { .theme-card { min-height: 240px; justify-content: flex-start; } .theme-card > .wp-block-group { margin-block-start: 34px; } .theme-card h3 { min-height: calc(3 * 1.1em); display: flex; flex-direction: column; justify-content: flex-end; } } .theme-card .idx { font-family: var(--f-mono); font-weight: 500; font-size: 11px; opacity: 0.9; } .theme-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; } /* Card title links use the card's own foreground (white on red/blue/ink, ink on yellow via .t-kultur), not theme.json elements.link blue — which would render the title invisible on the blue card (codex a11y-1). Underline-on-interaction is the non-colour link affordance (SC 1.4.1). */ .theme-card h3 a { color: inherit; text-decoration: none; } .theme-card h3 a:hover, .theme-card h3 a:focus { text-decoration: underline; } .theme-card p { font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; opacity: 0.95; } .theme-card.t-hilfe { background: var(--wp--preset--color--red); } .theme-card.t-ankommen { background: var(--wp--preset--color--blue); } .theme-card.t-kultur { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); } .theme-card.t-stimme { background: var(--wp--preset--color--ink); } /* ── Mitmachen & Spenden band + tone variants (home.css 264-276) ────────── */ .band { background: var(--wp--preset--color--yellow); } .band .wrap { padding-block: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } /* Band eyebrow (design source = blue-deep mono kicker above the title). The base .kicker is blue; on the yellow band the design uses blue-deep. */ .band .kicker { color: var(--wp--preset--color--blue-deep); } /* gap via canonical eyebrow→heading rule */ .band h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(28px, 3.6vw, 40px); color: var(--wp--preset--color--ink); margin: 0; } .band p:not(.kicker) { font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--blue-deep); margin: 12px 0 0; max-width: 520px; } .band .actions { display: flex; flex-wrap: wrap; gap: 12px; } .band.band-ink { background: var(--wp--preset--color--ink); } .band.band-ink h2 { color: #fff; } .band.band-ink p { color: #b3bdd4; } .band.band-paper { background: var(--wp--preset--color--paper); border-block: 1px solid var(--wp--preset--color--rule); } .band.band-paper p { color: var(--wp--preset--color--ink-soft); } @media (min-width: 782px) { .band .wrap { grid-template-columns: 1.4fr 1fr; } .band .actions { justify-content: flex-end; } } /* ── Partners / Förderer strip (home.css 278-285) ───────────────────────── */ .partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; } @media (min-width: 600px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .partners-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } } .partner { padding: 20px 16px; border: 1px solid var(--wp--preset--color--rule); border-radius: 12px; text-align: center; font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--wp--preset--color--ink-soft); letter-spacing: 0.05em; } /* ── SectionSubnav (sticky numbered scroll-spy; not in home.css) ─────────── */ .section-subnav { position: sticky; top: var(--header-h); z-index: 10; background: var(--wp--preset--color--bg); border-block: 1px solid var(--wp--preset--color--rule); } .section-subnav .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-block: 14px; } /* Neutralize core's flow-layout block-gap (margin-block-start on every non-first child), which in this flex row would shift items 2+ down and leave 01 sitting higher. */ .section-subnav .wrap > * { margin-block: 0; } .section-subnav a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; color: var(--wp--preset--color--ink-soft); border-bottom: 2px solid transparent; padding-bottom: 2px; } .section-subnav a .n { color: var(--wp--preset--color--blue); } .section-subnav a:hover { color: var(--wp--preset--color--ink); text-decoration: none; } .section-subnav a.is-active { color: var(--wp--preset--color--ink); border-bottom-color: var(--wp--preset--color--yellow); } /* ── Empty state (placeholder for deferred dynamic/form content) ─────────── */ .empty-state { border: 1px dashed var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius); padding: 32px; text-align: center; color: var(--wp--preset--color--ink-soft); font-size: 14px; background: var(--wp--preset--color--paper); } .empty-state .es-kicker { display: block; color: var(--wp--preset--color--blue); margin-bottom: 8px; } /* The PROTOTYPE's banner anatomy (gemeinschaft-shared.jsx EmptyState, review D6): icon disc + display title + body + next-step CTA — an empty calendar reads as an invitation, never a dead end. */ .empty-state.es-banner { display: flex; align-items: center; gap: 22px; text-align: left; padding: 40px 28px; } .empty-state.es-banner .es-kicker { margin-bottom: 0; } .empty-state.es-banner .es-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--rule); position: relative; } .empty-state.es-banner .es-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: var(--wp--preset--color--ink-soft); mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .empty-state.es-banner .es-text { flex: 1; } .empty-state.es-banner .es-text p { margin: 0; line-height: 1.5; } .empty-state.es-banner .es-title { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--wp--preset--color--ink); margin: 6px 0 4px; } .empty-state.es-banner .es-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--ink); color: #fff; padding: 12px 18px; border-radius: var(--wp--custom--pill-radius); font-weight: 600; font-size: 13px; text-decoration: none; } .empty-state.es-banner .es-cta:hover, .empty-state.es-banner .es-cta:focus-visible { text-decoration: none; opacity: 0.9; } @media (max-width: 599.98px) { .empty-state.es-banner { flex-direction: column; text-align: center; } } /* ── Phase-6 dynamic-block slot (machine-addressable; codex F3) ─────────── Stable insertion point: `.is-pushua-slot` group + metadata.name="pushua/slot-*". Phase 6 replaces the inner empty-state with the SSR event/Aktuelles blocks. The wrapper is layout-neutral on the front so it leaves no artifact when filled. */ .is-pushua-slot { display: block; } /* PHASE 4 — EDITORIAL PAGES (Was-wir-tun, Über-uns, Mitmachen, Spenden, Kontakt) */ /* ============================================================================ Consolidated bespoke layer for the five non-home editorial pages. Append to components.css (the global/shared layer above). Mobile-first; SUPERSET breakpoints 600 / 700 / 782 / 1000 / 1200 / 1600 — the FULL multi-column desktop layout fires at 1000 (arch-ref §10), card grids step at 600/700. Every colour = theme.json preset/accent token; fonts = --f-display/-body/-mono; radii/spacing/tracking = --wp--custom--* tokens. The only raw values are the dark-surface greys established on ink backgrounds in components.css (#b3bdd4 — the ONE on-ink grey, phase-4 guard + review D13 — and rgba(255,255,255,…)) and translucent white/paper tints on the yellow F4 direct-contact card (.direct-card / .direct-link — there is no token for a semi-opaque-on-yellow fill). Display headings cap at weight 700 (Fixel Display ships 500/600/700). Links on coloured/dark surfaces set color:inherit (theme.json colours links blue — invisible on blue/ink) with underline-on-interaction as the non-colour affordance (WCAG SC 1.4.1). Shared NEW classes (deduped here, used by ≥2 pages): .hero-copy, .hero-aside, the offset photo-grid variant (.hero-photos.hero-offset, .hero-photos.offset), .contact-grid, .field/.field-grid/.field-full/.field-label, .form-disabled-cta, .fd-dot, .consent-block, .consent-row, .sec-anchor, .sec-head-split, .sec-intro. GOTCHAS & CONVENTIONS (added 2026-06-04, rendered-fidelity pass): • BLOCK-GAP vs CUSTOM GRIDS — every group rendered as a custom CSS grid is also `.is-layout-flow`, so the editor injects `margin-block-start: ` on each non-first child, shifting grid items 2+ DOWN in their cells (this is why a card can sit higher than its row-mates). It is neutralized by the "block-gap, one level down" reset near `.sec` (and `.wp-block-post-content > .alignfull` for sections). ⚠ WHEN YOU ADD A NEW CUSTOM GRID, ADD ITS SELECTOR TO THAT RESET LIST — otherwise its first child will float above the rest. Row/column spacing = each grid's `gap`. • CTA ICONS — opt-in per button via `.cta-arrow` (forward actions) / `.cta-heart` (Spenden) + `.cta-lg` (large size); mask-image glyphs that inherit the link colour. Do NOT blanket-apply by button style (heart belongs only on "Spenden"). • Full-width sections sit FLUSH (block-gap zeroed); each owns its rhythm via `padding-block` + the `.ruled` top border. Don't add inter-section margins. ========================================================================== */ /* ── Global in-page anchor offset ───────────────────────────────────────── Every id'd jump target (section subnavs, the Was-wir-tun hero pills #hilfe/#ankommen/#kultur/#stimme, the Spenden #geld/#sach, the Mitmachen/Über-uns subnav targets) clears the sticky header. :where() keeps specificity 0 so per-page scroll-margin tweaks below still win. */ :where(section[id], .sec[id], [id].sec) { scroll-margin-top: calc(var(--header-h) + 16px); } /* ── Shared hero columns (canonical) ────────────────────────────────────── The .hero .grid (components.css) makes these two children grid cells. They need a base display so the bare markup (.hero-copy / .hero-aside) lays out on every page; per-page tweaks below scope to .hero-{spenden,wwt,mitmachen}. */ .hero-copy { display: flex; flex-direction: column; } .hero-aside { display: flex; flex-direction: column; } /* ── Shared offset photo grid (Kontakt + Mitmachen) ─────────────────────── The staggered „Versatz" 2×2 mosaic. Two class targets exist in the markup — Kontakt carries `.hero-photos.hero-offset`, Mitmachen `.hero-photos.offset` — so both are unified into one rule set (identical intent). Overrides the global .hero-photos span rules: every tile is a uniform cell; the margin-top stagger only fires at ≥1000 (mobile stays flush so nothing overflows at 390). */ .hero-photos.hero-offset, .hero-photos.offset { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 24vw); gap: 10px; } .hero-photos.hero-offset .ph:nth-child(1), .hero-photos.hero-offset .ph:nth-child(4), .hero-photos.offset .ph:nth-child(1), .hero-photos.offset .ph:nth-child(4) { grid-column: auto; } @media (min-width: 782px) { .hero-photos.hero-offset, .hero-photos.offset { grid-auto-rows: 150px; } } @media (min-width: 1000px) { /* Uniform-height tiles on auto rows (like the prototype): the row tracks absorb the stagger margins so the −12px pull-up no longer makes a tile grow and overlap its column-mate (Logistik over Sprachcafé). align-items:start stops the stretch. */ .hero-photos.hero-offset, .hero-photos.offset { grid-auto-rows: auto; align-items: start; } .hero-photos.hero-offset .ph, .hero-photos.offset .ph { height: 160px; } .hero-photos.hero-offset .ph:nth-child(1), .hero-photos.offset .ph:nth-child(1) { margin-top: 0; } .hero-photos.hero-offset .ph:nth-child(2), .hero-photos.offset .ph:nth-child(2) { margin-top: 24px; } .hero-photos.hero-offset .ph:nth-child(3), .hero-photos.offset .ph:nth-child(3) { margin-top: -12px; } .hero-photos.hero-offset .ph:nth-child(4), .hero-photos.offset .ph:nth-child(4) { margin-top: 12px; } } /* ── Shared anchored-section helpers (Mitmachen + Über-uns idiom) ────────── Pull in-page jump targets clear of the sticky header (+ subnav where present). */ .sec-anchor { scroll-margin-top: calc(var(--header-h) + 64px); } /* Split section head: heading block left, intro paragraph right (≥1000). */ .sec-head-split .sec-intro { font-size: clamp(15px, 1.6vw, 16px); line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0; max-width: 580px; } @media (min-width: 1000px) { .sec-head-split { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 4vw, 56px); align-items: end; } } /* ── Shared two-track contact grid (Kontakt + Mitmachen) ─────────────────── 1-col mobile → form-track | aside-track at 1000; align-items:start so the aside doesn't stretch. Kontakt fills it with .contact-form-card + .contact-live; Mitmachen with .contact-form + .contact-info. */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.5fr 1fr; } } /* ── Shared disabled-field styling (Mitmachen signup + contact previews) ─── Non-submittable preview inputs (codex F3): dimmed + not-allowed; labels above stay full-contrast. */ .field-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .field-grid { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; } .field-full { grid-column: 1 / -1; } .field-label { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--wp--preset--color--ink-soft); letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; } .field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--wp--preset--color--rule); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); } .field textarea { resize: none; } .field input[disabled], .field textarea[disabled] { opacity: 0.55; cursor: not-allowed; } /* "Formular folgt" disabled-submit stand-in (non-submittable; codex F3) */ .form-disabled-cta { margin-top: 24px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--wp--custom--pill-radius); border: 1px dashed var(--wp--preset--color--rule); background: var(--wp--preset--color--bg); font-size: 12px; color: var(--wp--preset--color--ink-soft); text-transform: none; } .form-disabled-cta .fd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--wp--preset--color--yellow); border: 1px solid var(--wp--preset--color--rule); } /* Consent rows (disabled previews; Mitmachen signup + Kontakt) */ .consent-block { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--ink-soft); } .consent-row .box { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border: 1.5px solid var(--wp--preset--color--ink); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--wp--preset--color--paper); } .consent-row .box.is-checked { background: var(--wp--preset--color--ink); } /* ════════════════════════════════════════════════════════════════════════ PAGE — Was wir tun (page-was-wir-tun) Hero anchor-pill aside, per-theme section opener, static ProjektCard grid. ════════════════════════════════════════════════════════════════════════ */ /* ── Hero — anchor-pill aside ──────────────────────────────────────────── */ .hero-wwt .hero-aside { align-items: flex-start; } .hero-pills { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; } .hero-pills .pill { margin: 0; } .hero-pills .pill a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--wp--custom--pill-radius); border: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); text-decoration: none; letter-spacing: var(--wp--custom--mono-tracking); line-height: 1.2; } .hero-pills .pill a:hover, .hero-pills .pill a:focus-visible { border-color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 3px; } .hero-pills .pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Per-theme dot tint (decorative; the label carries the meaning). The yellow dot gets a hairline ring so it reads on the paper pill. */ .hero-pills .p-hilfe .dot { background: var(--wp--custom--accent--hilfe); } .hero-pills .p-ankommen .dot { background: var(--wp--custom--accent--ankommen); } .hero-pills .p-kultur .dot { background: var(--wp--custom--accent--kultur); box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule); } .hero-pills .p-stimme .dot { background: var(--wp--custom--accent--stimme); } @media (min-width: 1000px) { .hero-wwt .grid { grid-template-columns: 1.1fr 1fr; } .hero-pills { flex-direction: column; align-items: flex-start; } } /* ── Theme section opener (accent bar + mono eyebrow + H2 + lede + link) ── */ .section-opener { scroll-margin-top: calc(var(--header-h) + 8px); } .section-opener .opener-head { display: grid; grid-template-columns: 1fr; gap: 22px 48px; align-items: end; margin-bottom: 32px; } .section-opener .opener-eyebrow { display: flex; align-items: center; gap: 12px; line-height: 1; /* eyebrow→h2 gap via canonical rule */ } /* chunkier 36×6 marker than the thin --accent-bar-width token, per the design source */ .section-opener .opener-eyebrow .bar { display: inline-block; width: 36px; height: 6px; border-radius: 3px; flex-shrink: 0; } /* Theme-section headline (design source ThemeBlock h2 = 52px). Without this it falls back to the global h2 element (44px / weight 600 / -0.02em / 1.08) — lighter than a normal .sec-head. Weight capped at 700 (Fixel Display max; see header note). */ .section-opener h2 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; font-size: clamp(32px, 4.6vw, 52px); } .section-opener .opener-aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .section-opener .opener-lede { margin: 0; max-width: 520px; font-size: var(--wp--preset--font-size--lede); line-height: 1.55; color: var(--wp--preset--color--ink-soft); } .section-opener .opener-link { margin: 0; } .section-opener .opener-link a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; text-decoration: none; } .section-opener .opener-link a:hover, .section-opener .opener-link a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Per-theme accent: bar fill + eyebrow/link text. Yellow as TEXT fails AA on the page bg (1.4:1), so .t-kultur uses blue-deep for text (11:1) while the bar stays yellow (mirrors the design-source themeTextColor: yellow→blueDeep). */ .section-opener.t-hilfe .opener-eyebrow .bar { background: var(--wp--custom--accent--hilfe); } .section-opener.t-hilfe .opener-eyebrow, .section-opener.t-hilfe .opener-link a { color: var(--wp--custom--accent--hilfe); } .section-opener.t-ankommen .opener-eyebrow .bar { background: var(--wp--custom--accent--ankommen); } .section-opener.t-ankommen .opener-eyebrow, .section-opener.t-ankommen .opener-link a { color: var(--wp--custom--accent--ankommen); } .section-opener.t-kultur .opener-eyebrow .bar { background: var(--wp--custom--accent--kultur); } .section-opener.t-kultur .opener-eyebrow, .section-opener.t-kultur .opener-link a { color: var(--wp--preset--color--blue-deep); } .section-opener.t-stimme .opener-eyebrow .bar { background: var(--wp--custom--accent--stimme); } .section-opener.t-stimme .opener-eyebrow, .section-opener.t-stimme .opener-link a { color: var(--wp--preset--color--ink); } @media (min-width: 1000px) { .section-opener .opener-head { grid-template-columns: 1.1fr 1fr; } } /* ── ProjektCard grid (static placeholders; phase 6 makes them live) ─────── */ .projekt-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* Card grids reflow 1 → 2-col at 600 (the §10 per-block contract). The single (Hilfe) grid stays 1-col at every width. */ @media (min-width: 600px) { .projekt-grid { grid-template-columns: repeat(2, 1fr); } .projekt-grid.single { grid-template-columns: 1fr; } } .projekt-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; } .projekt-card .ph { border-radius: 0; min-height: 180px; } .projekt-card .projekt-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .projekt-card .projekt-eyebrow { color: var(--wp--preset--color--ink-soft); } /* gap via canonical eyebrow→heading rule */ .projekt-card h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--h3); line-height: 1.1; letter-spacing: -0.015em; } /* On the white paper card theme.json link blue is visible + AA (#1c52cf on #fff ≈ 6.6:1) → KEEP it (not color:inherit, which only applies on coloured cards); add underline-on-interaction. */ .projekt-card h3 a { text-decoration: none; } .projekt-card h3 a:hover, .projekt-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .projekt-card .projekt-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); } .projekt-card .projekt-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; color: var(--wp--preset--color--ink-soft); } .projekt-card .projekt-meta .m { display: inline-flex; align-items: center; gap: 6px; } .projekt-card .projekt-meta .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* Meta-dot tint per theme (decorative echo of the section accent). */ .t-hilfe .projekt-card .projekt-meta .dot { background: var(--wp--custom--accent--hilfe); } .t-ankommen .projekt-card .projekt-meta .dot { background: var(--wp--custom--accent--ankommen); } .t-kultur .projekt-card .projekt-meta .dot { background: var(--wp--custom--accent--kultur); box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule); } .t-stimme .projekt-card .projekt-meta .dot { background: var(--wp--custom--accent--stimme); } /* Card CTA (design source ProjektCard cta = 13.5px / weight 700 / blue, inline w/ arrow). Without a rule it renders as default body copy (16px / 400). Blue on white paper is AA (#1c52cf on #fff ≈ 6.6:1) → KEEP blue; underline-on-interaction (SC 1.4.1). */ .projekt-card .projekt-cta { margin: 14px 0 0; font-size: 13.5px; line-height: 1; } .projekt-card .projekt-cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wp--preset--color--blue); text-decoration: none; } .projekt-card .projekt-cta a:hover, .projekt-card .projekt-cta a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* The single (Hilfe) card spans the full content width → photo-left | body-right already at 600. */ @media (min-width: 600px) { .projekt-grid.single .projekt-card { grid-template-columns: 280px 1fr; } .projekt-grid.single .projekt-card .ph { min-height: 100%; } } /* Multi-card cells are ~260px at 600 (2-up) — too narrow for a side photo; they stay stacked until 1000, where the cells widen to ~450px. */ @media (min-width: 1000px) { .projekt-grid:not(.single) .projekt-card { grid-template-columns: 180px 1fr; } .projekt-grid:not(.single) .projekt-card .ph { min-height: 100%; } } /* ════════════════════════════════════════════════════════════════════════ PAGE — Über uns (page-ueber-uns) Solo-photo hero, Wer-wir-sind split + light stats, Ziele goal grid, Team grid, Transparenz (reg card + download card + Jahresberichte rows). ════════════════════════════════════════════════════════════════════════ */ /* ── Hero — single-photo aside variant (.hero-solo) ─────────────────────── */ .hero-solo .hero-aside { display: grid; } .hero-solo .hero-aside .ph { min-height: 240px; border-radius: var(--wp--custom--card-radius-lg); } @media (min-width: 1000px) { .hero-solo .hero-aside .ph { min-height: 320px; } } /* Anchor sections clear the sticky header + subnav on in-page jumps. */ .wer-wir-sind, .ziele, .team, .transparenz { scroll-margin-top: calc(var(--header-h) + 60px); } /* ── 01 Wer wir sind — two-column split + light stat grid ───────────────── */ .split { display: grid; grid-template-columns: 1fr; gap: 28px; } .split-head h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(30px, 4.2vw, 44px); margin: 0; /* eyebrow→h2 gap via canonical rule */ } .split-body { display: flex; flex-direction: column; gap: 18px; } .split-body > p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: var(--wp--preset--color--ink); margin: 0; } @media (min-width: 1000px) { .split { grid-template-columns: 1fr 2fr; gap: 56px; } } /* Light stat grid — blue numbers on the page bg, mono labels (the dark .stats lives in the global layer). */ .stats-light { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--wp--preset--color--rule); } .stats-light .num { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(30px, 3.4vw, 36px); color: var(--wp--preset--color--blue); margin: 0; } .stats-light .lab { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: var(--wp--custom--mono-tracking); color: var(--wp--preset--color--ink-soft); margin: 4px 0 0; } @media (min-width: 600px) { .stats-light { grid-template-columns: repeat(4, 1fr); } } /* ── 02 Ziele — paper section + 2×2 goal-card grid ──────────────────────── */ .ziele { background: var(--wp--preset--color--paper); } .ziele-intro { font-size: clamp(15px, 1.5vw, 16px); line-height: 1.55; color: var(--wp--preset--color--ink-soft); max-width: 580px; margin: -12px 0 28px; } .goals-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .goals-grid { grid-template-columns: 1fr 1fr; } } .goal-card { background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; position: relative; } .goal-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--wp--custom--accent-bar-width); z-index: 1; } .goal-card.g-hilfe::before { background: var(--wp--custom--accent--hilfe); } .goal-card.g-ankommen::before { background: var(--wp--custom--accent--ankommen); } .goal-card.g-kultur::before { background: var(--wp--custom--accent--kultur); } .goal-card.g-stimme::before { background: var(--wp--custom--accent--stimme); } .goal-card .ph { border-radius: 0; min-height: 160px; } .goal-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.92); padding: 4px 10px; border-radius: var(--wp--custom--pill-radius); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--wp--custom--mono-tracking); color: var(--wp--preset--color--ink); margin: 0; } .goal-badge .dot { width: 8px; height: 8px; border-radius: 50%; } .goal-card.g-hilfe .goal-badge .dot { background: var(--wp--custom--accent--hilfe); } .goal-card.g-ankommen .goal-badge .dot { background: var(--wp--custom--accent--ankommen); } .goal-card.g-kultur .goal-badge .dot { background: var(--wp--custom--accent--kultur); } .goal-card.g-stimme .goal-badge .dot { background: var(--wp--custom--accent--stimme); } .goal-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .goal-tag { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--wp--custom--mono-tracking); color: var(--wp--preset--color--ink-soft); margin: 0; } .goal-body h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.015em; line-height: 1.1; margin: 0; } .goal-body p { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0; } @media (min-width: 1000px) { .goal-card { grid-template-columns: 160px 1fr; } .goal-card .ph { min-height: 100%; height: 100%; } } /* ── 03 Team — member-card grid (1→2→4) + Ehrenamt CTA card ──────────────── */ .team-intro { font-size: clamp(15px, 1.5vw, 16px); line-height: 1.55; color: var(--wp--preset--color--ink-soft); max-width: 580px; margin: -12px 0 28px; } .team-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .team-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(4, 1fr); } } .team-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius); overflow: hidden; position: relative; display: flex; flex-direction: column; } .team-card .ph { border-radius: 0; aspect-ratio: 4 / 5; min-height: 0; } .vorstand-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--yellow); padding: 4px 10px; border-radius: var(--wp--custom--pill-radius); font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: var(--wp--custom--mono-tracking); margin: 0; } .vorstand-badge .dot { width: 6px; height: 6px; background: var(--wp--preset--color--yellow); border-radius: 50%; } .team-meta { padding: 16px; } .team-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .team-name-row h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0; line-height: 1.15; } .team-idx { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; color: var(--wp--preset--color--ink-soft); margin: 0; } .team-role-lead { color: var(--wp--preset--color--blue); margin: 6px 0 0; } .team-role { font-size: 12px; line-height: 1.45; color: var(--wp--preset--color--ink-soft); margin: 8px 0 0; } /* Ehrenamt CTA card — yellow fill, ink text; link inherits the card foreground (theme.json sets links blue, invisible on yellow), underline as the affordance. */ .team-card.team-cta { background: var(--wp--preset--color--yellow); border: none; color: var(--wp--preset--color--ink); padding: 20px; justify-content: space-between; gap: 16px; min-height: 280px; } .team-cta .team-cta-kicker { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--wp--custom--mono-tracking); color: var(--wp--preset--color--blue-deep); margin-block-start: 0; margin-inline: 0; /* bottom via canonical rule */ } .team-cta h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--wp--preset--color--ink); /* top gap via canonical rule */ } .team-cta p:not(.team-cta-kicker) { font-size: 12.5px; line-height: 1.5; color: var(--wp--preset--color--ink); margin: 0; } /* kicker→h3 gap via canonical rule */ .team-cta .team-cta-link { margin: 0; } .team-cta .team-cta-link a { color: inherit; text-decoration: none; font-weight: 700; font-size: 13.5px; } .team-cta .team-cta-link a:hover, .team-cta .team-cta-link a:focus-visible { text-decoration: underline; } /* ── 04 Transparenz — reg card + download card + Jahresberichte rows ─────── */ .transparenz { background: var(--wp--preset--color--paper); } .transparenz-intro { max-width: 580px; margin: 0; font-size: clamp(15px, 1.5vw, 16px); line-height: 1.55; color: var(--wp--preset--color--ink-soft); } .transparenz-row { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 1000px) { .transparenz-row { grid-template-columns: 1fr 1fr; } } /* Vereinsregister info card (light) */ .reg-card { background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius); padding: 28px; } .reg-kicker { color: var(--wp--preset--color--blue); margin: 0; } .reg-card h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 22px); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 16px; /* top gap via canonical rule */ } .reg-dl { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 12px; font-family: var(--f-mono); font-weight: 500; font-size: 13px; margin: 0; } .reg-dl dt { color: var(--wp--preset--color--ink-soft); margin: 0; } .reg-dl dd { color: var(--wp--preset--color--ink); margin: 0; } .reg-konto { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--wp--preset--color--rule); display: flex; flex-direction: column; gap: 4px; } .reg-konto-kicker { color: var(--wp--preset--color--blue); margin: 0; } .reg-iban { font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: var(--wp--preset--color--ink); letter-spacing: 0.02em; margin: 0; } .reg-bic { font-size: 11.5px; color: var(--wp--preset--color--ink-soft); margin: 0; } /* Satzung download card (dark) */ .dl-card { background: var(--wp--preset--color--ink); color: #fff; border-radius: var(--wp--custom--card-radius); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .dl-kicker { color: var(--wp--preset--color--yellow); margin: 0; } .dl-card h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 12px; color: #fff; /* top gap via canonical rule */ } .dl-card-top p:not(.dl-kicker) { font-size: 14px; line-height: 1.55; color: #b3bdd4; margin: 0; } .dl-cta { margin: 0; } .dl-cta a { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); padding: 14px 22px; border-radius: var(--wp--custom--pill-radius); font-weight: 700; font-size: 14px; text-decoration: none; } .dl-cta a:hover, .dl-cta a:focus-visible { text-decoration: underline; } .dl-flag { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--yellow); padding: 3px 8px; border-radius: 4px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--wp--custom--mono-tracking); text-decoration: none; } /* Jahresberichte — header + download rows */ .jahresberichte { margin-top: 32px; } .jb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .jb-head h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.015em; margin: 0; } .jb-since { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--wp--custom--mono-tracking); color: var(--wp--preset--color--ink-soft); margin: 0; } .download-rows { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 1000px) { .download-rows { grid-template-columns: repeat(3, 1fr); } } .download-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--wp--preset--color--rule); border-radius: 12px; background: var(--wp--preset--color--bg); text-decoration: none; color: var(--wp--preset--color--ink); } /* card-style anchor: border is the hover affordance — opt out of the global link underline. */ .download-row:hover, .download-row:focus-visible { border-color: var(--wp--preset--color--blue); text-decoration: none; } .dl-badge { min-width: 40px; height: 44px; padding: 0 8px; border-radius: 6px; flex-shrink: 0; background: var(--wp--preset--color--yellow-soft); color: var(--wp--preset--color--blue-deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .dl-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dl-title { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--ink); } .dl-meta { font-size: 10.5px; color: var(--wp--preset--color--ink-soft); } .dl-arrow { color: var(--wp--preset--color--blue); font-size: 16px; flex-shrink: 0; } .jb-note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--ink-soft); } .jb-note a { color: var(--wp--preset--color--blue); } .jb-note a:hover, .jb-note a:focus-visible { color: var(--wp--preset--color--blue-deep); } /* ════════════════════════════════════════════════════════════════════════ PAGE — Mitmachen (page-mitmachen) Offset hero (shared above), role cards, signup preview + aside, partner CTA cards + dark band, newsletter band, contact preview + info aside. ════════════════════════════════════════════════════════════════════════ */ /* ── Hero — copy left / offset photo grid right (grid + .hero-photos.offset shared above) ────────────────────────────────────────────────────────── */ .hero-mitmachen .grid { grid-template-columns: 1fr; } @media (min-width: 1000px) { .hero-mitmachen .grid { grid-template-columns: 1.1fr 1fr; } } .hero-mitmachen .hero-copy .kicker { margin-bottom: 14px; } /* ── 01 Ehrenamt — text-only role cards (4-up single row at desktop) ─────── */ .role-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .role-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .role-grid { grid-template-columns: repeat(4, 1fr); } } .role-card { position: relative; overflow: hidden; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius); padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 12px; } .role-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; } /* Per-theme accent bar — secondary/Bereich scheme shared with the Projekt cards (hilfe=red · ankommen=blue · kultur=yellow · stimme=ink). The single mono line is the time-commitment only; the „01 · ROLLE" index was dropped (two mono labels crowded + wrapped on the narrow 4-up cards). The commitment stays neutral ink-soft and the bar carries the colour — like the Projekt cards' neutral meta + accent marker. */ .role-card.t-hilfe::before { background: var(--wp--custom--accent--hilfe); } .role-card.t-ankommen::before { background: var(--wp--custom--accent--ankommen); } .role-card.t-kultur::before { background: var(--wp--custom--accent--kultur); } .role-card.t-stimme::before { background: var(--wp--custom--accent--stimme); } .role-meta { display: flex; align-items: center; gap: 12px; } /* 600, not the archetype's 700 — as the card's sole mono eyebrow the heavier tag weight read too bold; 600 sits between the 500 regular tier and the 700 badges. */ .role-commit { color: var(--wp--preset--color--ink-soft); margin: 0; font-weight: 600; } .role-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; margin: 0; /* German compounds (e.g. „Veranstaltungsorganisation“) must wrap, not clip, in the narrow 4-up column — card has overflow:hidden. */ overflow-wrap: break-word; hyphens: auto; } .role-card p { font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0; } /* ── 02 Anmelden — non-submittable signup preview + aside + F4 fallback ──── */ .signup-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 1000px) { .signup-grid { grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; } } .signup-form { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: clamp(24px, 3vw, 36px); } .signup-form .kicker { margin-block-start: 0; margin-inline: 0; } /* bottom via canonical eyebrow→heading rule (H2 → 12px) */ .signup-form h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 6px; } .signup-intro, .contact-note, .signup-note { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); } .signup-intro { margin: 0 0 24px; max-width: 520px; } /* Help-area chips (disabled, non-interactive) */ .help-block { margin-top: 22px; } .help-label { display: block; color: var(--wp--preset--color--ink-soft); margin-bottom: 10px; } .help-chips { display: flex; flex-wrap: wrap; gap: 8px; } .help-chip { padding: 9px 16px; border-radius: var(--wp--custom--pill-radius); border: 1px solid var(--wp--preset--color--rule); background: transparent; font-size: 13.5px; font-weight: 500; color: var(--wp--preset--color--ink-soft); } .help-chip.is-on { border-color: var(--wp--preset--color--yellow); background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); font-weight: 600; opacity: 1; } .help-chip.is-on::before { content: "\2713\00a0"; } .signup-note { margin: 14px 0 0; font-size: 11px; } /* Aside: direct-contact (F4 fallback, yellow) + steps card */ .signup-aside { display: flex; flex-direction: column; gap: 14px; } .kicker-on-yellow { color: var(--wp--preset--color--blue-deep); } .direct-card { background: var(--wp--preset--color--yellow); border-radius: var(--wp--custom--card-radius-lg); padding: 26px; } .direct-card .kicker { margin-block-start: 0; margin-inline: 0; } /* bottom via canonical rule (H3 → 8px) */ .direct-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 8px; color: var(--wp--preset--color--ink); } .direct-card p:not(.kicker) { font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--blue-deep); margin: 0; } .direct-links { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } /* Links sit on the yellow card → inherit the card foreground, never theme.json blue (a11y). */ .direct-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); color: var(--wp--preset--color--ink); text-decoration: none; } /* card-style anchor: background is the card affordance + the .dl-value underline below is the scoped link cue — opt the whole card out of the global link underline. */ .direct-link:hover, .direct-link:focus-visible { background: rgba(255, 255, 255, 0.8); text-decoration: none; } .direct-link:hover .dl-value, .direct-link:focus-visible .dl-value { text-decoration: underline; } .dl-label { color: var(--wp--preset--color--blue-deep); } .dl-value { font-weight: 700; font-size: 14px; color: var(--wp--preset--color--ink); } .steps-card { background: var(--wp--preset--color--bg); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: 26px; } .steps-kicker { color: var(--wp--preset--color--ink-soft); margin: 0; } .steps-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .steps-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--ink); } .steps-list .step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--wp--preset--color--blue); color: var(--wp--preset--color--paper); font-family: var(--f-mono); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* ── 03 Partner — CTA cards (3) + dark CTA band ─────────────────────────── */ .partner-cta-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .partner-cta-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .partner-cta-grid { grid-template-columns: repeat(3, 1fr); } } .partner-cta-card { border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 300px; } .partner-cta-card.tone-paper { background: var(--wp--preset--color--bg); } .partner-cta-card.tone-yellow { background: var(--wp--preset--color--yellow); border-color: var(--wp--preset--color--yellow); } .partner-cta-card.tone-sky { background: var(--wp--custom--accent--ankommen-soft); } .pcc-top { display: flex; align-items: center; justify-content: space-between; } .pcc-icon { font-size: 22px; line-height: 1; color: var(--wp--preset--color--ink); margin: 0; } .pcc-idx { font-family: var(--f-mono); font-weight: 500; font-size: 11px; color: var(--wp--preset--color--ink-soft); letter-spacing: 0.08em; margin: 0; } .pcc-eyebrow { margin: 22px 0 0; color: var(--wp--preset--color--blue); } .partner-cta-card.tone-yellow .pcc-eyebrow { color: var(--wp--preset--color--blue-deep); } /* ink-soft on yellow is only 4.18:1 (sub-AA); deepen the index to blue-deep (8:1). */ .partner-cta-card.tone-yellow .pcc-idx { color: var(--wp--preset--color--blue-deep); } .partner-cta-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 12px; /* top gap via canonical rule */ } .partner-cta-card p:not(.pcc-eyebrow) { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink); margin: 0; } .partner-cta-card.tone-paper p, .partner-cta-card.tone-sky p { color: var(--wp--preset--color--ink-soft); } /* CTA link inherits the card foreground (ink on every tone here), never theme.json blue (a11y). */ .pcc-cta { margin: 0; } .pcc-cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--wp--preset--color--ink); text-decoration: none; } .pcc-cta a:hover, .pcc-cta a:focus-visible { text-decoration: underline; } /* Dark CTA band (existing partners + yellow CTA) */ .cta-band { margin-top: 24px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-radius: 22px; padding: clamp(24px, 3vw, 32px); display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 1000px) { .cta-band { grid-template-columns: 1.6fr 1fr; gap: 40px; } } .cta-band-eyebrow { color: var(--wp--preset--color--yellow); margin: 0; } .cta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cta-chip { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: #fff; } .cta-chip-add { background: rgba(255, 255, 255, 0.08); border: 1px dashed var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); } .cta-band-actions { display: flex; } @media (min-width: 1000px) { .cta-band-actions { justify-content: flex-end; } } /* ── Newsletter band (dark, non-submittable; mirrors footer .nl) ─────────── */ .newsletter-band { background: var(--wp--preset--color--ink); color: #fff; } .newsletter-band .wrap { padding-block: clamp(40px, 4.5vw, 64px); } .nlb-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 1000px) { .nlb-grid { grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 56px); } } .nlb-eyebrow { color: var(--wp--preset--color--yellow); margin: 0; } .newsletter-band h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 12px 0 16px; } .nlb-copy p:not(.nlb-eyebrow) { font-size: 16px; line-height: 1.55; color: #b3bdd4; margin: 0; max-width: 520px; } .nlb-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .nlb-form input { flex: 1; min-width: 200px; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #fff; font-family: inherit; font-size: 14px; } .nlb-form input[disabled] { opacity: 0.55; cursor: not-allowed; } .nlb-soon { font-size: 11px; color: #b3bdd4; } /* ── Kontakt block (Mitmachen) — preview form + info aside (F4 fallback) ──── */ .contact-form { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: clamp(24px, 3vw, 36px); } .topic-block { margin-bottom: 24px; } .topic-label { display: block; color: var(--wp--preset--color--ink-soft); margin-bottom: 10px; } .topic-pills { display: flex; flex-wrap: wrap; gap: 8px; } .topic-pill { padding: 9px 16px; border-radius: var(--wp--custom--pill-radius); border: 1px solid var(--wp--preset--color--rule); background: transparent; font-size: 13.5px; font-weight: 500; color: var(--wp--preset--color--ink-soft); } .topic-pill.is-on { border-color: var(--wp--preset--color--yellow); background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); font-weight: 600; opacity: 1; } .contact-note { margin: 14px 0 0; font-size: 11px; } .contact-info { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius); padding: 24px; } .ci-kicker { color: var(--wp--preset--color--ink-soft); margin: 0; } .ci-name { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin: 6px 0 0; } .ci-role { font-size: 11.5px; color: var(--wp--preset--color--ink-soft); margin: 4px 0 0; } .ci-rows { display: grid; grid-template-columns: 96px 1fr; row-gap: 8px; column-gap: 12px; margin: 18px 0 0; font-size: 14px; font-family: var(--f-mono); font-weight: 500; } .ci-rows dt { color: var(--wp--preset--color--ink-soft); margin: 0; } .ci-rows dd { margin: 0; line-height: 1.5; color: var(--wp--preset--color--ink); } /* Real channel links keep theme.json blue here (light card, AA contrast), underline on hover. */ .ci-rows dd a { color: var(--wp--preset--color--blue); text-decoration: none; } .ci-rows dd a:hover, .ci-rows dd a:focus-visible { text-decoration: underline; } .ci-visit { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--wp--preset--color--rule); } .ci-visit-label { color: var(--wp--preset--color--ink-soft); margin: 0 0 6px; } .ci-visit p:not(.ci-visit-label) { font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--ink); margin: 0; } /* ════════════════════════════════════════════════════════════════════════ PAGE — Spenden (page-spenden) Hero (lede-in-aside), Wohin accent-bar cards, Geldspende dark + yellow bank box, Sachspenden link card, Reassurance trio. ════════════════════════════════════════════════════════════════════════ */ /* ── Hero — lede + actions in the right column (ledeInAside) ─────────────── */ .hero-spenden h1 { font-size: clamp(40px, 8vw, 76px); } .hero-spenden .hero-aside { gap: 22px; } .hero-spenden .hero-aside .lede { margin-top: 0; max-width: 460px; } .hero-spenden .hero-aside .actions { margin-top: 0; } @media (min-width: 1000px) { .hero-spenden .grid { grid-template-columns: 1.1fr 1fr; align-items: end; } } /* ── sec-head H2 inline en-dash (muted, weight matched) ─────────────────── */ .sec-head h2 .dash { color: var(--wp--preset--color--ink-soft); font-weight: 700; } /* ── Wohin — accent-bar theme cards (white card, left accent bar) ────────── */ .bar-cards { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .bar-cards { grid-template-columns: 1fr 1fr; } } .theme-card-bar { position: relative; overflow: hidden; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: 28px 28px 28px 32px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; /* card rhythm = eyebrow→h3 tier (8px) */ } .theme-card-bar::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; } .theme-card-bar.t-hilfe::before { background: var(--wp--custom--accent--hilfe); } .theme-card-bar.t-ankommen::before { background: var(--wp--custom--accent--ankommen); } .theme-card-bar h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; font-size: clamp(24px, 3vw, 28px); margin: 0; } .theme-card-bar p:not(.bar-eyebrow) { font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0; } /* Shared accent eyebrow (mono dot + label) — Wohin / Sachspenden / Reassurance */ .bar-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--ink-soft); margin: 0; } .bar-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .t-hilfe > .bar-eyebrow { color: var(--wp--preset--color--red); } .t-ankommen > .bar-eyebrow { color: var(--wp--preset--color--blue); } /* ── Geldspende — dark section + yellow bank box ─────────────────────────── */ .geldspende { scroll-margin-top: var(--header-h); } .geld-panel { background: var(--wp--preset--color--ink); color: #fff; border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr; } @media (min-width: 1000px) { .geld-panel { grid-template-columns: 1fr 1.05fr; } } .geld-copy { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: space-between; } .kicker.on-ink { color: var(--wp--preset--color--yellow); } .geld-copy h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(28px, 3.6vw, 40px); color: #fff; margin: 0 0 16px; /* eyebrow→h2 gap via canonical rule */ } .geld-copy h2 .em-yellow { color: var(--wp--preset--color--yellow); } .geld-copy > p:not(.kicker) { font-size: 15.5px; line-height: 1.6; color: #b3bdd4; margin: 0; max-width: 460px; } .geld-copy .geld-fine { font-size: 13.5px; line-height: 1.6; color: #b3bdd4; margin: 14px 0 0; max-width: 460px; } .geld-assure { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 32px; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--wp--custom--mono-tracking); color: #b3bdd4; } .geld-assure .assure { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .geld-assure .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--yellow); flex-shrink: 0; } .bank-box { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; } .bank-eyebrow { color: var(--wp--preset--color--blue-deep); margin: 0; } .bank-rows { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 4px 16px; font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; line-height: 1.5; } @media (min-width: 600px) { .bank-rows { grid-template-columns: 104px 1fr; row-gap: 14px; align-items: baseline; } } /* blue-deep (8:1 on yellow) — ink-soft would fail AA on the yellow box (4.18:1). */ .bank-rows .bank-k { color: var(--wp--preset--color--blue-deep); letter-spacing: var(--wp--custom--mono-tracking); margin: 8px 0 0; font-size: 11px; } @media (min-width: 600px) { .bank-rows .bank-k { margin: 0; font-size: 13.5px; } } .bank-rows .bank-v { margin: 0; color: var(--wp--preset--color--ink); } .bank-rows .bank-v.strong { font-weight: 600; } .bank-rows .bank-v.iban { font-weight: 700; font-size: 15px; letter-spacing: 0.04em; } .bank-actions { margin: 26px 0 0; } .bank-paypal { display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding: 12px 18px; border-radius: var(--wp--custom--pill-radius); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; } .bank-paypal:hover, .bank-paypal:focus-visible { text-decoration: underline; color: var(--wp--preset--color--paper); } /* ── Sachspenden — link card (photo + body) ─────────────────────────────── */ .link-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr; } @media (min-width: 1000px) { .link-card { grid-template-columns: 320px 1fr; } } .link-card .link-card-photo { border-radius: 0; min-height: 200px; height: 100%; } .link-card-body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; } .link-card-body h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(26px, 3.4vw, 32px); margin: 0; } /* Title + "more" links carry the card's own foreground (not the global blue), so they read on the white card; underline-on-interaction is the affordance. */ .link-card-body h2 a { color: var(--wp--preset--color--ink); text-decoration: none; } .link-card-body h2 a:hover, .link-card-body h2 a:focus-visible { text-decoration: underline; } .link-card-body p:not(.bar-eyebrow) { font-size: 15.5px; line-height: 1.6; color: var(--wp--preset--color--ink-soft); margin: 0; } .link-card-more { margin: 6px 0 0; } .link-card-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--blue); font-weight: 700; font-size: 14px; text-decoration: none; } .link-card-more a:hover, .link-card-more a:focus-visible { text-decoration: underline; } /* ── Reassurance trio — 3 info cards ────────────────────────────────────── */ .reassure-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .reassure-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .reassure-grid { grid-template-columns: repeat(3, 1fr); } } .reassure-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 200px; } .reassure-top { display: flex; flex-direction: column; gap: 8px; } /* card rhythm = eyebrow→h3 tier (8px) */ .reassure-card h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; font-size: clamp(22px, 2.6vw, 24px); margin: 0; } .reassure-card p:not(.bar-eyebrow) { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0; } .reassure-card.a-ankommen > .reassure-top > .bar-eyebrow { color: var(--wp--preset--color--blue); } .reassure-card.a-kultur > .reassure-top > .bar-eyebrow { color: var(--wp--preset--color--blue-deep); } /* Eyebrow TEXT is blue-deep (yellow fails AA on white), but the accent DOT should stay yellow — currentColor would tint it blue-deep too. Hairline ring so yellow reads on the white card (mirrors the .t-kultur meta-dot treatment). */ .reassure-card.a-kultur > .reassure-top > .bar-eyebrow .dot { background: var(--wp--preset--color--yellow); box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule); } .reassure-card.a-hilfe > .reassure-top > .bar-eyebrow { color: var(--wp--preset--color--red); } .reassure-cta { margin: 0; } .reassure-cta a { display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--blue); font-weight: 600; font-size: 13.5px; text-decoration: none; } .reassure-cta a:hover, .reassure-cta a:focus-visible { text-decoration: underline; } /* ════════════════════════════════════════════════════════════════════════ PAGE — Kontakt (page-kontakt) Offset hero + shared .contact-grid (above). Adds the form-PREVIEW card (left) and the LIVE ink contact panel (right). ════════════════════════════════════════════════════════════════════════ */ /* ── LEFT — non-submittable form PREVIEW card (F3) ──────────────────────── */ .contact-form-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--card-radius-lg); padding: clamp(22px, 3vw, 36px); } .cf-eyebrow { color: var(--wp--preset--color--blue); margin: 0; } .contact-form-card h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(22px, 2.4vw, 28px); color: var(--wp--preset--color--ink); margin: 0 0 8px; /* top gap via canonical rule */ } .cf-intro { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--wp--preset--color--ink-soft); margin: 0 0 24px; max-width: 46ch; } .cf-fields { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .cf-fields { grid-template-columns: 1fr 1fr; } } .cf-field { margin: 0; display: flex; flex-direction: column; gap: 6px; } .cf-field.cf-full { grid-column: 1 / -1; } .cf-field label { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; color: var(--wp--preset--color--ink-soft); } /* Volunteer form's [checkbox interests] / [radio frequency] are wrapped in
    …. The browser-default is bold-sans + UA padding/border on the parent fieldset; reset the fieldset chrome and mirror the .cf-field label typography on so the group caption reads consistently with sibling field labels (validation pass css-3). */ .cf-field fieldset, fieldset.cf-field { border: 0; padding: 0; margin: 0; min-width: 0; } .cf-field legend { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--wp--custom--mono-tracking); text-transform: uppercase; color: var(--wp--preset--color--ink-soft); margin-bottom: 0; /* parent .cf-field flex gap (6px) handles the vertical rhythm */ padding: 0; } .cf-field .cf-opt { text-transform: none; letter-spacing: 0; opacity: 0.85; } /* a11y (forms-a11y-audit F1+F6): the newsletter form reuses .cf-field/.cf-lang markup on the dark ink band (footer .nl + page .newsletter-band), where the base ink-soft label color (#54607a) fails AA (2.5:1). Lift labels/legends to the on-ink token (#b3bdd4 = 8.38:1 on #16223d). Scoped under the dark ancestors so the light-surface contact form labels are untouched. F6: CF7's near-black .wpcf7-spinner is invisible on the band — recolor it to the brand yellow. */ .site-footer .nl .cf-field label, .site-footer .nl .cf-field legend, .newsletter-band .cf-field label, .newsletter-band .cf-field legend { color: #b3bdd4; } .site-footer .nl .wpcf7-spinner, .newsletter-band .wpcf7-spinner { background-color: var(--wp--preset--color--yellow); } .cf-field input, .cf-field select, .cf-field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); font-family: inherit; font-size: 14px; line-height: 1.4; } .cf-field textarea { resize: vertical; min-height: 96px; } /* Disabled = preview state: dimmed + not-allowed, labels above stay full-contrast. */ .cf-field input[disabled], .cf-field select[disabled], .cf-field textarea[disabled] { opacity: 0.6; cursor: not-allowed; } /* ── Select caret + topic lead-question lift (forms-corrections F10/F11; topic → pills, design-review 2026-06-20) ────────────────────────────────────────── 1. .cf-field select — replace the native browser caret with an inline ink chevron (a brand affordance). Now serves the volunteer LANGUAGE select; the contact topic moved to pills. CF7's emitted select carries .wpcf7-form-control + .wpcf7-select but inherits .cf-field select geometry, so this rule reaches it. 2. .cf-topic > legend — the contact topic is the routing decision: keep its caption lifted from the mono-cap-12px group-legend default to a 14px sentence-case ink read (the "Worum geht es?" lead question) above the pill cluster. */ .cf-field select { appearance: none; -webkit-appearance: none; font-family: var(--f-body); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316223d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 40px; } .cf-topic > legend { font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; text-transform: none; color: var(--wp--preset--color--ink); } /* Non-submittable submit affordance (no