/* The search form: numbered step cards as an accordion, calendar, choice controls, offers, call to action. */

/* while a preselection is applied (pages/search.js holdForPrefill): a loading circle over the form, the form below faded and
   not usable */
.sv.is-prefilling {
    position: relative;
}

.sv.is-prefilling > :not(.sv__prefill) {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

.sv__prefill {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--s-7);
    cursor: progress;
}

.sv__prefill[hidden] {
    display: none;
}

.sv__prefill-spinner {
    position: sticky;
    top: 35vh;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 6px solid var(--loader-ring);
    border-top-color: var(--loader-head);
    animation: spin 1s linear infinite;
}

.sv.is-loading .sv__form {
    cursor: progress;
}

.sv__form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.sv__notices:empty {
    display: none;
}

/* the event link: an invitation, not a notice — the colour of its category as the stripe on the left and a hint of it in
   the background (--category-color, set by js/components/search-view.js; the accent without one) */
.sv__linkevent {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-left: 5px solid var(--category-color, var(--op-accent));
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--category-color, var(--op-accent)) 5%, var(--bg-card));
    box-shadow: var(--shadow-sm);
    text-align: left;
}

.sv__linkevent[hidden] {
    display: none;
}

.sv__linkevent-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--category-color, var(--op-accent)) 14%, var(--bg-card));
    color: var(--ink);
}

.sv__linkevent-text {
    flex: 1 1 auto;
    min-width: 0;
}

#eventViewCaption {
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
}

#eventViewName {
    color: var(--ink-muted);
    line-height: 1.5;
}

#eventViewName:not(:empty) {
    margin-top: var(--s-1);
}

/* ---- step card (accordion, see js/components/search-view.js) -------------------------------------------------------------- */
.sv__card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-card);
    text-align: left;
    scroll-margin-top: var(--s-4);
    transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.sv__card.is-open {
    box-shadow: var(--shadow-sm);
}

.sv__card.is-done {
    border-color: var(--op-accent-soft-border);
}

/* a value of the address (preselection) that could not be taken: marked until the visitor chooses there */
.sv__card.is-prefill-missing {
    border-color: var(--attention-line);
    box-shadow: 0 0 0 1px var(--attention-line);
}

.sv__card.is-locked {
    background: var(--bg-subtle);
    opacity: .72;
}

/* the choices of a locked section are disabled and take no click: a layer over them does, and leads up to what is missing
   (SearchView.showMissingBefore) */
.sv__card.is-locked .sv__panel {
    position: relative;
}

.sv__card.is-locked .sv__panel::after {
    position: absolute;
    inset: 0;
    content: "";
    cursor: pointer;
}

/* what is still missing (after "check availability", or a click into a section that waits for it): a yellow frame that
   pulses twice */
.sv__card.has-error {
    border-color: var(--attention-line);
    box-shadow: 0 0 0 1px var(--attention-line);
    animation: sv-missing .9s var(--ease) 2;
}

@keyframes sv-missing {
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--attention-line) 35%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv__card.has-error {
        animation: none;
    }
}

.sv__card--plain {
    padding: 0;
    border: 0;
    background: transparent;
}

.sv__card--plain.is-open {
    box-shadow: none;
}

.sv__title {
    margin: 0;
    font-size: var(--fs-md);
}

/* header: number, title, the chosen value (closed section) and the arrow; the whole header opens and closes the section */
.sv__toggle {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 3.5rem;
    padding: var(--s-3) var(--s-4);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sv__toggle:hover {
    background: var(--bg-subtle);
}

.sv__toggle:focus-visible {
    outline: none;
}

:root[data-input="keyboard"] .sv__toggle:focus-visible {
    box-shadow: var(--focus);
}

.sv__label {
    flex: none;
}

.sv__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--ink);
    font-weight: 600;
}

.sv__card.is-open .sv__value {
    visibility: hidden;
}

.sv__value-icon {
    margin-right: var(--s-2);
    vertical-align: -.2em;
}

