<!-- AUTO-GENERATED by scripts/wi-claude-rules-sync.sh — do not edit. -->
<!-- bundle: 10-coding-journey-css | sources: 3 .mdc files -->
---
paths:
  - "css/**"
  - "inc/lp/css/**"
  - "inc/lp/**"
---

<!-- source: .cursor/rules/wi-shortcode-css-scope.mdc -->

# WI — Shortcode CSS Scope Invariant

## Denkmodell (verbindlich)

- **Eine Layout-Invariante pro Shortcode / Touchpoint:** Grid bleibt Grid, Registration bleibt Registration, Footer bleibt Footer, Custom-SC (`gb_sc_custom`) bleibt im `.wi-sc-form-wrap`-Kontext.
- **Admin und Inkognito** sind **zwei Prüfmodi derselben Invariante** — kein Default „nur Admin fixen“ über `body.logged-in` o. Ä.
- **Admin-only CSS** nur als letzter Ausweg, wenn ein echtes Admin-only-Element die Struktur verändert (z. B. FAB-Spalte). Dann **semantisch scoped**, z. B. `.wi-sc-hosted--admin-fabs` oder `.wi-sc-hosted--wi-grid` — nicht globale Registration-Regeln auf alle `.wi-sc-hosted` ausweiten.

Cross-Refs: Participant-Journey / QA-Screenshots `wi-participant-journey.mdc`, `wi-staging-infra.mdc`, Lieferpfad `wi-agent-workflow.mdc`.

## Semantische Host-Klassen (Inventar)

Der Wrapper um `[wi_webinar_block]`, `[wi_grid]`, `[webinarignition_footer]` setzt immer `wi-sc-hosted` plus **genau einen** Touchpoint-Modifier (PHP: `wrap_wi_shortcode_with_design_edit_control` in `inc/block-editor-theme-override.php`):

| Klasse | Shortcode | Zweck |
|--------|-----------|--------|
| `wi-sc-hosted` | alle drei | gemeinsamer Host für FSE-Variablen + FAB-Layout |
| `wi-sc-hosted--wi-webinar-block` | `[wi_webinar_block]` | immer gesetzt; plus `wi-sc-hosted--wi-stack-{page}` (registration/thankyou/…) für page-aware CSS |
| `wi-sc-hosted--wi-grid` | `[wi_grid]` | Webinar-Grid (26rem-Caps im Theme explizit ausnehmen) |
| `wi-sc-hosted--wi-footer` | `[webinarignition_footer]` | Footer-Shortcode |
| `wi-sc-hosted--admin-fabs` | wenn FABs sichtbar | innerer Wrapper + Spalte für Shortcode-HTML — Layout-Regeln für Inhalt oft auf `> div:nth-child(2)` |

**Nicht** über diesen Filter gewrappt: andere Shortcodes, Legacy ohne Wrapper. Dort greifen weiterhin `:has(.wi_grid_container)`-Brücken in CSS, bis Markup überall Modifier trägt.

**gb_sc_custom:** Container `.wi-sc-form-wrap` (Inject via `webinarignition_shortcode` / Page-Mode), oft mit `.wi-sc-form-wrap--flat`. Innen kann weiterhin `.wi-sc-hosted` vorkommen (Registration-Block).

## Klassifikation — `webinar-modern.css` (`.wi-sc-hosted` / nahe Host-Regeln)

Grobe Kategorien (bei neuen Regeln zuordnen; keine neuen „global alles“-Selektoren ohne Kategorie):

| Kategorie | Inhalt / Muster | Beispiel-Zeilen (ca.) |
|-----------|------------------|------------------------|
| **Registration — CTA** | `#optinBTN` / FSE-Primary unter Host | ~5521–5670 |
| **Registration — Live-Datum** | `.eventDate.wi-live-dates-wrap`, Padding-Inset | ~6556–6580, ~7885+ |
| **Registration — Evergreen / Form** | `.evergreen-Registration`, `.optinFormArea`, 26rem-Rail | ~7917–7996, ~8232+ |
| **Grid vs. Registration** | 26rem-Cap vs. `wi-sc-hosted--wi-grid` / `:has(.wi_grid_container[data-wi-grid-instance])` | ~7951–7983 |
| **Admin FAB / Design-Stack** | `:has(.wi-sc-design-stack) > div:nth-child(2)`, `--admin-fabs` | ~8025–8071 |
| **Registration — Video-only / Spalten** | `.ctaArea.video`, `#signup`, `wi-register-page-wrapper` | ~8086–8146, ~8331+ |
| **Thank-you (GB)** | eher `ty-gutenberg.css` + `body.wi-ty-gb-page .wi-sc-hosted` | siehe `ty-gutenberg.css` |

