/* base.css — the platform's half of every CSS-only theme's stylesheet (docs/COMPONENTS.md).
   It is what an unstyled component looks like: a reset, the tone system, a tidy neutral default
   for the frame and every type in the catalogue. Deliberately plain, so that a theme's work is
   visible and a missing one is too. The theme's own stylesheet is appended after this file; it
   overrides by using the same single-class selectors, which win by order. */

:root {
    --base-background: #ffffff;
    --base-foreground: #1c1f24;
    --base-card: #ffffff;
    --base-card-foreground: #1c1f24;
    --base-primary: #1f4e79;
    --base-primary-foreground: #ffffff;
    --base-secondary: #eef2f6;
    --base-secondary-foreground: #1c1f24;
    --base-muted: #f3f4f6;
    --base-muted-foreground: #5b6470;
    --base-border: #d9dee5;
    --imagery-tint: 0;
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-sans);
    --wrap: 80rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --band: clamp(4rem, 8vw, 7rem);
    --radius: 0.75rem;
}

/* Tone system: a [data-tone] band remaps the working colours for its subtree from the immutable
   --base-* copies above. ground = the page itself; tint, dark and accent are the standard bands.
   A theme may add tones of its own (butter, sky, …) by styling [data-tone="name"] the same way. */
body,
[data-tone],
[data-tone='ground'] {
    --background: var(--base-background);
    --foreground: var(--base-foreground);
    --card: var(--base-card);
    --card-foreground: var(--base-card-foreground);
    --primary: var(--base-primary);
    --primary-foreground: var(--base-primary-foreground);
    --secondary: var(--base-secondary);
    --secondary-foreground: var(--base-secondary-foreground);
    --muted: var(--base-muted);
    --muted-foreground: var(--base-muted-foreground);
    --border: var(--base-border);
    background: var(--background);
    color: var(--foreground);
}
[data-tone='tint'] {
    --background: var(--base-secondary);
    --foreground: var(--base-secondary-foreground);
    --card: var(--base-background);
    --card-foreground: var(--base-card-foreground);
    --border: color-mix(in oklab, var(--base-border), var(--base-secondary) 35%);
}
[data-tone='dark'] {
    --background: var(--base-foreground);
    --foreground: var(--base-background);
    --card: color-mix(in oklab, var(--base-foreground) 94%, white);
    --card-foreground: var(--base-background);
    --secondary: color-mix(in oklab, var(--base-foreground) 88%, white);
    --secondary-foreground: var(--base-background);
    --muted: color-mix(in oklab, var(--base-foreground) 90%, white);
    --muted-foreground: color-mix(in oklab, var(--base-background) 72%, var(--base-foreground));
    --border: color-mix(in oklab, var(--base-foreground) 82%, white);
}
[data-tone='accent'] {
    --background: var(--base-primary);
    --foreground: var(--base-primary-foreground);
    --card: color-mix(in oklab, var(--base-primary) 90%, black);
    --card-foreground: var(--base-primary-foreground);
    --muted-foreground: color-mix(in oklab, var(--base-primary-foreground) 78%, var(--base-primary));
    --border: color-mix(in oklab, var(--base-primary-foreground) 30%, var(--base-primary));
    --primary: var(--base-primary-foreground);
    --primary-foreground: var(--base-primary);
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html[data-text-size='large'] {
    font-size: 125%;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: hidden;
    /* Names and words from the facts can be long; nothing may ever push the page sideways. */
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
dl,
dd,
figure,
blockquote {
    margin: 0;
}
ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
table {
    border-collapse: collapse;
    width: 100%;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Shared pieces */
.c-wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    padding: 0.8125rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
.c-button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}
.c-photo {
    position: relative;
    overflow: hidden;
    background: var(--muted);
    border-radius: var(--radius);
}
.c-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-photo__tint {
    position: absolute;
    inset: 0;
    background: var(--primary);
    opacity: var(--imagery-tint, 0);
    mix-blend-mode: color;
    pointer-events: none;
}
.c-hero__eyebrow,
.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-services__eyebrow,
.c-pacePicker__eyebrow,
.c-quiz__eyebrow,
.c-schedule__eyebrow,
.c-faq__eyebrow,
.c-dayPlan__eyebrow,
.c-gallery__eyebrow,
.c-statement__eyebrow,
.c-routeMap__eyebrow,
.c-form__intro-eyebrow,
.c-legal-title__eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}
.c-hero__heading,
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-form__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-statement__heading,
.c-routeMap__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-statement__heading,
.c-routeMap__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-size: clamp(1.75rem, 3.3vw, 3rem);
}
.c-steps__lead,
.c-prices__lead,
.c-team__lead,
.c-contact__text,
.c-services__lead,
.c-pacePicker__lead,
.c-quiz__lead,
.c-schedule__lead,
.c-faq__lead,
.c-dayPlan__lead,
.c-gallery__lead,
.c-routeMap__lead,
.c-form__intro-text {
    margin-top: 1.25rem;
    max-width: 40rem;
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

/* Frame */
.c-strip {
    font-size: 0.8125rem;
    font-weight: 600;
}
.c-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.625rem;
}
.c-strip__places,
.c-strip__hours {
    display: none;
}
.c-strip__phone {
    margin-left: auto;
    text-decoration: none;
}
.c-strip__whatsapp {
    opacity: 0.7;
}
@media (min-width: 768px) {
    .c-strip__places {
        display: block;
    }
    .c-strip__phone {
        margin-left: 0;
    }
}
@media (min-width: 1024px) {
    .c-strip__hours {
        display: block;
    }
}
.c-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: 1.25rem;
}
.c-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.c-header__mark {
    display: none;
}
.c-header__tagline {
    display: none;
    margin-left: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
@media (min-width: 768px) {
    .c-header__tagline {
        display: inline;
    }
}
/* The phone as the header's button: off unless a theme shows it (and hides __cta). */
.c-header__phone {
    display: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}
.c-header__toggle {
    font-weight: 700;
    margin-left: auto;
}
.c-header__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.c-header {
    position: relative;
}
.c-header[data-open] .c-header__nav {
    display: flex;
}
.c-header__link {
    text-decoration: none;
}
.c-header__textsize {
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
}
.c-header__cta {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}
@media (min-width: 1024px) {
    .c-header__toggle {
        display: none;
    }
    .c-header__nav {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 2rem;
        padding: 0;
        background: none;
        border: 0;
    }
}
.c-footer {
    padding-top: var(--band);
}
.c-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 3rem;
}
.c-footer__signoff {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.05;
}
.c-footer__owner {
    max-width: 28rem;
    color: var(--muted-foreground);
}
.c-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2.5rem;
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}
.c-footer__nav a {
    text-decoration: none;
}