/* a value of the preselection the server has not confirmed yet: a small loading circle instead of a raw value */
.sv__value-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--line-strong);
    border-top-color: var(--op-accent);
    border-radius: 50%;
    vertical-align: -.15em;
    animation: busy-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sv__value-spinner {
        animation-duration: 2.4s;
    }
}

.sv__toggle > svg {
    flex: none;
    margin-left: auto;
    color: var(--ink-muted);
}

.sv__card.is-open .sv__toggle > svg {
    transform: rotate(180deg);
}

/* the panel folds with its content height (grid row 0fr -> 1fr); a closed panel is invisible and inert */
.sv__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
}

.sv__card.is-open .sv__panel {
    grid-template-rows: 1fr;
    visibility: visible;
}

.sv__inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--s-4);
}

/* room for focus rings at the top and the space below the content, inside the folding area */
.sv__inner::before,
.sv__inner::after {
    content: "";
    display: block;
    height: .25rem;
}

.sv__inner::after {
    height: var(--s-4);
}

.sv.is-animated .sv__panel {
    transition: grid-template-rows .26s var(--ease), visibility 0s linear .26s;
}

.sv.is-animated .sv__card.is-open .sv__panel {
    transition: grid-template-rows .26s var(--ease), visibility 0s;
}

.sv.is-animated .sv__toggle > svg {
    transition: transform .2s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .sv.is-animated .sv__panel,
    .sv.is-animated .sv__card.is-open .sv__panel,
    .sv.is-animated .sv__toggle > svg {
        transition: none;
    }
}

/* the icon of the step in a round badge before its title (no numbers): filled in the colour of the operator once done */
.sv__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--ink-muted);
}

.sv__card.is-open .sv__icon {
    color: var(--op-accent-ink);
}

.sv__card.is-done .sv__icon {
    background: var(--op-accent);
    color: var(--op-on-accent);
}

.sv__hint {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* a value of the address that could not be taken: why, and that the visitor chooses here */
.sv__attention {
    margin: 0 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--warning-line);
    border-radius: var(--r-sm);
    background: var(--warning-bg);
    color: var(--warning);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* sections with several choices (persons stepper, several resources or slots) close with this button */
.sv__next {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--s-3);
}

.sv__next[hidden] {
    display: none;
}

.sv__error {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--danger);
}

.sv__empty {
    margin: 0;
    padding: var(--s-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.sv__chosen {
    margin: var(--s-3) 0 0;
    font-weight: 650;
    min-height: 1.5rem;
}

/* ---- choice buttons (radio like) ------------------------------------------------------------------------------------------ */
.choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-height: var(--control-h);
    min-width: 3rem;
    padding: 0 var(--s-4);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
    font-weight: 600;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.choice:hover:not(:disabled):not(.is-checked) {
    border-color: var(--op-accent);
}

.choice.is-checked {
    background: var(--op-accent);
    border-color: var(--op-accent);
    color: var(--op-on-accent);
}

.choice:disabled {
    opacity: .5;
}

.choice__tick {
    flex: none;
}

/* the activity of a calendar (core/data/activities.json): its icon before the name */
.choice--icon {
    gap: var(--s-2);
}

.choice__icon {
    flex: none;
}

.choices--segmented .choice {
    flex: 1 1 8rem;
}

/* duration, games, lanes: cells of one width - the longest label (--chip-min, js/components/search-view.js) with the padding
   and room for the tick of the chosen one - the rows fill the width */
.choices--chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--chip-min, 6ch) + 2 * var(--s-3) + 1.25rem)), 1fr));
}

.choices--chips .choice {
    min-width: 0;
    padding: 0 var(--s-3);
    white-space: nowrap;
}

/* rows of equal width, the fuller rows last (search-view.js rowPlan); without the script the buttons wrap as before */
.choices--segmented.is-balanced {
    display: grid;
}

.choices--segmented.is-balanced .choice {
    min-width: 0;
}

.choices--times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
}

.choices--times .choice {
    padding: 0 var(--s-2);
    font-variant-numeric: tabular-nums;
}

