/* Grillliste — the Dienstplan layout.
*
* Mobile first, in the literal sense: everything below is written for a
* 360-px-wide phone and widened by the two min-width blocks at the end. The
* QR code is the front door, so the phone is the design and the desktop is
* the variant.
*
* Dark is the default and light is a switch, not a preference query: the
* button at the top right sets data-theme on and the choice is
* remembered. prefers-color-scheme is honoured for anyone who has not chosen.
*
* Fonts are served from this host. A German site that pulls its fonts from
* Google hands every visitor's address to Google on every page, and this one
* has no reason to call anybody at all.
*/
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-var-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/jetbrains-mono-var-latin.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
/* Dark, the default. */
:root {
--surface: #0f141a;
--ink: #e7edf3;
--ink-2: #9aa8b6;
--hair: #26313d;
--band: #151c24;
/* THE DEFAULT ACCENT, AND IT IS „glut“ SINCE G-90. A page with no
* data-accent wears what this block says, so the default lives here as well
* as in the table below — and the two have to agree or the site would be
* orange by setting and green by stylesheet. */
--accent: #f0913c;
--accent-soft: #3d2410;
--on-accent: #1a0f04;
--red: #f2777a;
--red-soft: #3a1c1e;
--input: #141b23;
--chevron: url("data:image/svg+xml;utf8,");
--input-line: #324050;
--bubble: #e7edf3;
--bubble-ink: #0f141a;
--tint-0: #2f6f4a;
--tint-1: #6b5330;
--tint-2: #35566f;
--tint-3: #5c3a44;
--tint-4: #4a4a63;
--on-tint: #eef4f9;
/* THE SPACING SCALE. One rhythm, 4 px, and every gap in the site is a
* step on it. The operator's words about the organiser area were "almost
* every control / label is too close to each other", and the cause was
* that every margin had been chosen on its own: 6, 10, 12, 14, 18, 26 px,
* each reasonable next to the one before it and none of them agreeing.
*
* Named by step rather than by size, so a rule reads as "two steps of
* air" and not as a number somebody nudged. Anything that needs a value
* off this scale needs a reason in a comment.
*/
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--sans: "Archivo", system-ui, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
color-scheme: dark;
}
/* Light, whether preferred or chosen. Only the tokens change, and the chosen
* one is written last so an explicit switch beats the system preference in
* both directions. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--surface: #ffffff;
--ink: #0f172a;
--ink-2: #475569;
--hair: #e2e8f0;
--band: #f1f5f9;
/* The default again, in light. 7.31:1 on white — see G-90. */
--accent: #9a3412;
--accent-soft: #ffedd5;
--on-accent: #ffffff;
--red: #b91c1c;
--red-soft: #fee2e2;
--input: #ffffff;
--chevron: url("data:image/svg+xml;utf8,");
--input-line: #cbd5e1;
--bubble: #0f172a;
--tint-0: #166534;
--tint-1: #92400e;
--tint-2: #1e4e79;
--tint-3: #9f1239;
--tint-4: #4338ca;
--on-tint: #ffffff;
--bubble-ink: #ffffff;
color-scheme: light;
}
}
:root[data-theme="light"] {
--surface: #ffffff;
--ink: #0f172a;
--ink-2: #475569;
--hair: #e2e8f0;
--band: #f1f5f9;
/* And once more for the theme chosen by hand rather than by the system. */
--accent: #9a3412;
--accent-soft: #ffedd5;
--on-accent: #ffffff;
--red: #b91c1c;
--red-soft: #fee2e2;
--input: #ffffff;
--chevron: url("data:image/svg+xml;utf8,");
--input-line: #cbd5e1;
--bubble: #0f172a;
--bubble-ink: #ffffff;
--tint-0: #166534;
--tint-1: #92400e;
--tint-2: #1e4e79;
--tint-3: #9f1239;
--tint-4: #4338ca;
--on-tint: #ffffff;
color-scheme: light;
}
/* THE ACCENTS.
*
* Five of them, and the one above is the first: a page with no data-accent
* wears the default, so the base block and the default's entry in this table
* say the same thing twice. Since G-90 that default is the orange rather than
* the green — "looks better than the green" (the operator, 2026-09-12) — and
* green is still here, still selectable, simply no longer first. Every one is
* written out rather than computed, because a hue rotation of a colour that
* clears 4.5:1 does not clear it any more.
*
* Each is a pair, not a colour. Dark needs a bright accent on a near-black
* page, light needs a deep one on white, and the ink that goes on top flips
* with it. Every one of the twenty values below was measured before it was
* written down — accent on surface, accent on band, on-accent on accent, ink
* on the soft tone — and the worst pair in the set is 4.89:1. AppearanceTests
* reads them back out of this file and measures them again, so a value nudged
* later by eye fails a test rather than a person.
*
* ON [data-accent], NOT ON :root[data-accent]. The attribute names an accent
* wherever it appears, so the same block that colours the whole page colours
* one label of the form that chooses it — which is why the swatches on the
* settings pages are var(--accent) and not a second copy of this table. The
* light blocks carry the theme selector twice for that reason: once for the
* root that has both attributes, once for a labelled element under it.
*
* The three parts come in the same order as the themes above: dark, then
* preferred light, then chosen light.
*/
/* The green. No longer the page's default, so this is the only place it is
* written — and it is still what the label marked "gruen" on the two settings
* pages needs, or that label would inherit whichever accent the page is
* wearing and draw the wrong circle. */
[data-accent="gruen"] {
--accent: #3fbf6f;
--accent-soft: #123a24;
--on-accent: #08150d;
}
/* The orange, again. Not for the page — :root already says this since G-90 —
* but for the label that names it on the settings pages, the same way the
* green needed its own block while it was the default. */
[data-accent="glut"] {
--accent: #f0913c;
--accent-soft: #3d2410;
--on-accent: #1a0f04;
}
[data-accent="senf"] {
--accent: #d8b23a;
--accent-soft: #382d0f;
--on-accent: #17130a;
}
[data-accent="see"] {
--accent: #45b6d8;
--accent-soft: #0e3441;
--on-accent: #05161c;
}
[data-accent="beere"] {
--accent: #e4739b;
--accent-soft: #40182a;
--on-accent: #1b0810;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="gruen"],
:root:not([data-theme="dark"]) [data-accent="gruen"] {
--accent: #166534;
--accent-soft: #dcfce7;
--on-accent: #ffffff;
}
:root:not([data-theme="dark"])[data-accent="glut"],
:root:not([data-theme="dark"]) [data-accent="glut"] {
--accent: #9a3412;
--accent-soft: #ffedd5;
--on-accent: #ffffff;
}
:root:not([data-theme="dark"])[data-accent="senf"],
:root:not([data-theme="dark"]) [data-accent="senf"] {
--accent: #854d0e;
--accent-soft: #fef3c7;
--on-accent: #ffffff;
}
:root:not([data-theme="dark"])[data-accent="see"],
:root:not([data-theme="dark"]) [data-accent="see"] {
--accent: #0e7490;
--accent-soft: #cffafe;
--on-accent: #ffffff;
}
:root:not([data-theme="dark"])[data-accent="beere"],
:root:not([data-theme="dark"]) [data-accent="beere"] {
--accent: #9d174d;
--accent-soft: #fce7f3;
--on-accent: #ffffff;
}
}
:root[data-theme="light"][data-accent="gruen"],
:root[data-theme="light"] [data-accent="gruen"] {
--accent: #166534;
--accent-soft: #dcfce7;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="glut"],
:root[data-theme="light"] [data-accent="glut"] {
--accent: #9a3412;
--accent-soft: #ffedd5;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="senf"],
:root[data-theme="light"] [data-accent="senf"] {
--accent: #854d0e;
--accent-soft: #fef3c7;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="see"],
:root[data-theme="light"] [data-accent="see"] {
--accent: #0e7490;
--accent-soft: #cffafe;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="beere"],
:root[data-theme="light"] [data-accent="beere"] {
--accent: #9d174d;
--accent-soft: #fce7f3;
--on-accent: #ffffff;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.45;
}
/* THE COLUMN EVERY PAGE'S BLOCKS STAND IN, and until 2026-09-11 it had no
* gap: the only thing holding two blocks apart was the padding-top a `.stack`
* happens to carry, so anything that is not a stack — a hint, a table, a list
* — touched whatever came before it. That is what "the filter button is
* clipped" was: six pixels between a button and the sentence under it.
*
* One step of the scale, here, rather than a margin on each block: a margin
* per block is how the numbers stopped agreeing the first time. */
.page {
max-width: 760px;
margin: 0 auto;
padding: 16px 14px 8px;
min-height: 100vh;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.page-wide {
max-width: 1080px;
}
a {
color: var(--accent);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Keyboard users get to the form without walking the header. */
.skip {
position: absolute;
left: -9999px;
}
.skip:focus {
position: static;
display: inline-block;
margin-bottom: 8px;
}
/* ---- header --------------------------------------------------------- */
/* IT WRAPS. At 320 px the lockup and the tools do not fit on one line, and
* without this the pair was pushed out of its own bar — measured at 286 to
* 313 in a bar that ends at 306. Nothing else changes: above 320 there is
* room and it never wraps.
*
* FLEX-END RATHER THAN SPACE-BETWEEN since G15 item 4. „Today's bar spreads
* the two apart, which put the login on the far left edge.“ It did, and only
* on the landing page: that is the one page with no lockup, so space-between
* had two children to spread instead of three and sent them to opposite ends
* of the screen. The tools are one group now and the bar places the group;
* where there is a lockup, `.topbar .brand`'s auto margin still keeps the
* left and pushes the group right, which is the same rule rather than a
* second one. */
.topbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: var(--space-2) var(--space-3);
padding-bottom: 14px;
}
/* THE PAIR. 8 px apart, which is the smallest gap on the scale that is still
* a gap — G-78's finding was two controls whose targets met at zero, and this
* is the same corner of the same bar. */
.topbar-tools {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* The old text brand's type rules are gone: the name is drawn now. What
* is left of this selector is above, with the mark. */
.theme {
font: inherit;
font-size: 16px;
width: 44px;
height: 44px;
border-radius: 6px;
border: 1px solid var(--input-line);
background: var(--input);
color: var(--ink);
cursor: pointer;
}
/* ---- the motion vocabulary ------------------------------------------- */
/* "Add motion and responsiveness" (the operator, 2026-09-11).
*
* FOUR THINGS MOVE ON THIS SITE, and the list is short on purpose: the
* guidance is to animate one or two things per view and that too many
* animations cause distraction and motion sickness. Every one of these is a
* response to something a person did, or an arrival — none of them loops, and
* none of them is tied to scrolling.
*
* 1. A section arrives once, when the page does.
* 2. A card lifts under the pointer, so a card that can be opened says so.
* 3. A button gives under a press, because a control that does not move
* under a thumb feels like one that did not register.
* 4. The mascot's bubble pops, which it already did (G-22).
*
* ALL OF IT IS INSIDE `no-preference`. Not "reduced motion turns it off" —
* the other way round: nothing here is declared at all unless somebody has
* left the preference alone. A rule written the first way has to be
* remembered twice and is forgotten once.
*
* And every one of these animates `transform` or `opacity` only. Animating a
* width or a height is work for the layout engine on every frame; these are
* work for the compositor and nothing else. */
@media (prefers-reduced-motion: no-preference) {
/* 1. THE SECTION ARRIVES. Once, 260 ms, and it is over — short enough that
* somebody who has seen the page a hundred times is not waiting for it. */
.panel {
animation: lg-rise 260ms ease-out both;
}
/* 2. THE CARD LIFTS. Only for a pointer that can hover: on a touch screen
* :hover sticks after a tap and the card would stay lifted. */
@media (hover: hover) {
.rows-cards .row {
transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.rows-cards .row:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}
}
/* 3. THE BUTTON GIVES. Faster going down than coming back, because a press
* is an event and its release is a recovery — exit faster than enter
* reads as mechanical rather than springy. */
.button,
.submit,
.signin,
.theme,
.copy,
.mascot-pause {
transition: transform 120ms ease-out;
}
.button:active,
.submit:active,
.signin:active,
.theme:active,
.copy:active,
.mascot-pause:active {
transform: scale(0.97);
transition-duration: 60ms;
}
}
/* ---- empty states, and the line icons they use ----------------------- */
/* One drawing idea for every icon on this site: a 20-box, stroked at 1.5,
* `currentColor`, no fill. Sized by whatever is around it. */
.line-icon {
width: 20px;
height: 20px;
flex: none;
display: block;
}
/* A LIST WITH NOTHING IN IT YET.
*
* "Cleaner empty / load states with icons and animations" (the operator,
* 2026-09-11). What was here was one grey sentence where a list should be:
* true, and no help at all to somebody who has just made an account.
*
* Centred, because there is nothing beside it to align to, and generous with
* height so the page does not look broken — an empty state that is three
* lines tall reads as a list that failed to load. */
.empty {
display: grid;
justify-items: center;
align-content: center;
gap: var(--space-4);
padding: var(--space-7) var(--space-4);
text-align: center;
}
.empty .line-icon {
width: 32px;
height: 32px;
color: var(--ink-2);
opacity: 0.7;
}
.empty-line {
margin: 0;
max-width: 34ch;
color: var(--ink-2);
font-size: 15px;
}
/* It arrives rather than appearing, once, and only for somebody who has not
* asked for less motion. Nothing loops and nothing moves on scroll. */
@media (prefers-reduced-motion: no-preference) {
.empty {
animation: lg-rise 260ms ease-out both;
}
}
@keyframes lg-rise {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
/* ---- the progress line for a navigation ------------------------------ */
/* THE WAIT, WHEN THERE IS ONE.
*
* Every page here is server-rendered, so a click on a link is a round trip
* with nothing on the screen to say so. This is a line across the top of the
* viewport while that happens.
*
* TWO TIMINGS, and they are the whole design. It appears only after 150 ms,
* because a navigation that answers faster than that is not a wait and a bar
* that flashes for one frame is noise. Once shown it stays for at least
* 300 ms, because a bar that appears and vanishes in 40 ms reads as a glitch.
* Both live in nav-progress.js, which is where the numbers are explained.
*
* Fixed, so it cannot move the page under the reader: a progress element in
* the flow would push every page down by its own height at the moment the
* reader is least able to cope with it. */
.nav-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
transform-origin: 0 50%;
transform: scaleX(0);
background: var(--accent);
z-index: 50;
pointer-events: none;
}
.nav-progress[hidden] {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.nav-progress {
transition: transform 200ms ease-out;
}
}
/* Under a reduced-motion preference it still says the same thing; it simply
* arrives at each width rather than travelling to it. */
/* ---- a section: a heading above a card ------------------------------- */
/* "The admin dashboard tab headers are still not centered properly between
* the lines. I'd rather have the headers float above a card with the content
* inside it." (the operator, 2026-09-11.)
*
* The old pattern was a rule, a heading and a rule: `.hdr` drew a hairline
* under the page title and every `h2` sat between one block and the next with
* nothing but margin to say which side it belonged to. That is what "not
* centred between the lines" is — it was not centred between them, and it
* could not be, because the space above a heading and the space below it were
* set by two different rules that never agreed.
*
* A heading that stands above a card needs no rules at all: the card's edge
* says where the section starts, and the heading belongs to it by sitting on
* top of it. Nothing has to be centred between anything.
*
* The heading is flush with the card's left edge rather than indented to its
* padding: an outdented label reads as a tab on a folder, which is what the
* operator asked for by the word "float". */
.panel {
display: grid;
gap: var(--space-3);
align-content: start;
}
.panel-head {
margin: 0;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink-2);
display: flex;
align-items: center;
gap: var(--space-2);
}
.panel-body {
background: var(--band);
border: 1px solid transparent;
/* THE PHONE'S VALUES ARE THE BASE. At 360 px the card is the column, and
* the page already has side padding, so the card's own inset has to be
* something a phone can afford — a 24-px ring inside a 20-px ring leaves a
* form 272 px wide. This was written the other way round, as a
* `max-width: 480px` override, which G-1 forbids and for a reason: a
* viewport of 480.5 px matched neither that block nor anything else. */
border-radius: 8px;
padding: var(--space-4);
display: grid;
gap: var(--space-4);
align-content: start;
}
@media (min-width: 481px) {
.panel-body {
border-radius: 10px;
padding: var(--space-5);
}
}
/* A card whose content is already a grid of cards draws no second box around
* them: the rows are the card. */
.panel-body-plain {
background: none;
border-color: transparent;
padding: 0;
}
/* The page title keeps its own space but loses its rule: the cards under it
* are what separate it from the page now. */
.hdr {
padding-bottom: var(--space-2);
}
/* THE COLLISION. This row holds a page title and the button that acts on
* it. Without `flex-wrap` neither could give way at 360 px, so "Neue
* Veranstaltung" sat on top of "Veranstaltungen" — the clipping in the
* operator's screenshots. Wrapping is the fix, and the gap is a step on
* the scale so the wrapped row does not touch the title. */
.hdr-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-3) var(--space-4);
}
/* WHERE THE SECOND THING IS TALL, THE TEXT STARTS AT THE TOP.
*
* „There is a lot of dead space … between the group banner and/or event image
* and the time/place and header.“ (the operator, 2026-09-13.)
*
* `flex-end` above is right for a row of a title and the button that acts on
* it: they share a baseline. It is wrong for the guest's page, where the
* second thing is a 192 px mascot — the text was pushed to the BOTTOM of his
* height, leaving 121 px of nothing between the picture above and the first
* word. Measured at 1280 px: the row began at 108 and the kicker at 229.
*
* A modifier and not a change to the rule, because every other row that uses
* it wants the baseline it has. */
.hdr-row-top {
align-items: flex-start;
}
/* Once it has wrapped, the title should not be squeezed to make room for
* a button that is now on another line. */
.hdr-row > :first-child {
flex: 1 1 auto;
min-width: 0;
}
/* AND ITS TEXT COLUMN GIVES WAY RATHER THAN PUSHING THE MASCOT OFF THE ROW.
*
* `.hdr-row > :first-child` is `flex: 1 1 auto`, so its basis is its own
* max-content width — the longest line in it laid out without wrapping. That
* was the title, about 380 px, and the mascot sat beside it. Moving the
* deadline line into this column made the longest line a whole sentence, about
* 560 px, so the column plus the gap plus 192 px of mascot no longer fitted the
* 732 px this page has and the row wrapped: the mascot dropped underneath and
* sat alone in a field of nothing.
*
* `1 1 0` with `min-width: 0` says the column may be as narrow as the row
* needs, and the sentence wraps instead. Only on this row — every other header
* is a title and a button, where sizing to the content is what keeps the button
* its own width.
*
* AFTER the rule it overrides, not before it. Written above, it lost at equal
* specificity and changed nothing — measured twice, identical numbers. The
* third time in this stylesheet this session (G-91's nav band, G-93's flash
* margin), and the reason to read the file rather than the diff. */
.hdr-row-top > :first-child {
flex: 1 1 0;
/* NOT `min-width: 0`, WHICH IS WHAT THE BASE RULE SETS. A basis of 0 with
* nothing to stop it shrinking meant the row could never wrap: at 360 px the
* text column was 187 px with the mascot's 96 px beside it, so the title
* broke over three lines and the deadline sentence over four while the
* mascot sat in the space they needed. 14 rem is wide enough that the row
* still holds together at 900 px — where wrapping was the fault this
* modifier was added to fix — and narrow enough that a phone drops the
* mascot underneath and gives the words the whole column. */
min-width: 14rem;
}
/* ---- the deadline ---------------------------------------------------- */
/* THE CHECKBOX, THE DATE AND THE HINT AS ONE THING.
*
* Three controls that answer one question, so they are one block in the grid
* of fields rather than three that happen to sit next to each other.
*
* AND NO INDENT ON THE DATE OR THE HINT. „The deadline controls aren't quite
* fully aligned.“ (the operator, 2026-09-13.) They were indented 30 px to sit
* under the checkbox's own words, which lined them up with nothing: measured,
* the box at 34, its words at 67, the date field at 60, and every other field
* on the form at 30 — three left edges where the form has one. The checkbox
* above is what says the date belongs to it; it does not need the date moved
* sideways to say so a second time.
*
* Both halves of that were written as separate comments, one of them still
* describing the indent and one of them attached to the rules that had just
* been deleted, which is two ways of telling the next reader to put it back. */
.deadline {
display: grid;
gap: var(--space-2);
}
/* THE STATE, BESIDE THE KICKER, ON A GUEST'S PAGE.
*
* The pill is the organiser's `.tag`, reused rather than redrawn: a guest and
* an organiser looking at the same list should not have to learn two shapes
* for the same fact. This only puts it on the kicker's line and keeps it from
* being stretched by it. */
.kicker-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
}
.kicker-row > .tag {
flex: none;
}
/* THE DEADLINE'S OWN LINE, under the host line.
*
* `.notice`'s box while the list is open — the accent-soft ground, because
* „you can still sign up until Friday“ is something to act on. After it has
* passed the same line is plain grey: a passed deadline is not an invitation,
* and leaving it in the accent would make the page look open at a glance. */
/* THE CARD OVER A CLOSED LIST.
*
* „a card laid over the form area … The overlay is not dismissable and has no
* close control; the page is not scrollable behind it in a way that hides it
* (position it at the top of the form area, not centred in a tall page).“
* (PKG-G16 §2.)
*
* So it is IN the flow, at the top of the form, and not positioned at all:
* a card that floats over a long list is a card that scrolls away from it,
* and one centred in the viewport is a card that covers the thing the guest
* came to read. This one is the first thing in the form area and stays there.
*
* The form behind it is disabled rather than hidden — the offers and the
* guest's own quantities are still what they came for — so this is dimmed
* along with it: the eye should land on the sentence and then on a list that
* plainly cannot be used. */
.deadline-over {
display: grid;
gap: var(--space-2);
margin: 0 0 var(--space-5);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--hair);
border-left: 3px solid var(--ink-2);
border-radius: 10px;
background: var(--band);
color: var(--ink);
}
.deadline-over h2 {
margin: 0;
font-size: 19px;
}
.deadline-over p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.deadline-over .kicker {
color: var(--ink-2);
}
/* A DISABLED FORM LOOKS DISABLED. Browsers grey a disabled control's own text
* and leave everything else alone, so without this the list behind the card
* read as ordinary and only stopped working when somebody tried it. */
/* THE FIELDSET IS THE FORM'S GRID, because it took the form's children.
*
* `.entry` is a grid with a step of gap between the fields, the list and the
* total. Wrapping those three in one fieldset in G16 made them children of a
* plain block instead, so every gap between them became zero — measured, the
* name and e-mail boxes ended at 543.5 and the list began at 543.5. „The
* name/mail boxes now clip into the list table.“ (the operator, 2026-09-13.)
*
* So the element that holds them lays them out, with the display and the gap
* the form has. A wrapper that changes the spacing of what it wraps is not a
* wrapper. */
.entry-fields {
display: grid;
gap: var(--space-5);
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.entry-fields[disabled] {
opacity: 0.55;
}
/* NO MARGIN OF ITS OWN. On the sign-up page this box is a child of `.page`,
* a flex column with a 24 px gap, and flex items do not collapse margins — a
* top margin here would add to that gap and push it away from the form it
* governs. Inside a header it still needs one; that rule is below, where the
* context that wants it can ask. */
.deadline-line {
margin: 0;
padding: 10px 14px;
border-radius: 6px;
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--ink);
font-size: 15px;
}
/* The change page still draws it inside its header, under the intro line. */
.hdr .deadline-line {
margin-block-start: var(--space-3);
}
.deadline-line-over {
background: transparent;
border-color: var(--hair);
color: var(--ink-2);
}
.kicker {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
letter-spacing: 0.04em;
}
/* A LITTLE MORE AIR ABOVE THE TITLE. „There should be a very slightly larger
* gap between the date/time/where, title and where the list is from.“ (the
* operator, 2026-09-13.) Measured on the guest's page: 6 px from the kicker to
* the title and 8 px from the title to the host line, which reads as one
* block of four lines rather than three things. 10 and 12 — one notch, not a
* new rhythm. */
h1 {
font-size: 26px;
font-weight: 700;
margin: 10px 0 0;
letter-spacing: -0.02em;
line-height: 1.1;
text-wrap: balance;
}
h2 {
font-size: 19px;
font-weight: 700;
margin: 26px 0 10px;
letter-spacing: -0.01em;
}
/* A subheading inside a section. The Datenschutz page is the only thing on
* this site deep enough to need one — purposes, bases and periods under the
* organisers' section — and it is set clearly smaller than an h2 so the
* numbered sections stay the page's structure. */
h3 {
font-size: 15px;
font-weight: 600;
margin: var(--space-5) 0 var(--space-2);
letter-spacing: 0;
}
/* THE COLUMN'S GAP IS THE WHOLE GAP.
*
* Flex items do not collapse margins, so a block that carries a top margin of
* its own gets that margin AND the column's 24 px — a heading 50 px below the
* thing above it, on three pages, with the stylesheet claiming one step of the
* scale. These four are the blocks that sit directly in the column and bring a
* margin with them; inside a card or a stack their own margins still apply. */
.page > h2,
.page > .sub,
.page > .notice,
.page > .banner {
margin-top: 0;
}
/* The descriptor under the mark. It is a second string on purpose: it says
* what the site is for, and what it is for widened past barbecues without
* the name having to change. Set in the mono face and letterspaced so it
* reads as a subtitle to the wordmark rather than as the first line of the
* page's prose, which is what .sub below is.
*
* No top margin of its own since G15: `.lockup` is a grid and the gap between
* its two rows is the grid's. A margin and a gap stacked is how a spacing
* scale stops being one.
*
* THE INDENT IS A MARGIN AND NOT PADDING, and the difference is measurable:
* with padding the element's own left edge stays under the mark and only the
* text moves, so „the descriptor's left edge equals the wordmark's“ — which is
* what G15 asks a test to assert — would have been false of the boxes while
* looking right on the screen. Measured at 360 px: padding put the box at 14
* and the wordmark at 78. A margin moves the box, so the two edges are the
* same edge and the assertion is about what a person sees. */
.descriptor {
margin: 0 0 0 calc(var(--mark-width) + var(--space-3));
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-2);
}
.sub {
margin: 12px 0 0;
font-size: 15px;
color: var(--ink-2);
max-width: 60ch;
}
.banner {
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 6px;
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--ink);
font-size: 15px;
}
/* ---- forms ---------------------------------------------------------- */
.entry,
/* A GRID ITEM WILL NOT SHRINK BELOW ITS CONTENT by default, which means it
* refuses to be narrower than what is in it — so one long unbroken thing
* inside a stack pushes the whole column open. That is how the entry page
* reached 655 px in a 320-px viewport the moment it was given a link line:
* the line knows how to shrink and its parent would not let it.
*
* Declared on the children rather than on the stack itself, because it is
* the items that have the rule this overrides. */
.stack {
display: grid;
gap: var(--space-5);
}
.stack > * {
min-width: 0;
}
.fields {
display: grid;
gap: 14px;
}
.field {
display: grid;
gap: 6px;
}
/* A BUTTON IN A FIELD ROW LINES UP WITH THE CONTROL, NOT THE COLUMN.
*
* „When creating a new event, the button in step 2 'Vorlage übernehmen' is too
* large (height) next to the dropdown.“ (the operator, 2026-09-14.)
*
* It was not too large; it was stretched. `.fields` is a grid and its rows
* stretch, so a field holding only a button grew to the height of the field
* beside it — a label AND a select, about seventy pixels. It keeps its own
* height now and sits at the bottom of its cell, level with the control it
* acts on. */
.field-control {
align-self: end;
}
/* AND A FIELD THAT IS HIDDEN IS HIDDEN.
*
* `[hidden]` is a rule in the BROWSER's stylesheet and any author `display`
* outranks it — G-32 for the drop zone's preview, G-93 for the confirmation
* panel, and here for the deadline's date field, which `deadline.js` hides by
* setting the attribute. Measured in Chromium before this rule: attribute set,
* `display: grid`, 51.19 px tall, unchanged by unticking the box.
*
* On `.field` rather than on that one element, because the class is what
* carries the `display` that outranks it — every field on this site had the
* same hole and only one of them had anything trying to use it. */
.field[hidden] {
display: none;
}
.field > span,
.field > label {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
}
.field em {
font-style: normal;
font-weight: 400;
opacity: 0.75;
}
/* Required, said in the one way a form is allowed to say it without a
sentence. aria-hidden in the markup: the input's own `required` is what a
screen reader announces, and two announcements of one fact is noise. */
.req {
color: var(--accent);
font-weight: 700;
}
/* `file` is in this list since G11 item 4. It was the one input without a
* width of its own, so it kept its intrinsic one — the button and the
* file name the browser draws — and ran 4 px off a 320-px screen, taking the
* account page's document to 341. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
font: inherit;
font-size: 16px;
width: 100%;
background: var(--input);
color: var(--ink);
border: 1px solid var(--input-line);
border-radius: 6px;
padding: 12px;
min-height: 46px;
}
textarea {
min-height: 88px;
resize: vertical;
}
/* THE ARROW IS DRAWN, AND IT SITS WHERE THE PADDING SAYS.
*
* „Generally on all dropdowns, the arrowhead facing downward sits awkwardly
* close to the right edge of the control.“ (the operator, 2026-09-14.)
*
* A native select draws its own arrow hard against the frame and does not read
* the element's padding, so there was nothing to adjust — and every browser
* draws a different one, so one control looked like three across three
* machines. `appearance: none` takes the browser's away; this draws the site's
* own, on the space step everything else here is spaced on.
*
* The chevron is a palette token for the reason every colour is: `--ink-2` is
* two different colours in the two themes, and `var()` cannot be interpolated
* into a `url()`. The right padding leaves room for the arrow plus the same
* step again, so the longest option never runs under it. */
select {
appearance: none;
background-image: var(--chevron);
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: calc(var(--space-3) + 12px + var(--space-3));
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
border-color: var(--accent);
}
.check {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
min-height: 44px;
}
.check input {
width: 20px;
height: 20px;
accent-color: var(--accent);
}
/* A radio group as a row of chips. Two of these are the whole of the
* appearance settings, and at 360 px they wrap rather than shrink: a target
* under 44 px is a target somebody's thumb misses.
*
* fieldset and legend are used for what they are for — the group has a name
* and a screen reader reads it with each option — with the browser's own
* border and padding taken off, because they are from 1997. */
/* AN EVEN GRID ON A PHONE, A ROW AT THE DESK.
*
* „the round buttons for settings are wrapping and are distributed unevenly on
* a mobile device.“ (the operator, PKG-G19 §4.) Content-width pills in a
* wrapping flex row put „Wie das Gerät“ and „Dunkel“ on one line and „Hell“
* alone on the next, and the five accents came out two, two and one — every
* break at a width nobody chose, because the words chose it.
*
* `auto-fit` with a floor rather than a column count per breakpoint: the count
* is then a consequence of the room, which is the same thing a breakpoint
* table says with three numbers that have to be kept true. 8.5rem is the
* longest of these labels („Wie das Gerät“) plus its radio and padding, so the
* floor is a measurement and not a guess.
*
* A LAST ROW WITH FEWER TILES IS NOT RAGGED. They are still the width of the
* ones above; what was ragged was pills of five different widths ending
* wherever their words did. */
.choice {
border: 0;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: var(--space-2);
}
/* At the desk the pills take their own width again and sit in a row: there is
room for all of them, and stretching five accents across 1100 px would turn
a set of choices into a toolbar. „It looks good on Desktop“ is not something
to spend.
600 IS THE ONE BOUNDARY. This package first wrote the phone rules as
`max-width: 599px` against the desk rules' `min-width`, which is two
numbers, not one: a viewport of 599.5 CSS px — routine under Windows display
scaling and at most zoom steps — matched NEITHER, so a reader at that width
got the un-fixed phone layout and the un-fixed desk layout at once. Every
phone rule in this package is the base now and every desk rule is a
`min-width: 640px` override — 640 being the width this sheet already calls
its own — which is also what G-1 says this sheet is. */
@media (min-width: 640px) {
.choice {
display: flex;
flex-wrap: wrap;
}
}
.choice legend {
padding: 0;
margin-bottom: var(--space-2);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
/* Flex, so the row's icon sits on the words' centre rather than on their
* baseline — a 16-px square hung off a 13-px baseline sits low enough to
* look like a mistake. */
display: flex;
align-items: center;
gap: var(--space-2);
}
/* THE SETTINGS ROWS' ICONS.
*
* "The settings should have some icons" (the operator, 2026-09-11). Drawn in
* the same line style as everything else here, and the same colour as the
* legend they belong to, so they read as part of the label and not as five
* decorations somebody added to a form. */
.setting-icon {
width: 16px;
height: 16px;
flex: none;
display: block;
}
h2 .setting-icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: -2px;
margin-right: var(--space-2);
color: var(--ink-2);
}
/* THE FLAGS.
*
* One height, and the width follows the flag: Germany is 5:3 and the United
* Kingdom is 2:1, so they are not the same shape and pretending otherwise
* would mean drawing one of them wrong.
*
* A hairline around them because both have white in them, and on the light
* theme a white edge against a white row has no edge at all. */
.flag {
height: 12px;
width: auto;
flex: none;
display: block;
border-radius: 2px;
box-shadow: 0 0 0 1px var(--hair);
}
.choice em {
font-style: normal;
font-weight: 400;
opacity: 0.75;
}
.choice-option {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--input-line);
border-radius: 999px;
background: var(--input);
font-size: 15px;
cursor: pointer;
}
.choice-option input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--accent);
}
/* The chosen one, said twice: the radio is checked and the chip carries the
* accent. :has() is what makes that possible without a line of script; where
* it is not supported the radio alone still says it. */
.choice-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
}
.choice-option:focus-within {
border-color: var(--accent);
}
/* The swatch is the accent itself: this label carries data-accent, so
* var(--accent) inside it resolves to that accent's own value in whichever
* theme the page is wearing. */
.swatch {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
border: 1px solid var(--hair);
}
/* Hidden from people, visible to a bot filling every field it finds. */
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.error {
color: var(--red);
font-size: 14px;
margin: 0;
}
.error-summary {
background: var(--red-soft);
border: 1px solid var(--red);
border-radius: 6px;
padding: 12px 14px;
margin: 0 0 4px;
}
.error-summary ul {
margin: 0;
padding-left: 20px;
}
.hint {
color: var(--ink-2);
font-size: 14px;
margin: 0;
}
/* A CONTROL THAT FOLLOWS A SENTENCE.
*
* "The 'Nochmal schicken' button is too close to the above label" (the
* operator, 2026-09-11). `.hint`, `.error` and `.notice` carry no bottom
* margin — they are usually the last thing in their block — and a form has
* none of its own, so a button placed directly after one sits on the words.
*
* One step of the scale (G7), on the form rather than on the paragraph,
* because it is the arrival of a control that needs the air and not the
* sentence that needs a tail. Three places had it: the resend on a guest's own
* entry, the open/close switch on an event, and the withdraw on the change
* page. The operator found one of them. */
.after-text {
margin-top: var(--space-4);
}
/* ---- the item table ------------------------------------------------- */
/* ONE GRID TEMPLATE FOR ALL FOUR ITEM KINDS — priced, free listed, free
* counted, and any of them with a note. The kinds differ in what they put in
* the cells, never in where the cells are, so every row lines up with every
* other row.
*
* It used to be two templates and they disagreed. A counted free item is not
* `.item-free` (that meant "free and uncounted"), so on wide screens it took
* the template with no `free` area while `.free` still asked for one — a named
* area that does not exist auto-places instead of erroring, which is why the
* badge and the stepper landed on separate lines with nothing aligned.
*
* --qty-col is shared by the header row and the item rows so the two cannot
* drift, and it is wide enough for the stepper: at 140px the buttons overflowed
* their cell and squeezed the price column. */
.table {
--qty-col: 152px;
border: 1px solid var(--hair);
border-radius: 8px;
overflow: hidden;
}
.thead {
display: none;
}
.item {
display: grid;
grid-template-columns: 28px 1fr auto;
grid-template-areas:
"icon name price"
"icon qty qty";
column-gap: 12px;
/* No row gap: the stepper supplies its own, so a row that has no stepper
collapses to one line instead of carrying an empty second one. */
row-gap: 0;
align-items: center;
padding: 10px 12px;
border-top: 1px solid var(--hair);
}
.items > .item:first-child {
border-top: 0;
}
.items > .item:nth-child(even) {
background: var(--band);
}
.icon {
grid-area: icon;
font-size: 20px;
text-align: center;
width: 28px;
}
.name {
grid-area: name;
font-size: 16px;
font-weight: 500;
}
.name small {
display: block;
font-size: 12px;
color: var(--ink-2);
font-weight: 400;
}
/* The price and the "Frei" badge are the same cell: one column, one edge to
read down. Right-aligned and never wrapped — a shortened price is a wrong
price. */
.price {
grid-area: price;
justify-self: end;
text-align: right;
white-space: nowrap;
font-family: var(--mono);
font-size: 14px;
}
.qty {
grid-area: qty;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 6px;
padding-top: 8px;
}
/* A free listed item has no stepper at all; without this its empty cell would
still push the row taller than its neighbours. */
.qty:empty {
padding-top: 0;
}
/* 44 px on a phone, because that is a thumb. The wide layout sizes them to
the row instead — see the min-width block. */
.qty button {
background: var(--input);
border: 1px solid var(--input-line);
border-radius: 6px;
color: var(--ink);
width: 44px;
height: 44px;
font: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.qty button:hover {
border-color: var(--accent);
color: var(--accent);
}
/* The quantity is a real number input, kept visible: the two buttons write to
* it, so there is one value on the page and one thing to read out. The native
* spinners come off because the buttons are the 44-px version of them. */
.qty input[type="number"] {
width: 3.6em;
min-height: 44px;
padding: 12px 4px;
text-align: center;
font-family: var(--mono);
font-size: 15px;
font-variant-numeric: tabular-nums;
appearance: textfield;
-moz-appearance: textfield;
}
.qty input[type="number"]::-webkit-outer-spin-button,
.qty input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.free {
grid-area: price;
justify-self: end;
white-space: nowrap;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 8px;
border-radius: 4px;
}
/* ---- the sticky total ----------------------------------------------- */
.sticky {
position: sticky;
bottom: 0;
background: var(--surface);
border-top: 2px solid var(--ink);
padding: 14px 0 8px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 14px;
color: var(--ink-2);
}
.total strong {
font-family: var(--mono);
font-size: 26px;
color: var(--ink);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Two columns where there is room for two. At 320 px „Speichern“ beside
* „Angebot hinzufügen“ does not fit — measured at two pixels over — and a
* button squeezed until its label is cut is the operator’s original
* complaint from G7. Below that width they stack. */
.actions {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: center;
}
/* TWO COLUMNS WHERE TWO FIT, AND 360 px IS NOT WHERE THAT IS.
*
* This pair went side by side from 360 px up, which gives each of them about
* 160 px — and „Angebot hinzufügen“ needs 180. So the Angebote editor's footer
* drew a two-line button beside a one-line one, which is the „uneven button
* wrapping“ the operator saw on page after page (PKG-G19 §5).
*
* THE ROW SHAPE IS 640's, AND THERE IS NO RULE HERE. This block first said 600,
* and 600 was a third shape nobody asked for: `.actions { display: flex }` in
* the `min-width: 640px` block below already turns the footer into a row, so a
* two-column GRID existed only between 600 and 639 — forty pixels wide, on no
* device, while the comment claimed one boundary. Stacked below 640, a row at
* 640, which is the width this sheet calls its own. */
.actions-single {
grid-template-columns: 1fr;
}
/* The primary action is first in the source so that Enter reaches it, and
* second on the screen because that is where the eye finishes. Two lines of
* CSS rather than a keyboard handler nobody would find again. */
.actions-save-first > :first-child {
order: 2;
}
.submit,
.button {
font: inherit;
font-weight: 600;
font-size: 16px;
background: var(--accent);
color: var(--on-accent);
border: 0;
border-radius: 6px;
padding: 13px 22px;
min-height: 46px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* WHAT EACH LOOK'S STATES ARE MADE OF, named once per LOOK rather than once
* per control.
*
* The four values below were written out in full three times over — `.theme`
* in the topbar, `.button-quiet` here, `.signin` two thousand lines down —
* each with a comment saying „the same four as“ the others, which is a
* stylesheet admitting a copy rather than removing one. The accent set was
* written twice, `.submit`/`.button` and `.cta`, differing in one line.
*
* Order is load-bearing and is why this block sits HERE: `.button-danger`,
* `.paypal` and `.icon-button` override the base set and follow it, and a
* quiet button is `button button-quiet`, so the quiet set has to come after
* the base one. All of it is one rule's distance apart now instead of two
* thousand lines, which is the only reason that is checkable at all. */
.submit,
.button,
.cta {
--btn-hover: color-mix(in srgb, var(--accent) 80%, var(--ink));
--btn-active: color-mix(in srgb, var(--accent) 60%, var(--ink));
--btn-line: var(--ink-2);
--btn-ink: var(--on-accent);
}
/* Borderless at rest and it grows none: the one thing the call to action does
not share with the buttons. */
.cta {
--btn-line: transparent;
}
/* A LITTLE, because these labels are the ink itself. */
.button-quiet,
.signin,
.theme {
--btn-hover: color-mix(in srgb, var(--input) 92%, var(--ink));
--btn-active: color-mix(in srgb, var(--input) 84%, var(--ink));
--btn-line: var(--ink-2);
--btn-ink: var(--ink);
}
.button-quiet {
background: var(--input);
color: var(--ink);
border: 1px solid var(--input-line);
}
.button-danger {
/* AWAY FROM ITS LABEL, NOT TOWARD IT, AND IT KEEPS ITS RED. This variant
is the odd one: its label is `--red`, not the ink, so mixing the ground
toward the ink walks it toward the text — measured by the review at
3.82:1 light and 3.59:1 dark, under the floor the guard beside this
declares and did not then measure. `--surface` is the page behind it,
which is the direction that opens the gap in both themes. And the border
stays red: this is the one control on the site that destroys access, and
it was dropping its only colour cue at the moment of commitment. */
--btn-hover: color-mix(in srgb, var(--red-soft) 72%, var(--surface));
--btn-active: color-mix(in srgb, var(--red-soft) 38%, var(--surface));
--btn-line: var(--red);
--btn-ink: var(--red);
background: var(--red-soft);
color: var(--red);
border: 1px solid var(--red);
}
/* A WORD WHERE A BUTTON IS NOT. The same shape as a state pill and not one of
* them: a state pill says what an account IS, this says why something it
* cannot do is not offered.
*
* It stood in the actions row at first, where the button would have been, and
* that made it read as a control — a row of things to press, one of which is a
* word. It sits beside the name now (PKG-G18 §1), INSIDE `.row-title`, and
* every declaration here is the cost of that move.
*
* The title is 600 and `overflow-wrap: anywhere`, and both are inherited, so
* folded in bare this was the one bold pill on the site and the only one an
* uppercase German compound could break inside. It is not a flex container
* either — so the `align-self: center` this rule carried while it stood among
* the buttons did nothing at all here, and the head row's `gap` never reaches
* a grandchild: the whole space before it was the one collapsed space Razor
* emits between the name and the tag. `inline-block` is what the other pills
* get from being flex items, and it is what makes the padding hold the line
* open rather than paint over the line above. */
.tag-reason {
display: inline-block;
margin-inline-start: var(--space-2);
font-weight: 400;
overflow-wrap: normal;
}
/* ---- what a button does when you touch it --------------------------- */
/* "Buttons currently have no hover feedback; they need one." (PKG-G17 §2.)
* A pointer over any of these changed nothing at all.
*
* ONE SET OF STATE RULES, and two custom properties are what make it one:
* every variant declares the ground it wears when hovered and when pressed,
* and the three rules below just use them. Nothing is written per page.
*
* THE COLOURS ARE MIXED TOWARD `--ink`, AND THE AMOUNTS WERE MEASURED RATHER
* THAN PICKED. All ten accent/theme pairs, three tries:
*
* toward `--ink` at 12 % — invisible on the light theme's green, which is
* already dark: 0.015 of mean channel distance, one part in seventy;
* toward `currentColor`, the label, because a label is guaranteed to
* contrast with its own ground — always visible, and it moves the ground
* TOWARD the label's contrast floor: the light theme's sea fell to 4.26:1
* hovered and the dark theme's berry to 4.27:1 pressed;
* toward `--ink` at 20 % and 40 % for the accent ground, 8 % and 16 % for
* the soft ones — visible everywhere and contrast goes UP on the accent
* ground, because the ink is further from the accent than the label is.
*
* TWO AMOUNTS, NOT ONE, and that is the third try's own correction. A quiet
* button's label IS `--ink`, so the same 40 % that is safe on an accent moved
* that ground onto its own label and measured 4.31:1. A ground is shifted
* toward the ink by a lot when the ink is not what is written on it, and by a
* little when it is.
*
* NOTHING MOVES. Only `background` and `border-color` change — no padding, no
* border WIDTH. The press already scales to 0.97 under
* `prefers-reduced-motion: no-preference`; that is older than this package, it
* is a paint transform, and it changes no layout.
*
* HOVER IS GATED ON A POINTER THAT HOVERS. A touch browser leaves `:hover`
* stuck on the last thing tapped, so the pressed state — `:active`, which
* touch does fire — is outside the query and the hover is inside it. */
@media (hover: hover) {
.submit:hover:not(:disabled),
.button:hover,
.button-danger:hover,
.paypal:hover,
.cta:hover,
.signin:hover,
.theme:hover,
.icon-button:hover:not(:disabled) {
background: var(--btn-hover);
border-color: var(--btn-line);
color: var(--btn-ink);
}
}
/* The keyboard gets the same change as the pointer, ON TOP OF the outline the
* stylesheet already gives every focusable control: on a filled button that
* outline is an accent ring against an accent ground, which is the one place
* it reads weakly. */
.submit:focus-visible:not(:disabled),
.button:focus-visible,
.button-danger:focus-visible,
.paypal:focus-visible,
.cta:focus-visible,
.signin:focus-visible,
.theme:focus-visible,
.icon-button:focus-visible {
background: var(--btn-hover);
border-color: var(--btn-line);
color: var(--btn-ink);
}
/* PRESSED, and outside the hover query so a finger gets it too. */
.submit:active:not(:disabled),
.button:active,
.button-danger:active,
.paypal:active,
.cta:active,
.signin:active,
.theme:active,
.icon-button:active:not(:disabled) {
background: var(--btn-active);
border-color: var(--btn-line);
color: var(--btn-ink);
}
.paypal {
font-weight: 500;
color: var(--accent);
/* The same shape as the danger button: an accent label on an accent-soft
ground, so the ground moves toward the page and away from the words. */
--btn-hover: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
--btn-active: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
--btn-line: var(--accent);
--btn-ink: var(--accent);
background: var(--accent-soft);
padding: 12px 14px;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.paypal[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
}
/* ---- lists and tables in the organiser area ------------------------- */
.rows {
display: grid;
gap: var(--space-3);
}
.row {
border: 1px solid var(--hair);
border-radius: 8px;
padding: var(--space-4);
display: grid;
gap: var(--space-2);
align-content: start;
}
/* THE TWO LIST PAGES ARE A GRID OF CARDS, and the four others are not.
*
* The operator asked for cards on the dashboard; the same shape suits the
* templates beside it. It is a modifier on the container and not a second set
* of classes because `.row` is the shape of six pages, and four of them have
* to stay one per line: the item editors are ordered lists with up and down
* buttons in them, and a two-column grid of those would be nonsense.
*
* The card is filled rather than outlined here, which is the whole visual
* difference between "a row with a border" and "a card". The grid itself
* starts at the first breakpoint — at 360 there is room for exactly one. */
.rows-cards .row {
background: var(--band);
border-color: transparent;
}
/* A CARD'S HEAD WRAPS, AND ITS TITLE MAY BREAK A WORD.
*
* A flex item is `min-width: auto` by default, which means it cannot be made
* narrower than its own longest word — so a card holding
* „Jahreshauptversammlung“ beside a „Geschlossen“ chip had a floor of 313 px
* and grew the whole document to 361 in a 320-px viewport. Measured; the
* dashboard was the page that did it.
*
* Two changes, because either alone leaves a case: the chip drops under the
* title when there is no room for both, and a single word longer than the
* card breaks rather than pushing it open. German compounds are why the
* second one is not theoretical. */
.row-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-2) var(--space-3);
}
.row-title {
min-width: 0;
overflow-wrap: anywhere;
}
/* A ROW THAT LEADS WITH A FACE.
*
* "Also render user avatars in the Benutzer tab" (the operator, 2026-09-11).
* The disc goes first and the name takes the room that is left, so the roles
* chip keeps its end of the row at every width.
*
* Centred rather than on the baseline: a 36-px circle hung off the baseline of
* a 15-px name sits most of its own height too low. */
.row-head-avatar {
align-items: center;
}
.row-head-avatar .row-title {
margin-right: auto;
}
/* The numbers and the state chip on one line at the head's right-hand end,
* which is where the head already puts whatever comes last. `baseline` rather
* than `center` so the chip sits on the same line as the words beside it
* rather than floating in the middle of them. */
.row-corner {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: flex-end;
}
.row-title {
font-weight: 600;
font-size: 16px;
}
.rows-cards .row-title {
font-size: 17px;
}
.row-meta {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
}
/* THE FOOT OF A CARD: who made it, and what can be done to it.
*
* „the 'Deaktivieren' button hangs awkwardly in the air rather than being
* anchored to the bottom right corner of the card.“ (the operator,
* 2026-09-14.) It was a row of its own ABOVE the provenance line, aligned
* right against nothing — so it floated in the middle of the card with a
* sentence underneath it.
*
* Phone-first: they stack, the sentence first, because an action is full width
* there. At the desk they share the line, the sentence at the left end and the
* action hard against the right, which is the corner the operator asked for. */
.row-foot {
display: grid;
gap: var(--space-2);
margin-block-start: var(--space-2);
}
.row-foot .provenance {
margin: 0;
}
.row-foot .row-actions {
padding-top: 0;
}
@media (min-width: 640px) {
.row-foot {
grid-template-columns: 1fr auto;
align-items: center;
}
/* THE CONTROL IS IN THE SECOND TRACK EVEN WHEN THE FIRST IS EMPTY.
*
* „The Deaktivieren button on the origin group (which has no creator/creation
* date) sits slightly further inward than on the others.“ (the operator on
* the live G21-a.)
*
* Eight pixels, and the eight are this grid's column gap. The club the Groups
* migration seeded records no author, so `_Provenance` draws nothing and the
* foot has ONE child: it auto-placed into the `1fr` track, the `auto` track
* collapsed to zero — and the gap between two tracks is there whether or not
* either holds anything. So the control right-aligned inside a track that
* stops one gap short of the card.
*
* Pinning it to the second track is what makes „the right edge“ mean the
* card's right edge in both cases: with a sentence beside it nothing moves,
* and without one the empty `1fr` takes the whole line and the gap falls
* where nobody can see it. */
.row-foot > .row-actions {
grid-column: 2;
}
}
/* A COUNT IS ONE VALUE AND BREAKS NOWHERE. „4 Mitglieder, 1 Listen“ beside a
state pill is a group, and the group may wrap — half of „1 Listen“ may not.
The corner it sits in still wraps as a whole, which is what puts it under
the name on a phone. */
.row-counts {
white-space: nowrap;
}
/* Eight pixels is the floor for two things a thumb has to hit separately,
* and these wrap rather than shrink. */
.row-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-1);
}
/* AND ON A PHONE THEY STACK, FULL WIDTH, AGAINST ONE EDGE.
*
* „The buttons aren't aligned properly for mobile view.“ (the operator,
* PKG-G19 §1.) Wrapping content-width buttons put three on a line and the
* fourth under them at an offset nobody chose — the event page's „QR-Code
* Bearbeiten Angebote“ with „Drucken“ orphaned below — and `.row-actions-end`
* sent a lone button to the far side of its card, which is the „sort of
* floating around“ the operator described.
*
* THE SHAPE `.actions` HAS HAD SINCE G8. The form footer was already a grid;
* this is the same answer for the row that sits inside a card, so the area has
* one way of laying buttons out instead of two.
*
* ONE COLUMN AND NOT TWO, although two would be shorter on a five-button card.
* „Exactly two“ cannot be asked in CSS here: a `` renders its trigger
* AND its popover as siblings, so a row holding one confirmation has two
* children and would take the two-column branch. A rule that is wrong on the
* clubs page is worse than a card that is taller.
*
* A form and a `` are grid items, so their own control has to take the
* cell rather than its text; the popover is excluded because it is in the top
* layer when it is anywhere at all. `.row-actions-icons` keeps its own shape —
* a grip and two arrows stacked would be a column of squares. */
.row-actions:not(.row-actions-icons) {
display: grid;
grid-template-columns: 1fr;
}
/* THE CONTROL INSIDE A FORM, and only that.
*
* A grid item already fills its track — which is why `.actions` stacks with no
* width declaration at all — so the five other selectors this started with were
* redundant or dead: `details` and `summary` match no element on the site, no
* `.submit` sits in a row, and every `.row-form` is inside a ``. The
* one control that does NOT fill its track is a button nested in a plain form,
* which is the Deaktivieren switch on the users page.
*
* `> form >` and not a descendant selector: `` renders its popover as a
* SIBLING inside this row, so a descendant selector reached into the open
* confirmation and stretched its buttons across the panel — defeating
* `.prompt > form .button { justify-self: start }` two hundred lines down,
* while the comment here claimed the popover was excluded. Only the first
* selector ever excluded it. */
.row-actions:not(.row-actions-icons) > form > .button,
.row-actions:not(.row-actions-icons) > form > .submit {
width: 100%;
}
@media (min-width: 640px) {
.row-actions:not(.row-actions-icons) {
display: flex;
}
.row-actions:not(.row-actions-icons) > form > .button,
.row-actions:not(.row-actions-icons) > form > .submit {
width: auto;
}
}
/* THE ONE BUTTON ON A ROW GOES WHERE THE EYE ALREADY IS.
*
* „The Deaktivieren button should be in the right corner instead of the left.“
* (the operator, 2026-09-13.) On the clubs page the row is a name on the left,
* the counts and the state pill on the right, and then one control — which sat
* under the NAME, diagonally opposite the state it acts on.
*
* A modifier and not a change to the rule: a row with several controls reads
* left to right and keeps doing so, which is the users page. This is for the
* row that has one. */
.row-actions-end {
justify-content: flex-end;
}
.row-actions .button,
.row-actions .submit {
font-size: 14px;
padding: 9px 14px;
min-height: 44px;
}
/* A destructive action opens instead of firing: is the confirmation,
* and it costs no script. The marker goes because the summary is styled as a
* button and a triangle inside one reads as damage. */
.row-actions details {
display: inline-block;
}
.row-actions summary {
list-style: none;
cursor: pointer;
}
.row-actions summary::-webkit-details-marker {
display: none;
}
/* A QUESTION ASKED IN A POPUP.
*
* "Buttons are aligned horribly. Also, the confirmation should be a popup
* prompt, not a control expansion." … "Same goes for the rename." (the
* operator, 2026-09-12.)
*
* THE HISTORY IS WORTH THE LINES, because this is the third arrangement.
* First the confirmation was a `` that opened where it stood, which
* repacked the wrapping row of buttons around it — press one, and the one you
* were reaching for next has moved (G-80). Then `order: 1` on the open
* disclosure, which measuring rejected: taking an item out of the middle of a
* wrapping row repacks it wherever the open one ends up. Then a stacked column
* of its own, which stopped the repacking and produced the column the operator
* called horrible.
*
* A POPOVER IS IN THE TOP LAYER, so it is not in the row's flow at all. The
* buttons share one line again and nothing moves when one is pressed — which
* is what all three attempts were trying to buy.
*
* `::backdrop` dims what is behind it, so the question reads as a question
* rather than as a card that happens to be on top. */
/* THE PANEL, AND THE ONE DECLARATION THAT KEPT IT ON THE SCREEN.
*
* "Going over to 'Gruppen' shows a stuck pop up from the get go." … "Same
* issue on the 'Benutzer' site." (the operator, 2026-09-12.)
*
* TWICE MIS-DIAGNOSED, AND THE CAUSE IS THE LINE BELOW THIS COMMENT.
*
* A closed popover is hidden by the UA stylesheet's
* `[popover]:not(:popover-open) { display: none }`. That rule is in the USER
* AGENT origin, and ANY author declaration outranks it — which is the same
* trap as `[hidden]`, written down in this repository in G-32 and walked into
* again here. `display: grid` on `.prompt` therefore un-hid every panel on the
* page, and `position: fixed` put each one over the page with no way to
* dismiss it, because nothing was open and so nothing could be closed.
*
* G-86 said the markup was right, and it was. G-91 then measured the served
* page, found `popover=""` and `popovertarget` correct, and concluded that the
* operator's browser must not implement the API — an inference, not a
* measurement, and wrong. Measured properly, in the Chrome this suite drives:
* `CSS.supports('selector(:popover-open)')` is **true**, the panel reports
* `:popover-open` **false**, and it still computes to
* `display: grid; position: fixed` with an `offsetHeight` of 203. The gate
* G-91 added was a no-op and the defect shipped unchanged.
*
* So the fix is inside the gate: say `display: none` for a closed panel in
* AUTHOR origin, where it beats the rule above rather than losing to it. The
* declarations here are the panel's look, which both states want, and the
* ungated `display: grid` is what a browser without the API needs to lay the
* panel out in the flow. */
.prompt {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--hair);
border-radius: 10px;
background: var(--band);
color: var(--ink);
}
/* AND THE MODAL, ONLY WHERE THERE IS A TOP LAYER TO PUT IT IN.
*
* `selector(:popover-open)` is true exactly when the browser implements the
* API, so the two states cannot disagree. With support: closed is hidden by
* the first rule below — in author origin, which is the whole point — and open
* is the modal. Without support: neither rule applies, `:popover-open` is not
* a selector the browser knows, and the panel above stands in the flow, which
* is what the `` it replaced looked like when open. */
@supports selector(:popover-open) {
/* THE ONE THAT WAS MISSING. `.prompt:not(:popover-open)` is 0,2,0 against
the 0,1,0 of `.prompt`, so it wins on specificity as well as on origin —
and it is inside the gate because a browser without the API would drop it
as an unknown selector, which is exactly the behaviour wanted there. */
.prompt:not(:popover-open) {
display: none;
}
.prompt {
position: fixed;
inset: 0;
margin: auto;
width: min(28rem, calc(100vw - 2 * var(--space-4)));
max-height: calc(100vh - 2 * var(--space-4));
overflow: auto;
padding: var(--space-5);
border-radius: 12px;
background: var(--surface);
box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
}
.prompt::backdrop {
background: rgb(0 0 0 / 45%);
}
}
/* The form inside gets the same stacking as any other small form, so a prompt
* with a field in it looks like the rest of the site rather than like a
* dialog somebody bolted on. */
/* A CONFIRMATION'S ANSWERS SIT AT THE BOTTOM RIGHT.
*
* „Both buttons should be anchored towards the right bottom corner (with a
* slight gap of course), not float around.“ (the operator on the live G20,
* PKG-G21 §6.) And on the avatar dialog beside it: „If they have an image,
* there is a button between the two that lets me delete it, and then the
* alignment makes sense, but it does not format properly whenever they do have
* an image already. Also, the drag area is smaller than the window and is
* uneven.“ (§8.)
*
* ONE RULE, AND IT HAS TO WORK ACROSS TWO ELEMENTS. The answers are never
* siblings by nature: the confirm is inside the `