**Regel für neue Selektoren:** Wenn die Regel nur Registration betrifft → bevorzugt `.wi-sc-hosted--wi-webinar-block` (und ggf. `:has(.wi-sc-design-stack)`) statt nacktes `.wi-sc-hosted`, sobald Migration belegt ist. Grid: `.wi-sc-hosted--wi-grid` oder `:has(.wi_grid_container[data-wi-grid-instance])`. Footer: `.wi-sc-hosted--wi-footer`.

## Audit — `vendor/webinarignitiongrid/wi-grid.css`

- **Kopplung zu `.wi-sc-hosted`:** bewusst — hebt `webinar-modern`-26rem-Cap für Grid-Host auf (`:has(.wi_grid_container)` + `.wi-sc-hosted--wi-grid`).
- **Footer / Template-Parts:** `.wp-block-template-part .wi_grid_container` begrenzt Breakout — Grid soll Footer nicht auf `100vw` aufblasen (Kommentar im File).
- **Flex-Zeilen:** `.is-layout-flex > .wi-sc-hosted` teilt sich mit `.wi_grid_container` — nur Layout-Stretch, keine Form-Styles.

## Audit — `inc/lp/css/wi-sc-form.css`

- **Scope:** Primär `.wi-sc-form-wrap` — korrekt für `gb_sc_custom`.
- **`.wi-sc-hosted` innerhalb:** Overflow sichtbar für FABs; `.wi-sc-form-wrap .wi-sc-hosted` Flex-Spalte spiegelt Hosted-Stack — beabsichtigt; **kein** Grid-Footer aus diesem File.
- **Kopplung zu `webinar-modern`:** Kommentare verweisen auf gemeinsame 26rem-/Padding-Semantik — bei Konflikten zuerst Touchpoint trennen, nicht beide Files global absenken.

## Selektor-Größe (verbindlich)

**So klein wie möglich, so groß wie nötig.** Vor `working ✓` bei CSS: [wi-css-change-impact.mdc](wi-css-change-impact.mdc) (Wenn-dann, Kollateral, Blocker).

## Patch-Disziplin (Gate)

1. **Kleinstes Selektor-Set**, das den betroffenen Shortcode / Touchpoint eindeutig trifft — kein blindes Entfernen von `26rem` oder `:has()` repo-weit.
2. **Beweis:** Desktop + Mobile; für Shortcode-Hosts **Admin eingeloggt + Inkognito** dieselbe Seite.
3. **Grid:** nach Layout-Änderung kurz warten vor Screenshot (`wi-staging-infra.mdc`); `firstRowColumns >= 2` auf Desktop wo relevant; kein horizontaler Overflow.
4. **Registration:** CTA/Form lesbar; Grid-Fix darf Opt-in-Spalte nicht verengen — Modifier testen.
5. **Kein Default** „nur für Admin“ — Ausnahmen nur mit semantischer Klasse und kurzer Begründung im Kommentar.

Bei großen Diffs / Registration-Submit / neuen globalen Hooks zusätzlich `wi-risk-veto.mdc` / `wi-protect-veto-alternatives.mdc` beachten.

## Stack-Modifier (page-aware) — `wi-sc-hosted--wi-stack-*`

- **Quelle:** `WebinarIgnition_Theme_Manager::wi_sc_webinar_block_stack_modifier()` setzt für `[wi_webinar_block]` zusätzlich z. B. `wi-sc-hosted--wi-stack-registration` oder `wi-sc-hosted--wi-stack-thankyou` (Bucket `page` aus `webinarignition_get_available_shortcodes()`).
- **Zweck:** `webinar-modern.css` kann **26rem-/FAB-Innenwrapper-Regeln** auf **Registration** begrenzen; Thank-you mit FAB bleibt **breit** (`max-width: 100%` auf `> div:nth-child(2)`).
- **`[wi_grid]`** bleibt bei `wi-sc-hosted--wi-grid` ohne `wi-stack-*`.