/* ---- persons: a button per number up to 9, "10+" opens the counter -------------------------------------------------------------- */
.persons {
    display: grid;
    gap: var(--s-3);
}

.choices--persons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* two even rows over the full width: 1-5, 6-9 and 10+ */
}

.choices--persons .choice {
    min-width: 0;
    min-height: 3.75rem;
    padding: var(--s-1);
    font-variant-numeric: tabular-nums;
}

/* the number large, the word small below it: "5 / Personen" */
.persons__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.persons__number {
    font-size: var(--fs-lg);
    font-weight: 750;
}

.persons__word {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: var(--fs-xxs);
    font-weight: 600;
    text-overflow: ellipsis;
}

.choice.is-checked .persons__word {
    color: inherit;
    opacity: .85;
}

.choices--persons .choice__tick {
    display: none; /* the checked button shows its colour; the tick does not fit beside the stacked label */
}

/* "10+" opens the counter: a little apart from the numbers (lightly grey), checked like them */
.choices--persons .choice--more:not(.is-checked) {
    background: var(--bg-muted);
}

/* the counter (over the width) and the "next" that closes it, side by side; a line above it, the maximum below it */
.persons__rule {
    margin: var(--s-1) 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* side by side while both fit; on a narrow phone (iPhone) "next" moves below the counter, over the width, instead of pushing
   the row out of the page (the counter grows, "next" only takes what is left - all of a row of its own) */
.persons__counter {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--s-3);
}

.persons__counter .stepper {
    display: flex;
    flex: 100 1 15rem;
    min-width: 0;
}

.persons__counter .stepper__value {
    flex: 1;
}

.persons__next {
    flex: 1 0 auto;
    min-height: auto;
}

.persons__max {
    margin: 0;
}

/* ---- stepper ---------------------------------------------------------------------------------------------------------------------- */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-card);
}

.stepper__btn {
    display: grid;
    place-items: center;
    width: 3.25rem;
    min-height: var(--control-h);
    border: 0;
    background: var(--bg-muted);
    color: var(--ink);
}

.stepper__btn:hover:not(:disabled) {
    background: var(--op-accent-soft);
}

.stepper__btn:disabled {
    opacity: .4;
}

/* the number to type in (a small field, the cursor shows it) and the word beside it: "[12] Personen" */
.stepper__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-width: 8.5rem;
    padding: 0 var(--s-3);
    cursor: text;
    font-weight: 650;
}

/* (two classes: above the general input[type="text"]) */
.stepper .stepper__input {
    display: block;
    width: calc(3ch + 2 * var(--s-2));
    min-height: 0;
    height: 2.25rem;
    margin: 0;
    padding: 0 var(--s-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg-card);
    font-size: 1rem; /* 16px: iOS does not zoom the page on focus */
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.stepper .stepper__input:focus {
    border-color: var(--op-accent-ring);
}

.stepper .stepper__input:disabled {
    background: transparent;
}

.stepper__unit {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* ---- named resources (checklist) ----------------------------------------------------------------------------------------------- */
.checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--s-2);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--control-h);
    padding: var(--s-2) var(--s-3);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    text-align: left;
    font-weight: 600;
}

.check.is-checked {
    border-color: var(--op-accent);
    background: var(--op-accent-soft);
}

.check:disabled {
    opacity: .5;
}

.check__box {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg-card);
}

.check[role="radio"] .check__box {
    border-radius: 50%;
}

.check.is-checked .check__box {
    background: var(--op-accent);
    border-color: var(--op-accent);
    color: var(--op-on-accent);
}

/* ---- time slots (modes 4 and 6) -------------------------------------------------------------------------------------------------- */
.slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--s-2);
}

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 3.5rem;
    padding: var(--s-2);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    font-variant-numeric: tabular-nums;
}

.slot:hover:not(:disabled):not(.is-checked) {
    border-color: var(--op-accent);
}

.slot.is-checked {
    background: var(--op-accent);
    border-color: var(--op-accent);
    color: var(--op-on-accent);
}

.slot.is-full,
.slot:disabled {
    background: var(--bg-muted);
    color: var(--ink-faint);
    border-style: dashed;
}

