/* Component styles: header, buttons, footer, cards, hero.
 *
 * Rule for everything here: reference the custom properties from tokens.css.
 * A literal colour in this file is a defect.
 */

/* ---------- Buttons ---------- */
.cuc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cuc-space-2);
    padding: var(--cuc-space-3) var(--cuc-space-6);
    border: 1px solid transparent;
    border-radius: var(--cuc-radius-pill);
    font-weight: 600;
    font-size: var(--cuc-text-sm);
    text-align: center;
    transition: background var(--cuc-transition), border-color var(--cuc-transition),
                color var(--cuc-transition);
}

.cuc-btn--primary {
    background: var(--cuc-primary);
    color: var(--cuc-primary-ink);
}
.cuc-btn--primary:hover { background: var(--cuc-primary-hover); color: var(--cuc-primary-ink); }

.cuc-btn--ghost {
    background: transparent;
    border-color: var(--cuc-line-strong);
    color: var(--cuc-text);
}
.cuc-btn--ghost:hover { border-color: var(--cuc-primary); color: var(--cuc-primary); }

.cuc-btn--light {
    background: var(--cuc-text);
    color: var(--cuc-primary-ink);
}
.cuc-btn--light:hover { background: var(--cuc-muted); color: var(--cuc-primary-ink); }

.cuc-btn--block { display: flex; width: 100%; justify-content: center; }

/*
 * A form that wraps a single button and must not look like one.
 *
 * Joining and leaving are POST forms rather than links, because a GET that
 * writes is one a prefetcher can trigger. A <form> is block-level, so without
 * this the button would break out of the .cuc-cluster row it sits in and the
 * change would be visible where it should not be. inline-flex rather than
 * display: contents - the same result here, with no question about what the
 * form element still is to assistive technology.
 */
.cuc-inline-form { display: inline-flex; }

/* ---------- Header ---------- */
.cuc-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--cuc-header);
    border-bottom: 1px solid var(--cuc-line);
}

.cuc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cuc-space-6);
    min-height: 64px;
}

.cuc-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cuc-space-3);
    color: var(--cuc-text);
    font-weight: 700;
    font-size: var(--cuc-text-lg);
}
.cuc-brand__mark { color: var(--cuc-primary); }

/* ONE SPACING for every link in the bar.
 *
 * The page links sat 1.5rem apart, the member links 1rem, and the two groups
 * 2rem - three different distances in one row, which reads as an accident
 * rather than as grouping. They are all links to pages; the only thing that
 * genuinely differs is the BUTTON at the end, and that has its own shape to say
 * so. */
.cuc-nav { display: flex; align-items: center; gap: var(--cuc-space-6); }
.cuc-nav__list { display: flex; align-items: center; gap: var(--cuc-space-6); }

.cuc-nav__link {
    position: relative;
    padding-block: var(--cuc-space-2);
    color: var(--cuc-muted);
    font-size: var(--cuc-text-sm);
    font-weight: 500;
}
.cuc-nav__link:hover { color: var(--cuc-text); }

.cuc-nav__link.is-active { color: var(--cuc-primary); }
.cuc-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--cuc-primary);
    border-radius: var(--cuc-radius-pill);
}

.cuc-nav__actions { display: flex; align-items: center; gap: var(--cuc-space-6); }
/* Air before the button, so "Abmelden" reads as the end of the row rather than
   as one more destination. */
.cuc-nav__actions .cuc-btn { margin-left: var(--cuc-space-2); }

.cuc-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-sm);
    color: var(--cuc-text);
}

@media (max-width: 1023px) {
    .cuc-nav__toggle { display: inline-flex; }

    /* transform, not display: the panel animates, and its links keep a
       predictable place in the accessibility tree while is-open toggles. */
    .cuc-nav {
        position: fixed;
        inset: 64px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--cuc-space-4);
        padding: var(--cuc-space-6) var(--cuc-gutter) var(--cuc-space-8);
        background: var(--cuc-header);
        border-bottom: 1px solid var(--cuc-line);
        transform: translateY(-120%);
        transition: transform var(--cuc-transition);
    }
    .cuc-nav.is-open { transform: translateY(0); }

    /* ONE LIST, not two.
     *
     * The page links and the member links are separate elements for good reason
     * on a wide screen - one is a menu, the other a set of actions in the corner
     * - but stacked in a phone's panel they are simply the menu. Until
     * 2026-08-07 they kept their own spacing: the top group had rules between
     * its rows and the bottom group had 1rem of air and none, so one column
     * carried two different rhythms and read as a rendering fault.
     *
     * The gap on .cuc-nav goes to zero and the member links take the same rule
     * and the same padding as the page links. */
    .cuc-nav { gap: 0; }
    .cuc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .cuc-nav__actions { flex-direction: column; align-items: stretch; gap: 0; }

    /* The rule sits on the LINK in both groups, not on the <li> in one and the
       link in the other. Same element, same box: every row comes out 59px with
       nothing between them. With the border on the <li> the page links measured
       58px with a 1px gap and the member links 59px with none - identical to
       look at, and the sort of difference that grows the next time somebody
       adds padding to one of the two. */
    .cuc-nav__link {
        display: block;
        padding: var(--cuc-space-4) 0;
        font-size: var(--cuc-text-base);
        border-bottom: 1px solid var(--cuc-line);
    }
    .cuc-nav__link.is-active::after { display: none; }

    /* The BUTTONS keep their own shape. "Abmelden" and "Registrieren" are
       actions rather than destinations, and flattening them into list rows
       would throw away the one distinction in this panel worth keeping. They
       get air above them instead, which is what separates the two kinds. */
    .cuc-nav__actions .cuc-btn { justify-content: center; margin-top: var(--cuc-space-6); }
    .cuc-nav__actions .cuc-btn + .cuc-btn { margin-top: var(--cuc-space-3); }
}

.cuc-icon { flex: none; }

