/* 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-paper: #9a3412;
--mark-dot: #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 ÜBERSICHT'S STATES (G33 §1): nothing needs attention, something
* waits, something failed. Chosen with the dataviz validator against this
* surface: each clears 3:1 as a graphical object, and the three stand
* ΔE 17.8 apart for a full-colour reader. Red against green comes to ΔE
* 7.6 for a red-green colour-blind one, which is why a state is never
* colour alone: the dot's shape and the sub-line say it too. */
--state-ok: #3aaf6a;
--state-warn: #eeb02c;
--state-crit: #ff7a86;
/* 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-paper: #9a3412;
--mark-dot: #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;
/* Against white: 3:1 each, ΔE 16.9 apart; see the dark block. */
--state-ok: #15803d;
--state-warn: #a16207;
--state-crit: #9f1239;
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-paper: #9a3412;
--mark-dot: #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;
--state-ok: #15803d;
--state-warn: #a16207;
--state-crit: #9f1239;
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-paper: #166534;
--mark-dot: #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-paper: #9a3412;
--mark-dot: #f0913c;
--accent-soft: #3d2410;
--on-accent: #1a0f04;
}
[data-accent="senf"] {
--accent: #d8b23a;
--accent-paper: #854d0e;
--mark-dot: #d8b23a;
--accent-soft: #382d0f;
--on-accent: #17130a;
}
[data-accent="see"] {
--accent: #45b6d8;
--accent-paper: #0e7490;
--mark-dot: #45b6d8;
--accent-soft: #0e3441;
--on-accent: #05161c;
}
[data-accent="beere"] {
--accent: #e4739b;
--accent-paper: #9d174d;
--mark-dot: #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-paper: #166534;
--mark-dot: #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-paper: #9a3412;
--mark-dot: #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-paper: #854d0e;
--mark-dot: #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-paper: #0e7490;
--mark-dot: #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-paper: #9d174d;
--mark-dot: #9d174d;
--accent-soft: #fce7f3;
--on-accent: #ffffff;
}
}
:root[data-theme="light"][data-accent="gruen"],
:root[data-theme="light"] [data-accent="gruen"] {
--accent: #166534;
--accent-paper: #166534;
--mark-dot: #166534;
--accent-soft: #dcfce7;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="glut"],
:root[data-theme="light"] [data-accent="glut"] {
--accent: #9a3412;
--accent-paper: #9a3412;
--mark-dot: #9a3412;
--accent-soft: #ffedd5;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="senf"],
:root[data-theme="light"] [data-accent="senf"] {
--accent: #854d0e;
--accent-paper: #854d0e;
--mark-dot: #854d0e;
--accent-soft: #fef3c7;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="see"],
:root[data-theme="light"] [data-accent="see"] {
--accent: #0e7490;
--accent-paper: #0e7490;
--mark-dot: #0e7490;
--accent-soft: #cffafe;
--on-accent: #ffffff;
}
:root[data-theme="light"][data-accent="beere"],
:root[data-theme="light"] [data-accent="beere"] {
--accent: #9d174d;
--accent-paper: #9d174d;
--mark-dot: #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;
}
/* A FILTER ROW: STACKED, THEN TWO COLUMNS, THEN ONE LINE (G31 §7).
*
* „The filter rows at 390 stack with no overflow and 44 px targets; at 1280
* one line.“ The controls are the site's own — 46 px inputs and selects, a
* 46 px button — so the targets are met by what is already here, and the
* row only decides where they stand.
*
* ONE LINE FROM 1100 PX, where the admin column is 1052 px wide. The text
* takes a larger share, the days and times their control's own width, the
* button its own, and the selects what is left — `min-width: 0` is what lets
* a select with a long event title in it shrink instead of pushing the row
* wider than the page. Between 640 and 1100 the row is the two columns every
* other form here has at that width. */
.filter-row {
display: grid;
gap: var(--space-3);
}
/* THE LIST IS NARROWED: one line saying so and what it does not narrow,
* and the way back — inside the sign-up panel, which is what the filter
* replaces (see `_EntriesFiltered`). */
.filter-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
}
.filter-actions,
.filter-reset {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* On a phone the buttons are full width, like every action row here. */
.filter-actions > *,
.filter-reset > *,
.filter-note > .button {
flex: 1 1 100%;
}
@media (min-width: 640px) {
.filter-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filter-row > .filter-text,
.filter-row > .filter-actions,
.filter-row > .filter-reset {
grid-column: 1 / -1;
}
.filter-actions > *,
.filter-reset > *,
.filter-note > .button {
flex: none;
}
}
/* The fields stretch to the line's height and put their control at the
* bottom, so the labels stand level along the top — a date input is two
* pixels taller than a text box, and aligning the fields by their ends pushed
* its label up. The reset link wraps onto a line of its own under the row. */
@media (min-width: 1100px) {
.filter-row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.filter-row > .field {
flex: 1 1 0;
min-width: 0;
grid-template-rows: auto 1fr;
align-items: end;
}
.filter-row > .filter-text {
flex-grow: 1.6;
}
/* A DATE OR A TIME FIELD IS AS WIDE AS THE ENGINE DRAWS ITS CONTROL, and
* no guess of it holds: Chrome on Windows drew a date input 162 px wide and
* a date-and-time one about 220; Chrome on the CI's Linux drew the second
* 242 px, 18 px wider than the 14 rem it had been given, and it ran into the
* select beside it (caught by `NoControlIsClippedAtAnyWidth`). The field
* takes its content's width, and the text field and the selects share
* what is left. */
.filter-row > .filter-day,
.filter-row > .filter-time {
flex: 0 0 auto;
}
/* AND A NARROW FIELD REALLY IS NARROW. A field is a one-column grid, and
* an `auto` column is never narrower than its widest unbreakable word —
* „Veranstaltung“ — so with wider date controls the column stayed wider
* than the field and the select in it stood 1.8 px out. The column may
* shrink now, the select shortens its own text as selects do, and a label
* that no longer fits ends in „…“ rather than running into its neighbour. */
.filter-row > .field {
grid-template-columns: minmax(0, 1fr);
}
.filter-row > .field > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-row > .filter-actions {
flex: none;
flex-wrap: nowrap;
}
.filter-row > .filter-reset {
flex-basis: 100%;
}
}
/* THE ÜBERSICHT, „ZUSTAND IN DER LEISTE" (G33 §1).
*
* Headers and content are told apart by weight, size and the band, not by
* colour alone: a card's header band is the band colour with a hairline
* under it and its title at 14 px semibold; the body is 13 px; a label is
* 11 px mono in small capitals with letter-spacing; a figure is 28 px
* semibold with tabular digits. */
.dash-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-2) var(--space-4);
}
.dash-head h1 {
margin: 0;
}
.dash-lbl,
.dash-asof,
.dash-grp {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
white-space: nowrap;
}
/* THE FIGURES, AS ONE PIECE (the period switch answers it in place): its
* parts spaced as the page column spaces its children. */
.dash-figures {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* THE STRIP. One bordered row of six equal cells, hairlines and no gaps:
* the one-pixel gap over a hairline background IS the hairline, between
* cells and between rows alike. Six across from 1100 px, where every label
* and sub-line fits its cell; three across below that; two on a phone —
* never a wrapped label. */
.dash-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--hair);
border: 1px solid var(--hair);
border-radius: 10px;
overflow: hidden;
}
@media (min-width: 640px) {
.dash-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.dash-strip {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.dash-cell {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding: 14px 16px 16px;
background: var(--surface);
}
.dash-cell .dash-lbl,
.dash-sub {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-cell .dash-lbl {
padding-right: 14px;
}
.dash-fig {
font-size: 28px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.dash-sub {
font-size: 12px;
color: var(--ink-2);
}
/* A STATE, THREE WAYS: the 3 px edge and the dot in its colour, and the
* dot's shape — a circle when nothing needs attention, a triangle when
* something waits, a square when something failed — because the colours
* alone do not survive a red-green colour-blind reader (see the tokens). */
.dash-cell.is-ok { --state: var(--state-ok); }
.dash-cell.is-warn { --state: var(--state-warn); }
.dash-cell.is-crit { --state: var(--state-crit); }
.dash-cell:is(.is-ok, .is-warn, .is-crit) {
box-shadow: inset 0 3px 0 var(--state);
}
.dash-dot {
position: absolute;
top: 14px;
right: 14px;
width: 10px;
height: 10px;
background: var(--state);
}
.is-ok .dash-dot {
border-radius: 50%;
}
.is-warn .dash-dot {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* A CARD: a header band, a body, a foot. */
.card {
min-width: 0;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 10px;
}
.card-hd {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
padding: 12px 16px;
background: var(--band);
border-bottom: 1px solid var(--hair);
border-radius: 10px 10px 0 0;
}
.card-hd h2 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.card-bd {
padding: 14px 16px 16px;
font-size: 13px;
}
.card-foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-top: var(--space-3);
}
.card-foot .hint {
font-size: 12px;
}
/* THE PERIOD SWITCH: a segmented control, each segment a real button of
* 44 px, the chosen one filled with the accent's soft wash. */
.seg {
display: inline-flex;
border: 1px solid var(--hair);
border-radius: 8px;
overflow: hidden;
}
.seg button {
min-height: 44px;
padding: 0 14px;
border: 0;
border-left: 1px solid var(--hair);
background: var(--surface);
color: var(--ink-2);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.seg button:first-of-type {
border-left: 0;
}
.seg button[aria-pressed="true"] {
background: var(--accent-soft);
color: var(--ink);
font-weight: 600;
}
/* THE CHART. See `ChartView` for the marks: the accent is the only colour on
* it, a day with nothing on it is a hairline stub, and the current bar wears
* an outline in the text colour. Its height is the SVG's own attribute,
* `ChartView.Height`: written here as well, the two could drift apart and
* stretch every bar's rounded top. */
.chart-bars {
display: block;
width: 100%;
overflow: visible;
}
.chart-hit {
fill: transparent;
}
.chart-bar {
fill: var(--accent);
}
.chart-bar.is-zero {
fill: var(--hair);
}
.chart-bar.is-current {
stroke: var(--ink);
stroke-width: 2px;
paint-order: stroke;
}
.chart-col:hover .chart-bar {
opacity: 0.75;
}
.chart-col:hover .chart-hit {
fill: color-mix(in srgb, var(--ink) 8%, transparent);
}
.chart-base {
stroke: var(--hair);
stroke-width: 1;
}
.chart-axis {
display: flex;
justify-content: space-between;
gap: var(--space-2);
margin-top: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-2);
}
.chart-axis > span {
white-space: nowrap;
}
/* THE TWO CARDS, equal width side by side, stacked on a phone. */
.dash-cards {
display: grid;
gap: var(--space-4);
}
@media (min-width: 768px) {
.dash-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dash-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
/* The columns are named for a screen reader and by the band's label for
* the eye, so the header row takes no room. */
.dash-table thead th {
padding: 0;
height: 0;
}
.dash-table tbody th {
text-align: left;
font-weight: 400;
}
.dash-table tbody th,
.dash-table td {
padding: 7px 0;
border-top: 1px solid var(--hair);
}
.dash-table tbody tr:first-child th,
.dash-table tbody tr:first-child td {
border-top: 0;
}
.dash-table td {
padding-left: 14px;
text-align: right;
font-family: var(--mono);
}
/* THE INVENTORY: grouped label/value rows, the values mono and right-aligned,
* each group under a label with a hairline above it after the first. */
.dash-grp {
margin: var(--space-2) 0 var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--hair);
font-weight: 400;
}
.dash-grp:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.kv {
display: grid;
gap: var(--space-2);
margin: 0;
}
.kv > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-4);
align-items: baseline;
}
.kv dt {
color: var(--ink-2);
}
.kv dd {
margin: 0;
font-family: var(--mono);
font-size: 15px;
font-weight: 500;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* THE CARDS' QUIET LINK: „Als Tabelle ›", 44 px tall for a finger. */
.link-quiet {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--accent);
font-size: 13px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.link-quiet:hover {
text-decoration: underline;
}
/* „ALS TABELLE" (G33 §3): over the page, fixed, so nothing under it moves —
* G29's success dialog's overlay and card, which are one rule for both (see
* `dialog.success`); only the card is wider. Drawn open by the server it is
* not in the top layer, so the dim is the dialog's own background; opened by
* `dialog.js` it is, and the same background dims the same way. A dialog
* NOT open is hidden here as well as by the browser: the overlay's `display`
* outranks the browser's own `dialog:not([open])`.
*
* AND THE PAGE BEHIND IT IS NOT LOCKED, unlike behind the success dialog:
* taking the page's scrollbar away where a desktop draws one re-lays every
* card a scrollbar wider, which is the „the cards to either side also
* enlarge" this dialog exists to end. */
dialog.table-dialog:not([open]) {
display: none;
}
dialog.table-dialog::backdrop {
background: transparent;
}
.table-dialog-head {
margin: 0 0 var(--space-3);
font-size: 16px;
}
/* THE TABLE SCROLLS, NOT THE PAGE: seven columns are wider than a phone. */
.table-dialog-scroll {
max-height: min(60vh, 34rem);
overflow: auto;
}
.table-dialog-scroll .grid-table {
font-size: 13px;
}
.table-dialog-scroll .grid-table th,
.table-dialog-scroll .grid-table td {
white-space: nowrap;
}
/* The headings may take two lines, so seven columns fit the card on a desk;
* a number never wraps. */
.table-dialog-scroll .grid-table thead th {
white-space: normal;
vertical-align: bottom;
}
.table-dialog-foot {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-3);
}
/* 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 CLUB AND WHAT THIS PERSON IS IN IT, ONE ROW EACH.
*
* „So if I want someone to be organiser in one group and admin in another I
* can't set it up from the start." (the operator, 2026-09-22.)
*
* A PHONE STACKS AND A DESK ALIGNS. At 390 the select sits under the club it
* is about, which is the only arrangement that leaves the name room to be a
* name. At 640 and up the rows become a two-column grid — and it is the
* OUTER element that is the grid, with each row `display: contents`, so that
* every select lands in one column whatever the names beside them are. A grid
* per row would align each select against its own name and leave a ragged
* column, which is the thing the operator's „in one column" rules out.
*/
.group-roles {
display: grid;
gap: var(--space-2);
}
/* AKTUELL AND VERGANGEN, UNDER A CLUB'S HEADING.
*
* „in the events tab, have a sort of tab switch between live events and past
* events below the headline (group specific)." (the operator, 2026-09-22.)
*
* TWO BUTTONS' WORTH OF SHAPE AND NO NEW ONE. The site already draws a
* two-state control as a pair of buttons where the quiet one is the state you
* are not in — the users page's „Gelöschte anzeigen" — so these are `.button`
* and `.button-quiet` links with a row of their own. They wrap rather than
* shrink, because a target under 44 px is a target a thumb misses.
*/
.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
/* WHAT A CLUB HAS DONE, IN A CARD SMALLER THAN AN EVENT'S.
*
* „a total number of events and sign ups across all events as stats in a new
* smaller card below the group header inside of the Events tab … + in the
* groups tab." (the operator, 2026-09-22.)
*
* THE NUMBERS WRAP AS A GROUP AND NEVER INSIDE ONE. „340" on one line and
* „Anmeldungen" on the next is a figure that has come apart from what it
* counts — so each figure is its own inline-block with `nowrap` on it, and
* the line breaks between them. The same rule `.row-counts` has on the club
* cards, for the same reason.
*/
.figures {
border: 1px solid var(--hair);
border-radius: 8px;
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
background: var(--band);
}
.figures-line {
margin: 0;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
display: flex;
flex-wrap: wrap;
gap: 2px var(--space-3);
}
/* ONE PILL PER FIGURE.
*
* „Currently kinda just looks thrown together. And doesn't wrap well on
* mobile. Make the stats into individual pills inside the card with sensible
* Icons." (the operator, 2026-09-22.)
*
* The middle-dots this replaces were drawn with `::before` so that a
* separator could never be left at the end of a wrapped line — which solved
* half of it: the DOT stayed with its figure and the figure itself still
* wrapped anywhere, so „Größte: Sommerfest 2026, 58 Anmeldungen" broke across
* two lines with nothing to say where one figure ended and the next began. A
* box is its own separator. */
.figure-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.figure-pill {
display: inline-flex;
align-items: center;
gap: 6px;
/* 0 rather than auto, so a pill that has to wrap inside itself may — a flex
* item's floor is its content otherwise, and one long title would push the
* row wider than the phone. */
min-width: 0;
padding: 4px 10px;
border: 1px solid var(--hair);
border-radius: 999px;
background: var(--surface);
font-family: var(--mono);
font-size: 12px;
line-height: 1.45;
color: var(--ink-2);
}
/* THE ICON IS THE ACCENT AND THE WORDS ARE NOT. It is what says which figure
* this is at a glance; the number is what you read second. */
.figure-pill .line-icon {
width: 14px;
height: 14px;
color: var(--accent);
}
/* THE ONE FIGURE WITH A TITLE IN IT. Every other pill is a number and a word
* and fits on any screen; this one carries whatever the club called its
* evening — and a club that writes one long word („Sommerfestamdeich…") has
* a title with no break in it at all, which is the case this rule is for. */
.figure-pill-wide span {
overflow-wrap: anywhere;
}
/* WHAT IS MISSING IS SAID QUIETLY. It is a caveat about the number above it,
* not a figure of its own. */
.figure-pill-quiet {
border-style: dashed;
background: none;
}
/* THE MOMENT SOMETHING WORKED, OVER THE PAGE IT HAPPENED ON.
*
* „Perhaps an overlay, with the background less visible, stating the success
* with an edit button … So the user has to clearly push past the success
* overlay to reach any other control." (the operator, 2026-09-22.)
*
* A `