/* Legal pages */
.c-legal-title .c-wrap {
    padding-block: 1rem 3.5rem;
}
.c-legal {
    padding-block: var(--band);
}
.c-legal__text {
    max-width: 46rem;
    overflow-wrap: break-word;
    hyphens: auto;
}
.c-legal__text h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 2.75rem;
}
.c-legal__text h2:first-child {
    margin-top: 0;
}
.c-legal__text h3,
.c-legal__text h4 {
    font-weight: 800;
    font-size: 1.0625rem;
    margin-top: 2rem;
}
.c-legal__text p,
.c-legal__text ul,
.c-legal__text ol {
    margin-top: 0.875rem;
    line-height: 1.7;
}
.c-legal__text ul,
.c-legal__text ol {
    padding-left: 1.375rem;
}
.c-legal__text ul {
    list-style: disc;
}
.c-legal__text ol {
    list-style: decimal;
}
.c-legal__text li + li {
    margin-top: 0.375rem;
}
.c-legal__text a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.c-legal__source {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Components: bands */
.c-hero,
.c-numbers,
.c-steps,
.c-prices,
.c-team,
.c-reviews,
.c-contact,
.c-form,
.c-services,
.c-pacePicker,
.c-quiz,
.c-schedule,
.c-faq,
.c-dayPlan,
.c-gallery,
.c-statement,
.c-routeMap {
    padding-block: var(--band);
}

/* hero */
.c-hero__inner {
    display: grid;
    gap: 3rem;
    align-items: center;
}
.c-hero__heading {
    font-size: clamp(2.375rem, 5.3vw, 5rem);
}
.c-hero__line {
    display: block;
}
.c-hero__mark {
    color: var(--primary);
}
.c-hero__lead {
    margin-top: 1.75rem;
    max-width: 36rem;
    font-size: 1.25rem;
}
.c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.c-hero__media {
    position: relative;
}
.c-hero__photo {
    aspect-ratio: 4 / 3;
}
.c-hero__badge {
    position: absolute;
    right: 1rem;
    bottom: -1rem;
    max-width: calc(100% - 2rem);
    display: grid;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    font-weight: 700;
    line-height: 1.2;
    font-size: 0.9375rem;
}
.c-hero__note {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-hero__chip {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: min(16rem, calc(100% - 2rem));
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    font-size: 0.9375rem;
    line-height: 1.35;
}
.c-hero__badge-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
}
.c-hero__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-top: 2rem;
}
.c-hero__number {
    max-width: 16rem;
}
.c-hero__number-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
}
.c-hero__number-label {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-hero__number-detail {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-hero__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}
.c-hero__caption-mark {
    font-weight: 700;
    color: var(--foreground);
}
.c-hero__phone {
    align-self: center;
    font-weight: 600;
}
.c-hero__phone-number {
    font-weight: 700;
    white-space: nowrap;
}
/* The course pick: a card of radios that belong to the sign-up form (data.courses). */
.c-hero__courses {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-hero__picks {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}
.c-hero__legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-hero__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.c-hero__pick:has(:checked) {
    border-color: var(--primary);
}
.c-hero__pick-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--primary);
}
.c-hero__pick-when {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-hero__pick-what {
    display: block;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}
.c-hero__pick-seats {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}
.c-hero__courses-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.c-hero__courses-note {
    color: var(--muted-foreground);
}
.c-hero__courses-mark {
    font-weight: 700;
    color: var(--card-foreground);
}
@media (min-width: 1024px) {
    .c-hero__inner {
        grid-template-columns: 7fr 5fr;
    }
}

/* numbers */
.c-numbers__head {
    margin-bottom: 3rem;
}
.c-numbers__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
}
.c-numbers__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    /* A number is one token: "12.345" or "99,9 %" never breaks, the grid shrinks instead. */
    white-space: nowrap;
    hyphens: none;
}
.c-numbers__unit {
    font-size: 0.5em;
    margin-left: 0.15em;
}
.c-numbers__label,
.c-numbers__detail {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-numbers__item:has(.c-numbers__detail) .c-numbers__label {
    display: none;
}
@media (min-width: 1024px) {
    .c-numbers__items {
        grid-template-columns: repeat(var(--count, 4), 1fr);
    }
    .c-numbers__items[data-count='2'] {
        --count: 2;
    }
    .c-numbers__items[data-count='3'] {
        --count: 3;
    }
}

/* steps */
.c-steps__items {
    display: grid;
    gap: 2rem;
    margin-top: 3.5rem;
    counter-reset: step;
}
.c-steps__item {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-steps__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.c-steps__index {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
}
.c-steps__when {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.c-steps__photo {
    margin-top: 1.25rem;
    aspect-ratio: 4 / 3;
}
.c-steps__title {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.c-steps__text {
    margin-top: 0.75rem;
}
@media (min-width: 640px) {
    .c-steps__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-steps__items {
        grid-template-columns: repeat(var(--count, 4), 1fr);
    }
    .c-steps__items[data-count='2'] {
        --count: 2;
    }
    .c-steps__items[data-count='3'] {
        --count: 3;
    }
    .c-steps__items[data-count='5'] {
        --count: 5;
    }
}

/* steps in two titled columns (what you do, what we do) */
.c-steps__columns {
    display: grid;
    gap: 3rem;
    margin-top: 3.5rem;
}
.c-steps__column-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
}
.c-steps__column .c-steps__items {
    margin-top: 1.25rem;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1024px) {
    .c-steps__columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* prices */
.c-prices__inner {
    display: grid;
    gap: 3rem;
}
.c-prices__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 3;
    max-width: 28rem;
}
.c-prices__table {
    font-size: 1.125rem;
    text-align: left;
}
.c-prices__caption {
    margin-bottom: 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-prices__row {
    border-top: 1px solid var(--border);
}
.c-prices__row:last-child {
    border-bottom: 1px solid var(--border);
}
.c-prices__item {
    padding: 1rem 1.5rem 1rem 0;
    font-weight: 600;
}
.c-prices__unit {
    display: block;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--muted-foreground);
}
.c-prices__price {
    padding-block: 1rem;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 700;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__typical {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-prices__typical-label {
    font-weight: 700;
    line-height: 1.3;
}
.c-prices__typical-note {
    display: block;
    font-weight: 500;
}
.c-prices__typical-total {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__note {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
/* The calculator: the controls need the platform script, which marks the band data-live. */
.c-prices__calc {
    display: none;
    margin-top: 2.5rem;
}
.c-prices[data-live] .c-prices__calc {
    display: grid;
    gap: 1rem;
}
.c-prices__calc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.c-prices__calc-label {
    font-weight: 700;
}
.c-prices__calc-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}
.c-prices__calc-rate {
    color: var(--muted-foreground);
    white-space: nowrap;
}
.c-prices__calc-range {
    width: 100%;
    accent-color: var(--primary);
}
.c-prices__calc-scale {
    position: relative;
    height: 1.25rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}
.c-prices__calc-scale > * {
    position: absolute;
    left: calc(var(--at, 0) * 100%);
    translate: calc(var(--at, 0) * -100%);
    white-space: nowrap;
}
.c-prices__calc-mark {
    font-weight: 700;
    color: var(--foreground);
}
.c-prices__calc-typical {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-prices__calc-extra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-top: 0.5rem;
    cursor: pointer;
}
.c-prices__calc-switch {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.2rem 0 0;
    accent-color: var(--primary);
}
.c-prices__calc-extra-label {
    font-weight: 700;
}
.c-prices__calc-extra-note,
.c-prices__calc-extra-price {
    display: block;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-prices__result {
    margin-bottom: 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-prices__result-label {
    font-weight: 700;
}
.c-prices__calc-total {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__result .c-prices__calc-total {
    display: block;
    margin-top: 0.5rem;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
}
.c-prices__result-split {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
}
.c-prices__live-times {
    font-weight: 400;
    white-space: nowrap;
}
.c-prices__sum {
    border-top: 2px solid var(--foreground);
}
@media (min-width: 1024px) {
    .c-prices__inner {
        grid-template-columns: 5fr 6fr;
        gap: 2.5rem 5rem;
    }
}

/* team */
.c-team__items {
    display: grid;
    gap: 2.5rem;
    margin-top: 3.5rem;
}
.c-team__photo {
    aspect-ratio: 9 / 11;
}
.c-team__media {
    position: relative;
}
.c-team__initial {
    display: grid;
    place-items: center;
    aspect-ratio: 9 / 11;
    border-radius: var(--radius);
    background: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 5rem;
    color: var(--muted-foreground);
}
.c-team__name {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.c-team__role {
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-team__quote {
    margin-top: 0.75rem;
}
@media (min-width: 640px) {
    .c-team__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-team__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* reviews */
.c-reviews__inner {
    display: grid;
    gap: 3rem;
}
.c-reviews__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 5;
    max-width: 20rem;
}
.c-reviews__rating {
    margin-top: 2.5rem;
    max-width: 20rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-reviews__rating-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
}
.c-reviews__rating-of {
    font-size: 1.25rem;
    color: var(--muted-foreground);
}
.c-reviews__rating-count {
    margin-top: 0.5rem;
    font-weight: 700;
}
.c-reviews__rating-date {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-reviews__rating-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
}
.c-reviews__items {
    display: grid;
    gap: 1.75rem;
}
.c-reviews__item {
    padding: 1.75rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-reviews__quote {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.c-reviews__who {
    margin-top: 1.25rem;
    font-weight: 700;
    color: var(--muted-foreground);
}
.c-reviews__disclosure {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
@media (min-width: 1024px) {
    .c-reviews__inner {
        grid-template-columns: 4fr 7fr;
        gap: 2.5rem 5rem;
    }
}

/* beat */
.c-beat__photo {
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
@media (min-width: 640px) {
    .c-beat__photo {
        aspect-ratio: 2400 / 1030;
    }
}

/* contact */
.c-contact__inner {
    display: grid;
    gap: 3rem;
}
.c-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.c-contact__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 3;
    max-width: 28rem;
}
.c-contact__places {
    display: grid;
    gap: 1.5rem;
}
.c-contact__place {
    border-top: 2px solid var(--foreground);
    padding-top: 1.25rem;
}
.c-contact__place-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
}
.c-contact__email {
    align-self: center;
    font-weight: 700;
}
/* Each place's own phone: off unless a theme shows it (the actions carry the first one). */
.c-contact__place-phone {
    display: none;
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-contact__address,
.c-contact__hours {
    margin-top: 0.75rem;
    font-weight: 500;
}
@media (min-width: 640px) {
    .c-contact__places {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-contact__inner {
        grid-template-columns: 6fr 5fr;
        gap: 2.5rem 5rem;
    }
}

/* services */
.c-services__body {
    display: grid;
    gap: 3rem;
    margin-top: 3.5rem;
    align-items: start;
}
.c-services__photo {
    aspect-ratio: 5 / 6;
    max-width: 26rem;
}
.c-services__caption {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-services__items {
    display: grid;
    gap: 1.5rem;
}
.c-services__item {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-services__item-photo {
    aspect-ratio: 1;
    margin-bottom: 1.25rem;
}
.c-services__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3em;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}
/* the figure is one token; the words after it may wrap */
.c-services__number {
    white-space: nowrap;
}
.c-services__unit {
    min-width: 0;
    font-size: 0.5em;
    overflow-wrap: anywhere;
}
.c-services__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.25;
}
.c-services__text {
    margin-top: 0.75rem;
}
.c-services__price {
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-services__note {
    margin-top: 1.5rem;
    max-width: 40rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-services__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-services__body:has(.c-services__figure) {
        grid-template-columns: 2fr 3fr;
    }
}

/* pacePicker: every pace's answer is in the page; the checked radio shows its own. */
.c-pacePicker__picker {
    margin-top: 3rem;
}
.c-pacePicker__choices {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}
.c-pacePicker__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.c-pacePicker__choice {
    position: relative;
}
.c-pacePicker__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-pacePicker__choice span {
    display: block;
    cursor: pointer;
    padding: 0.625rem 1.25rem;
    border-radius: calc(var(--radius) - 0.25rem);
    font-weight: 700;
}
.c-pacePicker__choice input:checked + span {
    background: var(--foreground);
    color: var(--background);
}
.c-pacePicker__choice input:focus-visible + span {
    outline: 3px solid var(--foreground);
    outline-offset: 2px;
}
.c-pacePicker__result {
    display: none;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-pacePicker__picker:has(input[value='1']:checked) .c-pacePicker__result[data-i='1'],
.c-pacePicker__picker:has(input[value='2']:checked) .c-pacePicker__result[data-i='2'],
.c-pacePicker__picker:has(input[value='3']:checked) .c-pacePicker__result[data-i='3'],
.c-pacePicker__picker:has(input[value='4']:checked) .c-pacePicker__result[data-i='4'] {
    display: grid;
}
.c-pacePicker__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-pacePicker__weeks {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
}
.c-pacePicker__note,
.c-pacePicker__days-text,
.c-pacePicker__first {
    margin-top: 0.75rem;
    color: var(--muted-foreground);
}
.c-pacePicker__days {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.c-pacePicker__day {
    min-width: 2.25rem;
    padding: 0.25rem 0.375rem;
    border-radius: calc(var(--radius) - 0.25rem);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    background: var(--muted);
}
.c-pacePicker__day[data-on='true'] {
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-pacePicker__lessons,
.c-pacePicker__place {
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-pacePicker__footnote {
    margin-top: 2rem;
    max-width: 44rem;
    color: var(--muted-foreground);
}
@media (min-width: 1024px) {
    .c-pacePicker__result {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* form */
.c-form__intro {
    margin-bottom: 3rem;
}
.c-form__form {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-form__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 2.5rem;
}
.c-form__heading {
    font-size: 1.5rem;
}
.c-form__note {
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-form__fields {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.75rem;
    align-items: end;
}
.c-form__field label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--foreground);
    padding: 0.75rem 0.9375rem;
    font: inherit;
    font-weight: 600;
    appearance: none;
}
.c-form__field select {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 6px 6px;
    background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}
/* The honeypot: a field no person sees or tabs into; a bot that fills every field trips it. */
.c-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.c-form__info {
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-weight: 600;
}
.c-form__error {
    margin-top: 1rem;
    font-weight: 700;
    color: #b42318;
}
.c-form__status {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: 1.125rem;
    font-weight: 700;
}
.c-form__privacy {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.c-form__privacy a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (min-width: 640px) {
    .c-form__fields {
        grid-template-columns: repeat(2, 1fr);
    }
    .c-form__field--message,
    .c-form__button {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1024px) {
    .c-form__fields {
        grid-template-columns: repeat(var(--count, 4), 1fr) auto;
    }
    .c-form__fields[data-count='2'] {
        --count: 2;
    }
    .c-form__fields[data-count='3'] {
        --count: 3;
    }
    .c-form__fields[data-count='5'] {
        --count: 5;
    }
    .c-form__fields[data-count='6'] {
        --count: 6;
    }
    .c-form__button {
        grid-column: auto;
    }
    .c-form__fields:has(.c-form__field--message) .c-form__button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* The words of a quiz, a schedule and a FAQ come from the site and may be one long German
   compound: they break anywhere rather than push the page sideways. */
.c-quiz__inner > *,
.c-quiz__ask > *,
.c-schedule__inner > *,
.c-faq__inner > * {
    min-width: 0;
}
.c-quiz__question,
.c-quiz__answer-text,
.c-quiz__why,
.c-schedule__what,
.c-faq__question,
.c-faq__answer {
    overflow-wrap: anywhere;
}

/* quiz: every question is in the page and one shows at a time; answering reveals the right
   answer and why, the "next" radio moves on, the score is a counter over the checked right
   answers. A question not shown is hidden by visibility, which keeps its answers counted (an
   element without a box increments no counter). */
.c-quiz__inner {
    display: grid;
    gap: 3rem;
    align-items: start;
}
.c-quiz__facts {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
    max-width: 30rem;
}
.c-quiz__fact {
    display: flex;
    gap: 1rem;
}
.c-quiz__fact-value {
    min-width: 3.5rem;
    font-weight: 700;
}
.c-quiz__card {
    display: grid;
    counter-reset: quiz-right;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-quiz__q,
.c-quiz__result {
    grid-area: 1 / 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
}
.c-quiz__card:not(:has(.c-quiz__go:checked)) > [data-i='1'],
.c-quiz__card:has(.c-quiz__go[value='2']:checked) > [data-i='2'],
.c-quiz__card:has(.c-quiz__go[value='3']:checked) > [data-i='3'],
.c-quiz__card:has(.c-quiz__go[value='4']:checked) > [data-i='4'],
.c-quiz__card:has(.c-quiz__go[value='5']:checked) > [data-i='5'],
.c-quiz__card:has(.c-quiz__go[value='6']:checked) > [data-i='6'] {
    visibility: visible;
}
.c-quiz__step {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-quiz__tag {
    clear: both;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.c-quiz__ask {
    clear: both;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.25rem;
}
/* A sign keeps its own proportions (a triangle is wider than tall); a photo is square. */
.c-quiz__sign,
.c-quiz__photo {
    flex: none;
    width: clamp(5rem, 12vw, 7.5rem);
    height: auto;
}
.c-quiz__photo {
    aspect-ratio: 1;
}
.c-quiz__question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.2;
}
.c-quiz__answers {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.5rem;
}
.c-quiz__answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
}
.c-quiz__answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-quiz__answer:has(input:focus-visible),
.c-quiz__next:has(input:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
.c-quiz__answer[data-right] input:checked {
    counter-increment: quiz-right;
}
.c-quiz__letter {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--radius) - 0.25rem);
    background: var(--muted);
    color: var(--foreground);
    font-weight: 700;
}
/* Answered: the answers are settled, the right one is marked, a wrong pick too. */
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer {
    pointer-events: none;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer[data-right] {
    border-color: #1a7f37;
    background: color-mix(in oklab, #1a7f37 12%, transparent);
}
.c-quiz__answer:not([data-right]):has(input:checked) {
    border-color: #b42318;
    background: color-mix(in oklab, #b42318 12%, transparent);
}
.c-quiz__reveal {
    display: none;
    margin-top: 1.25rem;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__reveal {
    display: block;
}
.c-quiz__q:has(.c-quiz__answer[data-right] input:checked) .c-quiz__wrong,
.c-quiz__q:has(.c-quiz__answer:not([data-right]) input:checked) .c-quiz__right {
    display: none;
}
.c-quiz__next {
    position: relative;
    margin-top: 1.25rem;
    cursor: pointer;
}
.c-quiz__go {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-quiz__result {
    align-self: center;
}
.c-quiz__score {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.c-quiz__count::before {
    content: counter(quiz-right);
}
/* The tally: per question "richtig" when its right answer is the checked one, else "falsch". */
.c-quiz__tally {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.c-quiz__mark-right {
    display: none;
}
.c-quiz__card:has(> [data-i='1'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='1'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='2'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='2'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='3'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='3'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='4'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='4'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='5'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='5'] .c-quiz__mark-right {
    display: inline;
}
.c-quiz__card:has(> [data-i='1'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='1'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='2'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='2'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='3'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='3'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='4'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='4'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='5'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='5'] .c-quiz__mark-wrong {
    display: none;
}
.c-quiz__result-text {
    margin-top: 0.75rem;
}
.c-quiz__cta {
    margin-top: 1.5rem;
}
@media (min-width: 1024px) {
    .c-quiz__inner {
        grid-template-columns: 5fr 6fr;
        gap: 4rem;
    }
}

/* schedule */
.c-schedule__inner {
    display: grid;
    gap: 2.5rem;
}
.c-schedule__phone {
    margin-top: 2rem;
}
.c-schedule__phone-number {
    font-variant-numeric: tabular-nums;
}
.c-schedule__recurring {
    display: grid;
    gap: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
}
.c-schedule__next {
    font-weight: 600;
}
.c-schedule__title {
    font-weight: 500;
}
.c-schedule__dates {
    border-bottom: 2px solid var(--foreground);
}
.c-schedule__recurring + .c-schedule__dates {
    margin-top: 1.5rem;
}
.c-schedule__date {
    display: grid;
    gap: 0.25rem 2rem;
    padding-block: 1rem;
    border-top: 2px solid var(--foreground);
}
.c-schedule__when {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-schedule__where {
    font-weight: 700;
}
.c-schedule__seats {
    font-size: 0.875rem;
    font-weight: 600;
}
.c-schedule__date[data-full] .c-schedule__seats {
    color: var(--muted-foreground);
}
.c-schedule__note {
    margin-top: 1.25rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-schedule__date {
        grid-template-columns: 11rem 1fr auto;
        align-items: baseline;
    }
}
@media (min-width: 1024px) {
    .c-schedule__inner {
        grid-template-columns: 2fr 3fr;
        gap: 4rem;
    }
}

/* faq: native details, the first one open */
.c-faq__inner {
    display: grid;
    gap: 2.5rem;
}
.c-faq__items {
    border-bottom: 1px solid var(--border);
}
.c-faq__item {
    border-top: 1px solid var(--border);
}
.c-faq__question {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.125rem;
}
.c-faq__question::-webkit-details-marker {
    display: none;
}
.c-faq__question::after {
    content: '+';
    flex: none;
    font-weight: 700;
}
.c-faq__item[open] .c-faq__question::after {
    content: '–';
}
.c-faq__answer {
    max-width: 42rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {
    .c-faq__inner {
        grid-template-columns: 2fr 3fr;
        gap: 4rem;
    }
}

/* dayPlan: the days of a course in a grid, a day off and an exam day marked by data-kind */
.c-dayPlan__days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 3rem;
}
.c-dayPlan__day {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-dayPlan__day[data-kind='rest'] {
    background: transparent;
    color: var(--muted-foreground);
}
.c-dayPlan__day[data-kind='exam'] {
    border-color: var(--primary);
}
.c-dayPlan__date {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-dayPlan__title {
    margin-top: 0.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.c-dayPlan__slots {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}
.c-dayPlan__what {
    overflow-wrap: anywhere;
}
.c-dayPlan__code {
    font-weight: 700;
    text-decoration: none;
}
.c-dayPlan__foot {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-dayPlan__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.c-dayPlan__key {
    display: flex;
    gap: 0.375rem;
}
.c-dayPlan__key-code {
    font-weight: 700;
    color: var(--foreground);
}
@media (min-width: 640px) {
    .c-dayPlan__days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-dayPlan__days {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

/* gallery: photos with a title, a caption and specs each */
.c-gallery__items {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
}
.c-gallery__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.c-gallery__photo {
    aspect-ratio: 4 / 3;
}
.c-gallery__body {
    padding-top: 1.25rem;
}
.c-gallery__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    overflow-wrap: anywhere;
}
.c-gallery__caption {
    margin-top: 0.5rem;
    color: var(--muted-foreground);
}
.c-gallery__specs {
    margin-top: 1rem;
    border-bottom: 1px solid var(--border);
}
.c-gallery__spec {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.9375rem;
}
.c-gallery__spec-label {
    color: var(--muted-foreground);
}
.c-gallery__spec-value {
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}
.c-gallery__note {
    margin-top: 2rem;
    max-width: 48rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-gallery__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-gallery__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .c-gallery__items[data-count='2'],
    .c-gallery__items[data-count='4'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* statement: a heading, one to three paragraphs, a photo with its caption, figures under it */
.c-statement__body {
    display: grid;
    gap: 3rem;
    margin-top: 2.5rem;
    align-items: start;
}
.c-statement__text {
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
}
.c-statement__paragraph[data-i='1'] {
    font-size: 1.25rem;
}
.c-statement__photo {
    aspect-ratio: 7 / 5;
}
.c-statement__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-statement__numbers {
    display: grid;
    gap: 2rem;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.c-statement__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1;
    white-space: nowrap;
    hyphens: none;
}
.c-statement__unit {
    font-size: 0.5em;
    margin-left: 0.15em;
}
.c-statement__label,
.c-statement__detail {
    margin-top: 0.75rem;
    color: var(--muted-foreground);
}
.c-statement__number:has(.c-statement__detail) .c-statement__label {
    display: none;
}
@media (min-width: 640px) {
    .c-statement__numbers {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-statement__body:has(.c-statement__figure) {
        grid-template-columns: 1fr 1fr;
    }
}

/* routeMap: every spot is in the page and the checked radio shows its own; previous and next are
   labels of the neighbouring radios. The drawing has no colours of its own: the road takes the
   foreground, the stretch driven so far the primary colour. One driven path per spot, the checked
   one shown. Without :has every spot is listed and the map shows the whole road. */
.c-routeMap__body {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}
.c-routeMap__body > * {
    min-width: 0;
}
.c-routeMap__map {
    aspect-ratio: 1000 / 640;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
}
.c-routeMap__drawing {
    display: block;
    width: 100%;
    height: 100%;
}
.c-routeMap__feature {
    fill: none;
    stroke: var(--border);
    stroke-width: 2;
}
.c-routeMap__feature[data-kind='area'],
.c-routeMap__feature[data-kind='water'] {
    fill: var(--muted);
    stroke: none;
}
.c-routeMap__feature[data-kind='motorway'] {
    stroke-width: 6;
}
.c-routeMap__feature[data-kind='rail'] {
    stroke-dasharray: 10 6;
}
.c-routeMap__place {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--muted-foreground);
}
.c-routeMap__road-edge,
.c-routeMap__road,
.c-routeMap__driven {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.c-routeMap__road-edge {
    stroke: var(--foreground);
    stroke-width: 16;
}
.c-routeMap__road {
    stroke: var(--card);
    stroke-width: 7;
}
.c-routeMap__driven {
    stroke: var(--primary);
    stroke-width: 7;
    display: none;
}
.c-routeMap__pin {
    --pin: var(--foreground);
}
.c-routeMap__pin-dot {
    fill: var(--pin);
    stroke: var(--card);
    stroke-width: 3;
}
.c-routeMap__pin-n {
    fill: var(--card);
    font-size: 24px;
    font-weight: 700;
}
.c-routeMap[data-live] .c-routeMap__pin {
    cursor: pointer;
}
.c-routeMap__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.c-routeMap__legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-routeMap__pick {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}
.c-routeMap__pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-routeMap__pick-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.c-routeMap__pick:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-routeMap__pick:has(input:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
.c-routeMap__spots {
    display: grid;
    gap: 2.5rem;
}
.c-routeMap__step {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-routeMap__title {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.15;
}
.c-routeMap__text,
.c-routeMap__how {
    margin-top: 0.875rem;
}
.c-routeMap__step,
.c-routeMap__title,
.c-routeMap__text,
.c-routeMap__how {
    overflow-wrap: anywhere;
}
.c-routeMap__how {
    padding-left: 1rem;
    border-left: 3px solid var(--primary);
    color: var(--muted-foreground);
}
.c-routeMap__how-label {
    color: var(--foreground);
}
.c-routeMap__steps {
    display: none;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.c-routeMap__prev,
.c-routeMap__next {
    padding: 0.5rem 1rem;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
}
.c-routeMap__note {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
/* One spot at a time where :has works; the first one before anything is checked. */
.c-routeMap__body:has(.c-routeMap__pick-input:checked) .c-routeMap__spot {
    display: none;
}
.c-routeMap__body:has(.c-routeMap__pick-input:checked) .c-routeMap__steps {
    display: flex;
}
.c-routeMap__body:has(.c-routeMap__pick-input[value='1']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='1'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='2']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='2'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='3']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='3'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='4']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='4'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='5']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='5'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='6']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='6'] {
    display: block;
}
.c-routeMap__body:has(.c-routeMap__pick-input[value='1']:checked) .c-routeMap__pin[data-i='1'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='2']:checked) .c-routeMap__pin[data-i='2'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='3']:checked) .c-routeMap__pin[data-i='3'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='4']:checked) .c-routeMap__pin[data-i='4'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='5']:checked) .c-routeMap__pin[data-i='5'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='6']:checked) .c-routeMap__pin[data-i='6'] {
    --pin: var(--primary);
}
@media (min-width: 1024px) {
    .c-routeMap__body {
        grid-template-columns: 3fr 2fr;
        grid-template-rows: auto auto 1fr auto;
        column-gap: 3rem;
    }
    .c-routeMap__map {
        grid-row: 1 / -1;
    }
}

/* theme */
/* 11 Vorfahrt — signage graphic. The page borrows the German road-sign system wholesale:
   traffic blue, sign white, signal yellow on asphalt (the RAL values of the official artwork);
   Sofia Sans + Sofia Sans Semi Condensed stand in for DIN 1451, the German road-sign typeface.
   The opening is one blue Wegweiser field with the white inset line every German direction sign
   has, drawn once around header and hero, and the original Zeichen 306 standing in it, larger
   than the screen and cut off by its edge (assets/img/z306.svg, the official drawing — never
   redrawn). Further down the licence classes are a direction board, the price list a white
   Zusatzzeichen plate, the quiz sits on asphalt with a centre line, the branches are yellow
   Ortstafeln. Flat colour only, no gradients. Plain CSS over the platform's markup
   (docs/COMPONENTS.md); base.css comes first and this file overrides it. */

@font-face {
    font-family: "Sofia Sans";
    src: url("./fonts/sofia-sans.woff2") format("woff2");
    font-weight: 1 1000;
    font-display: swap;
}
@font-face {
    font-family: "Sofia Sans Semi Condensed";
    src: url("./fonts/sofia-sans-semi-condensed.woff2") format("woff2");
    font-weight: 1 1000;
    font-display: swap;
}

:root {
    --base-background: #f7f8f5;
    --base-foreground: #1b2026;
    --base-card: #ffffff;
    --base-card-foreground: #1b2026;
    --base-primary: #154889;
    --base-primary-foreground: #ffffff;
    --base-secondary: #e3e6e0;
    --base-secondary-foreground: #1b2026;
    --base-muted: #eceee9;
    --base-muted-foreground: #525d68;
    --base-border: #cdd2cd;

    /* The sign colours keep their values in every band. */
    --blue: #154889;
    --signal: #f7ba0b;
    --stop: #c1121c;
    --go: #17784a;
    --ink: #1b2026;
    --pole: #a7aeb3;
    --pole-shade: #8b9398;
    --imagery-tint: 0.1;
    --radius: 6px;
    --font-sans: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Sofia Sans Semi Condensed", "Sofia Sans", ui-sans-serif, sans-serif;
    --wrap: 78rem;
    --band: clamp(4.5rem, 8vw, 7rem);
    /* The white inset line of a German direction sign. */
    --inset: 0.75rem;
    /* How far the hero's sign may reach up: the start page's header, strip excluded. */
    --header-height: 5.75rem;
}

/* Signal yellow: black on yellow like a Bundesstraße board; buttons turn asphalt. */
[data-tone="signal"] {
    --background: var(--signal);
    --foreground: var(--ink);
    --card: #ffffff;
    --card-foreground: var(--ink);
    --muted-foreground: color-mix(in oklab, var(--ink) 80%, var(--signal));
    --border: var(--ink);
    --primary: var(--ink);
    --primary-foreground: var(--signal);
}
/* Asphalt keeps the yellow as its accent. */
[data-tone="dark"] {
    --primary: var(--signal);
    --primary-foreground: var(--ink);
}

/* Type */
html {
    scroll-behavior: smooth;
}
body {
    /* Names and words from the facts can be long; nothing may ever push the page sideways. */
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    counter-reset: band;
}
:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}
.c-hero__heading,
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-form__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-form__intro-heading,
.c-legal-title__heading,
.c-services__title,
.c-quiz__question,
.c-team__name,
.c-footer__signoff,
.c-legal__text h2 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.04;
    text-wrap: balance;
}
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-size: clamp(2rem, 3.9vw, 3.5rem);
}
/* Data lines (prices, dates, numbers, phone numbers): the condensed cut with tabular figures. */
.c-hero__number-value,
.c-hero__phone-number,
.c-numbers__value,
.c-services__price,
.c-prices__price,
.c-prices__caption,
.c-prices__typical-total,
.c-quiz__fact-value,
.c-quiz__step,
.c-quiz__tag,
.c-quiz__letter,
.c-schedule__recurring,
.c-schedule__when,
.c-schedule__where,
.c-schedule__seats,
.c-schedule__phone-number,
.c-contact__hours,
.c-contact__place-phone,
.c-strip,
.c-footer__copy {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Every section label starts with a yellow Bundesstraße number plate, counted down the page. */
.c-hero__eyebrow,
.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-services__eyebrow,
.c-pacePicker__eyebrow,
.c-quiz__eyebrow,
.c-schedule__eyebrow,
.c-faq__eyebrow,
.c-form__intro-eyebrow,
.c-legal-title__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--foreground);
    counter-increment: band;
}
.c-numbers__eyebrow::before,
.c-steps__eyebrow::before,
.c-prices__eyebrow::before,
.c-team__eyebrow::before,
.c-reviews__eyebrow::before,
.c-contact__eyebrow::before,
.c-services__eyebrow::before,
.c-pacePicker__eyebrow::before,
.c-quiz__eyebrow::before,
.c-schedule__eyebrow::before,
.c-faq__eyebrow::before,
.c-form__intro-eyebrow::before {
    content: counter(band, decimal-leading-zero);
    padding: 0.3rem 0.4rem 0.2rem;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--signal);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
[data-tone="dark"] [class*="__eyebrow"]::before,
[data-tone="accent"] [class*="__eyebrow"]::before {
    border-color: var(--signal);
}
.c-steps__lead,
.c-prices__lead,
.c-team__lead,
.c-contact__text,
.c-services__lead,
.c-pacePicker__lead,
.c-quiz__lead,
.c-schedule__lead,
.c-faq__lead,
.c-form__intro-text {
    margin-top: 1.5rem;
    max-width: 32rem;
    font-size: 1.0625rem;
    color: var(--foreground);
}

/* Buttons: a sign plate with a white arrow, never rounded into a pill. */
.c-button {
    gap: 0.625rem;
    padding: 0.95rem 1.35rem 0.8rem;
    border-radius: 6px;
    font-weight: 800;
    line-height: 1.1;
    transition: transform 0.15s;
}
.c-button:hover {
    transform: translateX(3px);
}
.c-button--primary::after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    background: currentColor;
    mask: url("./img/arrow.svg") center / contain no-repeat;
}

/* Photos: the light tint of the old prints, square corners unless a sign shape says otherwise. */
.c-photo {
    border-radius: 0;
}

/* ---------- Frame ---------- */

.c-strip {
    font-size: 0.8125rem;
    font-weight: 600;
}
.c-header__brand {
    gap: 0.75rem;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
}
/* The brand is Zeichen 306 beside the name. */
.c-header__brand::before {
    content: "";
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    background: url("./img/z306.svg") center / contain no-repeat;
}
.c-header__tagline {
    margin-left: 0;
    align-self: flex-end;
    padding-bottom: 0.15rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-header__nav {
    gap: 1.9rem;
    font-size: 0.9375rem;
    font-weight: 700;
}
.c-header__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
/* A blue plate with a white rim, so it stays legible where the hero's sign reaches behind it. */
.c-header__cta {
    padding: 0.7rem 1.1rem 0.6rem;
    border: 2px solid #fff;
    background: var(--blue);
    color: #fff;
}
.c-header__toggle {
    padding: 0.5rem 0.875rem;
    border: 2px solid currentColor;
    border-radius: 6px;
}
.c-header__textsize {
    color: inherit;
}
@media (max-width: 1023px) {
    .c-header__nav {
        border-bottom: 3px solid var(--foreground);
    }
}

/* The start page opens on one blue field: header and hero share the white inset line, drawn
   as the header's top half and the hero's bottom half. */
.c-header[data-page="index"]::before,
.c-hero::before {
    content: "";
    position: absolute;
    left: var(--inset);
    right: var(--inset);
    border: 3px solid #fff;
    pointer-events: none;
    z-index: 0;
}
.c-header[data-page="index"]::before {
    top: var(--inset);
    bottom: 0;
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
}
.c-header[data-page="index"] .c-header__inner {
    position: relative;
    z-index: 3;
    padding-top: 1.75rem;
}
.c-header:not([data-page="index"]) {
    border-bottom: 3px solid #fff;
}

.c-footer__signoff {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
}
.c-footer__signoff::before {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    background: url("./img/z306.svg") center / contain no-repeat;
}
.c-footer__nav a {
    font-weight: 700;
}
.c-footer__nav a:hover {
    color: var(--signal);
}

/* ---------- Hero: the sign ---------- */

/* The sign reaches up behind the header (same blue), never below the hero or past its sides. */
.c-hero {
    position: relative;
    overflow-x: clip;
    clip-path: inset(calc(-1 * var(--header-height)) 0 0 0);
    isolation: isolate;
    display: flex;
    min-height: min(calc(100svh - 6rem), 50rem);
    padding-block: clamp(3rem, 8vh, 6rem) clamp(3rem, 7vh, 5rem);
}
.c-hero::before {
    top: 0;
    bottom: var(--inset);
    z-index: -2;
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
}
/* Zeichen 306, larger than the screen: the original drawing, cut off by the field's edge. */
.c-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: clamp(40rem, 84vw, 78rem);
    aspect-ratio: 1;
    right: calc(clamp(40rem, 84vw, 78rem) * -0.37);
    top: 50%;
    translate: 0 -48%;
    background: url("./img/z306.svg") center / contain no-repeat;
    filter: drop-shadow(0 1.5rem 3rem rgb(0 0 0 / 0.22));
}
.c-hero__inner {
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.c-hero__text {
    position: relative;
    z-index: 1;
    max-width: 40rem;
}
.c-hero__eyebrow {
    margin-bottom: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--foreground);
    opacity: 0.88;
}
.c-hero__heading {
    hyphens: manual;
    font-size: clamp(3.6rem, 8.6vw, 8.4rem);
    line-height: 0.94;
    letter-spacing: -0.012em;
}
.c-hero__mark {
    color: var(--signal);
}
.c-hero__lead {
    margin-top: 1.75rem;
    max-width: 34rem;
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--foreground);
}
/* The proof under the heading: our rate in yellow against the country's in white. */
.c-hero__numbers {
    gap: 1.5rem 2.5rem;
    margin-top: 2.25rem;
    padding-top: 1.4rem;
    border-top: 3px solid #fff;
    max-width: 36rem;
}
.c-hero__number {
    flex: 1 1 10rem;
    max-width: none;
}
.c-hero__number-value {
    font-size: clamp(2.4rem, 4vw, 3rem);
    font-weight: 800;
}
.c-hero__number[data-i="1"] .c-hero__number-value {
    color: var(--signal);
}
.c-hero__number-label {
    hyphens: manual;
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--foreground);
    opacity: 0.86;
}
.c-hero__actions {
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2.25rem;
}
.c-hero__cta-secondary {
    color: var(--foreground);
}
.c-hero__phone {
    text-decoration: none;
    opacity: 0.92;
}
.c-hero__phone-number {
    font-size: 1.125rem;
}
.c-hero__note {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--foreground);
    opacity: 0.72;
}
/* A school's own photo: a mandatory-sign circle on the field, beside the big sign. */
.c-hero__media {
    position: absolute;
    z-index: 0;
    right: clamp(2rem, 6vw, 6rem);
    bottom: clamp(2.5rem, 6vh, 4.5rem);
    width: clamp(10rem, 22vw, 20rem);
}
.c-hero__photo {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.75rem solid var(--blue);
    outline: 3px solid #fff;
}
.c-hero__badge,
.c-hero__chip {
    left: auto;
    right: 0;
    bottom: -1rem;
    border: 3px solid var(--ink);
    border-radius: 6px;
    background: var(--signal);
    color: var(--ink);
}
.c-hero__chip {
    right: auto;
    left: -2rem;
    background: #fff;
}
@media (max-width: 1023px) {
    .c-hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 2rem;
        width: min(60%, 14rem);
    }
    .c-hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 699px) {
    :root {
        --inset: 0.5rem;
        --header-height: 5.25rem;
    }
    .c-hero {
        min-height: calc(100svh - 5rem);
        padding-top: 14rem;
    }
    /* On the phone the sign's left half hangs in from the top right. */
    .c-hero::after {
        width: 30rem;
        right: -14rem;
        top: -13.5rem;
        translate: none;
    }
    /* The hero's own button is a screen wide here; the header keeps the menu. */
    .c-header__cta {
        display: none;
    }
    .c-quiz__ask {
        align-items: flex-start;
    }
    .c-quiz__sign,
    .c-quiz__photo {
        width: 5.5rem;
    }
    .c-quiz__question {
        hyphens: manual;
        font-size: 1.375rem;
    }
    /* A long word may still need its hyphen on a phone. */
    .c-hero__heading {
        hyphens: auto;
        font-size: clamp(3.25rem, 16vw, 4rem);
    }
    .c-hero__numbers {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    .c-hero__number-value {
        font-size: 2.4rem;
    }
    .c-hero__actions {
        margin-top: 1.5rem;
    }
    .c-hero__cta {
        width: 100%;
    }
    .c-hero__phone {
        width: 100%;
        text-align: center;
    }
    .c-header[data-page="index"] .c-header__inner {
        padding-top: 1.4rem;
    }
}

/* ---------- Numbers: big figures on paper, each behind a rule ---------- */

.c-numbers {
    padding-block: clamp(3rem, 6vw, 5rem);
}
.c-numbers__head {
    margin-bottom: 2.5rem;
}
.c-numbers__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
}
.c-numbers__item {
    border-left: 3px solid var(--foreground);
    padding-left: 1.25rem;
}
.c-numbers__value {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
}
.c-numbers__unit {
    margin-left: 0.15em;
    font-size: 0.5em;
}
.c-numbers__label,
.c-numbers__detail {
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--muted-foreground);
}
/* A long line, when there is one, says it better than the short one. */
.c-numbers__item:has(.c-numbers__detail) .c-numbers__label {
    display: none;
}
@media (min-width: 1024px) {
    .c-numbers__items {
        grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    }
    .c-numbers__items[data-count="2"] {
        --n: 2;
    }
    .c-numbers__items[data-count="3"] {
        --n: 3;
    }
}

/* ---------- Services: the direction board ---------- */

.c-services .c-wrap {
    display: grid;
    gap: 3rem 4rem;
}
.c-services__body {
    margin-top: 0;
    gap: 2rem;
}
/* A blue board with the white inset line, one destination per row; an arrow before each, and
   the price where a direction board has its kilometres. Two poles carry it. */
.c-services__items {
    display: block;
    padding: 0.5rem;
    border-radius: 1rem;
    background: var(--blue);
    color: #fff;
}
.c-services__items::before {
    content: none;
}
.c-services__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 1rem 1.125rem 0.875rem;
    border: 3px solid #fff;
    border-radius: 0;
    background: none;
    color: inherit;
}
.c-services__item:first-child {
    border-radius: 0.625rem 0.625rem 0 0;
}
.c-services__item:last-child {
    border-radius: 0 0 0.625rem 0.625rem;
}
.c-services__item:only-child {
    border-radius: 0.625rem;
}
.c-services__item + .c-services__item {
    border-top: 0;
}
.c-services__item::before {
    content: "";
    grid-row: 1;
    width: 1.75rem;
    height: 1.75rem;
    background: currentColor;
    mask: url("./img/arrow.svg") center / contain no-repeat;
    rotate: -45deg;
}
.c-services__item:nth-child(3n + 2)::before {
    rotate: 0deg;
}
.c-services__item:nth-child(3n)::before {
    rotate: 45deg;
}
.c-services__title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.c-services__price {
    grid-column: 2;
    margin-top: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}
.c-services__text {
    grid-column: 2;
    margin-top: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    opacity: 0.92;
}
.c-services__list::after {
    content: "";
    display: block;
    height: 3.5rem;
    margin-inline: 22%;
    background:
        linear-gradient(90deg, var(--pole) 0 0.625rem, var(--pole-shade) 0.625rem 0.875rem, transparent 0.875rem) left / 0.875rem 100% no-repeat,
        linear-gradient(90deg, var(--pole) 0 0.625rem, var(--pole-shade) 0.625rem 0.875rem, transparent 0.875rem) right / 0.875rem 100% no-repeat;
}
.c-services__note {
    margin-top: 0;
    font-size: 0.875rem;
}
.c-services__list:has(.c-services__note)::after {
    margin-bottom: 1.25rem;
}
.c-services__photo {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.75rem solid var(--blue);
    outline: 3px solid #fff;
}
@media (min-width: 640px) {
    .c-services__item {
        grid-template-columns: auto 1fr auto;
    }
    .c-services__price {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-size: 1.0625rem;
    }
}
@media (min-width: 1024px) {
    .c-services .c-wrap {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: start;
    }
    /* A picture, when there is one, stands under the heading, the board beside both. */
    .c-services__body {
        display: contents;
    }
    .c-services__head {
        grid-column: 1;
        grid-row: 1;
    }
    .c-services__figure {
        grid-column: 1;
        grid-row: 2;
        max-width: 18rem;
    }
    .c-services__list {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* ---------- Prices: the Preisaushang as a white plate ---------- */

.c-prices__inner {
    display: grid;
    gap: 2.5rem 4rem;
}
.c-prices__body {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 0.875rem;
    background: #fff;
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.4rem #fff,
        inset 0 0 0 calc(0.4rem + 3px) var(--ink);
}
.c-prices__table {
    width: 100%;
    border-collapse: collapse;
}
.c-prices__caption {
    caption-side: top;
    padding-bottom: 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-prices__row th,
.c-prices__row td {
    padding: 0.7rem 0;
    border-top: 2px solid var(--ink);
    vertical-align: baseline;
}
.c-prices__row:last-child th,
.c-prices__row:last-child td {
    border-bottom: 2px solid var(--ink);
}
.c-prices__item {
    text-align: left;
    font-weight: 600;
}
.c-prices__unit {
    margin-left: 0.4rem;
    font-weight: 500;
    color: var(--base-muted-foreground);
}
.c-prices__unit::before {
    content: "· ";
}
.c-prices__price {
    text-align: right;
    font-weight: 800;
    white-space: nowrap;
}
.c-prices__typical {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.125rem 0.875rem;
    border-radius: 6px;
    background: var(--signal);
    color: var(--ink);
    font-weight: 800;
}
.c-prices__typical-note {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
}
.c-prices__typical-total {
    font-size: 1.5rem;
}
.c-prices__note {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--base-muted-foreground);
}
.c-prices__photo {
    margin-top: 2rem;
    max-width: 16rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.75rem solid var(--blue);
}
@media (min-width: 1024px) {
    .c-prices__inner {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: start;
    }
}

/* ---------- Beat: the street, edge to edge ---------- */

.c-beat__photo {
    aspect-ratio: auto;
    height: clamp(18rem, 36vw, 32rem);
}

/* ---------- Quiz: on asphalt, under a centre line; the card reaches up into a photo above ---------- */

.c-quiz {
    position: relative;
    padding-top: 0;
}
.c-quiz::before {
    content: "";
    display: block;
    height: 4.5rem;
    margin-bottom: 2rem;
    background: repeating-linear-gradient(90deg, #fff 0 3.5rem, transparent 3.5rem 7rem) center / 100% 0.375rem no-repeat;
}
.c-quiz__lead {
    color: var(--muted-foreground);
}
.c-quiz__facts {
    gap: 0.5rem;
    font-size: 0.9375rem;
}
.c-quiz__fact-value {
    min-width: 3.5rem;
    color: var(--signal);
}
.c-quiz__card {
    --background: #fff;
    --foreground: var(--ink);
    --muted-foreground: var(--base-muted-foreground);
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border: 0;
    border-radius: 1.25rem;
    background: #fff;
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.5rem #fff,
        inset 0 0 0 calc(0.5rem + 3px) var(--ink);
}
.c-quiz__step {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.c-quiz__tag {
    float: right;
    clear: none;
    margin-top: -1.3rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.c-quiz__ask {
    gap: 1.25rem 1.75rem;
    padding-top: 1.5rem;
}
.c-quiz__sign,
.c-quiz__photo {
    width: clamp(6.5rem, 12vw, 9rem);
}
.c-quiz__question {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.12;
}
.c-quiz__answer {
    gap: 0.875rem;
    padding: 0.8rem 1rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    line-height: 1.35;
}
.c-quiz__answer:hover {
    background: var(--signal);
}
.c-quiz__letter {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer {
    opacity: 0.55;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer[data-right],
.c-quiz__q .c-quiz__answer:not([data-right]):has(input:checked) {
    opacity: 1;
    color: #fff;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer[data-right] {
    border-color: var(--go);
    background: var(--go);
}
.c-quiz__answer:not([data-right]):has(input:checked) {
    border-color: var(--stop);
    background: var(--stop);
}
.c-quiz__why {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}
.c-quiz__next {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}
.c-quiz__next::after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    mask: url("./img/arrow.svg") center / contain no-repeat;
}
.c-quiz__score {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}
.c-quiz__count {
    color: var(--blue);
}
.c-quiz__cta {
    --primary: var(--blue);
    --primary-foreground: #fff;
}
@media (min-width: 1024px) {
    .c-quiz__inner {
        grid-template-columns: 0.9fr 1.1fr;
    }
    .c-quiz__head {
        padding-top: 1.5rem;
    }
    /* After a photo the card straddles the centre-line seam up into it. */
    .c-beat + .c-quiz .c-quiz__card {
        margin-top: -13rem;
    }
}

/* ---------- Team: the first person large, the others in mandatory-sign circles ---------- */

.c-team__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
    margin-top: 3rem;
}
.c-team__item[data-i="1"] {
    grid-column: 1 / -1;
}
.c-team__photo {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.5rem solid var(--blue);
    outline: 3px solid #fff;
}
.c-team__item[data-i="1"] .c-team__photo {
    aspect-ratio: 6 / 7;
    max-width: 30rem;
    border: 0;
    outline: 0;
    border-radius: 1.25rem;
}
.c-team__initial {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.5rem solid var(--blue);
    background: var(--secondary);
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
}
.c-team__name {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.15;
}
.c-team__role {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}
.c-team__quote {
    margin-top: 1.25rem;
    max-width: 36rem;
    font-size: 1.1875rem;
    line-height: 1.55;
}
.c-team__item[data-i="1"] .c-team__quote {
    margin-top: 1.5rem;
}
@media (min-width: 640px) {
    .c-team__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* On a wide screen the first person stands left, large; the story and the others to the right. */
@media (min-width: 1024px) {
    .c-team .c-wrap {
        display: grid;
        grid-template-columns: 0.85fr repeat(3, minmax(0, 0.383fr));
        grid-template-rows: repeat(7, auto);
        column-gap: 2.25rem;
        align-items: start;
    }
    .c-team__head {
        grid-column: 2 / -1;
        grid-row: 1;
    }
    .c-team__items,
    .c-team__item[data-i="1"] {
        display: contents;
    }
    .c-team__item[data-i="1"] .c-team__media {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        position: sticky;
        top: 2rem;
        margin-right: 2.75rem;
    }
    .c-team__item:not([data-i="1"]) .c-team__quote {
        font-size: 0.9375rem;
    }
    .c-team__item[data-i="1"] .c-team__quote {
        grid-column: 2 / -1;
        grid-row: 2;
    }
    .c-team__item[data-i="1"] .c-team__name,
    .c-team__item[data-i="1"] .c-team__role {
        grid-column: 2 / -1;
    }
    .c-team__item[data-i="1"] .c-team__name {
        grid-row: 3;
        font-size: 0.9375rem;
    }
    .c-team__item[data-i="1"] .c-team__role {
        grid-row: 4;
    }
    .c-team__item:not([data-i="1"]) {
        margin-top: 2.5rem;
    }
}

/* ---------- Schedule: on signal yellow, rows between heavy rules ---------- */

.c-schedule__lead {
    font-weight: 500;
}
.c-schedule__phone {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-schedule__recurring {
    font-size: 1.0625rem;
    font-weight: 700;
}
.c-schedule__dates {
    border-bottom: 3px solid var(--foreground);
}
.c-schedule__date {
    border-top: 3px solid var(--foreground);
    padding-block: 1.25rem;
}
.c-schedule__when {
    font-size: 1.125rem;
}
.c-schedule__time {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}
.c-schedule__seats {
    font-size: 0.875rem;
}
@media (min-width: 1024px) {
    .c-schedule__inner {
        grid-template-columns: 0.8fr 1.2fr;
    }
}

/* ---------- FAQ: heavy rules; Zeichen 101 under the heading ---------- */

.c-faq__items {
    border-bottom: 3px solid var(--foreground);
}
.c-faq__item {
    border-top: 3px solid var(--foreground);
}
.c-faq__question {
    align-items: center;
    padding: 1.25rem 0 1.05rem;
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    font-weight: 800;
    line-height: 1.25;
}
.c-faq__question::after,
.c-faq__item[open] .c-faq__question::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    mask: url("./img/arrow.svg") center / contain no-repeat;
    transition: rotate 0.2s;
}
.c-faq__item[open] .c-faq__question::after {
    rotate: 90deg;
}
@media (min-width: 1024px) {
    .c-faq__inner {
        grid-template-columns: 0.8fr 1.2fr;
    }
    .c-faq__head::after {
        content: "";
        display: block;
        width: 9rem;
        aspect-ratio: 847 / 743;
        margin-top: 2.5rem;
        background: url("./img/z101.svg") center / contain no-repeat;
    }
}

/* ---------- Contact: the branches as yellow Ortstafeln ---------- */

.c-contact__inner {
    gap: 3rem;
}
.c-contact__heading {
    max-width: 40rem;
}
.c-contact__text {
    font-weight: 500;
}
.c-contact__phone {
    color: var(--foreground);
}
.c-contact__email {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.c-contact__places {
    gap: 1.5rem;
}
.c-contact__place {
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-top: 0;
    border-radius: 0.875rem;
    background: var(--signal);
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.4rem var(--signal),
        inset 0 0 0 calc(0.4rem + 3px) var(--ink);
}
.c-contact__place-name {
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--ink);
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}
.c-contact__address {
    margin-top: 1rem;
    font-weight: 600;
    line-height: 1.45;
}
.c-contact__place-phone {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
}
.c-contact__place-phone a {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.c-contact__hours {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}
.c-contact__photo {
    border-radius: 0.875rem;
}
@media (min-width: 1024px) {
    .c-contact__inner {
        grid-template-columns: 1fr;
    }
    .c-contact__head {
        display: grid;
        grid-template-columns: 1fr 26rem;
        column-gap: 4rem;
        align-items: end;
    }
    .c-contact__head > * {
        grid-column: 1;
    }
    .c-contact__text,
    .c-contact__actions {
        grid-column: 2;
    }
    .c-contact__text {
        grid-row: 1 / span 2;
        align-self: end;
        margin-top: 0;
    }
    .c-contact__actions {
        grid-row: 3;
    }
    .c-contact__places:not([data-count="1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Form: a white Zusatzzeichen plate; on the blue after the Ortstafeln it closes them ---------- */

.c-contact + .c-form[data-tone="accent"],
.c-form + .c-contact[data-tone="accent"] {
    padding-top: 0;
}
.c-form__intro-heading,
.c-form__intro-text {
    color: var(--foreground);
}
.c-form__form {
    --background: #fff;
    --foreground: var(--ink);
    --muted-foreground: var(--base-muted-foreground);
    --primary: var(--blue);
    --primary-foreground: #fff;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    border: 0;
    border-radius: 0.875rem;
    background: #fff;
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.4rem #fff,
        inset 0 0 0 calc(0.4rem + 3px) var(--ink);
}
.c-form__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.c-form__note {
    max-width: 26rem;
    font-weight: 500;
    color: var(--ink);
}
.c-form__field label {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    border: 3px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 0.8rem 0.9rem 0.7rem;
    font-weight: 700;
}
.c-form__info {
    border-radius: 6px;
    background: var(--base-secondary);
    color: var(--ink);
}
.c-form__error {
    color: var(--stop);
}
/* The confirmation reads like a green direction sign. */
.c-form__status {
    border-radius: 6px;
    background: var(--go);
    color: #fff;
    font-weight: 800;
}
.c-form__privacy {
    color: var(--ink);
}

/* ---------- Steps: numbered like Bundesstraßen ---------- */

.c-steps__items {
    counter-reset: step;
}
.c-steps__item {
    counter-increment: step;
    border-top: 3px solid var(--foreground);
    padding-top: 1.25rem;
}
.c-steps__index {
    display: inline-block;
    padding: 0.3rem 0.5rem 0.2rem;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--signal);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
}
.c-steps__when {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.c-steps__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.15;
}
.c-steps__photo {
    border-radius: 0;
}

/* ---------- Reviews: quotes on white plates; the rating as a plain plate beside them ---------- */

.c-reviews__item {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: 0.875rem;
    background: #fff;
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.4rem #fff,
        inset 0 0 0 calc(0.4rem + 3px) var(--ink);
}
.c-reviews__quote {
    font-size: 1.125rem;
    line-height: 1.5;
}
.c-reviews__who {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
}
.c-reviews__rating {
    --muted-foreground: var(--ink);
    border-radius: 6px;
    background: var(--signal);
    color: var(--ink);
}
.c-reviews__rating-value {
    font-family: var(--font-display);
    font-weight: 800;
}
.c-reviews__photo {
    border-radius: 50%;
    aspect-ratio: 1;
    border: 0.75rem solid var(--blue);
}

/* ---------- Pace picker: a white plate, the paces as sign tabs ---------- */

.c-pacePicker__choices {
    padding: 0.375rem;
    border: 3px solid var(--foreground);
    border-radius: 6px;
    background: transparent;
}
.c-pacePicker__choice span {
    border-radius: 3px;
    font-family: var(--font-display);
    font-weight: 800;
}
.c-pacePicker__choice input:checked + span {
    background: var(--blue);
    color: #fff;
}
.c-pacePicker__result {
    border: 0;
    border-radius: 0.875rem;
    background: #fff;
    color: var(--ink);
    box-shadow:
        inset 0 0 0 0.4rem #fff,
        inset 0 0 0 calc(0.4rem + 3px) var(--ink);
}
.c-pacePicker__weeks {
    font-family: var(--font-display);
    font-weight: 800;
}
.c-pacePicker__day {
    border-radius: 3px;
    font-family: var(--font-display);
}
.c-pacePicker__day[data-on="true"] {
    background: var(--blue);
    color: #fff;
}

/* ---------- Legal pages ---------- */

.c-legal__text h2 {
    font-size: 1.5rem;
    line-height: 1.1;
}
.c-legal__text a {
    font-weight: 700;
}
.c-legal__source {
    border-top: 3px solid var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .c-button,
    .c-faq__question::after {
        transition: none;
    }
}

/* The quiz's tally in the sign colours. */
.c-quiz__mark-right {
    color: var(--go);
    font-weight: 800;
}
.c-quiz__mark-wrong {
    color: var(--stop);
    font-weight: 800;
}