/* ---------- Hero ---------- */
.cuc-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(420px, 46vw, 560px);
    overflow: hidden;
    isolation: isolate;
}

.cuc-hero__media { position: absolute; inset: 0; z-index: -2; }
.cuc-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The darkening is CSS, not baked into the image, so one photograph works at
   every width and the text keeps its contrast when the crop changes.
   It fades left-to-right because the photograph puts its subject on the right:
   the text sits over the water and the skyline while the people collecting
   litter stay visible. */
.cuc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(var(--cuc-bg-rgb), .94) 0%, rgba(var(--cuc-bg-rgb), .72) 42%,
                        rgba(var(--cuc-bg-rgb), .25) 78%, rgba(var(--cuc-bg-rgb), .1) 100%),
        linear-gradient(180deg, rgba(var(--cuc-bg-rgb), .5) 0%, rgba(var(--cuc-bg-rgb), 0) 30%);
}

/* The width limit belongs on the TEXT, not on the container.
   .cuc-hero__inner is also .cuc-container, and a max-width there fights the
   container's margin-inline: auto — the whole block gets centred, so the
   headline starts ~330px from the left while the brand in the header starts at
   the container edge. Besides looking unaligned, that pushed the accent line
   into the brightest part of the photograph, which is where the overlay is
   weakest. Limiting the children instead keeps the hero flush with the header. */
.cuc-hero__inner { padding-block: var(--cuc-space-16); }

.cuc-hero__title { margin-bottom: var(--cuc-space-6); max-width: 20ch; }
.cuc-hero__accent { color: var(--cuc-accent); }

.cuc-hero__lead {
    max-width: 46ch;
    margin-bottom: var(--cuc-space-8);
    font-size: var(--cuc-text-lg);
    color: rgba(var(--cuc-text-rgb), .88);
}

/* Below 768px the fade turns vertical. A left-to-right fade designed for a wide
   crop leaves the text sitting on the brightest part of a portrait crop — the
   kind of thing that only shows up on a phone. */
@media (max-width: 767px) {
    .cuc-hero::after {
        background: linear-gradient(180deg, rgba(var(--cuc-bg-rgb), .82) 0%,
                                    rgba(var(--cuc-bg-rgb), .88) 60%, rgba(var(--cuc-bg-rgb), .95) 100%);
    }
    .cuc-hero__inner { padding-block: var(--cuc-space-12); }
}

/* ---------- Footer ---------- */
.cuc-footer {
    background: var(--cuc-header);
    border-top: 1px solid var(--cuc-line);
    padding-block: var(--cuc-space-12) var(--cuc-space-6);
    margin-top: var(--cuc-space-16);
}

.cuc-footer__grid {
    display: grid;
    gap: var(--cuc-space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    align-items: start;
}

.cuc-footer__brand { max-width: 320px; }
.cuc-footer__claim { margin-top: var(--cuc-space-4); font-size: var(--cuc-text-sm); }

.cuc-footer__social { display: flex; gap: var(--cuc-space-4); margin-top: var(--cuc-space-4); }
.cuc-footer__social a { color: var(--cuc-muted); }
.cuc-footer__social a:hover { color: var(--cuc-primary); }

.cuc-footer__heading {
    margin-bottom: var(--cuc-space-4);
    font-size: var(--cuc-text-sm);
    font-weight: 700;
    color: var(--cuc-text);
}

.cuc-footer__links { display: grid; gap: var(--cuc-space-2); }
.cuc-footer__link { color: var(--cuc-muted); font-size: var(--cuc-text-sm); }
.cuc-footer__link:hover { color: var(--cuc-primary); }
.cuc-footer__text { font-size: var(--cuc-text-sm); }

.cuc-newsletter {
    display: flex;
    align-items: center;
    gap: var(--cuc-space-2);
    padding: var(--cuc-space-1);
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-pill);
}
.cuc-newsletter:focus-within { border-color: var(--cuc-primary); }

/* min-width: 0 is not cosmetic. Without it a flex item refuses to shrink below
   its intrinsic width and the newsletter row overflows its column on narrow
   screens — one of the most common causes of horizontal page scroll. */
.cuc-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--cuc-space-2) var(--cuc-space-4);
    background: transparent;
    border: 0;
    color: var(--cuc-text);
    font: inherit;
    font-size: var(--cuc-text-sm);
}
.cuc-newsletter__input::placeholder { color: var(--cuc-muted-dim); }
/* The ring moves to the whole pill via :focus-within above, so the keyboard
   focus is still visible — this is not an unstyled focus removal. */
.cuc-newsletter__input:focus { outline: none; }

.cuc-newsletter__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--cuc-primary);
    color: var(--cuc-primary-ink);
    border: 0;
    border-radius: var(--cuc-radius-pill);
}
.cuc-newsletter__submit:hover { background: var(--cuc-primary-hover); }

.cuc-footer__copyright {
    margin: var(--cuc-space-8) 0 0;
    padding-top: var(--cuc-space-6);
    border-top: 1px solid var(--cuc-line);
    text-align: center;
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted-dim);
}

/* ---------- Features ---------- */
.cuc-features { background: var(--cuc-surface); border-block: 1px solid var(--cuc-line); }

.cuc-feature { display: flex; gap: var(--cuc-space-4); align-items: flex-start; }
.cuc-feature__icon { color: var(--cuc-primary); margin-top: 2px; }
.cuc-feature__title { margin: 0 0 var(--cuc-space-1); font-size: var(--cuc-text-base); }
.cuc-feature__text { margin: 0; font-size: var(--cuc-text-sm); }

/* ---------- Steps ---------- */
.cuc-steps__title { margin-bottom: var(--cuc-space-6); font-size: var(--cuc-text-xl); }
.cuc-steps__list { display: grid; gap: var(--cuc-space-6); }

.cuc-step { position: relative; display: flex; gap: var(--cuc-space-4); }

.cuc-step__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-pill);
    background: var(--cuc-surface);
    color: var(--cuc-primary);
}

