/* 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 */
/* 12 Kurvenreich — open-road editorial, on the platform's markup (docs/COMPONENTS.md).
   Bone ground, petrol and ochre; Rokkitt (slab) over Onest. The page is written as one drive:
   an ochre route line runs down the left margin from the first band after the hero to the last,
   and every band's eyebrow is a kilometre marker on it ("*km 3,2* Prüfgebiet": the marked part is
   the number). The hero is the owner's pick B "Breitbild": one big line of slab, a 21:9 letterbox
   of the road, a row of three facts and the one action. The exam area is a schematic map on
   petrol, a slab-italic pull-quote divides the page, and the one accent device is a single word
   per heading set in ochre slab italic (the *marked* word). */

@font-face {
    font-family: "Rokkitt";
    src: url("./fonts/rokkitt.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Rokkitt";
    src: url("./fonts/rokkitt-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Onest";
    src: url("./fonts/onest.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --base-background: #efe8d8;
    --base-foreground: #0f2326;
    --base-card: #f8f3e7;
    --base-card-foreground: #0f2326;
    --base-primary: #17484d;
    --base-primary-foreground: #efe8d8;
    --base-secondary: #e0d5bd;
    --base-secondary-foreground: #0f2326;
    --base-muted: #e7dfcc;
    --base-muted-foreground: #4a5b5b;
    --base-border: #cdbf9f;
    --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Rokkitt", ui-serif, Georgia, serif;
    --wrap: 82rem;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --band: clamp(4rem, 9vw, 7.5rem);
    --radius: 0;
    --ochre: #cf8f1f;
    /* Ochre that still reads as small text on bone and on the tint band (4.5:1 there); dark bands
       switch back to the bright one, the petrol band to a lighter cut. */
    --mark: #7d4f0a;
    /* The leaning word of a heading: the plain ochre is too light for bone and tint even at
       heading size (2.3:1); this cut keeps 3.3:1 there, the dark bands take the bright one. */
    --lean: #9c6612;
    /* The margin the route line and its markers live in, from 64rem up. */
    --leg: 0rem;
}
[data-tone='dark'] {
    --mark: var(--ochre);
    --lean: var(--ochre);
}
[data-tone='accent'] {
    --mark: #ebb04a;
    --lean: var(--ochre);
    --card: color-mix(in oklab, var(--base-primary) 82%, black);
}
body {
    font-size: 1.0625rem;
    line-height: 1.65;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ochre);
    outline-offset: 3px;
}

/* ---------- Type: slab headings, one leaning ochre word ---------- */

.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-contact__heading,
.c-services__heading,
.c-schedule__heading,
.c-faq__heading,
.c-gallery__heading,
.c-statement__heading,
.c-routeMap__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-weight: 650;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.018em;
    max-width: 14em;
}
.c-hero__mark,
.c-numbers__mark,
.c-steps__mark,
.c-prices__mark,
.c-team__mark,
.c-contact__mark,
.c-services__mark,
.c-schedule__mark,
.c-faq__mark,
.c-gallery__mark,
.c-statement__mark,
.c-routeMap__mark,
.c-reviews__mark,
.c-form__mark {
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--lean);
}
.c-steps__lead,
.c-prices__lead,
.c-team__lead,
.c-contact__text,
.c-services__lead,
.c-schedule__lead,
.c-faq__lead,
.c-gallery__lead,
.c-routeMap__lead,
.c-form__intro-text {
    font-size: 1.0625rem;
    color: var(--muted-foreground);
}

/* ---------- The route line: every band is a leg of one drive ---------- */

