/* ==========================================================================
   Demo site "verein" (W6a): Musikverein Zeiselfeld, an invented music club
   Loaded after css/beispiele/rahmen.css; read the rules at the top of that file.

   Identity: deep blue and signal yellow like a band uniform, coral and mint as
   festival accents. IBM Plex Sans 600 with tight tracking for headings, round
   "sticker" shapes with hard offset shadows, bunting as the divider. Nothing
   from the uhl-it.at system (no violet, no ink, no honeycomb).

   Mobile first; breakpoints at 30em, 36em, 48em, 56em and 64em.

   Contrast (WCAG 2.2 AA), measured pairs:
     white on blue #1A2FA0 10.7:1 · yellow on blue 7.3:1 · yellow on night 11.2:1
     night on yellow 11.2:1 · night on cream 15.5:1 · night on coral 5.9:1
     text-2 #3D4670 on white 9.1:1, on cream 8.6:1, on the disabled grey 7.4:1
     pale blue #C9D3FF on night 11.2:1 · blue on white 10.7:1
   Focus ring: 3px, night blue on light surfaces, yellow on blue and night
   (set per surface through --fokus).
   ========================================================================== */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }

:root {
    --vz-blau: #1A2FA0;
    --vz-nacht: #0E1A4D;
    --vz-gelb: #FFD019;
    --vz-koralle: #FF6B5B;
    --vz-koralle-hell: #FFB3A8;
    --vz-minze: #9FE0BC;
    --vz-hellblau: #DCE4FF;
    --vz-creme: #FFF8E1;
    --vz-weiss: #FFFFFF;
    --vz-grau: #E4E7F2;           /* disabled button */
    --vz-text: #0E1A4D;
    --vz-text-2: #3D4670;
    --vz-text-hell: #C9D3FF;      /* secondary text on night blue */
    --vz-schrift: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vz-breite: 72rem;
    --vz-rand: 1rem;              /* side gutter */
    --vz-schatten: 5px 5px 0 var(--vz-nacht);
    --fokus: var(--vz-nacht);
}


/* Base ---------------------------------------------------------------------- */

body {
    background: var(--vz-weiss);
    color: var(--vz-text);
    font-family: var(--vz-schrift);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: break-word;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }   /* no single word on the last line, as on the main site */
p, li, dd, figcaption { hyphens: auto; }

a { color: inherit; text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Screen-reader-only text. Same class name as on uhl-it.at, so the layout checks in
   dev/router.php skip it like they do there. */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.vz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Keeps text on one line, e.g. the e-mail domain, which would otherwise break at its own hyphen */
.vz-ganz { white-space: nowrap; }

.vz-innen {
    max-width: var(--vz-breite);
    margin-inline: auto;
    padding-inline: var(--vz-rand);
}

.vz-abschnitt { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem); }

.vz-kicker {
    display: inline-block;
    padding: 0.3rem 0.875rem;
    border-radius: 999px;
    background: var(--vz-gelb);
    color: var(--vz-nacht);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vz-kopfzeile { max-width: 44rem; margin-bottom: 2.5rem; }

h2 {
    margin-top: 0.875rem;
    font-size: clamp(2.125rem, 1.5rem + 3vw, 3.25rem);
    letter-spacing: -0.03em;
}
/* Short yellow stroke under every section heading */
h2::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 0.4rem;
    margin-top: 0.875rem;
    border-radius: 999px;
    background: var(--vz-gelb);
    transform: rotate(-2deg);
}

.vz-kopfzeile__lead {
    margin-top: 1.25rem;
    font-size: 1.125rem;
    color: var(--vz-text-2);
}


/* Buttons ------------------------------------------------------------------- */

.vz-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 999px;
    background: var(--vz-gelb);
    color: var(--vz-nacht);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--vz-nacht);
    cursor: pointer;
}
.vz-knopf:hover { box-shadow: 6px 6px 0 var(--vz-nacht); transform: translate(-2px, -2px); }

.vz-knopf--hell {
    background: transparent;
    color: var(--vz-weiss);
    border-color: var(--vz-weiss);
    box-shadow: none;
}
.vz-knopf--hell:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; transform: none; }