/* The connector is drawn per step with ::before rather than as a background on
   the list, so it stops correctly at the last item however many steps there are.
   left: 22px is half the 44px badge, so it meets the badge centre. */
.cuc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 44px;
    bottom: calc(var(--cuc-space-6) * -1);
    border-left: 2px dashed var(--cuc-line-strong);
}

.cuc-step__title {
    margin: 0 0 var(--cuc-space-1);
    font-size: var(--cuc-text-base);
    display: flex;
    gap: var(--cuc-space-2);
}
.cuc-step__number { color: var(--cuc-primary); }
.cuc-step__text { margin: 0; font-size: var(--cuc-text-sm); }

/* ---------- CTA band ---------- */
.cuc-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cuc-space-6);
    padding: var(--cuc-space-8);
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-lg);
}
.cuc-cta-band__icon { color: var(--cuc-primary); flex: none; }
.cuc-cta-band__body { flex: 1 1 320px; }
.cuc-cta-band__title { margin: 0 0 var(--cuc-space-2); font-size: var(--cuc-text-xl); }
.cuc-cta-band__text { margin: 0; font-size: var(--cuc-text-sm); }

/* ---------- Action card ---------- */
.cuc-card {
    display: flex;
    flex-direction: column;
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius);
    overflow: hidden;
    transition: border-color var(--cuc-transition), transform var(--cuc-transition);
}
.cuc-card:hover { border-color: var(--cuc-line-strong); transform: translateY(-2px); }

.cuc-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--cuc-surface-raised); }
.cuc-card__media img { width: 100%; height: 100%; object-fit: cover; }

.cuc-card__badge {
    position: absolute;
    top: var(--cuc-space-3);
    left: var(--cuc-space-3);
    padding: var(--cuc-space-1) var(--cuc-space-3);
    border-radius: var(--cuc-radius-pill);
    background: var(--cuc-primary);
    color: var(--cuc-primary-ink);
    font-size: var(--cuc-text-xs);
    font-weight: 600;
}
.cuc-card__badge--heute { background: var(--cuc-accent); }

.cuc-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--cuc-space-4);
    padding: var(--cuc-space-4) var(--cuc-space-4) var(--cuc-space-6);
    flex: 1 1 auto;
}

.cuc-card__title { margin: 0; font-size: var(--cuc-text-lg); }

/* flex: 1 1 auto pushes the button to the bottom, so buttons line up across
   cards whose titles wrap to different heights. */
.cuc-card__meta { display: grid; gap: var(--cuc-space-2); flex: 1 1 auto; }
.cuc-card__meta li {
    display: flex;
    align-items: center;
    gap: var(--cuc-space-2);
    color: var(--cuc-muted);
    font-size: var(--cuc-text-sm);
}
.cuc-card__meta .cuc-icon { color: var(--cuc-muted-dim); }

.cuc-actions__all { margin-top: var(--cuc-space-8); }
.cuc-actions__empty {
    padding: var(--cuc-space-8);
    background: var(--cuc-surface);
    border: 1px dashed var(--cuc-line-strong);
    border-radius: var(--cuc-radius);
    text-align: center;
}

/* ---------- Page head (subpages) ---------- */
.cuc-page-head {
    padding-block: var(--cuc-space-12);
    background: var(--cuc-surface);
    border-bottom: 1px solid var(--cuc-line);
}
.cuc-page-head h1 { margin: 0; font-size: var(--cuc-text-3xl); }
.cuc-page-head__lead { margin: var(--cuc-space-4) 0 0; font-size: var(--cuc-text-lg); }

/* The content that FOLLOWS the page head starts closer to it.
 *
 * .cuc-section's 4rem is right between two sections of a long page; under the
 * title band it read as a gap rather than as a separation, because the band
 * already carries 3rem of its own padding and a border. 4rem plus 3rem plus a
 * rule is not breathing room, it is a hole - which is what Marcel saw on
 * /aktionen on 2026-08-07.
 *
 * Applied through the sibling selector rather than by adding a class to every
 * template: it is a property of the RELATIONSHIP between the band and what
 * comes after it, it is the same on every subpage, and a class would have to be
 * remembered on each new one. */
.cuc-page-head + .cuc-section { padding-block-start: var(--cuc-space-8); }

/* A heading INSIDE the content, for a plugin that leads with one. Deliberately
   not .cuc-page-head: that is the band at the top of a page, and reusing it here
   stacked a second background, a second border and a second 3rem of padding
   inside the first one's content area. */
.cuc-content-head { margin-bottom: var(--cuc-space-6); }
.cuc-content-head h2 { margin: 0; font-size: var(--cuc-text-2xl); }
.cuc-content-head__lead { margin: var(--cuc-space-2) 0 0; color: var(--cuc-muted); }

/* ---------- City filter ---------- */
.cuc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cuc-space-2);
    margin-bottom: var(--cuc-space-8);
}

.cuc-filter__item {
    padding: var(--cuc-space-2) var(--cuc-space-4);
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-pill);
    color: var(--cuc-muted);
    font-size: var(--cuc-text-sm);
    font-weight: 500;
}
.cuc-filter__item:hover { border-color: var(--cuc-primary); color: var(--cuc-primary); }

.cuc-filter__item.is-active {
    background: var(--cuc-primary);
    border-color: var(--cuc-primary);
    color: var(--cuc-primary-ink);
}
.cuc-filter__item.is-active:hover { background: var(--cuc-primary-hover); color: var(--cuc-primary-ink); }

/* ---------- Forms ---------- */
.cuc-form { display: grid; gap: var(--cuc-space-6); max-width: 32rem; }

.cuc-field { display: grid; gap: var(--cuc-space-2); }
.cuc-field__label { font-size: var(--cuc-text-sm); font-weight: 600; }
.cuc-field__help { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted-dim); }