.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-services__eyebrow,
.c-schedule__eyebrow,
.c-faq__eyebrow,
.c-gallery__eyebrow,
.c-statement__eyebrow,
.c-routeMap__eyebrow,
.c-form__intro-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    color: var(--foreground);
}
.c-numbers__eyebrow-mark,
.c-steps__eyebrow-mark,
.c-prices__eyebrow-mark,
.c-team__eyebrow-mark,
.c-reviews__eyebrow-mark,
.c-contact__eyebrow-mark,
.c-services__eyebrow-mark,
.c-schedule__eyebrow-mark,
.c-faq__eyebrow-mark,
.c-gallery__eyebrow-mark,
.c-statement__eyebrow-mark,
.c-routeMap__eyebrow-mark,
.c-form__intro-eyebrow-mark {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--mark);
}
@media (min-width: 64rem) {
    :root {
        --leg: 10.5rem;
    }
    .c-main > [data-c]:not(.c-hero, .c-beat) {
        position: relative;
    }
    .c-main > [data-c]:not(.c-hero, .c-beat) > .c-wrap {
        position: relative;
        padding-left: calc(var(--gutter) + var(--leg));
    }
    /* the line, at the margin's left edge, from the top of the band to its bottom */
    .c-main > [data-c]:not(.c-hero, .c-beat)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
        width: 2px;
        background: var(--ochre);
    }
    /* the first leg starts at its marker, the last one ends at its marker */
    .c-main > .c-hero + [data-c]:not(.c-beat)::before {
        top: calc(var(--band) + 0.55rem);
    }
    .c-main > [data-c]:last-child::before {
        bottom: auto;
        height: calc(var(--band) + 0.55rem);
    }
    .c-numbers__eyebrow,
    .c-steps__eyebrow,
    .c-prices__eyebrow,
    .c-team__eyebrow,
    .c-reviews__eyebrow,
    .c-contact__eyebrow,
    .c-services__eyebrow,
    .c-schedule__eyebrow,
    .c-faq__eyebrow,
    .c-gallery__eyebrow,
    .c-statement__eyebrow,
    .c-routeMap__eyebrow,
    .c-form__intro-eyebrow {
        position: absolute;
        top: 0;
        left: calc(var(--gutter) + 1.5rem);
        width: calc(var(--leg) - 2rem);
        display: block;
        margin: 0;
    }
    .c-numbers__eyebrow-mark,
    .c-steps__eyebrow-mark,
    .c-prices__eyebrow-mark,
    .c-team__eyebrow-mark,
    .c-reviews__eyebrow-mark,
    .c-contact__eyebrow-mark,
    .c-services__eyebrow-mark,
    .c-schedule__eyebrow-mark,
    .c-faq__eyebrow-mark,
    .c-gallery__eyebrow-mark,
    .c-statement__eyebrow-mark,
    .c-routeMap__eyebrow-mark,
    .c-form__intro-eyebrow-mark {
        display: block;
        margin-bottom: 0.5rem;
    }
    /* the marker dot sits on the line and takes the band's colour, so the line seems to pass behind it */
    .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-schedule__eyebrow::before,
    .c-faq__eyebrow::before,
    .c-gallery__eyebrow::before,
    .c-statement__eyebrow::before,
    .c-routeMap__eyebrow::before,
    .c-form__intro-eyebrow::before {
        content: "";
        position: absolute;
        left: calc(-1.5rem - 7px);
        top: 0.1rem;
        width: 14px;
        height: 14px;
        border: 2px solid var(--ochre);
        border-radius: 50%;
        background: var(--background);
    }
    .c-main > [data-c]:last-child :is([class$='__eyebrow'], .c-form__intro-eyebrow)::before {
        background: var(--ochre);
    }
    /* a band's head sits beside its marker: the inner grids start at the margin */
    .c-form__intro,
    .c-statement__head,
    .c-routeMap__head,
    .c-services__head,
    .c-team__head,
    .c-reviews__head,
    .c-prices__head,
    .c-contact__head,
    .c-numbers__head,
    .c-steps__head,
    .c-faq__head,
    .c-schedule__head,
    .c-gallery__head {
        position: static;
    }
}

/* ---------- Buttons: ochre pills with an arrow ---------- */

.c-button {
    gap: 0.7rem;
    padding: 1rem 1.5rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-weight: 650;
    line-height: 1.1;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s;
}
.c-button--primary {
    background: var(--ochre);
    border-color: var(--ochre);
    color: var(--base-foreground);
}
.c-button--primary::after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: currentColor;
    mask: url("./img/pfeil.svg") center / contain no-repeat;
}
.c-button:hover {
    background: var(--foreground);
    border-color: var(--foreground);
    color: var(--background);
}

