/* ========================================================================== Deliberate deviations from the reference build. Everything here is a considered change requested after review — NOT a fix for a porting error. Kept separate from site.css so that file stays a faithful copy of https://timo.31m.de/ki/ and can be re-ported wholesale if the agency ships an update; this file then reapplies our decisions on top. Each block records what changed and why. ========================================================================== */ /* -------------------------------------------------------------------------- Hero — requested 2026-08-10: wider text/button column, slightly smaller type, more air under the nav. Reference values at ≥1800px were: column 740px, h1 115px, sub 25px/600px, eyebrow 17px, and no top padding (content vertically centred in 100vh). -------------------------------------------------------------------------- */ .kiez-site .hero-content { max-width: 980px; /* was 740px — wider measure for text and buttons */ } .kiez-site .hero-sub { max-width: 760px; /* was 600px — keeps the sub in proportion */ } /* Horizontal position — requested 2026-08-10. `.hero` is a flex container and `.wrap` carries `margin: 0 auto`, so inside a flex context the wrap shrinks to its content and centres itself. That put the hero text ~26% in from the left, while every other section's `.wrap` is full width and starts at the page gutter. Forcing the hero wrap to full width left-aligns the content and lines the headline up with the sections below it. */ .kiez-site .hero > .wrap { width: 100%; } /* Vertical position. The hero is `align-items:center` inside `min-height:100vh`, so top padding shifts the whole block down. Enough to clear the fixed nav, but less than before so the block sits higher in the viewport. */ .kiez-site .hero { padding-top: 40px; } /* With the top bar above it (inc/chrome.php), the hero still fills the first screen exactly: --kiez-tb-h is the bar's height (site.js), 0 when hidden. */ .kiez-site.kiez-has-topbar .hero { min-height: calc(100vh - var(--kiez-tb-h, 0px)); } .kiez-site .hero h1 { font-size: clamp(40px, 6vw, 72px); /* was clamp(42px, 7vw, 80px) */ } @media (min-width: 1800px) { .kiez-site .hero { padding-top: 56px; } .kiez-site .hero h1 { font-size: 96px; } /* was 115px */ .kiez-site .hero-sub { font-size: 22px; } /* was 25px */ .kiez-site .hero-eyebrow { font-size: 15px; } /* was 17px */ } @media (max-width: 600px) { /* A smaller offset suffices on phones (the nav stays fixed here too). */ .kiez-site .hero { padding-top: 56px; } .kiez-site .hero h1 { font-size: 34px; } } /* Still instead of the video under reduced motion (client 2026-10-12: "no video on another client"). site.css hides the video there, as wcg.htm does, which left a flat purple box. The still is the video's first frame (--hero-poster, set by kiez-hero-video.php), under the same overlay. */ @media (prefers-reduced-motion: reduce) { .kiez-site .hero { background-image: var(--hero-poster, none); background-size: cover; background-position: center; } } /* Buttons gain a little presence so they still read as substantial against the wider column now that the headline is smaller. */ .kiez-site .hero-actions .btn { padding: 15px 34px; font-size: 15px; } @media (max-width: 600px) { .kiez-site .hero-actions .btn { padding: 13px 24px; font-size: 14px; } } /* -------------------------------------------------------------------------- Real forms in the reference shells. The reference build ships static mock forms. The live page uses Contact Form 7 ("Kontaktformular", 12355) and the Newsletter plugin, whose markup nests fields inside

and . These rules give that plugin output the reference's own field styling, so the sections look unchanged while actually submitting. -------------------------------------------------------------------------- */ /* Kontakt — CF7 ----------------------------------------------------------- */ .kiez-site .contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 14px; } .kiez-site .contact-form .wpcf7-form p { margin: 0; } .kiez-site .contact-form .wpcf7-form-control-wrap { display: block; } .kiez-site .contact-form input[type="text"], .kiez-site .contact-form input[type="email"], .kiez-site .contact-form input[type="tel"], .kiez-site .contact-form input[type="url"], .kiez-site .contact-form textarea { width: 100%; font-family: var(--body); font-size: 14px; padding: 13px 18px; border-radius: var(--r); border: 1.5px solid var(--violet-10); background: var(--white); color: var(--purple); outline: none; transition: border-color .25s; } .kiez-site .contact-form input:focus, .kiez-site .contact-form textarea:focus { border-color: var(--violet); } .kiez-site .contact-form textarea { min-height: 130px; resize: vertical; } .kiez-site .contact-form input[type="submit"] { align-self: flex-start; font-family: var(--display); font-size: 14px; font-weight: 700; padding: 14px 30px; border-radius: var(--r); background: var(--orange); color: var(--white); border: none; cursor: pointer; transition: filter .2s, transform .2s; } .kiez-site .contact-form input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Validation + response messages, on the light contact surface. */ .kiez-site .contact-form .wpcf7-not-valid-tip { font-size: 13px; color: #B8431A; margin-top: 6px; } .kiez-site .contact-form .wpcf7-response-output { margin: 8px 0 0; padding: 12px 16px; border-radius: var(--r); border-width: 1.5px; font-size: 14px; color: var(--purple); } .kiez-site .contact-form .wpcf7-spinner { margin: 0 0 0 10px; } /* Newsletter — Newsletter plugin, on the dark band ------------------------- */ .kiez-site .nl-form .tnp-subscription, .kiez-site .nl-form .tnp-subscription-minimal { margin: 0; max-width: none; } .kiez-site .nl-form .tnp-subscription form, .kiez-site .nl-form .tnp-subscription-minimal form { display: flex; gap: 10px; flex-wrap: wrap; text-align: left !important; } /* The plugin's white-space:nowrap kept the minimal form 1148px wide at every screen size: button and consent text were cut off (audit 10-12). */ .kiez-site .nl-form .tnp-subscription-minimal form { white-space: normal; } .kiez-site .nl-form .tnp-field { margin: 0; flex: 1; min-width: min(220px, 100%); } /* min(): fits the 182px sidebar box at 320px (2026-10-12) */ .kiez-site .nl-form .tnp-subscription-minimal .tnp-email { flex: 1 1 220px; width: auto; } /* Labels stay visible. This used to be `.tnp-field label { display: none }`, which hid the list checkboxes and the REQUIRED privacy checkbox too — a browser cannot prompt for a hidden required field, so the form could not be submitted at all (found 2026-10-05). The full form's email field has no placeholder (the plugin ignores one there), so its label is its only hint; the minimal form has no label and uses the placeholder instead. */ .kiez-site .nl-form .tnp-field-email label { display: block; margin-bottom: 6px; color: var(--text-on-dark-soft, #F2ECFF); font-size: 13px; } .kiez-site .nl-form .tnp-subscription form { align-items: flex-end; } /* Email and button share the first row; list choice and consent follow. */ .kiez-site .nl-form .tnp-field-email { order: 0; } .kiez-site .nl-form .tnp-field-button { order: 1; flex: 0 0 auto; min-width: 0; } .kiez-site .nl-form .tnp-lists { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; } .kiez-site .nl-form .tnp-lists .tnp-field { flex: 0 0 auto; min-width: 0; } .kiez-site .nl-form .tnp-privacy-field { order: 3; } .kiez-site .nl-form .tnp-field-checkbox label, .kiez-site .nl-form .tnp-privacy-field label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; color: var(--text-on-dark-soft, #F2ECFF); font-size: 13px; line-height: 1.5; } /* site.css styles every `.nl-form input` as a text field; undo that here. */ .kiez-site .nl-form input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; padding: 0; border: 0; border-radius: 0; background: none; accent-color: var(--orange); } .kiez-site .nl-form .tnp-privacy-field a { text-decoration: underline; text-underline-offset: 2px; } .kiez-site .nl-form input[type="text"], .kiez-site .nl-form input[type="email"] { width: 100%; font-family: var(--body); font-size: 14px; padding: 13px 18px; border-radius: var(--r); border: 1.5px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: var(--white); outline: none; transition: border-color .2s; } .kiez-site .nl-form input::placeholder { color: #C9BBE0; opacity: 1; } .kiez-site .nl-form input:focus { border-color: var(--orange); } .kiez-site .nl-form input[type="submit"], .kiez-site .nl-form .tnp-submit { font-family: var(--display); font-size: 13px; font-weight: 700; padding: 13px 26px; border-radius: var(--r); background: var(--orange); color: var(--white); border: none; cursor: pointer; white-space: nowrap; width: auto; transition: filter .2s, transform .2s; } .kiez-site .nl-form input[type="submit"]:hover { filter: brightness(1.1); transform: translateY(-1px); } /* Consent checkbox / privacy line the plugin renders under the field. */ .kiez-site .nl-form .tnp-privacy-field, .kiez-site .nl-form .tnp-privacy-field a { color: var(--text-on-dark-soft, #F2ECFF); font-size: 13px; } .kiez-site .nl-form .tnp-privacy-field { flex-basis: 100%; } /* -------------------------------------------------------------------------- Page header (kiez-page-header). Not in the reference build — it only designed the full-height home hero — so this is composed from the design's own tokens and type scale. It is the sole structural difference between a section hub and an article page; everything below it is composed from the same elements as any other page. -------------------------------------------------------------------------- */ .kiez-site .page-header { background: var(--purple); padding: calc(90px + clamp(48px, 6vw, 88px)) 0 clamp(48px, 6vw, 80px); position: relative; overflow: hidden; } /* A page opening with this header supplies its own nav clearance, so the generic no-hero offset would double it up. */ .kiez-site.kiez-no-hero .confera-body-wrapper:has(.page-header) { padding-top: 0; } /* #9110: a design page with neither hero nor purple band at the top (kiez_top_band() = plain) gets a solid nav from the first paint; reserve its height, or the first lines start underneath it. */ .kiez-site.kiez-top-plain .confera-body-wrapper { padding-top: 90px; } .kiez-site .page-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; font-weight: 500; color: var(--text-on-dark-soft, #F2ECFF); margin-bottom: 22px; } .kiez-site .page-crumbs a { color: inherit; opacity: .8; } .kiez-site .page-crumbs a:hover, .kiez-site .page-crumbs a:focus-visible { opacity: 1; color: var(--white); } /* #8820: no orange on purple */ /* #8818: the breadcrumb is now a list, ends with the current page, and the top-level section is plain text (not a link). */ .kiez-site .page-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .kiez-site .page-crumbs li { display: inline-flex; align-items: center; gap: 8px; } .kiez-site .page-crumbs-sep { opacity: .5; } .kiez-site .page-crumbs li > span:not(.page-crumbs-sep) { opacity: .8; } .kiez-site .page-crumbs [aria-current="page"] { opacity: 1; color: var(--white); font-weight: 600; } /* #8820 (2026-10-06): the purple variant of #8801 on every page header — eyebrow in the client's off-white instead of orange. */ .kiez-site .page-header .stl { color: var(--label-on-dark, #F4E8FF); margin-bottom: 10px; } .kiez-site .page-title { font-family: var(--display); font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #fff; margin: 0; /* #9108: was 20ch (700px at 1440), which left most of the band empty and broke a 111-character event title into six lines. Balanced lines keep a long title from ending on a single orphaned word. */ max-width: 34ch; text-wrap: balance; overflow-wrap: break-word; } /* #9108: titles over 60 characters (kiez_page_title_class()) and all post titles — news headlines run to 110 characters — use a smaller scale. */ .kiez-site .page-title--long, .kiez-site .post-header .page-title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; } /* #9120: band variants for single posts. Title in the content or hidden: a slim band with breadcrumb and eyebrow only (the nav still needs purple under it). Featured image behind the band: tinted to keep white text at 7:1 or better. */ .kiez-site .page-header--title-content, .kiez-site .page-header--title-none { padding-bottom: 36px; } .kiez-site .page-header--title-content .stl, .kiez-site .page-header--title-none .stl { margin-bottom: 0; } .kiez-site .page-header--image { background: linear-gradient(rgba(60, 31, 102, .86), rgba(60, 31, 102, .86)), var(--kiez-header-img) center / cover no-repeat, var(--purple); } .kiez-site .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kiez-site .page-intro { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--text-on-dark-soft, #F2ECFF); max-width: 68ch; margin: 20px 0 0; } @media (max-width: 767px) { .kiez-site .page-header { padding: calc(72px + 40px) 0 40px; } /* Long German compounds overflowed at 390px (#9108). Balanced lines are shorter, so on a phone they split more words; "pretty" only avoids an orphaned last word. */ .kiez-site .page-title { max-width: none; hyphens: auto; text-wrap: pretty; } .kiez-site .page-title--long, .kiez-site .post-header .page-title { font-size: 26px; } } /* -------------------------------------------------------------------------- Archive layer — blog, categories, single post, search, 404. The page SHELL is not in the agency reference (which designed the homepage and the component library, not an archive), so the two-column layout and the sidebar are composed from the design's tokens. The CARDS inside it are not invented: they are the agency's Blog-Vorschau (section 11), rendered by kiez_blog_card() in inc/cards.php — see the blog-card block further down. -------------------------------------------------------------------------- */ .kiez-site .archive-wrap { background: var(--white); padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); } .kiez-site .archive-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); align-items: start; } /* DEVIATION from the agency's .blog-grid (library.css), on two points: - minmax track 280px -> 320px. The agency's row runs the full page width; ours shares the row with a 320px sidebar, so a 280px track yielded four cramped columns and long German titles broke mid-word. 320px gives the three-up the agency actually drew. - min(320px, 100%) rather than a bare 320px, because below a ~370px viewport a fixed track overflows its content box. That used to be invisible behind `.kiez-site{overflow-x:hidden}`; a full-bleed featured image makes the clipping obvious. auto-FILL, deliberately, matching the agency. auto-fit collapses tracks that are empty across the whole grid, so a category archive with one post would stretch that single card across the full column with a 180px letterbox image strip. auto-fill keeps the tracks, so one result sits at one card's width. */ .kiez-site .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 24px; } .kiez-site .archive-empty { font-size: 16px; color: var(--purple); opacity: .75; } /* Pagination -------------------------------------------------------------- */ .kiez-site .archive-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .kiez-site .archive-pagination .page-numbers { font-family: var(--display); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--r); border: 1.5px solid var(--violet-15); color: var(--purple); transition: background .2s, border-color .2s, color .2s; } .kiez-site .archive-pagination .page-numbers:hover { border-color: var(--violet); color: var(--violet); } .kiez-site .archive-pagination .page-numbers.current { background: var(--violet); border-color: var(--violet); color: #fff; } /* Single post ------------------------------------------------------------- */ /* #9119: image and text fill the column up to the sidebar; the old 72ch cap left 318px empty at 1440. "Lesebreite" is a per-post option (#9120). min-width: 0 lets a wide builder slider shrink instead of widening the grid track (a 14,000px carousel pushed the burger off a phone screen). */ .kiez-site .post-article, .kiez-site .archive-main { max-width: none; min-width: 0; } .kiez-site .post-article--reading { max-width: 75ch; } /* Highlight Box text is a

now (audit 10-12): paragraphs keep the variant's colour and size. */ .kiez-site :is(.highlight-body-text, .highlight-body-text-2) p { margin: 0 0 .6em; } .kiez-site :is(.highlight-body-text, .highlight-body-text-2) > :last-child { margin-bottom: 0; } /* Without a sidebar the reading column sat at the left of an empty half (audit 10-12). */ .kiez-site .archive-layout--full .post-article--reading { margin-inline: auto; } .kiez-site .archive-layout--full { grid-template-columns: minmax(0, 1fr); } .kiez-site .post-meta { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--orange); margin-bottom: 22px; } .kiez-site .post-figure { margin: 0 0 32px; border-radius: var(--r); overflow: hidden; } /* #9117: the image kept its attribute height (428px) while max-width shrank its width, so every featured image was stretched (302×428 on a phone); Confera's img { height: auto } reset is dequeued on design pages. The format is a per-post option; the default matches the 1100×460 uploads. */ .kiez-site .post-figure img { display: block; width: 100%; height: auto; object-fit: cover; } .kiez-site .post-figure--wide img { aspect-ratio: 1100 / 460; } .kiez-site .post-figure--16-9 img { aspect-ratio: 16 / 9; } .kiez-site .post-figure--3-2 img { aspect-ratio: 3 / 2; } .kiez-site .post-figure--4-3 img { aspect-ratio: 4 / 3; } .kiez-site .post-figure--natural img { aspect-ratio: auto; max-height: 720px; object-fit: contain; } /* #9120: title above the image instead of in the band. */ .kiez-site .post-title { font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--purple); margin: 0 0 28px; overflow-wrap: break-word; text-wrap: balance; } .kiez-site .post-body { font-size: 17px; line-height: 1.75; color: var(--purple); } .kiez-site .post-body > * + * { margin-top: 1.1em; } .kiez-site .post-body h2 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; margin-top: 1.8em; } .kiez-site .post-body h3 { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 700; letter-spacing: -.015em; margin-top: 1.6em; } /* h4–h6 fell back to the design reset and an h5 came out at 14px, smaller than the 17px text it heads (#9119, post 12635). */ .kiez-site .post-body :is(h4, h5, h6) { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 1.5em; } .kiez-site .post-body a:not(.wp-block-button__link) { color: var(--violet); text-decoration: underline; text-underline-offset: .2em; } /* Block-editor buttons read violet-underlined on #32373C (2.2:1); give them the design's filled button instead. */ .kiez-site .post-body .wp-block-button__link { display: inline-block; padding: 14px 28px; border-radius: var(--r); background: var(--orange); color: #fff; text-decoration: none; font-family: var(--display); font-size: 15px; font-weight: 600; } .kiez-site .post-body .wp-block-button__link:hover { filter: brightness(1.1); } .kiez-site .post-body img { border-radius: var(--r); } .kiez-site .post-body img:not(.image-el) { height: auto; } .kiez-site .post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--orange); font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--violet); } .kiez-site .post-body ul, .kiez-site .post-body ol { padding-left: 1.3em; } .kiez-site .post-body li { list-style: disc; margin-top: .4em; } .kiez-site .post-body ol li { list-style: decimal; } /* #9118: page-builder content of a post, in the article column. The page gutter (#8917) is for whole pages; inside the article the content lines up with the date and the image instead. Selectors carry an ID's weight (:not(#kiez-post)) so they outrank the #8917 rules they correct, while an editor's inline padding still wins. */ .kiez-site .post-builder { isolation: isolate; } /* GoodLayers paints column backgrounds at z-index -2, under .archive-wrap's white */ .kiez-site .post-body + .post-builder { margin-top: 1.1em; } .kiez-site .post-builder:not(#kiez-post) :is(.gdlr-core-pbf-wrapper-container, .gdlr-core-pbf-section-container) { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .kiez-site .post-builder:not(#kiez-post) .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-element { padding-left: 0; padding-right: 0; } .kiez-site .post-builder:not(#kiez-post) > .gdlr-core-page-builder-body > :first-child { padding-top: 0; } .kiez-site .post-builder:not(#kiez-post) > .gdlr-core-page-builder-body > :last-child { padding-bottom: 0; } @media (min-width: 768px) { /* below 768px GoodLayers zeroes column padding itself */ .kiez-site .post-builder:not(#kiez-post) .gdlr-core-pbf-wrapper-container { margin-left: -10px; margin-right: -10px; } .kiez-site .post-builder:not(#kiez-post) .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-element { padding-left: 10px; padding-right: 10px; } } /* A full-width band dropped into a post stays in the article: breaking out ran it under the sidebar. A page header is dropped, the post has its own. */ .kiez-site .post-builder section:is(.hero, .about, .news, .events, .newsletter, .contact):not(#kiez-post) { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; } .kiez-site .post-builder section.page-header { display: none; } /* Article typography for GoodLayers text boxes only — a blanket link rule would turn KI:EZ buttons into violet underlined text. */ .kiez-site .post-builder .gdlr-core-text-box-item-content { font-size: 17px; line-height: 1.75; color: var(--purple); } .kiez-site .post-builder .gdlr-core-text-box-item-content > * + * { margin-top: 1.1em; } .kiez-site .post-builder .gdlr-core-text-box-item-content a { color: var(--violet); text-decoration: underline; text-underline-offset: .2em; } .kiez-site .post-builder .gdlr-core-text-box-item-content :is(ul, ol) { padding-left: 1.3em; } .kiez-site .post-builder .gdlr-core-text-box-item-content li { list-style: disc; margin-top: .4em; } .kiez-site .post-builder .gdlr-core-text-box-item-content ol li { list-style: decimal; } /* Legacy GoodLayers gallery carousel in the old posts (12606): portrait and landscape photos side by side made the slides uneven, with white gaps. One height, cropped to fill, gaps and corners as in the design. */ .kiez-site .post-builder .gdlr-core-gallery-item .flexslider .slides > li { padding: 0 6px; } .kiez-site .post-builder .gdlr-core-gallery-item .flexslider .slides img { width: 100%; height: clamp(180px, 22vw, 300px); object-fit: cover; border-radius: var(--r); } .kiez-site .post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; } /* minmax: a long word must not widen the track (320px) */ .kiez-site .post-nav a { display: block; padding: 20px 22px; border-radius: var(--r); border: 1.5px solid var(--violet-10); font-family: var(--display); font-weight: 700; color: var(--violet); line-height: 1.35; transition: border-color .25s, transform .25s; } .kiez-site .post-nav a:hover { border-color: var(--violet); transform: translateY(-2px); } /* Only the label, not the brand span inside the title (2026-10-12: "KI:Expertisezentrum.nrw" showed as a small orange line since the titles go through kiez_brand_html). */ .kiez-site .post-nav a > span:not(.kiez-brand) { display: block; font-size: 12px; font-weight: 600; color: var(--orange); margin-bottom: 6px; } .kiez-site .post-nav-next { text-align: right; } /* Sidebar ----------------------------------------------------------------- */ .kiez-site .archive-side { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 110px; } .kiez-site .archive-side--tall { position: static; } /* taller than the window (site.js, #9109) */ .kiez-site .side-block { border: 1.5px solid var(--violet-10); border-radius: var(--r); padding: 24px; } .kiez-site .side-label { font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--orange); margin-bottom: 16px; } .kiez-site .side-cats { display: flex; flex-direction: column; gap: 2px; } .kiez-site .side-cats a { display: flex; justify-content: space-between; gap: 12px; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--purple); padding: 9px 10px; border-radius: 6px; transition: background .2s, color .2s; } .kiez-site .side-cats a:hover { background: var(--violet-06); color: var(--violet); } .kiez-site .side-cats a.is-current { background: var(--violet); color: #fff; } .kiez-site .side-cats span { opacity: .6; font-size: 13px; } .kiez-site .side-list { display: flex; flex-direction: column; gap: 16px; } .kiez-site .side-list a { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--violet); line-height: 1.35; } .kiez-site .side-list a:hover { color: var(--orange); } .kiez-site .side-list time { display: block; font-size: 12px; color: var(--text-on-light-soft, #5C447E); margin-top: 4px; } .kiez-site .side-block .btn-ghost { margin-top: 18px; } .kiez-site .side-block-cta { background: var(--purple); border-color: transparent; } .kiez-site .side-block-cta p { font-size: 14px; line-height: 1.6; color: var(--text-on-dark-soft, #F2ECFF); margin: 0 0 16px; } .kiez-site .side-block-cta .nl-form .tnp-subscription form { flex-direction: column; align-items: stretch; } .kiez-site .side-block-cta .nl-form input[type="submit"] { width: 100%; } /* Search + 404 ------------------------------------------------------------ */ .kiez-site .search-form { display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; } .kiez-site .search-form input[type="search"] { flex: 1; min-width: 220px; font-family: var(--body); font-size: 15px; padding: 14px 18px; border-radius: var(--r); border: 1.5px solid var(--violet-15); background: var(--white); color: var(--purple); outline: none; } .kiez-site .search-form input[type="search"]:focus { border-color: var(--violet); } .kiez-site .notfound-links { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 900px) { .kiez-site .archive-layout { grid-template-columns: minmax(0, 1fr); } /* 1fr grew with a slider's min-content (#9118) */ .kiez-site .archive-side { position: static; } .kiez-site .post-nav { grid-template-columns: minmax(0, 1fr); } .kiez-site .post-nav-next { text-align: left; } } /* -------------------------------------------------------------------------- Atoms placed directly in builder columns. The design's cards were written as children of a grid (.bento, .logo-row, .mission-list). Composed in the builder they sit one-per-column instead, so they have to stand on their own and fill whatever column they are given. -------------------------------------------------------------------------- */ /* IMPORTANT: these must match only a card placed *directly* as an element — i.e. a standalone atom. Written as a descendant selector they also hit cards rendered inside a feed element's own track (.news-track > .news-card), which forced every news card to 100% width and collapsed the horizontal scroller to a single visible card. The child combinator keeps atoms and feeds apart. */ .kiez-site .gdlr-core-pbf-element > .bento-card, .kiez-site .gdlr-core-pbf-element > .logo-pill { height: 100%; width: 100%; } /* .bento-card is flex-column in the design; keep the link pinned to the bottom so cards of differing text length still line up. */ .kiez-site .gdlr-core-pbf-element > .bento-card { display: flex; flex-direction: column; } .kiez-site .gdlr-core-pbf-element > .bento-card .btn-ghost { margin-top: auto; } /* ...but `height: 100%` had nothing to fill: GoodLayers columns are floats of their own content height, so a card with a longer text still ended lower than its neighbours (Apps, 24px). The design's .bento grid stretched all three. A column row holding field cards becomes a wrapping flex row instead; stretched flex items have a definite height, so the 100% chain resolves down to the card. Column widths stay GoodLayers' own. */ .kiez-site .gdlr-core-pbf-wrapper-container:has(> .gdlr-core-pbf-column .bento-card) { display: flex; flex-wrap: wrap; } .kiez-site .gdlr-core-pbf-wrapper-container:has(> .gdlr-core-pbf-column .bento-card)::before, .kiez-site .gdlr-core-pbf-wrapper-container:has(> .gdlr-core-pbf-column .bento-card)::after { content: none; } /* clearfix, would become flex items */ .kiez-site .gdlr-core-pbf-column:has(.bento-card) > .gdlr-core-pbf-column-content-margin, .kiez-site .gdlr-core-pbf-column:has(.bento-card) .gdlr-core-pbf-column-content { height: 100%; } /* The column content is a flex column whose card element takes the rest: a caption element above a card (Elemente page) used to become column-tall too and pushed the card one card-height down over the next row (#9105). */ .kiez-site .gdlr-core-pbf-column:has(.bento-card) .gdlr-core-pbf-column-content { display: flex; flex-direction: column; } .kiez-site .gdlr-core-pbf-column:has(.bento-card) .gdlr-core-pbf-column-content > .gdlr-core-pbf-element:has(> .bento-card) { flex: 1 0 auto; } /* Catalogue rows: the wrap margin on all but the last column made the first card 28px shorter side by side; a row gap spaces wrapped columns instead. */ .kiez-site .spec-demo-row .gdlr-core-pbf-wrapper-container:has(> .gdlr-core-pbf-column .bento-card) { row-gap: 28px; } .kiez-site .spec-demo-row .gdlr-core-pbf-column:has(.bento-card) { margin-bottom: 0; } /* Row-shaped atoms span the full column. `.news-card` is deliberately absent: kiez-card only ever emits it inside its own .news-track, never as a direct child of an element, so that arm never matched anything. */ .kiez-site .gdlr-core-pbf-element > .mission-item, .kiez-site .gdlr-core-pbf-element > .ev { width: 100%; flex: none; } /* Blog cards need no equivalent: .blog-card-light/-dark are flex containers and .blog-grid-2 is a grid, so all three are block-level and already fill the column at width:auto. .mission-item and .ev need the rule because the design sizes them as flex ITEMS of a row they no longer sit in. */ /* -------------------------------------------------------------------------- Reveal stagger for atoms in a builder row. In the reference the cards of a grid carry .d1/.d2/.d3, which are just transition-delays, so a row fades in left-to-right instead of all at once. Those classes came from the card's index inside the monolithic grid element. Composed from atoms there is no index to read — but the builder column already encodes the position, so take the delay from that instead. Same values as .rv.d1/.d2/.d3 in site.css. The `> .rv` matters: it restricts this to an atom placed directly as an element. Without it, the cards inside a feed element's own track (e.g. .news-track > .news-card, which carry their own .d1/.d2/.d3) would all be flattened to their column's single delay and lose their internal stagger. Note the section head usually sits in the row's first (full-width) column, so the cards start at :nth-child(2) and the whole cascade is offset by one step against the reference. Only the spacing between siblings is visible — each element's delay starts when it crosses the observer threshold, not at a shared moment — so the offset does not read on screen. */ .kiez-site .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-column:nth-child(2) .gdlr-core-pbf-element > .rv { transition-delay: .08s; } .kiez-site .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-column:nth-child(3) .gdlr-core-pbf-element > .rv { transition-delay: .16s; } .kiez-site .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-column:nth-child(4) .gdlr-core-pbf-element > .rv { transition-delay: .24s; } .kiez-site .gdlr-core-pbf-wrapper-container > .gdlr-core-pbf-column:nth-child(n+5) .gdlr-core-pbf-element > .rv { transition-delay: .32s; } /* Consecutive builder elements should not lose the design's rhythm. */ .kiez-site .gdlr-core-pbf-column .stl + .sth, .kiez-site .gdlr-core-pbf-element .stl + .sth { margin-top: 6px; } .kiez-site .gdlr-core-pbf-element > .sth { margin-bottom: 0; } /* Light variants, for the same atoms on the purple surfaces. */ .kiez-site .stl-light { color: var(--text-on-dark-soft, #F2ECFF); } .kiez-site .sth-light { color: #fff; } /* -------------------------------------------------------------------------- Element library (kiez-spec) — the Elemente page. Mirrors the reference library page: a numbered spec header above each live element, so the catalogue documents itself and can never drift from what the builder actually renders. -------------------------------------------------------------------------- */ .kiez-site .spec { border-top: 2px solid var(--violet-15); padding-top: 22px; margin-bottom: 28px; } .kiez-site .spec-num { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; } .kiez-site .spec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .kiez-site .spec-name { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--violet); margin: 0; } .kiez-site .spec-slug { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--violet-06); border: 1px solid var(--violet-15); color: var(--purple); padding: 3px 9px; border-radius: 5px; } .kiez-site .spec-desc { font-size: 16px; line-height: 1.6; color: var(--purple); max-width: 78ch; margin: 12px 0 0; } .kiez-site .spec-usage { font-size: 14px; line-height: 1.6; color: var(--text-on-light-soft, #5C447E); max-width: 78ch; margin: 8px 0 0; } .kiez-site .spec-usage strong { color: var(--violet); } /* Dark demo surface on the Elemente page (the front page now uses the design's own .mission / .consortium classes instead). */ .kiez-site .kiez-block-dark { background: var(--purple); } /* On dark demo surfaces the spec header inverts. */ .kiez-site .kiez-block-dark .spec { border-top-color: rgba(255, 255, 255, .22); } .kiez-site .kiez-block-dark .spec-name { color: #fff; } .kiez-site .kiez-block-dark .spec-desc { color: var(--text-on-dark-soft, #F2ECFF); } .kiez-site .kiez-block-dark .spec-usage { color: var(--text-on-dark-soft, #F2ECFF); opacity: .85; } .kiez-site .kiez-block-dark .spec-usage strong { color: #fff; } .kiez-site .kiez-block-dark .spec-slug { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); color: #fff; } /* Demo surface so a white-on-white element is still visible. */ .kiez-site .spec-demo-row .spec-demo { border: 1.5px dashed var(--violet-15); border-radius: var(--kiez-r, 8px); padding: 28px; margin-bottom: 64px; background: var(--off-white); } /* -------------------------------------------------------------------------- Section container for atom-built sections. The design's section padding and page gutter came from its own markup (`
`). Sections composed from atoms in the builder have neither, so their content ran edge to edge with no vertical rhythm. `.kiez-gutter` on the section wrapper restores both, using the same values as the design's own `.wrap`. Sections whose element already renders its own
/
(hero, about, news feed, events feed, newsletter, contact, page header) must NOT carry this class, or the gutter doubles up. -------------------------------------------------------------------------- */ /* `.kiez-gutter` now only reproduces the design's `.wrap` container. Vertical padding, background and the label/title colours come from the design's own section classes (.fields, .mission, .consortium), which the wrapper carries — so the reference CSS applies directly instead of being reimplemented here. */ /* The heading row needs breathing space before the cards below it. */ .kiez-site .kiez-gutter .gdlr-core-pbf-column .sth { margin-bottom: 40px; } /* -------------------------------------------------------------------------- Column gutters in atom-built sections. The design spaced its cards with `.bento { gap: 20px }`. Composed from atoms the cards are separate builder columns, so the gap has to come from column padding instead — 10px each side. Two corrections are needed: 1) The section container subtracts that 10px so the outer edges still align with the page gutter (24 / 48 / 20px). 2) GoodLayers forces `padding: 0 30px !important` on columns below 767px (page-builder.css, .gdlr-core-pbf-wrapper-full-no-space). Ours must win, hence the matching !important — the only place we use it. -------------------------------------------------------------------------- */ /* Reproduces the design's `.wrap`: max-width var(--max) centred, then padding. The 10px column half-gap is subtracted from the padding so the outer edge lands in exactly the same place as the reference: 24px (from max-width) + 14px (padding) + 10px (column) = 48px matching `.wrap { max-width: calc(100% - 48px); padding: 0 24px }`. */ .kiez-site .kiez-gutter .gdlr-core-pbf-wrapper-container { max-width: var(--max); margin-left: auto; margin-right: auto; padding: 0 14px; } @media (min-width: 1800px) { .kiez-site .kiez-gutter .gdlr-core-pbf-wrapper-container { padding: 0 38px; } } @media (max-width: 600px) { .kiez-site .kiez-gutter .gdlr-core-pbf-wrapper-container { padding: 0 10px; } } .kiez-site .kiez-gutter .gdlr-core-pbf-column-content-margin { padding-left: 10px !important; padding-right: 10px !important; } /* Vertical rhythm between stacked rows (mission rows, logo tiles wrapping). Only a heading row (section title) sits tight on what follows; the rule used to zero ANY first column, so stacked content columns touched on phones (13 of 24 pairs on /elemente/, #9101). */ .kiez-site .kiez-gutter .gdlr-core-pbf-column { margin-bottom: 20px; } .kiez-site .kiez-gutter .gdlr-core-pbf-column:first-child:has(.sth) { margin-bottom: 0; } /* Hand-built rows: GoodLayers stacks columns below 768px with no gap. */ @media (max-width: 767px) { .kiez-site .gdlr-core-pbf-wrapper:not(.kiez-gutter) .gdlr-core-pbf-column + .gdlr-core-pbf-column { margin-top: var(--kiez-space-col, 24px); } } /* KI:EZ Pullquote with attribution (#9101). */ .kiez-site .pullquote-figure { margin: 0; } .kiez-site .pullquote-cite { display: block; margin-top: 14px; padding-left: 28px; /* under the text, past the bar */ font-size: 14px; line-height: 1.5; color: var(--text-on-light-soft, #5C447E); } .kiez-site .pullquote-cite strong { color: var(--purple); font-weight: 700; } /* -------------------------------------------------------------------------- Grid-container equivalents. The design wrapped its cards in .bento (grid, gap 20, margin-top 48), .logo-row (centred flex, max-width 1260) and .mission-list. Composed from atoms those roles fall to GDLR's column row, so the spacing they contributed is reproduced here on the section's own container. -------------------------------------------------------------------------- */ /* .bento { margin-top: 48px } — space between the heading row and the cards. */ .kiez-site .fields .gdlr-core-pbf-column.gdlr-core-column-20 { margin-top: 48px; } /* .logo-row { justify-content: center; max-width: 1260px; margin: 0 auto } */ .kiez-site .consortium .gdlr-core-pbf-wrapper-container { max-width: 1260px; justify-content: center; } .kiez-site .consortium .gdlr-core-pbf-column.gdlr-core-column-15 { margin-top: 16px; } @media (min-width: 1800px) { .kiez-site .consortium .gdlr-core-pbf-wrapper-container { max-width: 1400px; } } /* .mission-list { gap: 0 } — rows already sit flush; only the header spaces. */ .kiez-site .mission .gdlr-core-pbf-column { margin-bottom: 0; } /* -------------------------------------------------------------------------- Library components — states the agency expressed as runtime bindings. The Bausteine page drove tab colour, the FAQ icon rotation and the audio progress width through its prototype runtime's inline `style="{{ … }}"` bindings, so library.css contains no CSS for those states. ui.js toggles real classes instead; these rules give those classes the same appearance. -------------------------------------------------------------------------- */ /* Tabs — active state (was `style="color:{{ tab.color }}"`). */ .kiez-site .tabs-tab-btn[aria-selected="true"], .kiez-site .tabs-tab-btn-vertical[aria-selected="true"] { color: var(--violet); border-color: var(--orange); background: rgba(134, 53, 246, .06); } .kiez-site .tabs-tab-btn, .kiez-site .tabs-tab-btn-vertical { color: var(--text-on-light-soft, #5C447E); } .kiez-site .tabs-tab-btn:hover, .kiez-site .tabs-tab-btn-vertical:hover { color: var(--violet); } /* FAQ — icon rotation (was `style="transform:{{ item.iconTransform }}"`). */ .kiez-site .faq-toggle-icon { transition: transform .3s; } .kiez-site .faq-block.kiez-open .faq-toggle-icon { transform: rotate(45deg); } /* Masked icons — the library hardcodes one class per bundled icon; we pass the mask as a custom property so any uploaded SVG works. */ .kiez-site .kiez-icon-mask { display: block; width: 64px; height: 64px; background-color: var(--kiez-fi-color, var(--violet)); mask-image: var(--kiez-fi-mask); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--kiez-fi-mask); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .kiez-site .icon-card-dark .kiez-icon-mask { background-color: var(--kiez-fi-color, var(--orange)); } /* per-card colour on dark too (#8930) */ .kiez-site .icon-label, .kiez-site .icon-label-dark { font-family: var(--display); font-size: 14px; font-weight: 700; text-align: center; } .kiez-site .icon-label { color: var(--purple); } .kiez-site .icon-label-dark { color: #fff; } /* -------------------------------------------------------------------------- Elemente page rhythm. Each entry is a spec row followed by one or two demo rows. Those wrappers carry no inline padding (so the design's section classes can govern on real pages), which means GoodLayers' default `.gdlr-core-pbf-wrapper { padding: 60px 0 30px }` applied to all 73 — 90px between a heading and its own demo, and again before the next entry. These give the page one rhythm. Specificity (0,2,0) beats the plugin default (0,1,0). -------------------------------------------------------------------------- */ .kiez-site .kiez-spec-row { padding: 64px 0 0; } .kiez-site .spec-demo-row { padding: 28px 0 64px; } /* A light demo row followed by its dark counterpart is one demo, not two. */ .kiez-site .spec-demo-row + .spec-demo-row { padding-top: 0; } .kiez-site .kiez-spec-row + .spec-demo-row { padding-top: 28px; } /* The first entry sits directly under the page header. */ .kiez-site .kiez-spec-row:first-of-type { padding-top: 48px; } /* Captions above each variant need a little air from the element below. */ .kiez-site .spec-demo-row .btn-demo-label, .kiez-site .spec-demo-row .btn-demo-label-2 { margin-bottom: 14px; } /* Variants sitting side by side in a row want vertical breathing room when they wrap onto a second line. */ .kiez-site .spec-demo-row .gdlr-core-pbf-column { margin-bottom: 28px; } .kiez-site .spec-demo-row .gdlr-core-pbf-column:last-child { margin-bottom: 0; } @media (max-width: 600px) { .kiez-site .kiez-spec-row { padding-top: 40px; } .kiez-site .spec-demo-row { padding: 20px 0 40px; } } /* -------------------------------------------------------------------------- Single event — the facts block above the description. -------------------------------------------------------------------------- */ .kiez-site .event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding: 24px; margin-bottom: 32px; border: 1.5px solid var(--violet-10); border-radius: var(--r); background: var(--off-white); } .kiez-site .event-fact { font-size: 15px; line-height: 1.5; color: var(--purple); } .kiez-site .event-fact-label { display: block; font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: 6px; } .kiez-site .event-fact-sub { display: block; font-size: 13px; color: var(--text-on-light-soft, #5C447E); margin-top: 4px; } .kiez-site .event-facts .btn-ghost { margin-top: 2px; } /* #9106: category and tag chips under the facts, as pills like the page numbers; each opens the calendar filtered by that term. */ .kiez-site .event-terms { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: -12px 0 32px; padding: 0; } .kiez-site .event-term { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--violet-15); color: var(--purple); font-family: var(--display); font-size: 13px; font-weight: 600; transition: border-color .2s, color .2s; } .kiez-site .event-term:hover, .kiez-site .event-term:focus-visible { border-color: var(--violet); color: var(--violet); } /* -------------------------------------------------------------------------- Events archive — The Events Calendar's own views inside the design's page. TEC's list/month/day views are not rebuilt here: they carry live filtering, a datepicker and an iCal subscribe menu that would all have to be reimplemented, and they ship a self-contained stylesheet that already handles their layout and breakpoints. So these rules only make that stylesheet agree with the surrounding page — typeface, ink and accent — and stop it from applying a second page container inside ours. TEC's own selectors sit at (0,1,0)–(0,2,0); everything here is at least (0,3,0) via .kiez-site .kiez-events-archive, so nothing needs !important. Deliberate: no sidebar on this archive, unlike /blog/ and single posts. TEC's events bar (keyword search + view selector + top bar) is built for full width and becomes unusable in a two-thirds column. -------------------------------------------------------------------------- */ /* Typeface. The attribute selectors catch the BEM classes TEC sets a font-family on directly (.tribe-common-h5, .tribe-common-b2, …), which plain inheritance from .tribe-common would not reach. */ .kiez-site .kiez-events-archive .tribe-common, .kiez-site .kiez-events-archive [class^="tribe-"], .kiez-site .kiez-events-archive [class*=" tribe-"] { font-family: var(--body); color: var(--purple); } /* Headings and the date tag take the display face. */ .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-title, .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-title-link, .kiez-site .kiez-events-archive .tribe-events-calendar-list__month-separator-text, .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-date-tag-daynum, .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-date-tag-weekday, .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-venue-title, .kiez-site .kiez-events-archive .tribe-events-header__content-title, .kiez-site .kiez-events-archive .tribe-events-c-top-bar__today-button, .kiez-site .kiez-events-archive .tribe-events-c-top-bar__nav-link, .kiez-site .kiez-events-archive .tribe-events-c-view-selector__list-item-text, .kiez-site .kiez-events-archive .tribe-events-c-subscribe-dropdown__button-text, .kiez-site .kiez-events-archive .tribe-events-c-nav__prev, .kiez-site .kiez-events-archive .tribe-events-c-nav__next, .kiez-site .kiez-events-archive .tribe-events-c-nav__today { font-family: var(--display); } .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-title-link { color: var(--purple); transition: color .2s; } .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-title-link:hover, .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-title-link:focus-visible { color: var(--orange); } /* The day-number block is the one place the design's accent belongs. */ .kiez-site .kiez-events-archive .tribe-events-calendar-list__event-date-tag-daynum { color: var(--violet); } /* Month separators read as section labels. */ .kiez-site .kiez-events-archive .tribe-events-calendar-list__month-separator-text { color: var(--orange); letter-spacing: .1em; text-transform: uppercase; } /* Links: violet, orange on interaction, matching the rest of the site. */ .kiez-site .kiez-events-archive .tribe-common-anchor-thin, .kiez-site .kiez-events-archive .tribe-events-c-top-bar__nav-link, .kiez-site .kiez-events-archive .tribe-events-c-nav__prev, .kiez-site .kiez-events-archive .tribe-events-c-nav__next { color: var(--violet); } .kiez-site .kiez-events-archive .tribe-common-anchor-thin:hover, .kiez-site .kiez-events-archive .tribe-common-anchor-thin:focus-visible { color: var(--orange); } /* Buttons keep TEC's geometry but take the brand face and accent. */ .kiez-site .kiez-events-archive .tribe-common-c-btn, .kiez-site .kiez-events-archive .tribe-events-c-search__button, .kiez-site .kiez-events-archive .tribe-events-c-subscribe-dropdown__button { font-family: var(--display); } /* #8821 (2026-10-06): the primary button is orange with white text, like every other primary button in the design (.btn-fill). It was violet with TEC's dark text — 2.4:1, too little contrast. */ .kiez-site .kiez-events-archive .tribe-events-c-search__button { background-color: var(--orange); border-color: var(--orange); color: var(--white); } .kiez-site .kiez-events-archive .tribe-events-c-search__button:hover, .kiez-site .kiez-events-archive .tribe-events-c-search__button:focus-visible { background-color: var(--orange); border-color: var(--orange); color: var(--white); filter: brightness(1.1); } .kiez-site .kiez-events-archive .tribe-events-c-search__button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } /* The active view tab. */ .kiez-site .kiez-events-archive .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text { color: var(--violet); } /* One container, not two: ours already sets the max-width and gutters. */ .kiez-site .kiez-events-archive .tribe-common-l-container, .kiez-site .kiez-events-archive .tribe-events-l-container { max-width: none; padding-left: 0; padding-right: 0; } /* -------------------------------------------------------------------------- Blog card (agency section 11, "Blog-Vorschau") in real use. library.css carries the agency's rules verbatim and stays untouched. What follows is only what a live listing needs and a static specimen does not. The markup is in inc/cards.php, which documents the DOM deviations; these are the matching CSS ones. -------------------------------------------------------------------------- */ /* 1. Equal heights. The agency specimen has one-line excerpts, so .blog-block-2 is a plain block. Real posts have variable excerpts, which left ragged cards and a floating "Lesen →". Same treatment already used on .bento-card above. `flex: none` keeps the image strip from being squashed once it becomes a flex item. */ .kiez-site .blog-card-light, .kiez-site .blog-card-dark { display: flex; flex-direction: column; } /* Client 2026-10-12 (blog teaser images full width): the strip keeps the featured-image format instead of library.css's fixed 180px (250px from 1800px). With a fixed height its ratio swung from 1.6 to 2.4 with the column width and cut the sides off the 1100 × 460 images. At 1440px (430px card) this is the agency's 430 × 180 exactly. */ .kiez-site { --kiez-post-ratio: 1100 / 460; } .kiez-site .blog-card-light > .blog-block, .kiez-site .blog-card-dark > .blog-block { flex: none; height: auto; aspect-ratio: var(--kiez-post-ratio); } .kiez-site .blog-card-light > .blog-block-2, .kiez-site .blog-card-dark > .blog-block-2 { flex: 1; display: flex; flex-direction: column; } .kiez-site .blog-card-light .card-link-arrow, .kiez-site .blog-card-dark .card-link-arrow { margin-top: auto; } /* 2. Whole-card click target. The link is on the title, so its accessible name is the title alone rather than the card's ~40 words; this overlay gives pointer users the full-card target back. TRADE-OFF, accepted: the overlay covers the card and takes the pointer, so the excerpt is no longer selectable by dragging across it. That is the cost of every full-card-overlay pattern — `pointer-events: none` would restore selection but also remove the click target the overlay exists for. A short accessible name is worth more here than selectable teaser text; the full text is one click away. Anything interactive added inside a card later must be raised above the overlay with `position: relative; z-index: 1`. */ .kiez-site .blog-card-light, .kiez-site .blog-card-dark { position: relative; } .kiez-site .blog-card-link::after { content: ''; position: absolute; inset: 0; } /* 3. Keyboard focus follows the card's 8px radius rather than drawing a square ring around the title text inside a rounded card. :has(:focus-visible), not :focus-within — :focus-within also fires when the link is clicked with a mouse, which would flash the ring and the image zoom at every pointer user. The ring is violet on BOTH variants. `outline` paints outside the border box, so on the dark card it still lands on the white page behind it, not on the card's own #3C1F66 — gold there measures 1.62:1 against white and fails SC 1.4.11. Violet is 5.45:1 on white. Wrapped in @supports, and the link's own `outline: none` with it: an unsupported :has() would otherwise drop the card ring while the outline-removal still applied, leaving no focus indicator at all. Inside the guard the card takes the ring; outside it, the link keeps its own. */ @supports selector(:has(*)) { .kiez-site .blog-card-light:has(.blog-card-link:focus-visible), .kiez-site .blog-card-dark:has(.blog-card-link:focus-visible) { outline: 3px solid var(--violet); outline-offset: 2px; } .kiez-site .blog-card-link:focus-visible { outline: none; } } /* 4. Hover/focus zoom on the CARD, not just on the image. library.css keeps the agency's element-scoped `.blog-el:hover` — correct for a specimen whose card is not a link. Once the card is a link, container hover is the agency's own idiom (it is what wcg.htm specifies for .mission-item). The keyboard arm is a SEPARATE rule, not another entry in these selector lists: one unsupported :has() invalidates an entire list, which would take the pointer behaviour down with it. */ .kiez-site .blog-card-light:hover .blog-el, .kiez-site .blog-card-dark:hover .blog-el { transform: scale(1.06); } .kiez-site .blog-card-light:hover .card-link-arrow .arr, .kiez-site .blog-card-dark:hover .card-link-arrow .arr { transform: translateX(4px); } .kiez-site .card-link-arrow .arr { display: inline-block; transition: transform .2s; } /* Keyboard equivalents of the two rules above. */ .kiez-site .blog-card-light:has(.blog-card-link:focus-visible) .blog-el, .kiez-site .blog-card-dark:has(.blog-card-link:focus-visible) .blog-el { transform: scale(1.06); } .kiez-site .blog-card-light:has(.blog-card-link:focus-visible) .card-link-arrow .arr, .kiez-site .blog-card-dark:has(.blog-card-link:focus-visible) .card-link-arrow .arr { transform: translateX(4px); } /* 5. The horizontal teaser's CTA is drawn as a