.cuc-input {
    width: 100%;
    /* Without this a grid item refuses to shrink below its intrinsic width and
       the form overflows on a phone - the same trap as the newsletter row. */
    min-width: 0;
    padding: var(--cuc-space-3) var(--cuc-space-4);
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-sm);
    color: var(--cuc-text);
    font: inherit;
}
.cuc-input::placeholder { color: var(--cuc-muted-dim); }
.cuc-input:focus-visible { border-color: var(--cuc-primary); }

/* The invalid state is carried by colour AND by the message below the field, so
   it does not depend on distinguishing red from grey. */
.cuc-field--invalid .cuc-input { border-color: #C4574B; }

.cuc-field__errors {
    display: grid;
    gap: var(--cuc-space-1);
    font-size: var(--cuc-text-sm);
    color: #E08A80;
}

.cuc-checkbox {
    display: flex;
    gap: var(--cuc-space-3);
    align-items: start;
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted);
}
.cuc-checkbox input { margin-top: .2em; flex: none; }

/* ---------- Login (EXT:felogin) ---------- */
/* felogin renders its own templates; ours live in
   Resources/Private/Extensions/Felogin/ and use these classes plus the form
   ones above, so the login page looks like the registration page rather than
   like a bare browser form. */
.cuc-login { display: grid; gap: var(--cuc-space-6); max-width: 32rem; }
.cuc-login__user { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-login__aside { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }

/* A short message above a form: the greeting, "you have logged out", or a
   failed login. Not a field error - those sit beside their field. */
.cuc-notice {
    display: grid;
    gap: var(--cuc-space-2);
    padding: var(--cuc-space-4) var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-left: 3px solid var(--cuc-primary);
    border-radius: var(--cuc-radius-sm);
}
.cuc-notice__title { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-notice__text { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }

/* The failure state is carried by the left edge AND by the wording, so it does
   not rely on telling red from green - the same rule the invalid field follows. */
.cuc-notice--error { border-left-color: #C4574B; }

/* ---------- Definition list (profile) ---------- */
.cuc-datalist { display: grid; gap: var(--cuc-space-4); margin: 0 0 var(--cuc-space-8); }
.cuc-datalist dt {
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted-dim);
}
.cuc-datalist dd { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-muted { color: var(--cuc-muted); font-size: var(--cuc-text-sm); }

/* ---------- The action map ---------- */
/* Leaflet's own stylesheet is loaded by the script, only after consent, so
   nothing here may depend on it being present: the consent box has to look
   right on a page where Leaflet was never fetched. */
.cuc-map {
    position: relative;
    min-height: 26rem;
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius);
    overflow: hidden;
    background: var(--cuc-surface-raised);
}
.cuc-map--single { min-height: 18rem; }
.cuc-map__canvas { position: absolute; inset: 0; }

/* The gate. Covers the canvas rather than replacing it, so switching to the
   live map is one hidden attribute and no reflow of the page around it. */
.cuc-map__consent {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--cuc-space-6);
    text-align: center;
    background:
        linear-gradient(rgba(var(--cuc-bg-rgb), .82), rgba(var(--cuc-bg-rgb), .82)),
        repeating-linear-gradient(45deg,
            var(--cuc-surface) 0 12px, var(--cuc-surface-raised) 12px 24px);
}
.cuc-map__consent-inner { display: grid; gap: var(--cuc-space-3); justify-items: center; max-width: 28rem; }
.cuc-map__consent-title { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-map__consent-text { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
.cuc-map__consent-remember-label { font-size: var(--cuc-text-xs); }
.cuc-map__consent-privacy { margin: 0; font-size: var(--cuc-text-xs); }
.cuc-map__consent-error { margin: 0; font-size: var(--cuc-text-sm); color: #E08A80; }

.cuc-map.is-loading .cuc-map__consent-inner { opacity: .5; }
.cuc-map.is-live .cuc-map__consent { display: none; }

/* Markers. Every one is a divIcon, so the vendored Leaflet needs none of its
   default PNGs - see the note in Vendor/Leaflet/README.md. */
.cuc-map__pin { display: grid; place-items: start center; }
.cuc-map__pin-dot {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--cuc-primary);
    border: 2px solid var(--cuc-primary-ink);
    box-shadow: var(--cuc-shadow);
}
.cuc-map__cluster {
    display: grid;
    place-items: center;
    border-radius: var(--cuc-radius-pill);
    background: var(--cuc-primary);
    color: var(--cuc-primary-ink);
    font-weight: 700;
    border: 2px solid var(--cuc-primary-ink);
    box-shadow: var(--cuc-shadow);
    cursor: pointer;

    /* THE NUMBER SITS IN THE MIDDLE, and three things had to be said for that.
     *
     * box-sizing: Leaflet writes the icon size as an inline width and height,
     * and the 2px border was being added OUTSIDE it - so the circle was 4px
     * bigger than the box the grid centred against, and the digit drifted up
     * and to the left. Visible on Marcel's screenshot as a "2" resting on the
     * lower-left edge.
     *
     * line-height: the page's 1.6 leaves a digit sitting below the optical
     * centre of a circle, because the extra leading is not split evenly around
     * a single line of text.
     *
     * The font size is set explicitly rather than inherited: this element is
     * outside the normal document flow, and Leaflet's container has its own. */
    box-sizing: border-box;
    line-height: 1;
    font-size: var(--cuc-text-sm);
    text-align: center;
}
.cuc-map__cluster > span { display: block; }

/* THE CENTRING NEEDS THIS SELECTOR, not the plain class above.
 *
 * Leaflet's own `.leaflet-marker-icon` sets `display: block` and reaches the
 * element through a descendant selector, so it outranks a single class. The
 * computed display stayed `block`, `place-items` did nothing, and the number sat
 * 8px above the middle of its circle - measured, after two attempts at fixing it
 * from the class alone.
 *
 * Two classes, so this wins on specificity rather than on being written later -
 * source order is not something a future stylesheet edit can be trusted to
 * preserve, and !important would win an argument nobody could then re-open. */
.cuc-map .cuc-map__cluster {
    display: grid;
    place-items: center;
    line-height: 1;
}

/* Leaflet's own divIcon default is a white box with a grey border. Every icon
   this site draws brings its own look, so the default is cleared once here
   rather than overridden in each. */
.cuc-map .leaflet-div-icon { background: transparent; border: 0; }

/* Leaflet's popup is white by default and would be the one bright rectangle on
   a dark page. These selectors reach into its markup on purpose. */
.cuc-map .leaflet-popup-content-wrapper,
.cuc-map .leaflet-popup-tip {
    background: var(--cuc-surface-raised);
    color: var(--cuc-text);
    box-shadow: var(--cuc-shadow);
}
.cuc-map .leaflet-popup-content { margin: var(--cuc-space-4); display: grid; gap: var(--cuc-space-1); }
.cuc-map__popup-title { font-size: var(--cuc-text-base); }
.cuc-map__popup-line { font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
.cuc-map__popup-link { font-size: var(--cuc-text-sm); font-weight: 600; }
.cuc-map .leaflet-container { background: var(--cuc-surface); font: inherit; }
.cuc-map .leaflet-control-attribution {
    background: rgba(var(--cuc-bg-rgb), .78);
    color: var(--cuc-muted);
    font-size: var(--cuc-text-xs);
}
.cuc-map .leaflet-control-attribution a { color: var(--cuc-accent); }

/* ---------- Search bar and results ---------- */
.cuc-search {
    display: grid;
    /* place, PLZ, radius, day, button */
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--cuc-space-4);
    align-items: end;
    margin-bottom: var(--cuc-space-6);
    padding: var(--cuc-space-4);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius);
}
.cuc-search__field { display: grid; gap: var(--cuc-space-2); min-width: 0; }
.cuc-search__label { font-size: var(--cuc-text-xs); color: var(--cuc-muted-dim); }
.cuc-search__submit { justify-content: center; }
.cuc-search__notice { margin-bottom: var(--cuc-space-6); }

@media (max-width: 767px) {
    /* One column on a phone. The submit button spans it, because a search box
       whose button sits alone at the end of a row is easy to miss. */
    .cuc-search { grid-template-columns: 1fr; }
    .cuc-search__submit { width: 100%; }
}

/* Map beside the list on a wide screen, above it on a narrow one. The map
   column is sticky, so scrolling through results keeps the pins in view -
   which is the whole reason for showing both at once. */
.cuc-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cuc-space-6); }
.cuc-results__map { position: sticky; top: calc(64px + var(--cuc-space-4)); align-self: start; display: grid; gap: var(--cuc-space-3); }
.cuc-results__list { display: grid; gap: var(--cuc-space-4); align-content: start; }