/* ---------- Duotone photography: petrol shadows, bone highlights ---------- */

.c-photo {
    isolation: isolate;
    background: var(--base-primary);
}
.c-photo img {
    filter: grayscale(1) contrast(1.08);
}
.c-photo__tint {
    display: none;
}
.c-photo::before,
.c-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.c-photo::before {
    background: #1b4f54;
    mix-blend-mode: lighten;
}
.c-photo::after {
    background: #e9ecd6;
    mix-blend-mode: multiply;
}

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

.c-header__inner {
    padding-block: 1.5rem 0.5rem;
    gap: 0.75rem 1.25rem;
}
.c-header__brand {
    margin-right: auto;
}
.c-header__brand {
    gap: 0.75rem;
    font-weight: 650;
    font-size: 1.5rem;
    line-height: 1;
}
.c-header__mark {
    display: inline-block;
    flex: none;
    width: 2rem;
    height: 1.6rem;
    overflow: hidden;
    color: transparent;
    background: var(--ochre);
    mask: url("./img/kurve.svg") center / contain no-repeat;
}
.c-header__link {
    font-size: 0.9375rem;
    font-weight: 500;
}
.c-header__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--ochre);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}
/* the phone is the header's action; the form is one tap away in the hero */
.c-header[data-page='index'] .c-header__cta {
    display: none;
}
.c-header__phone {
    display: inline-flex;
    order: 3;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-weight: 600;
    font-size: 1rem;
}
.c-header__phone:hover {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ochre);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}
/* below 30rem the brand and the menu need the line; the hero's button is one tap below */
@media (max-width: 29.99rem) {
    .c-header[data-page='index'] .c-header__phone {
        display: none;
    }
}
.c-header__toggle {
    order: 4;
    margin-left: 0;
    font-weight: 650;
}
@media (min-width: 40rem) {
    .c-header__brand {
        font-size: 1.75rem;
    }
    .c-header__mark {
        width: 2.4rem;
        height: 1.9rem;
    }
}
@media (min-width: 64rem) {
    .c-header__inner {
        column-gap: 2.25rem;
    }
    .c-header__brand {
        margin-right: 0;
    }
    .c-header__nav {
        gap: 2.25rem;
    }
    .c-header__phone {
        margin-left: auto;
    }
}
.c-footer__signoff {
    font-weight: 650;
}
.c-footer__signoff::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 1.9rem;
    margin-right: 0.75rem;
    background: var(--ochre);
    mask: url("./img/kurve.svg") center / contain no-repeat;
}
.c-legal-title__heading {
    max-width: none;
}
.c-legal h2 {
    font-family: var(--font-display);
    font-weight: 650;
}
.c-legal a {
    text-decoration-color: var(--ochre);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

/* ---------- Hero: one line, the letterbox, the facts ---------- */

.c-hero {
    padding-block: clamp(1.25rem, 2.6vw, 2.25rem) clamp(3rem, 6vw, 4.5rem);
}
.c-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "eyebrow"
        "heading"
        "lead"
        "media"
        "numbers"
        "actions"
        "note";
    gap: 0;
    align-items: start;
}
.c-hero__text {
    display: contents;
}
.c-hero__eyebrow {
    grid-area: eyebrow;
    margin-bottom: 1rem;
    color: var(--mark);
}
.c-hero__heading {
    grid-area: heading;
    font-weight: 650;
    /* the sample's line fits the 75rem column on one line up to this size */
    font-size: clamp(3.1rem, 7vw, 6.375rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-wrap: wrap;
}
.c-hero__lead {
    grid-area: lead;
    max-width: 40rem;
    margin-top: 1.25rem;
    font-size: 1.125rem;
    color: var(--muted-foreground);
}
.c-hero__media {
    grid-area: media;
    margin-top: clamp(1rem, 2vw, 1.75rem);
}
.c-hero__photo {
    aspect-ratio: 21 / 11;
    margin-inline: calc(-1 * var(--gutter));
    background: #08181a;
}
/* the letterbox keeps the night's colour, a little quieter; the duotone is for the rest of the page */
.c-hero__photo img {
    filter: saturate(0.75) contrast(1.06);
}
.c-hero__photo::before {
    display: none;
}
.c-hero__photo::after {
    background: linear-gradient(to top, rgb(8 24 26 / 0.55), transparent 38%);
    mix-blend-mode: normal;
}
.c-hero__media:not(:has(.c-hero__caption)) .c-hero__photo::after {
    display: none;
}
.c-hero__caption {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0.8rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--base-background);
    text-shadow: 0 1px 2px rgb(8 24 26 / 0.6);
}
.c-hero__caption-mark {
    margin-right: 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: #ebb04a;
}
.c-hero__badge,
.c-hero__chip {
    border-radius: 0;
    border: 0;
    background: var(--base-card);
    color: var(--base-foreground);
}
.c-hero__chip {
    top: 1rem;
    bottom: auto;
}
.c-hero__badge {
    top: 1rem;
    bottom: auto;
}
.c-hero__badge-value {
    font-weight: 650;
}
.c-hero__numbers {
    grid-area: numbers;
    display: grid;
    grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
    gap: 0;
    margin-top: 0;
}
.c-hero__numbers[data-count='1'] {
    --count: 1;
}
.c-hero__numbers[data-count='2'] {
    --count: 2;
}
.c-hero__number {
    max-width: none;
    padding: 1rem 0.75rem 1rem 0;
    margin-right: 0.75rem;
    border-right: 1px solid var(--border);
}
.c-hero__number:last-child {
    border-right: 0;
    margin-right: 0;
}
.c-hero__number-value {
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.c-hero__number-label {
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--foreground);
}
.c-hero__number-detail {
    display: none;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.3;
}
.c-hero__actions {
    grid-area: actions;
    margin-top: 0.75rem;
}
.c-hero__actions .c-button {
    flex: 1 1 auto;
}
.c-hero__note {
    grid-area: note;
}
.c-hero__courses {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    border-radius: 0;
}
.c-hero__phone-number {
    font-family: var(--font-display);
    font-size: 1.25rem;
}
@media (min-width: 44rem) {
    .c-hero__photo {
        aspect-ratio: 21 / 9;
        margin-inline: 0;
    }
    .c-hero__caption {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.15rem;
        font-size: 0.8125rem;
    }
    .c-hero__number {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.9rem;
        align-items: center;
        padding: 1.1rem 1.5rem 1.1rem 0;
        margin-right: 1.5rem;
    }
    .c-hero__number:last-child {
        border-right: 1px solid var(--border);
    }
    .c-hero__number-value {
        grid-row: span 2;
        font-size: 2.6rem;
    }
    .c-hero__number-label {
        margin-top: 0;
        font-size: 0.9375rem;
        align-self: end;
    }
    .c-hero__number-detail {
        display: block;
        align-self: start;
    }
    .c-hero__number-label:last-child {
        align-self: center;
    }
}
@media (min-width: 64rem) {
    .c-hero__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eyebrow eyebrow"
            "heading heading"
            "lead lead"
            "media media"
            "numbers actions"
            "note note";
    }
    .c-hero__numbers,
    .c-hero__actions {
        border-bottom: 1px solid var(--border);
    }
    .c-hero__actions {
        align-self: stretch;
        align-items: center;
        margin-top: 0;
    }
    .c-hero__actions .c-button {
        flex: none;
    }
    .c-hero__inner:not(:has(.c-hero__numbers)) .c-hero__actions {
        grid-column: 1 / -1;
        padding-top: 1.5rem;
        border-bottom: 0;
    }
}