/* The submit button of the demo form: disabled, but still readable */
.vz-knopf:disabled,
.vz-knopf:disabled:hover {
    background: var(--vz-grau);
    color: var(--vz-text-2);
    border-style: dashed;
    border-color: var(--vz-text-2);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
    .vz-knopf, .vz-menue a { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
}


/* Header -------------------------------------------------------------------- */

.vz-kopf {
    --fokus: var(--vz-gelb);
    background: var(--vz-blau);
    color: var(--vz-weiss);
}

.vz-kopf__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1rem 0.5rem;
}

/* Plain text, not a link (one-page site) */
.vz-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--vz-weiss);
}
.vz-marke__zeichen { flex: none; width: 3rem; height: 3rem; }
.vz-marke__text { display: flex; flex-direction: column; line-height: 1.05; }
.vz-marke__klein {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vz-gelb);
}
.vz-marke__gross { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }

.vz-menue { flex: 1 1 100%; }
.vz-menue ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vz-menue a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: var(--vz-weiss);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}
.vz-menue a:hover { background: rgba(255, 255, 255, 0.14); text-decoration: underline; }
.vz-menue a.vz-menue__ziel {
    background: var(--vz-gelb);
    border-color: var(--vz-gelb);
    color: var(--vz-nacht);
    font-weight: 600;
}
.vz-menue a.vz-menue__ziel:hover { background: var(--vz-weiss); border-color: var(--vz-weiss); }

@media (min-width: 64em) {
    .vz-kopf__innen { flex-wrap: nowrap; padding-block: 1.25rem; }
    .vz-menue { flex: 0 1 auto; }
    .vz-menue ul { justify-content: flex-end; }
}


/* Hero ---------------------------------------------------------------------- */

.vz-held {
    --fokus: var(--vz-gelb);
    background: var(--vz-blau);
    color: var(--vz-weiss);
    padding-top: clamp(2rem, 1rem + 4vw, 4rem);
    overflow: clip;
}

.vz-held__raster { display: grid; gap: 2.5rem; align-items: center; }

.vz-held .vz-kicker { background: var(--vz-weiss); }