.slot__time {
    font-weight: 700;
}

.slot__avail {
    font-size: var(--fs-xs);
    font-weight: 600;
}

.slot__avail--green { color: var(--success); }
.slot__avail--yellow { color: var(--warning); }
.slot__avail--red { color: var(--danger); }
.slot__avail--gray { color: var(--ink-faint); }

.slot.is-checked .slot__avail {
    color: inherit;
}

/* ---- offers (event categories) ------------------------------------------------------------------------------------------------------- */
.offers {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.offer {
    display: flex;
    flex-direction: column;
    justify-content: center; /* as high as a button of the persons, its content in the middle */
    gap: var(--s-2);
    width: 100%;
    min-height: 3.75rem;
    padding: var(--s-3) var(--s-4);
    border: 2px solid var(--line-strong);
    border-left: 5px solid var(--category-color, var(--op-accent));
    border-radius: var(--r-md);
    /* the colour of the category as on the page of the categories (--category-color, js/components/search-view.js; the
       accent without one) */
    background: linear-gradient(135deg, color-mix(in srgb, var(--category-color, var(--op-accent)) 7%, var(--bg-card)) 0%, var(--bg-card) 65%);
    text-align: left;
    cursor: pointer;
}

.offer:hover:not(.is-disabled):not(.is-checked) {
    border-color: var(--op-accent);
    border-left-color: var(--category-color, var(--op-accent));
}

.offer.is-checked {
    border-color: var(--op-accent);
    border-left-color: var(--category-color, var(--op-accent));
    background: var(--op-accent-soft);
}

/* the categories that do not fit the selection: behind a small link below the ones to choose (as "Zurück"), one compact
   list - a row per category with its name and, beside or below it, the conditions the selection misses; without a category
   that fits at once, under one sentence */
.offers__more {
    margin: var(--s-2) 0 0 calc(var(--s-2) * -1);
    text-decoration: none;
}

.offers__more:hover .text {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.offers__chevron {
    transition: transform var(--t) var(--ease);
}

.offers__more[aria-expanded="true"] .offers__chevron {
    transform: rotate(180deg);
}

.offers__more + .offers-off {
    margin-top: var(--s-1);
}

.offers-off[hidden] {
    display: none;
}

.offers__note {
    margin: 0 0 var(--s-1);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.offers-off {
    margin: 0;
    padding: 0;
    overflow: hidden; /* the stripes of the rows follow the round corners */
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    list-style: none;
}

.offer-off {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-left: 4px solid var(--category-color, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--category-color, transparent) 6%, transparent) 0%, transparent 65%);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

.offer-off + .offer-off {
    border-top: 1px solid var(--line);
}

.offer-off__name {
    flex: 0 1 auto;
    font-size: var(--fs-sm);
    font-weight: 650;
}

.offer-off__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-off__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}

.offer-off__facts li.is-warn {
    color: var(--danger);
    font-weight: 600;
}

.offer-off__facts svg {
    flex: none;
}

.offer__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.offer__radio {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-card);
}

.offer.is-checked .offer__radio {
    border-color: var(--op-accent);
    background: radial-gradient(circle, var(--op-accent) 0 45%, var(--bg-card) 50%);
}

.offer__name {
    font-weight: 700;
}

.offer__desc {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

.offer__desc img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

.offer__facts {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.offer__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}

.offer__facts li.is-warn {
    color: var(--danger);
    font-weight: 650;
}


/* ---- comment ----------------------------------------------------------------------------------------------------------------------------- */
.sv__more summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2);
    cursor: pointer;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    list-style: none;
}

.sv__more summary::-webkit-details-marker {
    display: none;
}

.sv__more[open] summary svg {
    transform: rotate(180deg);
}

.sv__more textarea {
    margin-top: var(--s-2);
}

.sv__more summary[hidden] + textarea {
    margin-top: 0;
}

/* ---- calendar -------------------------------------------------------------------------------------------------------------------------------- */
.cal {
    max-width: 50rem;
}

.cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