/* ---------- Statement ("Haltung"): lead in slab, photo beside, figures under ---------- */

.c-statement__body {
    gap: 3rem 4rem;
    margin-top: 2.5rem;
}
.c-statement__paragraph {
    color: var(--muted-foreground);
}
.c-statement__paragraph[data-i='1'] {
    margin-bottom: 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    line-height: 1.22;
    letter-spacing: -0.005em;
    color: var(--foreground);
}
.c-statement__caption {
    font-size: 0.8125rem;
    line-height: 1.45;
}
.c-statement__numbers {
    gap: 2.5rem 3rem;
    margin-top: clamp(4rem, 6vw, 5rem);
}
.c-statement__value {
    font-weight: 300;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
}
.c-statement__numbers[data-count='4'] .c-statement__value {
    font-size: clamp(2.75rem, 4.5vw, 4rem);
}
.c-statement__label,
.c-statement__detail {
    max-width: 17rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}
@media (min-width: 64rem) {
    .c-statement__body:has(.c-statement__figure) {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

/* ---------- Route map on petrol ---------- */

.c-routeMap__head {
    display: grid;
    gap: 1.5rem 4rem;
    align-items: end;
}
.c-routeMap__lead {
    margin-top: 0;
}
.c-routeMap__body {
    margin-top: 3rem;
    gap: 2rem 3rem;
}
.c-routeMap__map {
    border: 1px solid color-mix(in oklab, var(--base-background) 28%, transparent);
    background: color-mix(in oklab, var(--base-primary) 82%, black);
}
.c-routeMap__feature {
    stroke: color-mix(in oklab, var(--base-background) 13%, transparent);
    stroke-width: 1.5;
}
.c-routeMap__feature[data-kind='area'],
.c-routeMap__feature[data-kind='water'] {
    fill: color-mix(in oklab, var(--base-background) 7%, transparent);
}
.c-routeMap__feature[data-kind='motorway'],
.c-routeMap__feature[data-kind='road'],
.c-routeMap__feature[data-kind='rail'] {
    stroke: color-mix(in oklab, var(--base-background) 32%, transparent);
    stroke-width: 3;
}
.c-routeMap__place {
    display: none;
    font-family: var(--font-sans);
    font-size: 15px;
    letter-spacing: 0.16em;
    fill: color-mix(in oklab, var(--base-background) 62%, transparent);
}
.c-routeMap__road-edge {
    stroke: #0c2b2f;
    stroke-width: 18;
}
.c-routeMap__road {
    stroke: var(--base-background);
}
.c-routeMap__driven {
    stroke: var(--ochre);
}
.c-routeMap__pin {
    --pin: var(--base-primary);
}
.c-routeMap__pin-dot {
    r: 26px;
    stroke: var(--base-background);
    stroke-width: 3;
    transition: fill 0.2s;
}
.c-routeMap__pin-n {
    font-family: var(--font-display);
    font-size: 30px;
    fill: var(--base-background);
}
.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(--ochre);
}
.c-routeMap__body:has(.c-routeMap__pick-input:checked) .c-routeMap__pin {
    --pin-text: var(--base-background);
}
.c-routeMap__body:has(.c-routeMap__pick-input[value='1']:checked) .c-routeMap__pin[data-i='1'] .c-routeMap__pin-n,
.c-routeMap__body:has(.c-routeMap__pick-input[value='2']:checked) .c-routeMap__pin[data-i='2'] .c-routeMap__pin-n,
.c-routeMap__body:has(.c-routeMap__pick-input[value='3']:checked) .c-routeMap__pin[data-i='3'] .c-routeMap__pin-n,
.c-routeMap__body:has(.c-routeMap__pick-input[value='4']:checked) .c-routeMap__pin[data-i='4'] .c-routeMap__pin-n,
.c-routeMap__body:has(.c-routeMap__pick-input[value='5']:checked) .c-routeMap__pin[data-i='5'] .c-routeMap__pin-n,
.c-routeMap__body:has(.c-routeMap__pick-input[value='6']:checked) .c-routeMap__pin[data-i='6'] .c-routeMap__pin-n {
    fill: var(--base-foreground);
}
.c-routeMap__legend {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    color: var(--mark);
}
.c-routeMap__pick {
    min-width: 2.75rem;
    border-color: color-mix(in oklab, var(--base-background) 45%, transparent);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}
.c-routeMap__pick:hover {
    border-color: var(--base-background);
}
.c-routeMap__pick:has(input:checked) {
    border-color: var(--ochre);
    background: var(--ochre);
    color: var(--base-foreground);
}
.c-routeMap__step {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    color: var(--mark);
}
.c-routeMap__title {
    margin-top: 0.75rem;
    font-weight: 650;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
}
.c-routeMap__text {
    margin-top: 1rem;
}
.c-routeMap__how {
    margin-top: 1rem;
    border-left: 2px solid var(--ochre);
    font-size: 0.9375rem;
}
/* previous and next: round arrows; the words stay for the label, the arrow is what one sees */
.c-routeMap__steps {
    gap: 0.75rem;
    margin-top: 2rem;
}
.c-routeMap__prev,
.c-routeMap__next {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    overflow: hidden;
    color: inherit;
    font-size: 0;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.c-routeMap__prev::before,
.c-routeMap__next::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    mask: url("./img/pfeil.svg") center / contain no-repeat;
}
.c-routeMap__prev::before {
    transform: rotate(180deg);
}
.c-routeMap__prev:hover,
.c-routeMap__next:hover {
    background: var(--foreground);
    color: var(--background);
}
.c-routeMap__note {
    font-size: 0.8125rem;
    line-height: 1.4;
}
@media (min-width: 48rem) {
    /* place names are illegible at phone size — the pins carry the map there */
    .c-routeMap__place {
        display: block;
    }
}
@media (min-width: 64rem) {
    .c-routeMap__head {
        grid-template-columns: 1.7fr 0.8fr;
    }
    .c-routeMap__body {
        grid-template-columns: 1.55fr 1fr;
    }
}

/* ---------- Services: the drives with photos, the classes as a plain list ---------- */

.c-services__head {
    display: grid;
    gap: 1.5rem 4rem;
    align-items: end;
}
.c-services__lead {
    margin-top: 0;
}
.c-services__body {
    margin-top: 3.5rem;
}
.c-services__items {
    gap: 3rem 3rem;
}
.c-services__item {
    padding: 1.75rem 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: none;
    color: inherit;
}
.c-services__title {
    font-weight: 650;
    font-size: 1.75rem;
    line-height: 1.04;
    letter-spacing: -0.018em;
}
.c-services__text {
    margin-top: 0.75rem;
    color: var(--muted-foreground);
}
.c-services__price {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
}
.c-services__value {
    margin-bottom: 1.25rem;
    font-weight: 300;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums;
}
.c-services__unit {
    font-size: 0.45em;
    font-weight: 400;
    letter-spacing: 0;
}
.c-services__caption {
    font-size: 0.8125rem;
}
/* with photos: the first drive large beside its text, the others in a staggered pair; an item
   without a photo among them is a dark card, the night drive's */
.c-services__items:has(.c-services__item-photo) .c-services__item {
    padding: 0;
    border: 0;
}
.c-services__item-photo {
    aspect-ratio: 5 / 6;
    margin-bottom: 1.75rem;
}
.c-services__items:has(.c-services__item-photo) .c-services__item:not(:has(.c-services__item-photo)) {
    align-self: start;
    padding: 2rem;
    background: var(--base-foreground);
    color: var(--base-background);
    --mark: var(--ochre);
}
.c-services__items:has(.c-services__item-photo) .c-services__item:not(:has(.c-services__item-photo)) .c-services__text {
    color: color-mix(in oklab, var(--base-background) 78%, var(--base-foreground));
}
@media (min-width: 40rem) {
    .c-services__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .c-services__items:has(.c-services__item-photo) .c-services__item[data-i='1'] {
        grid-column: 1 / -1;
    }
    .c-services__items:has(.c-services__item-photo) .c-services__item[data-i='3'] {
        margin-top: 6rem;
    }
}
@media (min-width: 64rem) {
    .c-services__head {
        grid-template-columns: 1.7fr 0.8fr;
    }
    .c-services__items:not(:has(.c-services__item-photo)):is([data-count='3'], [data-count='6']) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .c-services__items:has(.c-services__item-photo) {
        grid-template-columns: 1fr 1fr 0.5fr;
        gap: 5rem 3rem;
    }
    .c-services__items:has(.c-services__item-photo) .c-services__item[data-i='1']:has(.c-services__item-photo) {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        grid-template-rows: 1fr auto auto auto;
        column-gap: 3rem;
    }
    .c-services__items:has(.c-services__item-photo) .c-services__item[data-i='1'] .c-services__item-photo {
        grid-row: 1 / -1;
        aspect-ratio: 16 / 11;
        margin: 0;
    }
    .c-services__items:has(.c-services__item-photo) .c-services__item[data-i='1'] .c-services__value {
        align-self: end;
    }
}

/* ---------- Reviews: the pull-quote divider ---------- */

.c-reviews__inner {
    display: flex;
    flex-direction: column;
}
.c-reviews__head {
    display: contents;
}
.c-reviews__heading {
    order: 1;
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: 0;
    color: var(--mark);
}
.c-reviews__items {
    order: 2;
    display: grid;
    gap: 3.5rem 3rem;
    margin-top: 2.5rem;
}
.c-reviews__rating {
    order: 3;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin-top: 3.5rem;
    padding: 2.5rem 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    color: inherit;
}
.c-reviews__rating-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}
.c-reviews__rating-count,
.c-reviews__rating-date {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-reviews__rating-link {
    font-size: 0.9375rem;
    text-decoration-color: var(--ochre);
    text-underline-offset: 0.25em;
}
.c-reviews__rating .c-reviews__disclosure {
    flex-basis: 100%;
}
.c-reviews__item {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}
.c-reviews__quote {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.2;
}
.c-reviews__item[data-i='1'] {
    grid-column: 1 / -1;
}
.c-reviews__item[data-i='1'] .c-reviews__quote {
    max-width: 19em;
    font-size: clamp(2.1rem, 4.6vw, 4.25rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.c-reviews__who {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-reviews__disclosure {
    grid-column: 1 / -1;
    max-width: 44em;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
@media (min-width: 40rem) {
    .c-reviews__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Team: three portraits, staggered down the margin ---------- */

.c-team__head {
    display: grid;
    gap: 1.5rem 4rem;
    align-items: end;
}
.c-team__lead {
    margin-top: 0;
}
.c-team__items {
    gap: 3.5rem 2.5rem;
    margin-top: 3.5rem;
}
.c-team__photo,
.c-team__initial {
    aspect-ratio: 4 / 5;
    border-radius: 0;
}
.c-team__initial {
    background: var(--base-secondary);
    color: var(--base-foreground);
    font-family: var(--font-display);
    font-weight: 650;
}
.c-team__name {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.04;
}
.c-team__role {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
}
.c-team__quote {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
@media (min-width: 40rem) {
    .c-team__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .c-team__item:nth-child(3n + 2) {
        margin-top: 4rem;
    }
    .c-team__item:nth-child(3n) {
        margin-top: 8rem;
    }
}
@media (min-width: 64rem) {
    .c-team__head {
        grid-template-columns: 1.7fr 0.8fr;
    }
}

/* ---------- Prices: the posts beside the heading ---------- */

.c-prices__inner {
    display: grid;
    gap: 3.5rem 5rem;
}
.c-prices__lead {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    line-height: 1.22;
    color: var(--foreground);
    margin-top: 2rem;
}
.c-prices__caption {
    padding-bottom: 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
}
.c-prices__row {
    border-bottom: 1px solid var(--border);
}
.c-prices__item,
.c-prices__price {
    padding-block: 0.95rem;
    font-weight: 400;
}
.c-prices__unit {
    color: var(--muted-foreground);
}
.c-prices__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}
.c-prices__typical {
    margin-top: 2.5rem;
    padding: 1.75rem;
    border: 0;
    border-radius: 0;
    background: var(--card);
    color: var(--card-foreground);
}
.c-prices__typical-label {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
}
.c-prices__typical-note {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--muted-foreground);
}
.c-prices__typical-total {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
}
.c-prices__note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.c-prices__calc,
.c-prices__result {
    border-radius: 0;
}
@media (min-width: 64rem) {
    .c-prices__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Form on petrol: underline fields ---------- */

.c-form .c-wrap {
    display: grid;
    gap: 3rem 4rem;
}
.c-form__intro-heading {
    max-width: 13em;
}
.c-form__intro-text {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.25;
    color: var(--foreground);
    max-width: 30rem;
}
.c-form__form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}
.c-form__heading {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
}
.c-form__note {
    color: var(--muted-foreground);
}
.c-form__fields {
    gap: 1.5rem 2rem;
}
.c-form__button {
    justify-self: start;
    margin-top: 0.5rem;
}
.c-form__field label {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    border: 0;
    border-bottom: 2px solid color-mix(in oklab, var(--foreground) 55%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    padding: 0.55rem 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.375rem;
}
.c-form__field option {
    background: var(--base-card);
    color: var(--base-foreground);
}
.c-form__field input:focus-visible,
.c-form__field select:focus-visible,
.c-form__field textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--ochre);
    box-shadow: 0 2px 0 var(--ochre);
}
.c-form__error {
    color: var(--mark);
}
.c-form__status {
    border-radius: 0;
    border-left: 4px solid var(--ochre);
    background: var(--base-card);
    color: var(--base-foreground);
    font-family: var(--font-display);
    font-size: 1.25rem;
}
.c-form__privacy a {
    text-decoration-color: var(--ochre);
    text-underline-offset: 0.25em;
}
@media (min-width: 40rem) {
    .c-form__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .c-form__fields > :is(.c-form__field--licenceClass, .c-form__field--location, .c-form__field--message):nth-last-child(2),
    .c-form__field--message,
    .c-form__button {
        grid-column: 1 / -1;
    }
}
@media (min-width: 64rem) {
    .c-form .c-wrap:has(.c-form__intro) {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Contact: the destination ---------- */

.c-contact__inner {
    gap: 3rem 4rem;
}
@media (min-width: 64rem) {
    .c-contact__inner {
        grid-template-columns: 1.3fr 1fr;
    }
}
.c-contact__text {
    max-width: 34rem;
}
.c-contact__actions {
    align-items: center;
    gap: 1rem 1.5rem;
}
.c-contact__email {
    text-decoration-color: var(--ochre);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}
.c-contact__places[data-count='1'] {
    grid-template-columns: minmax(0, 1fr);
}
.c-contact__place {
    padding: 0;
    border: 0;
    background: none;
}
.c-contact__place-name {
    font-size: 0.75rem;
    font-family: var(--font-sans);
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mark);
}
.c-contact__address,
.c-contact__hours {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
}
.c-contact__hours {
    color: var(--muted-foreground);
}

/* ---------- The other types, in the same voice ---------- */

.c-numbers__items {
    gap: 2.5rem 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.c-numbers__value {
    font-weight: 300;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 0.9;
}
.c-numbers__label,
.c-numbers__detail {
    font-weight: 400;
    font-size: 0.9375rem;
}
.c-steps__item {
    padding: 1.75rem 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    color: inherit;
}
.c-steps__title {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.75rem;
    line-height: 1.04;
}
.c-steps__photo {
    border-radius: 0;
}
.c-faq__item {
    border-radius: 0;
    border-width: 0 0 1px;
    background: none;
}
.c-faq__question {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.5rem;
}
.c-schedule__date {
    border-radius: 0;
}
.c-schedule__when {
    font-family: var(--font-display);
    font-weight: 600;
}
.c-gallery__photo {
    border-radius: 0;
}
.c-gallery__title {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.5rem;
}
.c-beat .c-photo {
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .c-button,
    .c-routeMap__pick,
    .c-routeMap__pin-dot,
    .c-routeMap__prev,
    .c-routeMap__next {
        transition: none;
    }
}