.vz-held h1 {
    margin-top: 1.125rem;
    font-size: clamp(2.375rem, 1.4rem + 4.8vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.vz-gelbwort { color: var(--vz-gelb); }

.vz-held__lead {
    max-width: 36rem;
    margin-top: 1.25rem;
    font-size: 1.1875rem;
    line-height: 1.55;
}

.vz-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 1rem;
    margin-top: 2rem;
}

.vz-held__bild {
    position: relative;
    justify-self: center;
    width: min(100%, 25rem);
}
/* On phones the drawing stays small, so the card with the next appearance comes up early */
.vz-held__svg { display: block; width: min(100%, 15rem); height: auto; margin-inline: auto; }

/* Sticker with the next appearance, overlapping the bottom of the drawing */
.vz-naechst {
    --fokus: var(--vz-nacht);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 19rem;
    margin-top: -2rem;
    padding: 1rem 1.25rem 1.125rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 1.25rem;
    background: var(--vz-weiss);
    color: var(--vz-nacht);
    box-shadow: 6px 6px 0 var(--vz-nacht);
    transform: rotate(-2deg);
}
.vz-naechst__label {
    align-self: flex-start;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--vz-koralle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vz-naechst__titel { margin-top: 0.25rem; font-size: 1.3125rem; font-weight: 600; line-height: 1.2; }
.vz-naechst__wann { color: var(--vz-text-2); font-size: 0.9375rem; line-height: 1.45; }

/* Bunting: an SVG pattern, repeated over the full width */
.vz-wimpel { display: block; width: 100%; height: 2.5rem; }
.vz-held .vz-wimpel { margin-top: 3rem; }

@media (min-width: 56em) {
    .vz-held__raster { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; }
    .vz-held__svg { width: 100%; }
    .vz-naechst { margin-top: -3rem; margin-left: -1.5rem; }
}


/* Dates --------------------------------------------------------------------- */

.vz-termine { background: var(--vz-creme); }

.vz-probe {
    --fokus: var(--vz-gelb);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 48rem;
    margin-bottom: 2.5rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--vz-blau);
    color: var(--vz-weiss);
}
.vz-probe__zeichen { flex: none; width: 3rem; height: 3rem; }

.vz-termine__liste {
    display: grid;
    gap: 1.25rem;
    padding: 0;
    list-style: none;
}

.vz-termin {
    display: grid;
    gap: 0.875rem;
    align-content: start;
    padding: 1rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 1.25rem;
    background: var(--vz-weiss);
    box-shadow: var(--vz-schatten);
}

/* Date badge: a pill on narrow phones, a block beside the text from 30em */
.vz-termin__datum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    justify-self: start;
    padding: 0.25rem 0.875rem;
    border: 2px solid var(--vz-nacht);
    border-radius: 999px;
    background: var(--vz-farbe, var(--vz-hellblau));
    color: var(--vz-nacht);
    font-weight: 600;
    line-height: 1.2;
}
.vz-termin__wt, .vz-termin__monat { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vz-termin__tag { font-size: 1.375rem; letter-spacing: -0.02em; }

.vz-termin__art {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--vz-farbe, var(--vz-hellblau));
    color: var(--vz-nacht);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vz-termin__titel { margin-top: 0.5rem; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.015em; }
.vz-termin__wann { margin-top: 0.375rem; font-weight: 600; font-size: 1rem; }
.vz-termin__notiz { margin-top: 0.375rem; color: var(--vz-text-2); font-size: 0.96875rem; line-height: 1.5; }

.vz-termin--schnuppern { --vz-farbe: var(--vz-hellblau); }
.vz-termin--schoppen   { --vz-farbe: var(--vz-koralle-hell); }
.vz-termin--kirche     { --vz-farbe: var(--vz-minze); }
.vz-termin--konzert    { --vz-farbe: var(--vz-gelb); }
.vz-termin--fest       { --vz-farbe: var(--vz-koralle); }

/* Shown only when every date in the data is over */
.vz-termine__leer {
    max-width: 44rem;
    padding: 1rem 1.25rem;
    border: 3px dashed var(--vz-nacht);
    border-radius: 1.25rem;
    background: var(--vz-weiss);
    font-weight: 600;
}

@media (min-width: 30em) {
    .vz-termin { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.125rem; padding: 1.125rem; }
    .vz-termin__datum {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        justify-self: stretch;
        align-self: start;
        gap: 0.125rem;
        min-height: 6rem;
        padding: 0.625rem 0.25rem;
        border-radius: 1rem;
        text-align: center;
    }
    .vz-termin__wt, .vz-termin__monat { font-size: 0.75rem; }
    .vz-termin__tag { font-size: 2.25rem; line-height: 1; }
    .vz-termin__tag--lang { font-size: 1.375rem; line-height: 1.2; }
}

@media (min-width: 52em) {
    .vz-termine__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}


/* Festival pictures ---------------------------------------------------------- */

.vz-fest {
    --fokus: var(--vz-gelb);
    background: var(--vz-nacht);
    color: var(--vz-weiss);
}
.vz-fest .vz-kopfzeile__lead { color: var(--vz-text-hell); }
.vz-fest__hinweis { margin-top: 0.75rem; color: var(--vz-text-hell); font-size: 0.9375rem; font-style: italic; }

.vz-galerie {
    display: grid;
    gap: 2.25rem 2rem;
    padding: 0.75rem 0 0;
    list-style: none;
}

/* Each picture as a print with a strip of tape, slightly askew */
.vz-bild {
    position: relative;
    padding: 0.625rem 0.625rem 0;
    border-radius: 0.375rem;
    background: var(--vz-weiss);
    color: var(--vz-nacht);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
}
.vz-bild::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 50%;
    width: 5.5rem;
    height: 1.375rem;
    margin-left: -2.75rem;
    background: rgba(255, 208, 25, 0.85);
    transform: rotate(-3deg);
}
.vz-bild svg { display: block; width: 100%; height: auto; border-radius: 0.25rem; }
.vz-bild figcaption { padding: 0.75rem 0.25rem 1rem; font-size: 0.96875rem; line-height: 1.45; }
.vz-bild__tag {
    display: block;
    margin-bottom: 0.125rem;
    color: var(--vz-blau);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vz-galerie > li:nth-child(3n+1) .vz-bild { transform: rotate(-1.2deg); }
.vz-galerie > li:nth-child(3n+2) .vz-bild { transform: rotate(0.8deg); }
.vz-galerie > li:nth-child(3n) .vz-bild { transform: rotate(-0.4deg); }

@media (min-width: 36em) {
    .vz-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
    .vz-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2.25rem; }
}