.cal__title {
    font-weight: 650;
    text-transform: capitalize;
}

.cal__nav {
    display: grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.cal__nav:disabled {
    opacity: .35;
}

.cal__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

.cal__grid th {
    padding: var(--s-1) 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: capitalize;
}

.cal__grid td {
    padding: 0;
    text-align: center;
}

.cal__day {
    width: 100%;
    aspect-ratio: 1.5;
    min-height: var(--control-h); /* as high as the buttons of the times: a touch target of 48px also on a phone */
    border: 0;
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--t) var(--ease);

    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.cal__day:hover:not(.is-unavailable):not(.is-selected) {
    background: var(--op-accent-soft);
}

.cal__day.is-outside {
    color: var(--ink-faint);
    font-weight: 400;
    border: 2px solid var(--bg-subtle);
}

.cal__day.is-today {
    box-shadow: inset 0 0 0 2px var(--op-accent-soft-border);
    border: 2px solid var(--op-accent-soft-border);
}

.cal__day.is-unavailable {
    --cross-color: color-mix(in srgb, var(--line-strong) 30%, transparent);

    color: var(--cross-color);
    font-weight: 400;
    cursor: default;

    background-color: var(--bg-subtle);
    background-image:
        linear-gradient(
            45deg,
            transparent calc(50% - 0.5px),
            var(--cross-color) 50%,
            transparent calc(50% + 0.5px)
        ),
        linear-gradient(
            -45deg,
            transparent calc(50% - 0.5px),
            var(--cross-color) 50%,
            transparent calc(50% + 0.5px)
        );

    border: 1px solid transparent;
}

/*.cal__day.is-unavailable:hover {
    background: var(--bg-subtle);
}*/

.cal__day.is-selected {
    background: var(--op-accent);
    color: var(--op-on-accent);
    box-shadow: none;
}

:root[data-input="keyboard"] .cal__day:focus-visible {
    box-shadow: var(--focus);
}

/* days in demand (utilization hint): a small dot under the number, quiet enough not to look like a warning */
.cal__day.is-demand {
    position: relative;
}

.cal__day.is-demand::after,
.cal__legend-dot {
    content: "";
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--op-accent);
}

.cal__day.is-demand::after {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
}

.cal__day.is-demand.is-selected::after {
    background: var(--op-on-accent);
}

.cal__legend {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.cal__legend-dot {
    display: inline-block;
    flex: none;
}

/* ---- demand at the chosen time (utilization hint) ----------------------------------------------------------------------------------- */
.demand {
    display: grid;
    gap: var(--s-2);
    margin: 0 0 var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.demand__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.demand__bar {
    position: relative;
    height: .5rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    box-shadow: inset 0 0 0 1px var(--line);
}

.demand__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--demand, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #3aa76d, #e2b23c 60%, #d9534f);
    background-size: calc(100% / max(var(--demand-ratio, 1), .05)) 100%;
    transition: width .5s var(--ease);
}

.demand__text {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.demand--high .demand__text,
.demand--full .demand__text {
    color: var(--danger);
}

.cal__empty {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* ---- summary + call to action ------------------------------------------------------------------------------------------------------------------ */
/* the bar of the search (line, space and edges: .page-nav in components.css) stays at the bottom of the window while the
   form is longer */
.sv__cta {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bg-card);
    box-shadow: 0 -8px 16px -12px rgba(16, 24, 40, .25);
    text-align: left;
}

.sv__ctabuttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.sv__ctabuttons .btn {
    flex: 1 1 14rem;
}

#checkForOptions.is-incomplete {
    background: var(--bg-muted);
    border-color: var(--line-strong);
    color: var(--ink);
}

/* ---- follow-up screens (advertisement, extra form, lane options, "no slot") -------------------------------------------------------- */
.adv__text {
    flex: 1 1 auto;
    min-width: 0;
}

.xf__title {
    margin-bottom: var(--s-3);
}

.xf {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    text-align: left;
}

.xf__label {
    display: block;
    margin-bottom: var(--s-1);
    font-weight: 650;
}

.xf__req {
    color: var(--danger);
}

.xf__check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    cursor: pointer;
}

