/* 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 */
/* 05 Startklar — friendly journey. Pastel bands (mint, butter, sky, rose) around a hot-pink
   primary and deep plum ink; wide Unbounded display over Figtree. Seams are soft curves cut with
   mask images from this folder, the sign-up card straddles the hero's curve, the four stages hang
   on a dashed road line. Plain CSS over the platform's markup (docs/COMPONENTS.md): every hook
   below is one the platform guarantees; base.css comes first and this file overrides it. */

@font-face {
    font-family: "Unbounded";
    src: url("./fonts/unbounded.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("./fonts/figtree.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --base-background: #fffaf2;
    --base-foreground: #221a3d;
    --base-card: #ffffff;
    --base-card-foreground: #221a3d;
    --base-primary: #ff5c93;
    --base-primary-foreground: #221a3d;
    --base-secondary: #c9efe0;
    --base-secondary-foreground: #221a3d;
    --base-muted: #f4eee2;
    --base-muted-foreground: #5b5474;
    --base-border: #e1d9ea;

    --mint: #c9efe0;
    --butter: #ffe9a3;
    --sky: #cfe5ff;
    --rose: #ffd3e0;
    --imagery-tint: 0.06;
    /* The primary pink as text: deep enough for 3:1 (large text) on the mint and cream bands. */
    --primary-ink: #e33a76;

    --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
    --seam: clamp(2.5rem, 7vw, 6.5rem);
}

/* Two pastel tones of this theme's own, on top of the platform's ground/tint/dark/accent. */
[data-tone="butter"] {
    --background: var(--butter);
    --card: var(--base-background);
    --border: color-mix(in oklab, var(--base-foreground) 18%, var(--butter));
}
[data-tone="sky"] {
    --background: var(--sky);
    --card: var(--base-background);
    --border: color-mix(in oklab, var(--base-foreground) 18%, var(--sky));
}

/* On the pink band the platform's muted ink is too light for small text (4:1) and its darkened
   card worse; the plum carries the quieter lines there and a card is cream, as on the pastels. */
[data-tone="accent"] {
    --muted-foreground: var(--base-foreground);
    --card: var(--base-background);
    --card-foreground: var(--base-foreground);
}

/* Type */
body {
    font-size: 1.0625rem;
    line-height: 1.6;
}
.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-legal-title__heading,
.c-steps__title,
.c-team__name,
.c-contact__place-name,
.c-header__brand,
.c-footer__signoff {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}
.c-hero__heading {
    font-size: clamp(2.375rem, 5.3vw, 5.25rem);
}
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-legal-title__heading {
    font-size: clamp(1.75rem, 3.3vw, 3.125rem);
}
/* A number is one token: "12.345" or "99,9 %" never breaks, the grid shrinks instead. */
.c-numbers__value,
.c-prices__price,
.c-prices__typical-total,
.c-steps__index,
.c-hero__badge-value,
.c-reviews__rating-value {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
    hyphens: none;
}

/* Micro-convention: a tiny traffic light (three dots) before every section label. */
.c-hero__eyebrow,
.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-legal-title__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
}
.c-hero__eyebrow::before,
.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-legal-title__eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--base-primary);
    box-shadow:
        0.8125rem 0 0 #f5b700,
        1.625rem 0 0 #17b890;
    margin-right: 1.625rem;
}
[data-tone="accent"] .c-contact__eyebrow::before {
    background: var(--base-background);
}
.c-hero__eyebrow {
    margin-bottom: 1.75rem;
}

/* Buttons: pills; the primary one is a sticker with a hard shadow. */
.c-button {
    border-radius: 999px;
    padding: 0.9375rem 1.625rem;
    font-weight: 800;
    border: 2px solid currentColor;
    transition:
        translate 0.15s ease,
        box-shadow 0.15s ease;
}
.c-button:hover {
    background: color-mix(in oklab, currentColor 8%, transparent);
}
.c-button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--foreground);
    box-shadow: 4px 4px 0 var(--foreground);
}
.c-button--primary:hover {
    background: var(--primary);
    translate: 2px 2px;
    box-shadow: 2px 2px 0 var(--foreground);
}

/* Photos sit on mint; the big ones are stickers too. */
.c-photo {
    background: var(--mint);
    border-radius: 2rem;
}
.c-hero__photo,
.c-prices__photo,
.c-reviews__photo,
.c-team__photo,
.c-steps__item,
.c-reviews__item,
.c-reviews__rating,
.c-form__form,
.c-hero__badge {
    border: 2px solid var(--base-foreground);
    box-shadow: 6px 6px 0 var(--base-foreground);
}

/* Seams: a curve at the bottom of a band, cut from the next band's colour. The platform says
   which tone follows (data-next-tone), so the seam stays right when the school reorders. */
