(interfaces table in 02-04-PLAN.md) - without the exception, "Michael Bost" would inherit the same muted body-text color as the quote paragraph, whereas the prototype keeps the name at full ink color. */ :root :where(.service-card, .service-list-card, .service-people-card, .service-membership-card, .service-reference-card, .service-contact-card) :where(p:not([class*="big-number"]):not(.card-cta):not(.role-muted):not(.card-title-lg)) { color: color-mix(in oklab, var(--wp--preset--color--ink) 75%, transparent); } :root :where(.service-list-card) :where(li) { color: color-mix(in oklab, var(--wp--preset--color--ink) 80%, transparent); } :root :where(.method-step) :where(p:not([class*="big-number"])) { color: color-mix(in oklab, var(--wp--preset--color--on-dark) 70%, transparent); } /* MethodSteps footnote (the `footnote` prop added in Plan 04.4-02, used by service-page-expansion.php and service-page-operations.php). The paragraph sits AFTER the step grid, so it is outside .method-step and the card-family rule above does not reach it — it fell back to the 1.125rem/1.6 body preset at full content width (CR-01, Plan 04.4: measured 768px→1104px, 16px→18px, 24px→28.8px). The width cap rides .mw-3xl in the pattern markup; only what a class cannot carry lands here. Both size AND line height, because Tailwind's text-base sets both (1rem/1.5rem) and porting the size alone was the earlier mistake this file documents above. */ :root :where(.method-footnote) { font-size: 1rem; line-height: 1.5rem; } /* Service-card image: aspect-[16/10] in an overflow-hidden frame in the PoC. Same convention as .img-43 / .img-219. */ .wp-block-image.img-1610 img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: 100%; } /* ------------------------------------------------------------------ */ /* Button sizing per location. theme.json sets px-7 py-3 as the */ /* default (CTA and hero); the PoC also uses px-5 py-2.5 (footer), */ /* px-6 py-3 (contact cards), and px-5 py-2 + text-sm (people cards). */ /* Double class resp. context, to beat the global-styles button rule — */ /* which also sits at 0,1,0. */ /* ------------------------------------------------------------------ */ footer .wp-block-button__link { padding: 0.625rem 1.25rem; } /* In the PoC these buttons sit in a flex-col and thereby fill the card width (px-6 py-3 text-center). Core's vertical button layout, by contrast, lets them shrink to text width. */ .card-btn, .card-btn .wp-block-button__link { width: 100%; } .card-btn .wp-block-button__link { padding: 0.75rem 1.5rem; text-align: center; } .service-people-card .wp-block-button__link { padding: 0.5rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; } /* Kontakt "Route planen" link (Plan 04.5-07, Textfarbe/Höhe-Restbefund): index.astro keeps this one link at the default ink text colour (only hover:text-accent), unlike the phone/email links above it in the same card, which are explicitly accent-coloured - the opposite of what an unstyled gets from theme.json's global link style (styles.elements.link, accent-text). Scoped to this exact href so it cannot also catch the other .card-cta instances elsewhere (home page service cards, section-card-row.php), whose CTA links are correctly accent-coloured already and must stay that way. display:inline-block matches index.astro's own inline-block on this link (unlike the plain inline phone/email anchors above it): a plain inline element's own bounding-box height follows the font's natural line height (~21px at 18px/Archivo), not the CSS line-height property - only inline-block (or a block context) uses line-height for its own content height, which is what the 28.8px line-height fix needs to actually change this element's measured height, not just its parent paragraph's. */ :root :where(.service-contact-card .card-cta a[href*="google.com/maps"]) { display: inline-block; color: var(--wp--preset--color--ink); } /* Kontakt "Termin buchen" button in the dark card (Plan 04.5-07, Breite- Restbefund): index.astro sets px-6 py-3 (1.5rem/0.75rem) here - narrower than the px-7 py-3 (1.75rem/0.75rem) theme.json default every other CTA button on the project correctly uses (hero, CTASection). Not .card-btn (that class also forces width:100%, which this button - a single inline-block CTA, not a card-row item - does not have in the PoC either). Scoped by the dark card's own preset background class, since the hero's own "Termin buchen" button shares the same href and must keep the wider default padding. */ :root :where(.service-contact-card.has-dark-background-color .wp-block-button__link) { padding-left: 1.5rem; padding-right: 1.5rem; } /* Leistungskacheln: colour and hover (customer feedback Z28, "Ich finde die Kacheln könnten farblich etwas auffälliger sein. Ein Hover-Effekt wäre sicherlich auch nett"). The surface background sits so close to the page background that the card edge has to carry the colour: accent at 25% at rest, full accent on hover, plus the same shadow the start page's service cards already use (home.css:484) and a 2px lift. Tailwind gates its hover: variants behind (hover: hover) — the media query is parity, not a deviation. Counterpart: site/src/components/ListCard.astro. */ :root :where(.service-list-card) { border: 1px solid color-mix(in oklab, var(--wp--preset--color--accent) 25%, transparent); /* `translate`, not `transform`: Tailwind v4 writes its translate utilities to the standalone `translate` property, and qa/parity- states.py compares the property deltas one to one. */ transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), translate 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (hover: hover) { :root :where(.service-list-card:hover) { border-color: var(--wp--preset--color--accent); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); translate: 0 -0.125rem; } } /* Kontakt-Kacheln: bündiger Spaltenfuß (customer feedback Z131, "Der Inhalt ist gut, die Optik mit den Kacheln in verschiedenen Größen ist nicht schön"). The right column used to end wherever its two cards happened to end, leaving a ragged step against the form card on the left. The column becomes a flex column and the dark booking card - the primary call to action - takes the leftover space, so both columns end on the same line. The address card keeps its natural height: forcing BOTH cards to an equal share does not work, because the address card's own content is taller than half the column and min-height:auto pushes it back out (measured: the prototype then splits 228/298 instead of 263/263). Only once the columns actually stand side by side - WordPress stacks .wp-block-columns below 782px on its own, and stacked cards have no shared height to divide. No `gap` here: the inline margin between the two right-hand cards already carries that spacing. The room that opens up inside the left card is the space the HubSpot form will take once the customer delivers PORTAL_ID/FORM_ID (Spec §9.1); until then the fallback (heading, one line, two buttons) stands in for it. Counterpart: site/src/pages/kontakt/index.astro. */ @media (min-width: 782px) { body .wp-block-column:has(> .service-contact-card) { display: flex; flex-direction: column; } body .wp-block-column > .service-contact-card.has-surface-background-color:only-child, body .wp-block-column > .service-contact-card.has-dark-background-color { flex: 1 1 0%; } }