## SC-Custom Karten-Rail — `wi-sc-form-wrap--reg-rail`

- **Quelle:** `WebinarignitionPowerupsShortcodes` hängt bei SC-Wrap + `page === 'registration'` und ohne `--flat` die Klasse an.
- **CSS:** `inc/lp/css/wi-sc-form.css` — `max-width: min(100%, 560px)` / `margin: 0 auto` nur auf diesem Modifier, nicht auf allen `.wi-sc-form-wrap`.

---

<!-- source: .cursor/rules/wi-css-change-impact.mdc -->

# WI — CSS Change Impact (vor `working ✓`)

## Ziel

**Änderungen wirken nur am einen beabsichtigten Ort — ohne Kollateralschaden** an Registration, Thank-you, Grid, Footer oder Builder-Spalten.

## Prinzip (Selector-Disziplin)

**So klein wie möglich, so groß wie nötig:**

- Touchpoint-Modifier (`.wi-sc-hosted--wi-stack-thankyou`, `.wi-sc-hosted--wi-grid`, `.wi-ty-gb__shell`) statt `body` + breites `:has()` ohne Stack.
- **Kein** globales Absenken von `26rem`, `max-width: none`, `width: 100% !important` repo-weit.
- `!important` nur wenn Legacy/Theme es erzwingt.

Siehe [wi-shortcode-css-scope.mdc](wi-shortcode-css-scope.mdc).

## Wann Pflicht

Vor **`✅ #Axxx done — waiting for working ✓`** und vor Commit nach `working ✓`, wenn der Task **CSS** geändert hat (Datei oder `wp_add_inline_style`).

**Ausnahme:** nur Kommentare/Whitespace ohne Selektor-/Property-Änderung → `css cross-impact: n/a`.

## Pflicht-Block im Chat

```
🎨 CSS Cross-Impact #Axxx
Ziel-Touchpoint: …
Geänderte Dateien: …

Wenn du es SO machst:
- …

Diese Änderung zieht mit sich (Kollateral-Check):
- Registration: …
- Thank-you: …
- Grid / Footer: …
- WPBakery Spalte / Volllayout: …

Selektor-Scope: …
Freigabe: self-contained ✓ | BLOCKER — #Axxx css-impact ok nötig
```

**Mindestens:** eine **„Wenn du … so machst“**-Zeile und eine **„zieht mit sich“**-Zeile (oder **„kein Kollateral — Selektor trifft nur …“**).

## BLOCKER (kein `waiting for working ✓`)

Ohne explizite User-Freigabe (`#Axxx css-impact ok` / `css cross-impact approved`), wenn:

1. Mehrere Touchpoints in einer Regel ohne Begründung + Regression-URL.
2. `max-width: none`, `100vw`, Breiten-`!important` ohne engen Stack/Shell-Scope.
3. Registration-**26rem** und Thank-you in derselben Änderung vermischt.
4. Kollateral genannt, aber nicht getestet.

## Mindest-Beweis

| Touchpoint geändert | Zusätzlich prüfen |
|--------------------|-------------------|
| thankyou | Registration-LP oder HSC VC 1/6 + 1/1 |
| registration / 26rem | Thank-you oder `[wi_grid]` |
| grid | Registration opt-in |

[wi-agent-workflow.mdc](wi-agent-workflow.mdc) · [wi-staging-infra.mdc](wi-staging-infra.mdc)

---

<!-- source: .cursor/rules/wi-fse-registration-no-hardcoded-text-colors.mdc -->

# FSE registration landings — text and links

On `.wi-wb-registration-landing` (block themes, e.g. Twenty Twenty-Five), **do not** set `color`, `background`, or link colors with hardcoded values such as `#1a1a1a` on:

- `.wi-webinarignition-footer` / footer shortcode output
- `.powered_by_text_wrap`
- `.wp-block-post-content` / main entry content

Users switch **Site Editor → Styles** (style variations); light and dark presets invert foreground/background. Forced dark text breaks dark styles and is wrong on light-on-dark templates.

**Do:** layout-only rules (padding, typography size, underline for footer links if needed). **Let** theme `color` / preset CSS variables define text and links like native blocks.