@media (max-width: 1023px) {
    .cuc-results { grid-template-columns: 1fr; }
    /* Un-stick it: a sticky map on a phone would cover the results it belongs to. */
    .cuc-results__map { position: static; }
}

.cuc-results__head { display: flex; flex-wrap: wrap; gap: var(--cuc-space-4); align-items: baseline; justify-content: space-between; }
.cuc-results__count { margin: 0; font-weight: 600; }
.cuc-results__sort { display: flex; gap: var(--cuc-space-2); }
.cuc-results__sort-item {
    padding: var(--cuc-space-2) var(--cuc-space-4);
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-pill);
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted);
}
.cuc-results__sort-item.is-active { background: var(--cuc-primary); border-color: var(--cuc-primary); color: var(--cuc-primary-ink); }

.cuc-results__cards { display: grid; gap: var(--cuc-space-4); }
.cuc-results__more { margin: 0; }

/* A LINK that looks like a checkbox. It carries the whole state in its href, so
   it works with no JavaScript and the back button behaves - a real checkbox
   here would need an onchange submit. The box is decorative; aria-pressed on
   the link is what actually announces the state. */
.cuc-results__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--cuc-space-3);
    padding: var(--cuc-space-3) var(--cuc-space-4);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted);
}
.cuc-results__toggle-box {
    flex: none;
    width: 18px; height: 18px;
    border: 1px solid var(--cuc-line-strong);
    border-radius: 4px;
}
.cuc-results__toggle.is-active { color: var(--cuc-text); }
.cuc-results__toggle.is-active .cuc-results__toggle-box {
    background: var(--cuc-primary);
    border-color: var(--cuc-primary);
    /* The tick is drawn rather than shipped as an image: one less request, and
       it inherits the button's colour. */
    background-image: linear-gradient(45deg, transparent 42%, var(--cuc-primary-ink) 42% 58%, transparent 58%),
                      linear-gradient(-45deg, transparent 42%, var(--cuc-primary-ink) 42% 58%, transparent 58%);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Participant circles */
.cuc-card__people { display: flex; align-items: center; gap: var(--cuc-space-2); margin: 0 0 var(--cuc-space-4); }
.cuc-card__avatars { display: inline-flex; }
.cuc-card__avatar {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    margin-right: -8px; /* overlapped, as in the design */
    border-radius: 50%;
    background: var(--cuc-surface);
    border: 2px solid var(--cuc-surface-raised);
    font-size: var(--cuc-text-xs);
    font-weight: 700;
    color: var(--cuc-accent);
}
.cuc-card__avatar:last-child { margin-right: 0; }
.cuc-card__more { font-size: var(--cuc-text-xs); color: var(--cuc-muted-dim); }
.cuc-card__distance { color: var(--cuc-accent); font-weight: 600; }

/* ---------- The organiser's pin picker ---------- */
.cuc-pin { display: grid; gap: var(--cuc-space-3); }
.cuc-pin__title { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-pin__hint { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
.cuc-pin__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cuc-space-4); }
.cuc-pin__field { display: grid; gap: var(--cuc-space-2); }

/* Read-only, and it should look it: the value comes from the map, not from
   typing. Kept visible rather than hidden so the coordinate can be copied,
   checked, and read out - a pin nobody can verify is a pin nobody trusts. */
.cuc-pin__fields .cuc-input { color: var(--cuc-muted); background: var(--cuc-bg); }

/* The picker's marker is grabbable, unlike the read-only pins on the list. */
.cuc-map--pick .cuc-map__pin { cursor: grab; }
.cuc-map--pick .cuc-map__pin:active { cursor: grabbing; }

@media (max-width: 767px) {
    .cuc-pin__fields { grid-template-columns: 1fr; }
}

/* ---------- Notes ---------- */
/* .cuc-note was used in four templates and styled in none of them - it rendered
   as a bare paragraph. Found on 2026-08-07 while adding the "waiting for review
   again" message; the gap predates it. */
.cuc-note {
    margin: 0 0 var(--cuc-space-4);
    padding: var(--cuc-space-3) var(--cuc-space-4);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-left: 3px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-sm);
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted);
}
.cuc-note--success { border-left-color: var(--cuc-primary); color: var(--cuc-text); }
/* Not an error and not a success: part of what was asked for did not happen -
   the picture was rejected while the action was stored. Amber rather than red,
   because nothing was lost. */