.xf__desc,
.sfDescription {
    margin-top: var(--s-1);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.xf__field .field {
    margin-bottom: 0;
}

.lm {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    text-align: left;
}

.lm__option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
}

.lm__option:has(input:checked) {
    border-color: var(--op-accent);
    background: var(--op-accent-soft);
}

.lm__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.lm__desc {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.unavail {
    text-align: center;
}

.unavail__icon {
    color: var(--warning);
}

.unavail__lead {
    margin: var(--s-2) 0 var(--s-4);
}

.unavail__times {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}

.unavail__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.unavail__current {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-muted);
}

.unavail__label {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.alt-time {
    min-width: 6rem;
    width: auto;
}

@media (max-width: 26rem) {
    .stepper {
        display: flex;
        flex: 1 1 auto;
    }

    .stepper__btn {
        width: 2.75rem;
    }

    .stepper__value {
        flex: 1;
        min-width: 0;
        padding: 0 var(--s-2);
    }
}

/* The card is a div with role="radio": it needs what a button brought along. */
.offer:not(.is-disabled) {
    cursor: pointer;
}


/* ---- updating lists (skeleton) ---------------------------------------------------------------------------------------- */
/* While an answer is on its way the sections whose lists depend on the change keep their size (no layout jump) but show a
   quiet placeholder instead of the old times or categories. The swap waits a moment, so fast answers never flicker. */
.sv__body {
    position: relative;
}

.sv__card.is-pending .sv__body {
    min-height: 2.75rem;
}

.sv__card.is-pending .sv__body > * {
    visibility: hidden;
    transition: visibility 0s linear 140ms;
}

.sv__card.is-pending .sv__body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--line) 45%, var(--bg-subtle) 90%);
    background-size: 220% 100%;
    opacity: 0;
    animation: sv-pending-in var(--t) var(--ease) 140ms forwards, sv-shimmer 1.3s linear 140ms infinite;
    pointer-events: none;
}

@keyframes sv-pending-in {
    to { opacity: .55; }
}

@keyframes sv-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sv__card.is-pending .sv__body::after {
        animation: sv-pending-in 1ms linear 140ms forwards;
    }
}

/* ---- "Ihre Auswahl": beside the search card on wide screens (from 76rem), not shown on narrow ones -------------------------- */
.sv__aside {
    display: none;
}

/* "Ihre Auswahl" is for the standalone page; in a frame (widget) the site around it has no room for a column beside the card */
html.is-widget .sv__aside,
html.is-framed .sv__aside {
    display: none !important;
}

@media (min-width: 76rem) {
    /* the column right of the card; the card itself keeps its width (#main is the frame of the column, so the overflow of
       the card does not cut it off) */
    html[data-page="search"] #main {
        position: relative;
    }

    .sv__aside {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% + var(--s-5));
        display: block;
        width: 16rem;
    }

    /* only once something is chosen: it slides in from the right */
    .sv__summarybox {
        position: sticky;
        top: var(--s-4);
        padding: var(--s-4);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        opacity: 0;
        visibility: hidden;
        transform: translateX(1.5rem);
        transition: opacity 280ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
    }

    .sv__aside.has-selection .sv__summarybox {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 280ms var(--ease), transform 320ms var(--ease), visibility 0s;
    }

    .sv__summarytitle {
        margin: 0 0 var(--s-3);
        color: var(--ink-muted);
        font-size: var(--fs-xs);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .sv__summary {
        display: grid;
        gap: var(--s-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sv__summary li {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        color: var(--ink);
        font-weight: 600;
    }

    .sv__summary li svg {
        flex: none;
        color: var(--op-accent-ink);
    }

    .sv__summary .sv__summary-empty {
        color: var(--ink-muted);
        font-weight: 400;
    }
}

@media (min-width: 76rem) and (prefers-reduced-motion: reduce) {
    .sv__summarybox,
    .sv__aside.has-selection .sv__summarybox {
        transform: none;
        transition: none;
    }
}