.c-hero,
.c-steps,
.c-reviews {
    position: relative;
}
.c-hero::after,
.c-steps::after,
.c-reviews::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: var(--seam);
    pointer-events: none;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    background: var(--base-background);
}
.c-hero::after {
    mask-image: url("./img/seam-hero.svg");
}
.c-steps::after {
    mask-image: url("./img/seam-steps.svg");
}
.c-reviews::after {
    mask-image: url("./img/seam-reviews.svg");
}
[data-next-tone="ground"]::after {
    background: var(--base-background);
}
[data-next-tone="tint"]::after {
    background: var(--base-secondary);
}
[data-next-tone="dark"]::after {
    background: var(--base-foreground);
}
[data-next-tone="accent"]::after {
    background: var(--base-primary);
}
[data-next-tone="butter"]::after {
    background: var(--butter);
}
[data-next-tone="sky"]::after {
    background: var(--sky);
}

/* Strip and header: the header shares the hero's mint band. */
.c-strip {
    font-size: 0.8125rem;
    font-weight: 600;
}
.c-header__inner {
    padding-block: 1.25rem;
}
.c-header__brand {
    font-size: 1.25rem;
    letter-spacing: -0.04em;
}
.c-header__mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--foreground);
    background: var(--primary);
    font-size: 1rem;
}
.c-header__nav {
    font-weight: 700;
}
.c-header__link:hover {
    color: var(--primary-ink);
}
.c-header__cta {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}
@media (min-width: 1024px) {
    .c-header__brand {
        font-size: 1.5rem;
    }
}