.cuc-note--warning { border-left-color: #C9A227; color: var(--cuc-text); }
.cuc-note--error { border-left-color: #C4574B; color: var(--cuc-text); }

/* ---------- The card in manage mode ---------- */
/* Two buttons side by side instead of one full-width one. Wraps, because
   "Bearbeiten" and "Ansehen" together do not fit a phone-width card. */
.cuc-card__actions { display: flex; flex-wrap: wrap; gap: var(--cuc-space-3); }
.cuc-card__actions .cuc-btn { flex: 1 1 auto; justify-content: center; }

/* The status badge. Colour carries the same information as the word, never
   instead of it - the label is always there, so telling amber from green is
   never required to know what happened. */
.cuc-card__badge--status { background: var(--cuc-surface-raised); color: var(--cuc-text); }
.cuc-card__badge--freigegeben { background: var(--cuc-primary); color: var(--cuc-primary-ink); }
.cuc-card__badge--wartet_auf_freigabe { background: #C9A227; color: var(--cuc-primary-ink); }
.cuc-card__badge--abgelehnt { background: #C4574B; color: #FFFFFF; }
.cuc-card__badge--entwurf { background: var(--cuc-line-strong); color: var(--cuc-text); }
.cuc-card__badge--archiviert { background: var(--cuc-muted-dim); color: var(--cuc-primary-ink); }

/* Breathing room above the "Aktion planen" button, which now sits under the
   list rather than over it. */
.cuc-manage__create { margin-top: var(--cuc-space-6); }

/* The empty result, with its two ways out. */
.cuc-actions__empty-text { margin: 0 0 var(--cuc-space-6); }
.cuc-actions__empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cuc-space-3);
    justify-content: center;
}

/* ---------- Registration: account type ---------- */
.cuc-accounttype { border: 0; margin: 0; padding: 0; }
.cuc-accounttype__option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--cuc-space-3);
    align-items: start;
    padding: var(--cuc-space-4);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
    cursor: pointer;
}
.cuc-accounttype__option + .cuc-accounttype__option { margin-top: var(--cuc-space-3); }
.cuc-accounttype__option:has(input:checked) { border-color: var(--cuc-primary); }
.cuc-accounttype__option:focus-within { border-color: var(--cuc-primary); }
.cuc-accounttype__label { font-weight: 600; }
.cuc-accounttype__help {
    grid-column: 2;
    font-size: var(--cuc-text-sm);
    color: var(--cuc-muted);
}

/* The company block, revealed by the checked radio.
 *
 * :has() on the form, so no JavaScript is involved at all - the fields appear
 * the moment "Firma oder Organisation" is chosen and the form still submits
 * without a script. In a browser without :has() everything is simply visible,
 * which is the right failure: nothing is unreachable, and the SERVER decides
 * what is required either way. */
.cuc-company { display: grid; gap: var(--cuc-space-6); }
.cuc-company__title { margin: 0; font-size: var(--cuc-text-lg); }

@supports selector(:has(*)) {
    .cuc-form:has(#cuc-accountType-person:checked) .cuc-company { display: none; }
}

/* ---------- Management dashboard ---------- */
.cuc-tile {
    display: flex;
    flex-direction: column;
    gap: var(--cuc-space-3);
    padding: var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius);
}
.cuc-tile__title { margin: 0; font-size: var(--cuc-text-lg); }
.cuc-tile__text { margin: 0; flex: 1; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
/* An area that exists on the dashboard but is not built yet. Saying so is more
   honest than hiding it and more useful than a link to a 404. */
.cuc-tile__soon { margin: 0; font-size: var(--cuc-text-sm); color: var(--cuc-muted-dim); }

.cuc-memberlist { display: grid; gap: var(--cuc-space-3); margin: 0 0 var(--cuc-space-6); padding: 0; list-style: none; }
.cuc-memberlist__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cuc-space-3);
    padding: var(--cuc-space-4);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
}
.cuc-memberlist__name { font-weight: 600; }
.cuc-memberlist__self { font-weight: 400; color: var(--cuc-muted-dim); font-size: var(--cuc-text-sm); }
.cuc-memberlist__mail { flex: 1; font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
.cuc-memberlist__pending { font-size: var(--cuc-text-xs); color: #C9A227; }

/* Role badges. The word is always there; colour never carries it alone. */
.cuc-badge {
    padding: var(--cuc-space-1) var(--cuc-space-3);
    border-radius: var(--cuc-radius-pill);
    font-size: var(--cuc-text-xs);
    font-weight: 700;
    background: var(--cuc-surface);
    color: var(--cuc-text);
}
.cuc-badge--inhaber { background: var(--cuc-primary); color: var(--cuc-primary-ink); }
.cuc-badge--admin { background: var(--cuc-accent); color: var(--cuc-primary-ink); }

/* ---------- FAQ ---------- */
/* <details>, not a scripted accordion. It opens without JavaScript, it is
   keyboard-operable and announced correctly by a screen reader for free, and
   the browser's own find-in-page can open a closed section - which a
   div-and-click accordion cannot. */
.cuc-faq { display: grid; gap: var(--cuc-space-3); max-width: 46rem; }
.cuc-faq__lead { max-width: 46rem; color: var(--cuc-muted); }
.cuc-faq h2 { margin: var(--cuc-space-8) 0 var(--cuc-space-2); font-size: var(--cuc-text-lg); }
.cuc-faq h2:first-child { margin-top: 0; }

.cuc-faq__item {
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
}
.cuc-faq__item > summary {
    padding: var(--cuc-space-4) var(--cuc-space-6);
    font-weight: 600;
    cursor: pointer;
    /* The default triangle is replaced by one that follows the site's colour
       and turns; list-style: none is what removes it in Firefox, the WebKit
       pseudo-element is what removes it in Safari and Chrome. */
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--cuc-space-3);
}
.cuc-faq__item > summary::-webkit-details-marker { display: none; }
.cuc-faq__item > summary::before {
    content: "";
    flex: none;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--cuc-primary);
    border-bottom: 2px solid var(--cuc-primary);
    transform: rotate(-45deg);
    transition: transform var(--cuc-transition);
}
.cuc-faq__item[open] > summary::before { transform: rotate(45deg); }
.cuc-faq__item > summary:focus-visible { outline: 2px solid var(--cuc-primary); outline-offset: 2px; }
.cuc-faq__item > p { margin: 0 var(--cuc-space-6) var(--cuc-space-4); color: var(--cuc-muted); }
.cuc-faq__item > summary + p { margin-top: var(--cuc-space-2); }

