A column may now live directly in a section, not only in a row - the way
to centre or narrow a button or a short text without a one-column row.
The align design token applies to buttons; because a button is
inline-flex, auto margins never centred it, so site.css turns an aligned
button into a fit-content block per device. The Drews seed uses the
token for its centred buttons.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Ihr Malerservice Drews (Gernsbach) as its own installation: seed script with
theme, header, footer, eight pages, 31 posts in two categories, contact form,
consent-gated map and videos, redirects; the wording lives in a generated
content file. Reset script, launch entry on port 8093, Cormorant Garamond
served locally with its OFL text.
Two CMS fixes found while building: wide and full sections lost against the
theme's .kant .shell max-width, and the scroll-top link sat outside every
landmark (axe "region"). Lighthouse on six pages: accessibility, best
practices, SEO and agentic browsing 100, performance 98-100; axe zero
violations on nine pages at 1440 and 390 px.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Umut, with a card of an icon next to a text as the example: "bei Rows die
Breite ändern, am besten per Drag and Drop im Editor". Rows only ever had
equal columns - both the classic `columns` token and the free `gridColumns`
produce `repeat(n, 1fr)`.
A row now carries the free style `columnWidths`, a list of shares such as
`2 1` or `66.7 33.3`, per device and without a new document schema.
`StyleCompiler::columnTracks()` turns it into `grid-template-columns`,
pads or cuts the shares to the number of columns, and gives a device whose
layout stacks the columns a single track, because the desktop rule carries
an id and would otherwise outrank the class that stacks a phone.
In the editor the border between two side-by-side columns of the selected
row is a handle: dragging restyles the row inline while the pointer moves
and writes one undo step on release; the arrow keys nudge by five points.
The design panel shows the same value as the text field "Spaltenbreiten".
The Playwright editor check drags the handle with the real mouse.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Umut asked where a contact form's mail is sent from: it was the recipient
address, `From` equal to `To`. That breaks as soon as the recipient is a
mailbox at another provider, because most hosts only deliver mail that
claims an address of their own domain, and the provider's SPF/DMARC then
treats it as forged.
Each form now has an optional `sender` setting, validated like the
recipient; empty keeps the old behaviour, so stored forms need no
migration. Delivery uses `sender ?: recipient`; the reply-to field is
untouched. The administration shows the field under the recipient with a
note on why it matters. The pilot launch config moves to port 8091 because
8087 was held by another session.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Forms are an editor now: one card per field with add and remove, the
technical name derived from the label, options only for a choice, and a
new "Aussehen" section with a button label and four colours (field border
and background, button and button text) that travel to the page as one
rule per form inside the hashed style block. A live preview draws the
form with the site's default button and names the text contrast.
Statistics open with six figures (views against the same span before,
average per day, busiest day, pages, referred views, missing addresses),
a chart with grid lines and a title per bar, a weekday chart and ranked
lists with share bars. The design screen shows the palette as colour
cards with seven ready-made palettes, picks the base colours from the
palette, previews every font in itself and the typography as a sample.
The sidebar ends in an account card with role and a logout icon.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
A section in the header set to #ffffff00 for the scrolled page still looked
white: the sticky header element paints its own white surface and a shadow
line underneath, so a transparent section showed that surface instead of the
page, and the line could be neither recoloured nor removed.
When a top-level header section defines a background of its own - normal,
hover or scrolled - the header element now gets `has-own-surface` and paints
nothing. A header without its own design keeps the white surface, so it does
not turn see-through over the content. A text colour alone is not a surface,
and a boxed column is not the whole header.
The check is a Twig function rather than a controller variable because four
paths render the header: page, archive, editor preview and area preview.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
"Einzeln wählen" sits on the left and the legal links on the right, on one
baseline; opened, the disclosure takes the full width and the links move
below it, right-aligned. `.consent-bar p` outranked `.consent-links` and
took the right margin away, so the links selector now carries the element.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The back-to-top button was hidden as long as the consent question was open,
on every device - and on a phone the question tends to stay open. Instead
of `display:none` it now anchors itself 12px above the bar wherever the bar
covers its corner: below 800px for the centred card, at every width for the
full-width bar and the corner card. Browsers without anchor positioning keep
hiding it there. The bar renders before the button so it can be an anchor,
and the reserved bottom padding grows to 320px below 620px, where the bar
with its default text is up to 299px tall.
The notice itself gets a face. Settings → Einwilligung now carries layout
(card, bar, corner), shape (soft, round, square - one setting for the box and
its buttons), a heading and four colours, each as #hex or @palette key.
`Theme::cssColor()` resolves both, replacing the copy inside the back-to-top
code; `Consent::styles()` writes the values as `--kant-consent-*` into the
hashed style block. The base layout changes with it: an accent stripe and
shield icon, equal-width buttons, a disclosure with a chevron, underlined
legal links, a two-column bar on wide screens. Declining stays an outlined
button of the same size next to accepting. The archive and the consent page
carry the same variables - the archive had no palette at all until now.
In the editor, rows with an own value are labelled in orange rather than
bold with a dot; the device chips sit 6px apart with the focus ring inside
the gap.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The legal pages put their width limit on the section itself, which shrank the
section and its container along with it: the text sat 32 px from the window
edge while the header's brand stands at 100 px. The section now stays full
width and only the content column is limited, so title and text share the
header's edge on every device.
Both pages open with a pale band - label, title, lead - in the colour of the
offers section, followed by one row per point: heading on the left, text on
the right, separated by fine rules, stacked on a phone.
The footer no longer carries "Gestaltungsentwurf · Beispieltexte &
illustratives KI-Bild".
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Fonts were still reachable from Google in two places. The editor and area
previews were handed `googleFonts` and no `localFonts`, so the screen used
most of the day fetched Lato from fonts.googleapis.com on every open; the
public page fell back to the same link whenever the files were missing.
Neither path remains: the template has no Google branch, `googleFontsUrl()`
is gone, and the policies name no foreign font host - `font-src 'self'`
publicly, `style-src 'self'; font-src 'self'` in administration. Without
local files a site now shows the theme's fallback and says so.
Preloading took the first two weights per family. The Kant-IT theme names
Lato 400, 700 and 900 and sets its headings on 800/900, so the one weight
that carried them loaded after the stylesheet and `font-display:swap`
swapped the heading in plain sight. Every weight of the theme is preloaded
now, latin subset, and the links sit before the stylesheet: measured cold,
all three files finish at 168 ms against a first paint at 292 ms.
Open tasks no longer hide on the screen that owns them. A strip above every
management screen names what needs a button and carries it: a new version
leads to System, missing fonts to Design. Neither asks the network - the
version comes from the daily update-check task, the fonts from a look in
the folder.
System and update was unusable on a phone: `.stack` is a grid whose
automatic column grows to its widest content, and one long database path
pushed the page sideways. It gets `minmax(0, 1fr)`, the backup table stacks
below 620px, and the prose is 45% shorter with the fine print folded away.
The device chips drew the current device with an outline, which lies outside
the box, ran under its neighbour and was clipped by the sidebar - it read as
a cut-off red frame. Used devices are filled in `#9d4e0d` now (5.6:1), the
current one carries a border inside the chip.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The template carried neither an imprint nor privacy notes, which a German site
with a contact form cannot go live without. Both pages are built from the same
blocks as the rest of the site; what only the Tagespflege itself can answer -
legal form, register, supervisory authority, hosting provider - stands as
"NOCH ZU PRÜFEN" in the text instead of being invented. The footer carries the
legal line, the contact form a consent field, and its note links the privacy
page.
Entrance effects come from a list of block IDs rather than being scattered
through the document: the hero plays on load, everything else as it scrolls
into view, staggered so a row appears one item after another. Without
JavaScript every block simply stands on the page.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Settings gain opening hours per weekday and a list of places served;
LocalBusiness emits openingHoursSpecification (equal times grouped) and
areaServed. An accordion can be marked as FAQ (schema v23 property
`faq`), which turns its entries into a FAQPage built from the visible
title and text blocks. Elektro Bernhard gets the real office hours
(Mo–Fr 07:30–17:00), the service area from Karlsruhe to Offenburg and
two more questions. ADR 094.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The icon set had no drawing for people, music or a house - the three pictures
the Tagespflege Moldovan template asks for. They join as `people`, `music` and
`home`; a test keeps the list and the drawings together, because a missing path
renders an empty `<path d="">`: invisible, without an error.
An icon block's own colour never reached its drawing: the embedded SVG carries
the same `block-icon` class as its wrapper and set the accent colour again.
`.block-icon .block-icon{color:inherit}` fixes it at the root.
The menu button becomes a thing you can shape. `burgerLabel` chooses symbol and
text, text only or symbol only (which keeps the name for screen readers), and
the new style group `menu` targets the button itself, the way `img` targets an
image and `controls` the slider. Inside the header the opened menu now lies
under the header across the full width instead of pushing the header apart -
on a phone that looked like a missing navigation.
The back-to-top button no longer depends on `animation-timeline: scroll()`. A
browser that parses the property but does not run the timeline left it in the
first frame of the animation: permanently invisible. Two classes from
scrolled.js decide now, and without a script the button simply stays visible.
Also: the Tagespflege Moldovan rebuild as its own installation, built only by
`scripts/seed-tagespflege-moldovan.php`.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lighthouse and axe on the Elektro Bernhard site: the slider pause button
had visible text "Pause" but an accessible name that did not contain it
(WCAG 2.5.3); the name now starts with the visible text. On the site the
brand names and the footer credit link lacked contrast and the services
page jumped from H1 to H3. After the fixes: axe zero violations on six
pages, Lighthouse 100 everywhere except mobile home performance 99.
Measurements documented in docs/QUALITY.md.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Social profiles are maintained once under settings (one HTTPS address per
network, SocialProfiles::NETWORKS) and shown by the new `social` block
(document schema v23) wherever it stands: size, shape, layout, labels,
new tab and an optional subset of networks on the block; colour, hover,
spacing and alignment through the free block styles. The addresses also
feed sameAs in the structured data. Icons are own outline drawings in
the style of the existing icon set. ADR 093.
Elektro Bernhard is rebuilt with a dark hero over the team photo, a
transparent header that turns white on scroll, Lato, cards with shadows
and hover lift, a review slider with six real Google reviews, a dark
solar band, page headers on every subpage and staggered entrance
effects. Social profiles sit in the top bar and the footer. The site is
a second local reference installation next to the Kant-IT pilot
(var/elektro-bernhard.db, launch config on port 8088); the seed script
rebuilds it from scratch.
Checked: PHP suite 492 tests (only the documented old failure remains),
33 JS tests, Twig lint, PHP style, full editor browser check with axe.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Round white arrows left and right, dots bottom right with the active one as
an accent bar, a small pause button and no counter - the design of the hero
slider on kant-it.de. Slider and controls share a positioned shell; arrows
hide on phones. New style property for the active dot colour.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Dots, arrows, counter and button background are style properties of the
slider ("Slider-Steuerung"), written as custom properties onto the slider and
onto the control bar the script places after it, so the script-free markers
and the scripted controls share the same colours.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Safari cancels a smooth scroll on a snapping container and snaps back to
the slide it came from, so arrows and autoplay stuttered on the iPhone. The
slider switches snapping off for the ride and restores it on arrival. The
control dots are drawn as dots with the active one filled.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Cards, quotes and call-to-action bands side by side in a row are equal in
height again: the stacking margin meant for a column no longer applies inside
a row. The header can carry a second set of colours for the scrolled page,
the Flatsome transparent header: a "scrolled" state next to "hover", limited
to colours, shadow and opacity, marked by a small script only where it is
used, plus a setting that lets the header float over the first section.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The Kant-IT home page now animates blocks instead of whole sections, so the
check waits for the closing call to action rather than the contact section.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The editor follows the Flatsome UX Builder: dark top bar with the device
switch, one sidebar with tabs for elements, structure and page, an element
view with breadcrumbs, property tabs and actions, element cards, a context
menu in the preview and keyboard shortcuts that also work inside the preview.
Entrance and hover effects play for every visitor unless the website chooses
to respect the browser's reduced-motion preference (setting "motion", class
"motion-respect" on <html>). Waiting blocks stay hidden until they scroll into
view and are shown at once when the reader jumps past them.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
kantarciandClaude Fable 5.1