/* Hero: text left, sticker photo right, the band runs on under the sign-up card. */
.c-hero {
    padding-top: 2rem;
    padding-bottom: 11rem;
}
.c-hero__inner {
    gap: 3rem;
}
.c-hero__line {
    display: block;
}
.c-hero__mark {
    position: relative;
    display: inline-block;
    color: var(--primary-ink);
}
/* The marked word stays on one line where it can; a 19-letter word on a phone may break. */
@media (min-width: 640px) {
    .c-hero__mark {
        white-space: nowrap;
    }
}
/* The page's single accent device: one pink word riding a wavy road-line underline. */
.c-hero__mark::after {
    content: "";
    position: absolute;
    left: 0;
    top: 92%;
    width: 100%;
    height: 0.22em;
    background: currentColor;
    mask-image: url("./img/wave.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
.c-hero__lead {
    margin-top: 2.25rem;
    max-width: 36rem;
    font-size: 1.25rem;
    line-height: 1.6;
}
.c-hero__actions {
    margin-top: 2.25rem;
}
.c-hero__photo {
    aspect-ratio: 14 / 15;
    border-radius: 2.5rem 2.5rem 2.5rem 7rem;
}
.c-hero__badge {
    right: 0.75rem;
    bottom: -1.25rem;
    max-width: calc(100% - 1.5rem);
    rotate: 3deg;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--butter);
    color: var(--base-foreground);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}
.c-hero__badge-value {
    font-size: 1.875rem;
}
@media (min-width: 1024px) {
    .c-hero {
        padding-top: 3rem;
        padding-bottom: 16rem;
    }
    .c-hero__inner {
        grid-template-columns: 7fr 5fr;
        gap: 2.5rem;
    }
    .c-hero__badge {
        right: -1.25rem;
    }
}

/* Sign-up card straddles the hero curve; the numbers sit under it on the cream ground. */
.c-form {
    padding-top: 0;
    padding-bottom: 0;
}
.c-form__form {
    position: relative;
    z-index: 10;
    margin-top: -9rem;
    padding: 1.5rem;
    border-radius: 2rem;
    background: var(--card);
}
.c-form__heading {
    font-size: 1.5rem;
}
.c-form__note {
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-form__fields {
    gap: 1.25rem;
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    border: 2px solid var(--base-foreground);
    border-radius: 0.875rem;
    background: var(--base-background);
    color: var(--base-foreground);
    font-weight: 600;
}
.c-form__field input:focus-visible,
.c-form__field select:focus-visible,
.c-form__field textarea:focus-visible {
    outline: 3px solid var(--base-primary);
    outline-offset: 2px;
}
.c-form__info {
    border-radius: 1rem;
    background: var(--mint);
    color: var(--base-foreground);
}
.c-form__error {
    color: #c2255c;
}
.c-form__status {
    border-radius: 1rem;
    background: var(--butter);
    color: var(--base-foreground);
}
@media (min-width: 640px) {
    .c-form__form {
        padding: 2rem;
    }
}
@media (min-width: 1024px) {
    .c-form__form {
        margin-top: -12rem;
        padding: 2.5rem;
    }
    .c-form__heading {
        font-size: 1.75rem;
    }
    .c-form__fields[data-count="4"] {
        grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
    }
}
.c-numbers {
    padding-top: 4rem;
    padding-bottom: 5rem;
}
.c-numbers__items {
    gap: 2.5rem 2rem;
}
.c-numbers__value {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}
.c-numbers__label,
.c-numbers__detail {
    font-weight: 600;
    color: var(--muted-foreground);
}
@media (min-width: 1024px) {
    .c-numbers {
        padding-top: 6rem;
        padding-bottom: 7rem;
    }
}

/* The four stages: pastel cards hung on a dashed road line, each a little lower than the last. */
.c-steps {
    padding-top: 6rem;
    padding-bottom: 10rem;
}
.c-steps__head {
    display: grid;
    gap: 2.5rem;
    align-items: end;
}
.c-steps__lead {
    margin-top: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: inherit;
}
.c-steps__items {
    position: relative;
    margin-top: 4rem;
    gap: 2rem;
    align-items: start;
}
.c-steps__items::before {
    content: "";
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    background: var(--base-foreground);
    mask-image: url("./img/road.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
.c-steps__item {
    position: relative;
    padding: 1.75rem;
    border-radius: 1.75rem;
    color: var(--base-foreground);
}
.c-steps__item[data-i="1"] {
    background: var(--mint);
}
.c-steps__item[data-i="2"] {
    background: var(--sky);
}
.c-steps__item[data-i="3"] {
    background: var(--rose);
}
.c-steps__item[data-i="4"],
.c-steps__item[data-i="5"] {
    background: var(--base-card);
}
.c-steps__index {
    font-size: 3.75rem;
}
.c-steps__when {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.c-steps__title {
    margin-top: 1.5rem;
    font-size: 1.25rem;
}
.c-steps__text {
    margin-top: 0.75rem;
    font-weight: 500;
}
@media (min-width: 1024px) {
    .c-steps {
        padding-top: 8rem;
        padding-bottom: 14rem;
    }
    .c-steps__head {
        grid-template-columns: 7fr 1fr 4fr;
        grid-template-rows: auto auto;
    }
    .c-steps__eyebrow,
    .c-steps__heading {
        grid-column: 1;
    }
    .c-steps__lead {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: end;
    }
    .c-steps__items {
        margin-top: 6rem;
        gap: 1.75rem;
    }
    .c-steps__items::before {
        display: block;
    }
    .c-steps__item[data-i="2"] {
        margin-top: 5rem;
    }
    .c-steps__item[data-i="3"] {
        margin-top: 1.5rem;
    }
    .c-steps__item[data-i="4"] {
        margin-top: 7rem;
    }
}

/* Prices: dark band, a tinted photo under the lead, the list on the right. */
.c-prices {
    padding-block: 6rem;
}
.c-prices__lead {
    margin-top: 1.75rem;
    max-width: 28rem;
    font-size: 1.125rem;
}
.c-prices__photo {
    margin-top: 2.5rem;
    max-width: 28rem;
    border-radius: 2rem 2rem 5rem 2rem;
}
.c-prices__table {
    table-layout: fixed;
}
.c-prices__caption {
    letter-spacing: 0.12em;
}
.c-prices__item {
    font-weight: 600;
}
.c-prices__price {
    width: 7.5rem;
    font-size: 1.25rem;
}
.c-prices__typical {
    border-radius: 1.5rem;
    padding: 1.5rem 1.75rem;
}
.c-prices__typical-total {
    font-size: 2.25rem;
}
@media (min-width: 640px) {
    .c-prices__price {
        width: 9rem;
        font-size: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .c-prices {
        padding-block: 8rem;
    }
    .c-prices__inner {
        grid-template-columns: 5fr 1fr 6fr;
        gap: 2.5rem;
    }
    .c-prices__body {
        grid-column: 3;
    }
    .c-prices__photo {
        margin-top: 3.5rem;
    }
    .c-prices__typical-total {
        font-size: 3rem;
    }
}

/* Team: three pastel portrait cards, the middle one a step lower. */
.c-team {
    padding-block: 6rem;
}
.c-team__head {
    max-width: 48rem;
}
.c-team__lead {
    margin-top: 1.5rem;
    font-size: 1.125rem;
}
.c-team__items {
    margin-top: 3.5rem;
    gap: 2.5rem;
}
.c-team__photo,
.c-team__initial {
    aspect-ratio: 9 / 11;
    border-radius: 2rem;
}
.c-team__item[data-i="1"] .c-team__photo,
.c-team__item[data-i="4"] .c-team__photo,
.c-team__item[data-i="7"] .c-team__photo,
.c-team__item[data-i="1"] .c-team__initial,
.c-team__item[data-i="4"] .c-team__initial,
.c-team__item[data-i="7"] .c-team__initial {
    background: var(--mint);
}
.c-team__item[data-i="2"] .c-team__photo,
.c-team__item[data-i="5"] .c-team__photo,
.c-team__item[data-i="8"] .c-team__photo,
.c-team__item[data-i="2"] .c-team__initial,
.c-team__item[data-i="5"] .c-team__initial,
.c-team__item[data-i="8"] .c-team__initial {
    background: var(--rose);
}
.c-team__item[data-i="3"] .c-team__photo,
.c-team__item[data-i="6"] .c-team__photo,
.c-team__item[data-i="3"] .c-team__initial,
.c-team__item[data-i="6"] .c-team__initial {
    background: var(--sky);
}
.c-team__initial {
    border: 2px solid var(--base-foreground);
    box-shadow: 6px 6px 0 var(--base-foreground);
    color: var(--base-foreground);
    font-size: 6rem;
}
.c-team__name {
    margin-top: 1.75rem;
    font-size: 1.25rem;
}
.c-team__role {
    font-weight: 700;
}
@media (min-width: 1024px) {
    .c-team {
        padding-block: 8rem;
    }
    .c-team__items {
        margin-top: 5rem;
        gap: 2rem;
    }
    .c-team__item[data-i="2"],
    .c-team__item[data-i="5"],
    .c-team__item[data-i="8"] {
        margin-top: 3.5rem;
    }
}

/* Beat: the street going by, edge to edge. */
.c-beat__photo {
    border-radius: 0;
}

/* Reviews: sky band, a tilted photo and the Google card left, the quotes right. */
.c-reviews {
    padding-top: 6rem;
    padding-bottom: 10rem;
}
.c-reviews__photo {
    margin-top: 2.5rem;
    max-width: 20rem;
    rotate: -2deg;
}
.c-reviews__rating {
    margin-top: 2.5rem;
    border-radius: 1.75rem;
    padding: 1.5rem;
}
.c-reviews__rating-value {
    font-size: 2.25rem;
}
.c-reviews__rating-link {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.c-reviews__items {
    gap: 1.75rem;
}
.c-reviews__item {
    border-radius: 1.75rem;
    padding: 1.75rem;
    background: var(--base-card);
    color: var(--base-foreground);
}
.c-reviews__item[data-i="2"] {
    background: var(--butter);
}
.c-reviews__quote {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    hyphens: auto;
}
@media (min-width: 1024px) {
    .c-reviews {
        padding-top: 8rem;
        padding-bottom: 14rem;
    }
    .c-reviews__inner {
        grid-template-columns: 4fr 1fr 7fr;
        gap: 2.5rem;
    }
    .c-reviews__items {
        grid-column: 3;
    }
    .c-reviews__item {
        padding: 2.25rem;
    }
    .c-reviews__item[data-i="2"],
    .c-reviews__items > .c-reviews__disclosure {
        margin-left: 3rem;
    }
    .c-reviews__quote {
        font-size: 1.5rem;
    }
}

/* Contact: the pink band, the invitation left, the locations right. */
.c-contact {
    padding-block: 5rem;
}
.c-contact__text {
    margin-top: 1.5rem;
    max-width: 32rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: inherit;
}
.c-contact__actions {
    margin-top: 2.25rem;
}
.c-contact__place-name {
    font-size: 1.125rem;
}
@media (min-width: 1024px) {
    .c-contact {
        padding-block: 7rem;
    }
    .c-contact__inner {
        grid-template-columns: 6fr 1fr 5fr;
        gap: 2.5rem;
    }
    .c-contact__places {
        grid-column: 3;
    }
}

/* Footer: the sign-off asks a pink question. */
.c-footer {
    padding-top: 4rem;
}
.c-footer__signoff {
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    overflow-wrap: anywhere;
}
.c-footer__signoff::after {
    content: "?";
    color: var(--primary);
}
.c-footer__nav a:hover {
    color: var(--foreground);
}
@media (min-width: 1024px) {
    .c-footer {
        padding-top: 5rem;
    }
}

/* Impressum and Datenschutz: the legal text arrives as bare HTML, styled by element. */
.c-legal-title .c-wrap {
    padding-top: 1rem;
    padding-bottom: 3.5rem;
}
.c-legal {
    padding-block: 4rem;
}
.c-legal__text h2 {
    letter-spacing: -0.03em;
}
.c-legal__text p,
.c-legal__text li {
    font-weight: 500;
}
.c-legal__text a {
    text-decoration-thickness: 2px;
}
.c-legal__text a:hover {
    color: var(--primary-ink);
}
.c-legal__source {
    border-top: 2px solid var(--foreground);
}
@media (min-width: 1024px) {
    .c-legal-title .c-wrap {
        padding-top: 2rem;
        padding-bottom: 5rem;
    }
    .c-legal {
        padding-block: 6rem;
    }
}