/* ---------- Contact form ---------- */
/* The textarea inherits every input style; only the things a single-line field
   has no opinion about are set here. resize: vertical rather than the default
   both - a textarea widened past its column drags the whole form out of
   alignment, and nobody widens one on purpose. */
.cuc-input--multiline { resize: vertical; min-height: 10rem; line-height: 1.5; }

/* The honeypot.

   MOVED OFF-SCREEN, not display: none and not hidden. A hidden field is
   skipped by browser autofill and by the better spam scripts, which is the
   opposite of what a honeypot is for: it has to look ordinary to a machine
   reading the markup and be invisible to every person. Combined with
   aria-hidden and tabindex="-1" in the template, no screen reader announces it
   and no tab stop lands on it. */
.cuc-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Contact enquiries in the operator's area ---------- */
.cuc-enquiries { display: grid; gap: var(--cuc-space-4); margin: 0 0 var(--cuc-space-6); padding: 0; list-style: none; }
.cuc-enquiries__item {
    padding: var(--cuc-space-5) var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-left: 4px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
}
/* Unanswered enquiries carry a coloured edge AND sit first in the list, so the
   distinction survives for somebody who cannot tell the two borders apart. */
.cuc-enquiries__item--new { border-left-color: var(--cuc-primary); }

.cuc-enquiries__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cuc-space-3);
}
.cuc-enquiries__subject { margin: 0; font-size: var(--cuc-text-base); }
.cuc-enquiries__meta { font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
.cuc-enquiries__from { margin: var(--cuc-space-1) 0 var(--cuc-space-3); font-size: var(--cuc-text-sm); color: var(--cuc-muted); }
/* pre-wrap keeps the paragraphs the sender typed. The value is escaped, so
   preserving whitespace preserves formatting and nothing else. */
.cuc-enquiries__message { white-space: pre-wrap; }
.cuc-enquiries__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cuc-space-3);
    margin-top: var(--cuc-space-4);
}
.cuc-enquiries__form { display: flex; align-items: center; gap: var(--cuc-space-3); margin-left: auto; }

.cuc-badge--warning { background: #C9A227; color: #1B1B1B; }
.cuc-badge--done { background: var(--cuc-surface); color: var(--cuc-muted); }
.cuc-btn--small { padding: var(--cuc-space-2) var(--cuc-space-4); font-size: var(--cuc-text-sm); }

/* ---------- Community: benefits and voices ---------- */
/* The markup comes from a content element, not a template, so these classes
   are addressed on plain divs and figures rather than on partials. An editor
   who copies a block keeps the styling; one who writes an ordinary paragraph
   gets an ordinary paragraph. */
.cuc-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--cuc-space-4);
    margin: var(--cuc-space-6) 0 var(--cuc-space-10);
}
.cuc-benefit {
    padding: var(--cuc-space-5) var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
}
.cuc-benefit h3 { margin: 0 0 var(--cuc-space-2); font-size: var(--cuc-text-base); }
.cuc-benefit p { margin: 0; color: var(--cuc-muted); }

.cuc-voices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--cuc-space-4);
    margin: var(--cuc-space-6) 0 var(--cuc-space-10);
}
.cuc-voice {
    display: flex;
    flex-direction: column;
    gap: var(--cuc-space-4);
    margin: 0;
    padding: var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    /* The quote mark is the accent edge, not a decorative glyph behind the
       text. A large typographic quote sitting under the first line is the
       usual choice here and it makes the first words hard to read at small
       sizes for exactly the people who need them readable. */
    border-left: 4px solid var(--cuc-primary);
    border-radius: var(--cuc-radius-sm);
}
.cuc-voice blockquote { margin: 0; }
.cuc-voice blockquote p { margin: 0; font-size: var(--cuc-text-lg); line-height: 1.45; }
.cuc-voice figcaption { margin-top: auto; font-size: var(--cuc-text-sm); }
.cuc-voice__name { font-weight: 600; }
.cuc-voice__meta { color: var(--cuc-muted); }

/* The lead paragraph of an editorial page, so a content element can open the
   way a template-built page does. */
.cuc-lead { max-width: 46rem; font-size: var(--cuc-text-lg); color: var(--cuc-muted); }