/* About --------------------------------------------------------------------- */

.vz-ueber__raster { display: grid; gap: 2.75rem; align-items: center; }
.vz-ueber__text { max-width: 40rem; }
.vz-ueber__text h2 { margin-bottom: 1.5rem; }
.vz-ueber__text p:not(.vz-kicker) { margin-top: 1rem; }

.vz-zahlen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
}
.vz-zahlen li {
    padding: 1rem 0.875rem 1.125rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 1.25rem;
    background: var(--vz-gelb);
    color: var(--vz-nacht);
    box-shadow: var(--vz-schatten);
}
.vz-zahlen li:nth-child(odd) { transform: rotate(-1.5deg); }
.vz-zahlen li:nth-child(even) { transform: rotate(1.5deg); }
.vz-zahlen li:nth-child(2) { background: var(--vz-blau); color: var(--vz-weiss); }
.vz-zahlen li:nth-child(3) { background: var(--vz-koralle-hell); }
.vz-zahlen li:nth-child(4) { background: var(--vz-minze); }
.vz-zahlen strong {
    display: block;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
}
.vz-zahlen small { font-size: 0.5em; letter-spacing: 0; }
.vz-zahlen span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    hyphens: auto;
}

@media (min-width: 56em) {
    .vz-ueber__raster { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
    .vz-zahlen { gap: 1.375rem; }
    .vz-zahlen li { padding: 1.375rem 1.25rem 1.5rem; }
}


/* Board --------------------------------------------------------------------- */

.vz-vorstand { background: var(--vz-creme); }

.vz-personen {
    display: grid;
    gap: 1.25rem;
    padding: 0;
    list-style: none;
}
.vz-person {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 1.25rem;
    background: var(--vz-weiss);
    box-shadow: var(--vz-schatten);
}
.vz-person__monogramm {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 50%;
    background: var(--vz-gelb);
    color: var(--vz-nacht);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.vz-person:nth-child(4n+2) .vz-person__monogramm { background: var(--vz-koralle-hell); }
.vz-person:nth-child(4n+3) .vz-person__monogramm { background: var(--vz-hellblau); }
.vz-person:nth-child(4n) .vz-person__monogramm { background: var(--vz-minze); }

.vz-person__rolle {
    color: var(--vz-blau);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vz-person__name { margin-top: 0.125rem; font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.vz-person__text { margin-top: 0.375rem; color: var(--vz-text-2); font-size: 0.96875rem; line-height: 1.5; }

@media (min-width: 40em) {
    .vz-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 64em) {
    .vz-personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Join ---------------------------------------------------------------------- */

.vz-mitmachen {
    --fokus: var(--vz-nacht);
    background: var(--vz-gelb);
    color: var(--vz-nacht);
}
.vz-mitmachen .vz-kicker { background: var(--vz-nacht); color: var(--vz-gelb); }
.vz-mitmachen h2::after { background: var(--vz-nacht); }
.vz-mitmachen .vz-kopfzeile__lead { color: var(--vz-nacht); }

.vz-mitmachen__raster { display: grid; gap: 2.75rem; align-items: start; }

.vz-wege { display: grid; gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
.vz-wege li {
    position: relative;
    padding-left: 2.25rem;
    line-height: 1.5;
}
/* A filled diamond as the marker: a hollow circle next to the form would read as a radio button */
.vz-wege li::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.15rem;
    background: var(--vz-nacht);
    transform: rotate(45deg);
}
.vz-wege strong { display: block; font-size: 1.125rem; font-weight: 600; }

.vz-formular {
    padding: 1.5rem 1.25rem 1.75rem;
    border: 3px solid var(--vz-nacht);
    border-radius: 1.5rem;
    background: var(--vz-weiss);
    color: var(--vz-nacht);
    box-shadow: 8px 8px 0 var(--vz-nacht);
}
.vz-formular h3 { font-size: 1.625rem; letter-spacing: -0.025em; }
.vz-formular__intro { margin-top: 0.375rem; color: var(--vz-text-2); }

.vz-feld { margin-top: 1.25rem; }
.vz-feld label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
.vz-feld__frei { font-weight: 400; color: var(--vz-text-2); }

.vz-feld input,
.vz-feld select,
.vz-feld textarea {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--vz-text-2);
    border-radius: 0.75rem;
    background: var(--vz-weiss);
    color: var(--vz-nacht);
    font-size: 1rem;
    line-height: 1.4;
}
.vz-feld textarea { min-height: 7.5rem; resize: vertical; }
.vz-feld input:focus-visible,
.vz-feld select:focus-visible,
.vz-feld textarea:focus-visible { border-color: var(--vz-nacht); outline-offset: 2px; }

.vz-senden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.75rem;
}
.vz-senden__hinweis {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--vz-gelb);
    color: var(--vz-nacht);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}
.vz-formular__klein { margin-top: 1.25rem; color: var(--vz-text-2); font-size: 0.9375rem; }

@media (min-width: 48em) {
    .vz-formular { padding: 2rem 2rem 2.25rem; }
}
@media (min-width: 56em) {
    .vz-mitmachen__raster { grid-template-columns: 0.95fr 1.05fr; gap: 4rem; }
}


/* Footer -------------------------------------------------------------------- */

.vz-fuss {
    --fokus: var(--vz-gelb);
    padding-bottom: 1.5rem;
    background: var(--vz-nacht);
    color: var(--vz-weiss);
    font-size: 1rem;
}
.vz-fuss .vz-wimpel { margin-bottom: 2.5rem; }

.vz-fuss__raster { display: grid; gap: 2rem; }
.vz-fuss__raster p + p { margin-top: 0.75rem; }

.vz-fuss__name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.vz-fuss__zeichen { flex: none; width: 2.5rem; height: 2.5rem; }

.vz-fuss__titel {
    margin: 0 0 0.75rem;
    color: var(--vz-gelb);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vz-fuss__titel::after { content: none; }

.vz-fuss__zeiten dt { font-weight: 600; }
.vz-fuss__zeiten dd + dt { margin-top: 0.5rem; }
.vz-fuss__zeiten dd { color: var(--vz-text-hell); }
.vz-fuss__klein { margin-top: 0.75rem; color: var(--vz-text-hell); font-size: 0.9375rem; }

.vz-fuss__unten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 211, 255, 0.3);
    color: var(--vz-text-hell);
    font-size: 0.9375rem;
}
.vz-fuss__oben {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    color: var(--vz-weiss);
    font-weight: 600;
}
.vz-fuss__oben:hover { color: var(--vz-gelb); }

@media (min-width: 48em) {
    .vz-fuss__raster { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
}


/* Wider gutters -------------------------------------------------------------- */

@media (min-width: 48em) {
    :root { --vz-rand: 2rem; }
}


/* Windows contrast themes: shadows and backgrounds disappear, keep the shapes */
@media (forced-colors: active) {
    .vz-knopf, .vz-menue a, .vz-kicker, .vz-termin__art, .vz-senden__hinweis, .vz-naechst__label { border: 2px solid CanvasText; }
    .vz-knopf:disabled { border-color: GrayText; color: GrayText; }
    h2::after { background: CanvasText; }
    .vz-wege li::before { forced-color-adjust: none; background: CanvasText; }
}

/* Print: no decoration, no tilt */
@media print {
    .vz-wimpel, .vz-held__svg, .vz-menue { display: none; }
    .vz-naechst, .vz-bild, .vz-zahlen li { transform: none; box-shadow: none; }
}