/* ---------- Newsletter panel ---------- */
.cuc-subheading { margin: var(--cuc-space-10) 0 var(--cuc-space-4); font-size: var(--cuc-text-lg); }
.cuc-subheading:first-of-type { margin-top: var(--cuc-space-8); }

/* Test and delete sit side by side; each is its own form, because each posts to
   a different action and a single form with two submit buttons is a form where
   the Enter key picks one of them for you. */
.cuc-newsletter__actions { display: flex; flex-wrap: wrap; gap: var(--cuc-space-3); margin: var(--cuc-space-6) 0; }

/* The send block is set apart deliberately: it is the one control on this page
   that cannot be undone, and it should not sit in the same visual row as
   "save". */
.cuc-newsletter__send {
    margin-top: var(--cuc-space-8);
    padding: var(--cuc-space-6);
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line-strong);
    border-radius: var(--cuc-radius-sm);
}
.cuc-newsletter__send .cuc-note { margin-top: 0; }

.cuc-newsletter__progress { font-size: var(--cuc-text-lg); font-weight: 600; }
/* pre-wrap: the archive shows what was actually mailed, and the paragraphs the
   writer typed are part of that. */
.cuc-newsletter__archive {
    white-space: pre-wrap;
    padding: var(--cuc-space-6);
    background: var(--cuc-surface-raised);
    border: 1px solid var(--cuc-line);
    border-radius: var(--cuc-radius-sm);
    margin-bottom: var(--cuc-space-6);
}

/* Status badges. The word is always there; colour never carries it alone. */
.cuc-badge--entwurf { background: var(--cuc-surface); color: var(--cuc-muted); }
.cuc-badge--versand { background: #C9A227; color: #1B1B1B; }
.cuc-badge--versendet { background: var(--cuc-primary); color: var(--cuc-primary-ink); }

/* The organisation an action is run for, under the title on the detail page. */
.cuc-page-head__org { margin-top: var(--cuc-space-2); font-weight: 600; color: var(--cuc-primary); }

/* A checkbox that carries a sentence, not a word: label and box on one line,
   the box not shrinking when the text wraps to a second. */
.cuc-check { display: flex; align-items: flex-start; gap: var(--cuc-space-3); cursor: pointer; }
.cuc-check input { flex: none; margin-top: 0.25em; }
.cuc-field--check { gap: var(--cuc-space-2); }

/* ---------- Inviting colleagues ---------- */
.cuc-invite { margin: var(--cuc-space-8) 0; max-width: 46rem; }
.cuc-invite .cuc-input { font-family: var(--cuc-font-mono, monospace); font-size: var(--cuc-text-sm); }
.cuc-invite__revoke { margin-top: var(--cuc-space-4); }

/* Role picker and remove button on one row, wrapping under the name on a
   phone rather than squeezing the address out of the line. */
.cuc-memberlist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cuc-space-3); }
.cuc-memberlist__actions form { display: flex; align-items: center; gap: var(--cuc-space-2); }
.cuc-input--inline { width: auto; min-width: 9rem; padding: var(--cuc-space-2) var(--cuc-space-3); }

/* ---------- Profile ---------- */
.cuc-profile { display: flex; flex-wrap: wrap; gap: var(--cuc-space-8); align-items: flex-start; }
.cuc-profile .cuc-datalist { flex: 1; min-width: 15rem; }

/* The avatar is a circle whether it holds a photograph or two letters, so the
   page does not change shape when somebody uploads one. */
.cuc-profile__avatar {
    flex: none;
    width: 10rem;
    height: 10rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-line);
}
/* object-fit: cover finishes what the 160c crop starts - the server crops to a
   square, this keeps it filling the circle at any rendered size. */
.cuc-profile__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.cuc-profile__initials {
    font-size: 3rem;
    font-weight: 700;
    color: var(--cuc-muted);
    /* line-height 1 so the letters sit on the circle's centre rather than on
       the baseline of a taller invisible box - the same fix the map cluster
       needed. */
    line-height: 1;
}

/* ---------- Language switch ---------- */
/* OUTSIDE the collapsing navigation, beside the burger. Inside it, the switch
   was off-canvas on a phone - measurable, so it looked present, and impossible
   to click. A browser test caught it as "element is outside of the viewport".
   It was unreachable in exactly the case it matters most: somebody who cannot
   read German would have had to find a German-labelled menu button first.

   margin-left: auto pushes it to the right of the brand; on a wide screen the
   navigation that follows takes the space between them, so it still ends up at
   the far right of the row. */
.cuc-langmenu {
    display: flex;
    gap: var(--cuc-space-1);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    align-items: center;
    order: 3;
}
/* On a wide screen the switch belongs after the login/register pair, so it
   trails the row rather than splitting the brand from the navigation. */
@media (min-width: 1024px) {
    .cuc-langmenu { order: 4; margin-left: var(--cuc-space-4); }
}
.cuc-langmenu__link {
    display: block;
    padding: var(--cuc-space-2) var(--cuc-space-3);
    border-radius: var(--cuc-radius-sm);
    font-size: var(--cuc-text-sm);
    font-weight: 600;
    color: var(--cuc-muted);
    text-decoration: none;
}
.cuc-langmenu__link:hover { color: var(--cuc-text); background: var(--cuc-surface); }
/* The current language is marked by weight and colour AND by aria-current, so
   it is not carried by colour alone. */
.cuc-langmenu__link--current { color: var(--cuc-text); background: var(--cuc-surface); }
/* A page with no translation of its own: still reachable, just quieter. It
   renders German text under an English URL, which is the honest half-state. */
.cuc-langmenu__item--untranslated .cuc-langmenu__link { opacity: 0.6; }

/* The password rules, listed above the field on the reset page rather than
   under it: somebody choosing a password wants the rules while they choose. */
.cuc-requirements { margin: var(--cuc-space-2) 0 0; padding-left: var(--cuc-space-6); font-size: var(--cuc-text-sm); }
.cuc-requirements li { margin-bottom: var(--cuc-space-1); }