/* =========================================================================
   SILBERHORN – eigenständige Designschicht
   Bildwelt: Industriehalle, warmes Licht, Chrom, Lederpatina.
   Leitmotiv: die Beschriftungstafel am Fahrzeug ("BMW R 24 · 1938").
   ========================================================================= */

:root {
    --sh-night: #16170f;
    --sh-dark: #262a1d;
    --sh-olive: #3a3d2d;
    --sh-rust: #783927;
    --sh-rust-bright: #90472f;
    /* Rost wird auf dunklem Grund zu dunkel. Dieser Ton ist der gleiche
       Farbton, nur so weit aufgehellt, dass er auf Nachtoliv trägt. */
    --sh-rust-hell: #c9714f;
    --sh-beige: #e2d9c8;
    --sh-paper: #eeece8;
    --sh-matcha: #abac82;
    --sh-lime: #e0e6ba;
    --sh-ink: #1c1b19;

    --sh-on-dark: #f3f0e9;
    --sh-on-dark-muted: rgba(243, 240, 233, 0.72);
    --sh-on-dark-faint: rgba(243, 240, 233, 0.45);

    --sh-shell: min(100% - 2.5rem, 1280px);
    --sh-shell-narrow: min(100% - 2.5rem, 940px);
    --sh-pad: clamp(4.5rem, 9vw, 9rem);
    --sh-pad-sm: clamp(3rem, 6vw, 5rem);

    --sh-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
    --sh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   Bausteine
   ---------------------------------------------------------------------- */

.sh-shell {
    width: var(--sh-shell);
    margin-inline: auto;
}

.sh-shell--narrow {
    width: var(--sh-shell-narrow);
    margin-inline: auto;
}

.sh-band {
    padding-block: var(--sh-pad);
    position: relative;
}

.sh-band--tight {
    padding-block: var(--sh-pad-sm);
}

.sh-band--paper {
    background: var(--sh-paper);
    color: var(--sh-ink);
}

.sh-band--beige {
    background: var(--sh-beige);
    color: var(--sh-ink);
}

.sh-band--night {
    background: var(--sh-night);
    color: var(--sh-on-dark);
}

.sh-band--olive {
    background: var(--sh-olive);
    color: var(--sh-on-dark);
}

.sh-band--night h1,
.sh-band--night h2,
.sh-band--night h3,
.sh-band--night h4,
.sh-band--olive h1,
.sh-band--olive h2,
.sh-band--olive h3,
.sh-band--olive h4,
.sh-ride h1,
.sh-ride h2,
.sh-ride h3,
.sh-strip h1,
.sh-strip h2,
.sh-strip h3,
.sh-hero h1,
.sh-hero h2,
.sh-footer h2,
.sh-footer h3 {
    color: var(--sh-on-dark);
}

/* Dunkle Sektionen ausserhalb des Band-Systems erben dieselben Textfarben. */
.sh-ride .sh-lead,
.sh-strip .sh-lead {
    color: var(--sh-on-dark-muted);
}

.sh-ride .sh-plate,
.sh-strip .sh-plate {
    color: var(--sh-lime);
}

.sh-ride .sh-link,
.sh-strip .sh-link {
    color: var(--sh-lime);
}

/* Die Fahrzeugtafel.
   Vorbild sind die genieteten Typenschilder an den Exponaten: eine
   angeschraegte Plakette mit laufender Nummer, daneben die gesperrte
   Versalzeile. Die Nummer zaehlt sich je Seite selbst hoch, damit die
   Redaktion nichts pflegen muss. */
.sh-plate {
    align-items: center;
    color: var(--sh-rust);
    display: inline-flex;
    font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.78rem);
    font-weight: 700;
    gap: 0.75rem;
    letter-spacing: 0.2em;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
}

/* Die Nummer tritt zurück – Rust bleibt den Aktionen vorbehalten. */
.sh-plate::before {
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
    opacity: 0.72;
    content: counter(sh-section, decimal-leading-zero);
    counter-increment: sh-section;
    font-size: 0.94em;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 0.42em 0.5em 0.38em;
}

/* Ohne Nummer: im Hero, in Karten und ueberall dort, wo eine laufende
   Sektionsnummer nichts erklaeren wuerde. */
.sh-plate--plain::before {
    content: none;
}

/* Nur an einer Stelle zurücksetzen: ein zweiter counter-reset weiter
   innen eröffnet einen eigenen Zähler, und die Nummerierung springt
   mitten auf der Seite zurück auf 01. */
main {
    counter-reset: sh-section;
}

.sh-band--night .sh-plate,
.sh-band--olive .sh-plate {
    color: var(--sh-lime);
}

.sh-title {
    font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}

.sh-title--xl {
    font-size: clamp(2.6rem, 1.1rem + 5.6vw, 5.75rem);
    line-height: 0.98;
    text-transform: uppercase;
}

.sh-lead {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.62;
    margin: 1.25rem 0 0;
    max-width: 46rem;
}

.sh-band--night .sh-lead,
.sh-band--olive .sh-lead {
    color: var(--sh-on-dark-muted);
}

.sh-body {
    line-height: 1.7;
    max-width: 42rem;
}

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

.sh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

.sh-btn {
    align-items: center;
    border: 1.5px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 0.6rem;
    justify-content: center;
    letter-spacing: 0.01em;
    line-height: 1.2;
    min-height: 3.4rem;
    padding: 1rem 1.9rem;
    text-decoration: none;
    transition: background-color 200ms var(--sh-ease), color 200ms var(--sh-ease), border-color 200ms var(--sh-ease), transform 200ms var(--sh-ease);
}

.sh-btn--primary {
    background: var(--sh-rust);
    border-color: var(--sh-rust);
    color: #fff;
}

.sh-btn--primary:hover,
.sh-btn--primary:focus-visible {
    background: var(--sh-rust-bright);
    border-color: var(--sh-rust-bright);
    color: #fff;
    transform: translateY(-2px);
}

.sh-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.sh-btn--ghost:hover,
.sh-btn--ghost:focus-visible {
    background: currentColor;
    transform: translateY(-2px);
}

.sh-band--night .sh-btn--ghost:hover,
.sh-band--night .sh-btn--ghost:focus-visible,
.sh-band--olive .sh-btn--ghost:hover,
.sh-band--olive .sh-btn--ghost:focus-visible,
.sh-hero .sh-btn--ghost:hover,
.sh-hero .sh-btn--ghost:focus-visible {
    background: var(--sh-on-dark);
    color: var(--sh-night);
}

.sh-band--paper .sh-btn--ghost:hover,
.sh-band--paper .sh-btn--ghost:focus-visible,
.sh-band--beige .sh-btn--ghost:hover,
.sh-band--beige .sh-btn--ghost:focus-visible {
    background: var(--sh-ink);
    color: var(--sh-paper);
}

/* Textlink mit wanderndem Pfeil */
.sh-link {
    align-items: center;
    color: var(--sh-rust);
    display: inline-flex;
    font-weight: 700;
    gap: 0.5rem;
    text-decoration: none;
}

.sh-link::after {
    content: "→";
    transition: transform 220ms var(--sh-ease);
}

.sh-link:hover::after,
.sh-link:focus-visible::after {
    transform: translateX(5px);
}

.sh-band--night a,
.sh-band--olive a,
.sh-ride a,
.sh-strip a,
.sh-band--night .sh-link,
.sh-band--olive .sh-link {
    color: var(--sh-lime);
}

/* -------------------------------------------------------------------------
   Hero mit Video
   ---------------------------------------------------------------------- */

.sh-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin-block: 0;
    display: grid;
    align-items: end;
    overflow: clip;
    background: var(--sh-night);
    color: var(--sh-on-dark);
    isolation: isolate;
}

.sh-hero__media {
    position: absolute;
    inset: -8% 0 0;
    height: 116%;
    z-index: 0;
    will-change: transform;
}

/* Das Poster liegt dauerhaft unter dem Film. So fällt die Fläche auch
   während des Ladens nie auf Schwarz zurück; bei einer iOS-Sperre kann das
   Video vollständig aus der sichtbaren Ebene weichen. */
.sh-hero__media,
.sh-film__stage,
.sh-kontakt-kopf {
    background-image: var(--sh-poster) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Die drei Schleifen sind reine Atmosphäre. Im stehenden Zustand wird das
   native Video nicht entfernt, weil spätere Nachstarts sonst gestört werden;
   opacity und pointer-events lassen stattdessen nur das Poster darunter
   sichtbar. */
.sh-hero__media video,
.sh-film__preview,
.sh-kontakt-kopf__video {
    opacity: 1;
    pointer-events: none;
    transition: opacity 180ms var(--sh-ease-out);
}

.sh-loop-steht > video,
video.sh-loop-steht {
    opacity: 0;
    pointer-events: none;
}

/* Das unterdrückt ausschließlich die Media-Bedienoberfläche. Es hebt keine
   Autoplay-Sperre auf und erlaubt weiterhin lediglich das echte Verhalten
   von HTMLMediaElement.play(). */
.sh-hero__media video::-webkit-media-controls,
.sh-film__preview::-webkit-media-controls,
.sh-kontakt-kopf__video::-webkit-media-controls,
.sh-hero__media video::-webkit-media-controls-start-playback-button,
.sh-film__preview::-webkit-media-controls-start-playback-button,
.sh-kontakt-kopf__video::-webkit-media-controls-start-playback-button,
.sh-hero__media video::-webkit-media-controls-panel,
.sh-film__preview::-webkit-media-controls-panel,
.sh-kontakt-kopf__video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sh-hero__media video,
    .sh-film__preview,
    .sh-kontakt-kopf__video {
        transition-duration: 1ms;
    }
}

.sh-hero__media video,
.sh-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(22, 23, 15, 0.55) 0%, rgba(22, 23, 15, 0.15) 32%, rgba(22, 23, 15, 0.72) 78%, rgba(22, 23, 15, 0.94) 100%);
}

.sh-hero__inner {
    position: relative;
    z-index: 2;
    width: var(--sh-shell);
    margin-inline: auto;
    padding-block: clamp(8rem, 16vw, 12rem) clamp(3.5rem, 7vw, 6rem);
}

.sh-hero__plate {
    color: var(--sh-lime);
}

.sh-hero__title {
    color: #fff;
    margin: 0;
}

.sh-hero__lead {
    color: rgba(255, 255, 255, 0.9);
}

.sh-hero__aside {
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.95rem;
    gap: 0.35rem 1.1rem;
    margin-top: 2rem;
}

.sh-hero__aside a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.24em;
    text-decoration-thickness: 1px;
}

/* Nächster Öffnungstag im Startbild: für ältere Besucher groß, ruhig,
   kontrastreich und ohne Bewegung. Eigene dunkle Fläche, damit die
   Lesbarkeit nicht vom Videobild abhängt. */
.sh-hero__open {
    background: rgba(22, 23, 15, 0.82);
    border-left: 4px solid var(--sh-lime);
    color: #fff;
    display: inline-grid;
    gap: 0.2rem;
    margin-top: 2rem;
    max-width: 100%;
    padding: 1rem 1.35rem 1.1rem;
}

.sh-hero__open p {
    margin: 0;
}

.sh-hero__open-kicker {
    color: var(--sh-lime);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sh-hero__open-date {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
}

.sh-hero__open-time {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-variant-numeric: tabular-nums;
}

.sh-hero__open-link {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0.45rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 0.24em;
    text-decoration-thickness: 1px;
}

.sh-hero__open-link:hover,
.sh-hero__open-link:focus-visible {
    color: var(--sh-lime);
}

/* Der Hinweis ist eine echte Schaltflaeche: er springt zur naechsten
   Sektion. Die Skala darunter zitiert eine Instrumententeilung, der
   Zeiger wandert einmal von oben nach unten durch. */
.sh-hero__cue {
    align-items: center;
    bottom: clamp(1.1rem, 2.5vw, 2rem);
    color: rgba(255, 255, 255, 0.62);
    display: grid;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.6rem;
    justify-items: center;
    left: 50%;
    letter-spacing: 0.24em;
    padding: 0.75rem 1.25rem 0.5rem;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: color 260ms var(--sh-ease);
    z-index: 3;
}

.sh-hero__cue:hover,
.sh-hero__cue:focus-visible {
    color: #fff;
}

.sh-hero__cue-rail {
    display: block;
    height: 2.6rem;
    position: relative;
    width: 9px;
    /* Teilstriche der Skala */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px 100%);
    background-size: 100% 0.52rem;
    background-repeat: repeat-y;
}

/* Der Zeiger */
.sh-hero__cue-rail::after {
    background: var(--sh-lime);
    content: "";
    height: 3px;
    left: -3px;
    position: absolute;
    top: 0;
    width: 15px;
    animation: sh-needle 2.6s var(--sh-ease) infinite;
}

.sh-hero__cue:hover .sh-hero__cue-rail::after,
.sh-hero__cue:focus-visible .sh-hero__cue-rail::after {
    animation-duration: 1.5s;
}

@keyframes sh-needle {
    0%   { transform: translateY(0); opacity: 0; }
    18%  { opacity: 1; }
    70%  { transform: translateY(2.3rem); opacity: 1; }
    100% { transform: translateY(2.6rem); opacity: 0; }
}

/* -------------------------------------------------------------------------
   Statement mit zeilenweisem Reveal
   ---------------------------------------------------------------------- */

.sh-statement__text {
    font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}

.sh-statement__text em {
    color: var(--sh-rust);
    font-style: normal;
}

.sh-band--night .sh-statement__text em,
.sh-band--olive .sh-statement__text em {
    color: var(--sh-lime);
}

.sh-statement__note {
    color: inherit;
    margin-top: 2rem;
    max-width: 34rem;
    opacity: 0.78;
}

/* -------------------------------------------------------------------------
   Die Fahrt: Motorrad quert beim Scrollen die Bühne
   ---------------------------------------------------------------------- */

.sh-ride {
    background: var(--sh-night);
    color: var(--sh-on-dark);
    overflow: clip;
    padding-block: clamp(5rem, 10vw, 8rem) 0;
    position: relative;
}

.sh-ride__intro {
    position: relative;
    z-index: 2;
}

.sh-ride__stage {
    position: relative;
    height: clamp(19rem, 40vw, 34rem);
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

/* Der Abstand unter der Bühne gehört der Sektion, nicht der Bühne –
   sonst tritt er als heller Balken aus dem dunklen Band heraus. */
.sh-ride {
    padding-bottom: clamp(4rem, 9vw, 8rem);
}

/* Fahrbahn */
.sh-ride__road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(3.2rem, 6vw, 5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243, 240, 233, 0.28) 12%, rgba(243, 240, 233, 0.28) 88%, transparent);
}

.sh-ride__road::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(224, 230, 186, 0.55) 0 22px, transparent 22px 46px);
    opacity: 0.5;
}

/* Beschriftungsebene bleibt im Raster der Seite */
.sh-ride__overlay {
    position: absolute;
    inset: 0;
    width: var(--sh-shell);
    margin-inline: auto;
    pointer-events: none;
}

/* Jahreszahlen als Meilensteine an der Strecke */
.sh-ride__marks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1rem, 3vw, 2rem);
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--sh-on-dark-faint);
    text-transform: uppercase;
}

.sh-ride__bike {
    position: absolute;
    bottom: clamp(3rem, 6vw, 4.9rem);
    left: 0;
    width: clamp(15rem, 30vw, 27rem);
    will-change: transform;
    transform: translate3d(var(--sh-ride-x, 110vw), 0, 0);
}

.sh-ride__bike img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

/* Federung: leichtes Wippen während der Fahrt */
.sh-ride__bike-inner {
    animation: sh-bounce 1.4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes sh-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-5px) rotate(-0.5deg); }
}

.sh-ride__caption {
    position: absolute;
    bottom: clamp(3.6rem, 7vw, 5.6rem);
    right: 0;
    text-align: right;
    max-width: 17rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--sh-on-dark-muted);
}

.sh-ride__caption strong {
    color: var(--sh-on-dark);
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Kennzahlen
   ---------------------------------------------------------------------- */

.sh-facts {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Ueber jeder Kennzahl steht eine kurze Teilung wie auf einem
   Instrument - kein durchgehender Strich. */
.sh-fact {
    color: var(--sh-rust);
    padding-top: 1.35rem;
    position: relative;
}

.sh-fact::before {
    background-image: linear-gradient(90deg, currentColor 0 2px, transparent 2px 100%);
    background-size: 0.62rem 100%;
    content: "";
    height: 0.62rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 3.1rem;
}

/* Der erste Teilstrich ist der lange - hier beginnt die Skala. */
.sh-fact::after {
    background: currentColor;
    content: "";
    height: 1rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px;
}

.sh-band--night .sh-fact,
.sh-band--olive .sh-fact,
.sh-ride .sh-fact,
.sh-strip .sh-fact {
    color: var(--sh-lime);
}

.sh-fact__value,
.sh-fact__label {
    color: var(--sh-ink);
}

.sh-band--night .sh-fact__value,
.sh-band--night .sh-fact__label,
.sh-band--olive .sh-fact__value,
.sh-band--olive .sh-fact__label {
    color: var(--sh-on-dark);
}

.sh-fact__value {
    display: block;
    font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sh-fact__label {
    display: block;
    font-size: 0.98rem;
    line-height: 1.45;
    margin-top: 0.6rem;
    opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Anlässe: große Bildkacheln
   ---------------------------------------------------------------------- */

.sh-occasions {
    display: grid;
    gap: clamp(0.85rem, 1.6vw, 1.4rem);
    grid-template-columns: repeat(12, 1fr);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sh-occasion {
    grid-column: span 6;
    position: relative;
    min-height: clamp(16rem, 26vw, 23rem);
    border-radius: 4px;
    overflow: clip;
    display: grid;
    align-items: end;
    isolation: isolate;
}

.sh-occasion--wide {
    grid-column: span 12;
    min-height: clamp(17rem, 28vw, 26rem);
}

.sh-occasion--third {
    grid-column: span 4;
}

.sh-occasion img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 900ms var(--sh-ease-out);
}

/* Der Text steht auf einem kurzen Band am unteren Rand, nicht auf einem
   Verlauf über die halbe Kachel. So bleibt das Bild frei und der Text
   liegt trotzdem auf verlässlichem Grund. */
.sh-occasion::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(22, 23, 15, 0.62) 42%, rgba(22, 23, 15, 0.93) 100%);
}

.sh-occasion:hover img,
.sh-occasion:focus-within img {
    transform: scale(1.05);
}

.sh-occasion__body {
    padding: clamp(1.3rem, 2.4vw, 2.2rem);
    color: #fff;
}

.sh-occasion__title {
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.14;
    margin: 0;
}

.sh-occasion__text {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
    max-width: 34ch;
}

.sh-occasion__cue {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.45rem;
    letter-spacing: 0.14em;
    margin-top: 1rem;
    text-transform: uppercase;
    text-decoration: none;
}

.sh-occasion__cue::after {
    content: "→";
    transition: transform 220ms var(--sh-ease);
}

.sh-occasion:hover .sh-occasion__cue::after {
    transform: translateX(5px);
}

/* Ganze Kachel klickbar, Fokus bleibt am Link */
.sh-occasion__cue::before {
    content: "";
    position: absolute;
    inset: 0;
}

.sh-occasion:focus-within {
    outline: 2px solid var(--sh-lime);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Horizontale Bilderstrecke (scrollgesteuert)
   ---------------------------------------------------------------------- */

.sh-strip {
    background: var(--sh-night);
    color: var(--sh-on-dark);
    position: relative;
}

.sh-strip__viewport {
    height: 215vh;
    position: relative;
}

.sh-strip__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    /* Der Bilder-Track ist absichtlich breiter als der Viewport; ohne feste
       Spaltenbreite wuerde er das Raster aufziehen und den Kopf hinausschieben. */
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    overflow: clip;
}

.sh-strip__head {
    width: var(--sh-shell);
    margin-inline: auto;
}

.sh-strip__track {
    display: flex;
    gap: clamp(0.85rem, 1.6vw, 1.5rem);
    padding-inline: max((100vw - var(--sh-shell)) / 2, 1.25rem);
    will-change: transform;
    transform: translate3d(var(--sh-strip-x, 0px), 0, 0);
}

.sh-strip__item {
    flex: 0 0 auto;
    height: min(56vh, 30rem);
    width: auto;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: clip;
    position: relative;
}

.sh-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Eine Notiz am Bild, kein zweites Schild: Gemischtschreibung, ein Grad
   kleiner, ohne Sperrung. Die gesperrte Versalzeile bleibt der
   Fahrzeugtafel vorbehalten. */
.sh-strip__item figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 2.5rem 1.1rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(22, 23, 15, 0.88));
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.sh-strip__item figcaption strong {
    color: #fff;
    display: block;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   Split: Text neben Bild
   ---------------------------------------------------------------------- */

.sh-split {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sh-split--reverse .sh-split__media {
    order: -1;
}

/* Zwei Split-Bloecke untereinander: die Bilder duerfen sich nicht
   beruehren, sonst stossen zwei gerundete Ecken stumpf aneinander. */
.sh-split + .sh-split {
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.sh-title + .sh-split,
.sh-lead + .sh-split,
.sh-plate + .sh-split {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.sh-split__media {
    border-radius: 4px;
    overflow: clip;
    position: relative;
}

.sh-split__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* -------------------------------------------------------------------------
   Öffnungstage / Termine
   ---------------------------------------------------------------------- */

.sh-openday-list {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

/* Die Liste richtet sich nach ihrem eigenen Platz, nicht nach der
   Fensterbreite. Im zweispaltigen Abschlussblock steht ihr nur die halbe
   Seite zur Verfuegung: Dort brach das Datum um und der Titel rutschte
   ueber die Uhrzeit, obwohl das Fenster breit genug aussah. */
.sh-openday-list {
    container-type: inline-size;
    container-name: oeffnungstage;
}

.sh-openday {
    align-items: baseline;
    border-top: 1px solid rgba(28, 27, 25, 0.16);
    display: grid;
    gap: 0.25rem 1.5rem;
    grid-template-columns: minmax(13rem, auto) minmax(9rem, auto) 1fr;
    padding-block: 1.15rem;
}

@container oeffnungstage (max-width: 40rem) {
    .sh-openday {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .sh-openday__label {
        margin-top: 0.15rem;
    }
}

.sh-openday:last-child {
    border-bottom: 1px solid rgba(28, 27, 25, 0.16);
}

.sh-band--night .sh-openday,
.sh-band--olive .sh-openday,
.sh-band--night .sh-openday:last-child,
.sh-band--olive .sh-openday:last-child {
    border-color: rgba(243, 240, 233, 0.18);
}

.sh-openday__date {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
    font-weight: 700;
}

.sh-openday__time {
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}

.sh-openday__label a {
    color: var(--sh-rust);
    font-weight: 600;
    text-decoration: none;
}

.sh-openday__label a:hover,
.sh-openday__label a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sh-band--night .sh-openday__label a,
.sh-band--olive .sh-openday__label a {
    color: var(--sh-lime);
}

.sh-event-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(2rem, 4vw, 3rem);
}

.sh-event-card {
    background: #fff;
    border-radius: 4px;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: clip;
    position: relative;
    transition: transform 260ms var(--sh-ease);
}

.sh-band--night .sh-event-card,
.sh-band--olive .sh-event-card {
    background: rgba(243, 240, 233, 0.07);
}

.sh-event-card:hover,
.sh-event-card:focus-within {
    transform: translateY(-5px);
}

.sh-event-card__link {
    color: inherit;
    text-decoration: none;
}

/* Klickflaeche ueber die ganze Karte, Linktext bleibt der Titel. */
.sh-event-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sh-event-card:focus-within {
    outline: 2px solid var(--sh-rust);
    outline-offset: 3px;
}

.sh-band--night .sh-event-card:focus-within,
.sh-band--olive .sh-event-card:focus-within {
    outline-color: var(--sh-lime);
}

.sh-event-card__media {
    aspect-ratio: 16 / 10;
    background: var(--sh-beige);
    overflow: clip;
}

.sh-event-card__media img,
.sh-event-card__media-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-event-card__media-fallback {
    background: var(--sh-beige) url("../images/silberhorn-classics-script.svg") center / 58% no-repeat;
    opacity: 0.8;
}

.sh-event-card__body {
    align-content: start;
    display: grid;
    gap: 0.4rem;
    padding: clamp(1.1rem, 2vw, 1.6rem);
}

.sh-event-card__date {
    color: var(--sh-rust);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.sh-band--night .sh-event-card__date,
.sh-band--olive .sh-event-card__date {
    color: var(--sh-lime);
}

.sh-event-card__title {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    line-height: 1.16;
    margin: 0;
}

.sh-event-card__meta {
    font-size: 0.94rem;
    margin: 0;
    opacity: 0.72;
}

.sh-event-card__badge,
.sh-event-meta__badge {
    background: var(--sh-ink);
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    justify-self: start;
    letter-spacing: 0.14em;
    margin-top: 0.35rem;
    padding: 0.3rem 0.7rem;
    text-transform: uppercase;
}

.sh-event-card--abgesagt .sh-event-card__media,
.sh-event-card--ausverkauft .sh-event-card__media {
    filter: saturate(0.55);
}

.sh-event-empty {
    border: 1px dashed rgba(28, 27, 25, 0.25);
    border-radius: 4px;
    margin-top: 1.5rem;
    padding: 1.5rem;
}

.sh-event-meta {
    display: grid;
    gap: 1.75rem;
    margin: 2rem 0;
}

.sh-event-meta__list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    margin: 0;
}

.sh-event-meta__list > div {
    display: grid;
    gap: 0.25rem;
    align-content: start;
}

.sh-event-meta__list dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    opacity: 0.65;
    text-transform: uppercase;
}

.sh-event-meta__list dd {
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0;
}

.sh-event-meta__cta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* -------------------------------------------------------------------------
   Exponat des Monats
   ---------------------------------------------------------------------- */

.sh-exhibit {
    align-items: stretch;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-top: clamp(2rem, 4vw, 3rem);
    overflow: clip;
    border-radius: 4px;
    background: rgba(243, 240, 233, 0.07);
}

.sh-band--paper .sh-exhibit,
.sh-band--beige .sh-exhibit {
    background: #fff;
}

.sh-exhibit__media {
    min-height: 16rem;
}

.sh-exhibit__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-exhibit__body {
    align-content: center;
    display: grid;
    gap: 0.75rem;
    padding: clamp(1.6rem, 3.5vw, 3rem);
}

.sh-exhibit__kicker {
    color: var(--sh-rust);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0;
    text-transform: uppercase;
}

.sh-band--night .sh-exhibit__kicker,
.sh-band--olive .sh-exhibit__kicker {
    color: var(--sh-lime);
}

.sh-exhibit__title {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    margin: 0;
}

.sh-exhibit__facts {
    font-weight: 600;
    margin: 0;
    opacity: 0.75;
}

.sh-exhibit__text {
    margin: 0;
    opacity: 0.85;
}

/* -------------------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------------- */

.sh-faq {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.sh-faq details {
    border-top: 1px solid rgba(28, 27, 25, 0.16);
}

.sh-faq details:last-of-type {
    border-bottom: 1px solid rgba(28, 27, 25, 0.16);
}

.sh-band--night .sh-faq details,
.sh-band--olive .sh-faq details,
.sh-band--night .sh-faq details:last-of-type,
.sh-band--olive .sh-faq details:last-of-type {
    border-color: rgba(243, 240, 233, 0.18);
}

.sh-faq summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    min-height: 3.4rem;
    padding-block: 1.15rem;
}

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

/* -------------------------------------------------------------------------
   Die einrastende Marke

   Vorher stand hier ein Pluszeichen, das sich beim Öffnen um 45 Grad zum
   Kreuz drehte. Das ist das Standardmuster jedes Akkordeons und hat mit
   dieser Gestaltung nichts zu tun.

   An seiner Stelle steht dieselbe angeschrägte Marke wie in der
   Navigation – die Form der Nummernplakette, auf Zeilengröße. Geschlossen
   ist sie eine leere Kontur; beim Öffnen füllt sie sich und rückt ein
   Stück nach innen, als raste sie ein. Keine Drehung, kein Kreuz.
   ---------------------------------------------------------------------- */

.sh-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sh-rust) 55%, transparent);
    transition: background-color 220ms var(--sh-ease), box-shadow 220ms var(--sh-ease),
        transform 260ms var(--sh-ease);
}

.sh-band--night .sh-faq summary::after,
.sh-band--olive .sh-faq summary::after {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sh-lime) 55%, transparent);
}

.sh-faq details[open] summary::after {
    background: var(--sh-rust);
    box-shadow: inset 0 0 0 1.5px var(--sh-rust);
    transform: translateX(-0.3rem);
}

.sh-band--night .sh-faq details[open] summary::after,
.sh-band--olive .sh-faq details[open] summary::after {
    background: var(--sh-lime);
    box-shadow: inset 0 0 0 1.5px var(--sh-lime);
}

/* Die Frage selbst tritt im geöffneten Zustand einen Schritt vor. */
.sh-faq summary {
    transition: color 220ms var(--sh-ease);
}

.sh-faq details[open] > summary {
    color: var(--sh-rust);
}

.sh-band--night .sh-faq details[open] > summary,
.sh-band--olive .sh-faq details[open] > summary {
    color: var(--sh-lime);
}

/* Die Antwort blendet auf, statt aufzuklappen. Ein Höhenübergang ginge
   über ::details-content, aber nur in neueren Browsern – und ein halb
   unterstützter Übergang ist schlechter als gar keiner. */
.sh-faq details > *:not(summary) {
    margin-block: 0 1.35rem;
    max-width: 54rem;
    opacity: 0.85;
}

.sh-faq details[open] > *:not(summary) {
    animation: sh-faq-auf 260ms var(--sh-ease-out) both;
}

@keyframes sh-faq-auf {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 0.85; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-faq details[open] > *:not(summary) {
        animation: none;
    }

    .sh-faq summary::after,
    .sh-faq details[open] summary::after {
        transition: none;
        transform: none;
    }
}

.sh-faq summary:focus-visible {
    outline: 2px solid var(--sh-rust);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Kontaktkarten und Abschluss
   ---------------------------------------------------------------------- */

.sh-contact-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Die Instrumententeilung bleibt den Kennzahlen vorbehalten. Über jedem
   beliebigen Label wiederholt, wäre sie nur der alte lange Strich mit
   Lücken – und genau das war der Einwand. */
.sh-contact-card {
    padding-top: 0;
}

.sh-contact-card h3 {
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}

.sh-contact-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
}

.sh-contact-card p {
    line-height: 1.65;
    margin: 0 0 0.4rem;
    opacity: 0.82;
}

.sh-contact-card a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sh-closing {
    text-align: center;
}

.sh-closing .sh-plate {
    justify-content: center;
}

.sh-closing .sh-title {
    margin-inline: auto;
    max-width: 20ch;
}

.sh-closing .sh-lead {
    margin-inline: auto;
    text-align: center;
}

.sh-closing .sh-actions {
    justify-content: center;
}

.sh-closing__phone {
    margin-top: 1.75rem;
    opacity: 0.75;
}

.sh-closing__phone a {
    color: inherit;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   Formularsektion
   ---------------------------------------------------------------------- */

.sh-form-wrap {
    background: #fff;
    border-radius: 4px;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.sh-band--night .sh-form-wrap,
.sh-band--olive .sh-form-wrap {
    background: rgba(243, 240, 233, 0.07);
}

.sh-form-wrap .wpforms-field-label {
    font-weight: 600;
}

.sh-form-wrap input[type="text"],
.sh-form-wrap input[type="email"],
.sh-form-wrap input[type="tel"],
.sh-form-wrap input[type="url"],
.sh-form-wrap input[type="date"],
.sh-form-wrap input[type="number"],
.sh-form-wrap select,
.sh-form-wrap textarea {
    border: 1px solid rgba(28, 27, 25, 0.28);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    width: 100%;
}

.sh-form-wrap input:focus-visible,
.sh-form-wrap select:focus-visible,
.sh-form-wrap textarea:focus-visible {
    border-color: var(--sh-rust);
    outline: 2px solid var(--sh-rust);
    outline-offset: 1px;
}

.sh-form-wrap button[type="submit"],
.sh-form-wrap .wpforms-submit {
    background: var(--sh-rust);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    min-height: 3.4rem;
    padding: 1rem 2rem;
    transition: background-color 200ms var(--sh-ease);
}

.sh-form-wrap button[type="submit"]:hover,
.sh-form-wrap .wpforms-submit:hover {
    background: var(--sh-rust-bright);
}

/* -------------------------------------------------------------------------
   Scroll-Choreografie
   ---------------------------------------------------------------------- */

/* Verborgen wird nur, wenn JavaScript die Elemente auch wieder einblenden
   kann (`.sh-js` setzt das Inline-Script im head). Ohne JS bleibt alles
   sichtbar. */
.sh-js [data-sh-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 780ms var(--sh-ease-out), transform 780ms var(--sh-ease-out);
}

.sh-js [data-sh-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-sh-reveal][data-sh-delay="1"] { transition-delay: 90ms; }
[data-sh-reveal][data-sh-delay="2"] { transition-delay: 180ms; }
[data-sh-reveal][data-sh-delay="3"] { transition-delay: 270ms; }
[data-sh-reveal][data-sh-delay="4"] { transition-delay: 360ms; }

/* Zeilenweiser Textaufbau */
.sh-lines span {
    display: block;
    overflow: hidden;
}

.sh-js .sh-lines span > i {
    display: block;
    font-style: inherit;
}

.sh-js .sh-lines span > i {
    transform: translateY(105%);
    transition: transform 900ms var(--sh-ease-out);
}

.sh-lines span > i {
    display: block;
    font-style: inherit;
}

.sh-js .sh-lines.is-visible span > i {
    transform: none;
}

.sh-lines.is-visible span:nth-child(2) > i { transition-delay: 110ms; }
.sh-lines.is-visible span:nth-child(3) > i { transition-delay: 220ms; }
.sh-lines.is-visible span:nth-child(4) > i { transition-delay: 330ms; }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .sh-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sh-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sh-occasion--third {
        grid-column: span 6;
    }
}

@media (max-width: 820px) {
    .sh-split,
    .sh-exhibit {
        grid-template-columns: 1fr;
    }

    .sh-split--reverse .sh-split__media {
        order: 0;
    }

    .sh-occasion,
    .sh-occasion--third,
    .sh-occasion--wide {
        grid-column: span 12;
    }

    .sh-openday {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .sh-strip__viewport {
        height: auto;
    }

    .sh-strip__sticky {
        position: static;
        height: auto;
        padding-block: var(--sh-pad-sm);
    }

    .sh-strip__track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        transform: none !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
    }

    /* Auf dem Telefon bestimmt die Breite die Größe, nicht die Höhe.

       Vorher galt `height: min(56vh, 30rem)` mit `aspect-ratio: 4/3` auch
       hier. Auf einem hohen, schmalen Display ergibt das ein Bild, das
       breiter ist als der Bildschirm: bei 430 x 932 waren es 640 Pixel.
       Man sah nie ein ganzes Motiv – und die Bildunterschrift, die über
       die volle Bildbreite läuft, war links und rechts abgeschnitten.

       Jetzt passt jedes Bild samt Beschriftung in den sichtbaren Bereich,
       und der schmale Rest rechts zeigt an, dass es weitergeht. */
    .sh-strip__item {
        scroll-snap-align: center;
        width: min(82vw, 26rem);
        height: auto;
        max-height: 62vh;
    }

    .sh-strip__item img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* Die Beschriftung sitzt im Bild und damit im sichtbaren Bereich. Auf
       schmalen Geräten darf sie zwei Zeilen brauchen. */
    .sh-strip__item figcaption {
        padding: 2rem 0.9rem 0.85rem;
        font-size: 0.86rem;
    }

    .sh-ride__caption {
        position: static;
        margin-top: 1.5rem;
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 620px) {
    .sh-event-grid {
        grid-template-columns: 1fr;
    }

    .sh-facts {
        gap: 1.25rem;
    }

    .sh-btn {
        width: 100%;
    }

    .sh-hero {
        min-height: 88svh;
    }
}

/* -------------------------------------------------------------------------
   Reduzierte Bewegung: alles sichtbar, nichts bewegt sich
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sh-js [data-sh-reveal],
    .sh-js [data-sh-reveal].is-visible,
    .sh-js [data-sh-reveal],
    .sh-js [data-sh-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sh-js .sh-lines span > i,
    .sh-js .sh-lines span > i {
        transform: none;
        transition: none;
    }

    .sh-ride__bike {
        transform: translate3d(12vw, 0, 0) !important;
    }

    .sh-ride__bike-inner {
        animation: none;
    }

    .sh-hero__media {
        transform: none !important;
    }

    .sh-hero__cue span::after {
        animation: none;
    }

    .sh-strip__track {
        transform: none !important;
    }

    .sh-strip__viewport {
        height: auto;
    }

    .sh-strip__sticky {
        position: static;
        height: auto;
        padding-block: var(--sh-pad-sm);
    }

    .sh-strip__track {
        overflow-x: auto;
    }
}

/* =========================================================================
   Fußbereich

   Die Kopfzeile steht geschlossen am Ende dieses Blatts unter
   „Kopfzeile und Navigation".
   ========================================================================= */

.sh-footer {
    background: var(--sh-night);
    color: var(--sh-on-dark);
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}

.sh-footer__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1.4fr 1fr 1fr;
}

.sh-footer__brand img {
    height: 2.6rem;
    width: auto;
    margin-bottom: 1.25rem;
}

.sh-footer p {
    color: var(--sh-on-dark-muted);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.sh-footer h2 {
    color: var(--sh-on-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
}

.sh-footer a {
    color: var(--sh-on-dark);
    text-decoration: none;
}

.sh-footer a:hover,
.sh-footer a:focus-visible {
    color: var(--sh-lime);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sh-footer__links {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-footer__links a {
    color: var(--sh-on-dark-muted);
}

.sh-footer__bar {
    align-items: center;
    border-top: 1px solid rgba(243, 240, 233, 0.12);
    color: var(--sh-on-dark-faint);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
}

.sh-footer__bar a {
    color: var(--sh-on-dark-faint);
}

@media (max-width: 820px) {
    .sh-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Sichtbarer Fokus im gesamten Silberhorn-Layer */
.sh-header a:focus-visible,
.sh-footer a:focus-visible,
.sh-btn:focus-visible,
.sh-link:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: 3px;
    border-radius: 2px;
}

.sh-band--paper .sh-link:focus-visible,
.sh-band--beige .sh-link:focus-visible {
    outline-color: var(--sh-rust);
}

/* Sprungmarke für Tastaturnutzer */
.sh-skip {
    background: var(--sh-rust);
    color: #fff;
    font-weight: 700;
    left: 1rem;
    padding: 0.75rem 1.25rem;
    position: fixed;
    top: -100px;
    z-index: 100;
    border-radius: 0 0 4px 4px;
    transition: top 180ms var(--sh-ease);
}

.sh-skip:focus {
    top: 0;
}

/* =========================================================================
   Unterseiten
   ========================================================================= */

.sh-pagehead {
    background: var(--sh-night);
    color: var(--sh-on-dark);
    padding-block: clamp(8rem, 15vw, 12rem) clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: clip;
}

.sh-pagehead__media {
    position: absolute;
    /* Oben und unten etwas Ueberstand: Reserve fuer die Parallaxe. */
    inset: -10% 0;
    z-index: 0;
    will-change: transform;
}

.sh-pagehead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-pagehead__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 23, 15, 0.78) 0%, rgba(22, 23, 15, 0.62) 45%, rgba(22, 23, 15, 0.88) 100%);
}

.sh-pagehead__inner {
    position: relative;
    z-index: 1;
    width: var(--sh-shell);
    margin-inline: auto;
}

.sh-pagehead h1 {
    color: var(--sh-on-dark);
    font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.04;
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}

.sh-pagehead p {
    color: var(--sh-on-dark-muted);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    margin: 1.15rem 0 0;
    max-width: 44rem;
}

/* Fließtext der Unterseiten */
.sh-content {
    padding-block: var(--sh-pad);
    background: var(--sh-paper);
}

.sh-content > .sh-shell > *,
.sh-prose > * {
    max-width: 46rem;
}

.sh-prose h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
    letter-spacing: -0.018em;
    line-height: 1.12;
    margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
}

.sh-prose h2:first-child {
    margin-top: 0;
}

.sh-prose h3 {
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
    line-height: 1.2;
    margin: 2.25rem 0 0.75rem;
}

.sh-prose p,
.sh-prose li {
    line-height: 1.72;
}

.sh-prose p {
    margin: 0 0 1.15rem;
}

.sh-prose ul,
.sh-prose ol {
    margin: 0 0 1.5rem;
    padding-left: 1.3rem;
}

.sh-prose li {
    margin-bottom: 0.55rem;
}

.sh-prose a {
    color: var(--sh-rust);
    font-weight: 600;
    text-underline-offset: 0.18em;
}

.sh-prose .sh-faq,
.sh-prose .wp-block-table,
.sh-prose .sh-openday-list,
.sh-prose .sh-event-grid {
    max-width: none;
}

/* Preistabelle */
.sh-price-table table {
    border-collapse: collapse;
    width: 100%;
    max-width: 40rem;
}

.sh-price-table td {
    border-bottom: 1px solid rgba(28, 27, 25, 0.16);
    padding: 0.95rem 0.5rem 0.95rem 0;
}

.sh-price-table tr td:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.sh-price-table figcaption {
    color: var(--sh-ink);
    font-size: 0.92rem;
    margin-top: 0.85rem;
    opacity: 0.7;
}

/* Hervorgehobener Infokasten - die Flaeche traegt den Hinweis, nicht
   eine Akzentkante an der linken Seite. */
.sh-note {
    background: var(--sh-beige);
    margin: 2rem 0;
    padding: 1.35rem 1.6rem;
}

.sh-band--beige .sh-note {
    background: #fff;
}

.sh-note p:last-child {
    margin-bottom: 0;
}

/* Einzelne Veranstaltung */
.sh-event-single__back {
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* Anker unter dem Kopfbereich sauber anspringen */
[id] {
    scroll-margin-top: 6.5rem;
}

/* -------------------------------------------------------------------------
   Klick-aktivierte Einbettungen (Matterport, Karten)
   Nichts wird an Dritte uebertragen, bevor die Nutzerin zustimmt.
   ---------------------------------------------------------------------- */

.sh-embed {
    position: relative;
    margin-top: 2.5rem;
    border-radius: 10px;
    overflow: clip;
    background: var(--sh-olive);
    aspect-ratio: 16 / 9;
}

.sh-embed__btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--sh-olive);
    border: 0;
    color: var(--sh-on-dark);
    cursor: pointer;
    font: inherit;
    padding: 2rem;
    text-align: center;
    transition: background-color 220ms var(--sh-ease);
}

.sh-embed__btn:hover,
.sh-embed__btn:focus-visible {
    background: var(--sh-dark);
}

.sh-embed__label {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 700;
}

.sh-embed__label::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.6rem;
    color: var(--sh-lime);
}

.sh-embed__note {
    color: var(--sh-on-dark-muted);
    font-size: 0.9rem;
}

.sh-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -------------------------------------------------------------------------
   Intro-Absatz auf Unterseiten
   ---------------------------------------------------------------------- */

.sh-prose-intro {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
}

/* =========================================================================
   Formulare (WPForms) im Silberhorn-Gewand
   ========================================================================= */

.sh-form-wrap .wpforms-container,
.sh-form-wrap .wpforms-form {
    margin: 0;
    max-width: none;
}

.sh-form-wrap .wpforms-field {
    padding: 0 0 1.35rem;
}

.sh-form-wrap .wpforms-field-label,
.sh-form-wrap .wpforms-field-label-inline {
    color: var(--sh-ink);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.sh-form-wrap .wpforms-required-label {
    color: var(--sh-rust);
}

.sh-form-wrap .wpforms-field-sublabel,
.sh-form-wrap .wpforms-field-description {
    color: var(--sh-ink);
    font-size: 0.88rem;
    opacity: 0.7;
}

.sh-form-wrap .wpforms-form input[type="text"],
.sh-form-wrap .wpforms-form input[type="email"],
.sh-form-wrap .wpforms-form input[type="tel"],
.sh-form-wrap .wpforms-form input[type="url"],
.sh-form-wrap .wpforms-form input[type="number"],
.sh-form-wrap .wpforms-form input[type="date"],
.sh-form-wrap .wpforms-form select,
.sh-form-wrap .wpforms-form textarea {
    background: #fff;
    border: 1px solid rgba(28, 27, 25, 0.3);
    border-radius: 4px;
    box-shadow: none;
    color: var(--sh-ink);
    font-family: inherit;
    font-size: 1rem;
    min-height: 3.1rem;
    padding: 0.8rem 1rem;
    width: 100%;
}

.sh-form-wrap .wpforms-form textarea {
    min-height: 8rem;
}

.sh-form-wrap .wpforms-form input:focus,
.sh-form-wrap .wpforms-form select:focus,
.sh-form-wrap .wpforms-form textarea:focus {
    border-color: var(--sh-rust);
    outline: 2px solid var(--sh-rust);
    outline-offset: 1px;
}

.sh-form-wrap .wpforms-form .wpforms-field-checkbox label,
.sh-form-wrap .wpforms-form .wpforms-field-radio label,
.sh-form-wrap .wpforms-form .wpforms-field-gdpr-checkbox label {
    font-weight: 400;
    line-height: 1.55;
}

.sh-form-wrap .wpforms-form input[type="checkbox"],
.sh-form-wrap .wpforms-form input[type="radio"] {
    accent-color: var(--sh-rust);
    min-height: 0;
    width: auto;
    margin-right: 0.5rem;
}

/* Der Absende-Button folgt dem Haus-Button, nicht dem Plugin-Blau. */
.sh-form-wrap .wpforms-form button[type="submit"],
.sh-form-wrap .wpforms-form .wpforms-submit,
.sh-form-wrap .wpforms-container .wpforms-submit-container button {
    background-color: var(--sh-rust);
    background-image: none;
    border: 1.5px solid var(--sh-rust);
    border-radius: 6px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-height: 3.4rem;
    padding: 1rem 2rem;
    text-transform: none;
    transition: background-color 200ms var(--sh-ease), transform 200ms var(--sh-ease);
    width: auto;
}

.sh-form-wrap .wpforms-form button[type="submit"]:hover,
.sh-form-wrap .wpforms-form .wpforms-submit:hover,
.sh-form-wrap .wpforms-form button[type="submit"]:focus-visible,
.sh-form-wrap .wpforms-form .wpforms-submit:focus-visible {
    background-color: var(--sh-rust-bright);
    border-color: var(--sh-rust-bright);
    color: #fff;
    transform: translateY(-2px);
}

.sh-form-wrap .wpforms-error,
.sh-form-wrap label.wpforms-error {
    color: #a02c2c;
    font-size: 0.9rem;
    font-weight: 600;
}

.sh-form-wrap .wpforms-form input.wpforms-error,
.sh-form-wrap .wpforms-form select.wpforms-error,
.sh-form-wrap .wpforms-form textarea.wpforms-error {
    border-color: #a02c2c;
}

.sh-form-wrap .wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full {
    background: var(--sh-lime);
    border: none;
    border-radius: 4px;
    color: var(--sh-ink);
    font-size: 1.05rem;
    padding: 1.6rem 1.75rem;
}

/* Kein heller Spalt zwischen Kopfzeile und Seitenkopf */
main > .sh-pagehead:first-child,
main > .sh-hero:first-child {
    margin-block-start: 0;
}

.wp-site-blocks > * + * {
    margin-block-start: 0;
}

main.wp-block-group {
    margin-block-start: 0;
}

/* Seiteninhalt: die Seiten bringen ihre eigenen Bänder mit, deshalb keine
   Breitenbegrenzung auf Container-Ebene. */
.sh-page-body {
    background: var(--sh-paper);
}

/* Einleitungsabsatz direkt unter dem Seitenkopf */
.sh-prose-intro .sh-lead {
    font-size: clamp(1.18rem, 1.02rem + 0.7vw, 1.55rem);
    line-height: 1.5;
    margin: 0;
    max-width: 44rem;
}

/* Reine Textseiten wickeln ihren Inhalt selbst in dieses Band. */
.sh-band--prose .sh-prose {
    max-width: none;
}

/* Klick-aktivierte Einbettung (Rundgang, Karten) */
.sh-embed {
    background: var(--sh-dark);
    border-radius: 4px;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    overflow: clip;
    position: relative;
    aspect-ratio: 16 / 9;
}

.sh-embed__btn {
    align-content: center;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--sh-on-dark);
    cursor: pointer;
    display: grid;
    font-family: inherit;
    gap: 0.5rem;
    height: 100%;
    justify-items: center;
    padding: 1.5rem;
    width: 100%;
}

.sh-embed__btn:hover .sh-embed__label,
.sh-embed__btn:focus-visible .sh-embed__label {
    background: var(--sh-rust-bright);
}

.sh-embed__label {
    background: var(--sh-rust);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 1.9rem;
    transition: background-color 200ms var(--sh-ease);
}

.sh-embed__note {
    color: var(--sh-on-dark-faint);
    font-size: 0.85rem;
}

.sh-embed iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.sh-embed__btn:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: -4px;
}

/* =========================================================================
   Bedienbarkeit: Touch-Ziele und Tastatur
   ========================================================================= */

/* Telefon- und E-Mail-Links werden unterwegs angetippt – sie brauchen
   eine greifbare Fläche, nicht nur die Zeilenhöhe. Gleiches gilt für die
   Termin-Links in der Öffnungstage-Liste. */
a[href^="tel:"],
a[href^="mailto:"] {
    display: inline-block;
    min-height: 2.75rem;
    line-height: 2.75rem;
}

.sh-openday__label a {
    display: inline-block;
    min-height: 2.75rem;
    line-height: 2.75rem;
}

@media (max-width: 820px) {
    .sh-openday__label a {
        line-height: 2.4rem;
        min-height: 2.4rem;
    }
}

/* Sprungmarke: erst bei Tastaturfokus sichtbar, dann aber vollwertig. */
.sh-skip {
    display: inline-block;
    min-height: 2.75rem;
    line-height: 1.4;
    white-space: nowrap;
}

.sh-skip:not(:focus) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    width: 1px;
}

/* =========================================================================
   Iteration 2 – Motion Language und Korrekturen
   ========================================================================= */

/* -------------------------------------------------------------------------
   Randmodell

   Ohne diese Zeile rechnet der Browser Innenabstand und Rahmen auf die
   angegebene Breite obendrauf: ein Button mit width:100% wird dann breiter
   als seine Spalte und schiebt die Seite seitlich hinaus.
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Keine hellen Streifen zwischen den Bändern

   WordPress legt zwischen Blöcke im Fluss einen Abstand (--wp--style--block-gap).
   Zwischen zwei vollflächigen Bändern wird daraus ein heller Balken, weil
   dort der Seitenhintergrund durchscheint. Die Bänder bringen ihren Abstand
   über padding selbst mit.
   ---------------------------------------------------------------------- */

main.wp-block-group > * + *,
.sh-page-body > * + *,
.sh-page-body.wp-block-group > * + *,
/* Der Seiteninhalt selbst ist noch einmal in .entry-content gefasst –
   dort liegen die Bänder der Unterseiten, und dort greift der Block-Gap
   von WordPress ein zweites Mal. */
.entry-content > * + *,
.sh-page-body .entry-content > * + *,
.wp-site-blocks > * + * {
    margin-block-start: 0;
}

main > .sh-band,
main > .sh-hero,
main > .sh-ride,
main > .sh-strip,
main > .sh-pagehead,
main > .sh-content,
main > .sh-page-body,
.sh-page-body > .sh-band,
.sh-page-body > .sh-ride,
.sh-page-body > .sh-strip,
.entry-content > .sh-band,
.entry-content > .sh-ride,
.entry-content > .sh-strip,
.entry-content > .sh-content,
.sh-band,
.sh-hero,
.sh-ride,
.sh-strip,
.sh-pagehead,
.sh-content,
.sh-page-body,
.sh-footer {
    margin-block: 0;
}

/* Der Seitenhintergrund folgt dem letzten hellen Band, damit ein
   Rundungs-Restpixel nicht als weiße Linie auffällt. */
body {
    background-color: var(--sh-paper);
}

/* Angrenzende gleichfarbige Bänder sollen nicht doppelt Luft nehmen. */
.sh-band--paper + .sh-band--paper,
.sh-band--beige + .sh-band--beige,
.sh-band--night + .sh-band--night,
.sh-band--olive + .sh-band--olive {
    padding-top: 0;
}

/* Bei eingeloggten Redakteuren darf die Adminleiste den Hero nicht
   überdecken – das Frontend-Layout bleibt davon unberührt. */
body.admin-bar .sh-hero {
    min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

/* -------------------------------------------------------------------------
   Reveal-Varianten

   Nicht jedes Element soll von unten hochfliegen. Je nach Inhalt wird
   aufgeblendet, aufgezogen oder aus dem Satzspiegel geschoben.
   ---------------------------------------------------------------------- */

.sh-js [data-sh-reveal="fade"] {
    transform: none;
}

/* Wie ein Hallentor: das Bild wird von oben nach unten freigegeben.

   Geschnitten wird das Bild, nicht der beobachtete Rahmen: ein
   clip-path auf dem Element selbst macht seine sichtbare Fläche für den
   IntersectionObserver zu null – die Sektion würde sich dann nie
   einblenden, weil sie sich für unsichtbar hält. */
.sh-js [data-sh-reveal="gate"] {
    opacity: 1;
    transform: none;
}

.sh-js [data-sh-reveal="gate"] > img,
.sh-js [data-sh-reveal="gate"] > picture,
.sh-js [data-sh-reveal="gate"] > .sh-gate {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1100ms var(--sh-ease-out);
}

.sh-js [data-sh-reveal="gate"].is-visible > img,
.sh-js [data-sh-reveal="gate"].is-visible > picture,
.sh-js [data-sh-reveal="gate"].is-visible > .sh-gate {
    clip-path: inset(0 0 0 0);
}

/* Aus der Fahrtrichtung: Karten und Bilder kommen seitlich herein. */
.sh-js [data-sh-reveal="side"] {
    transform: translateX(-32px);
}

.sh-js [data-sh-reveal="side"].is-visible {
    transform: none;
}

/* -------------------------------------------------------------------------
   Ausstellungslicht

   Eine Sektion beginnt im Dunkeln und wird beim Hereinscrollen
   ausgeleuchtet – der Moment, in dem im Saal das Licht angeht.
   `--sh-light` läuft von 0 bis 1 und wird per JavaScript gesetzt.
   ---------------------------------------------------------------------- */

.sh-spot {
    --sh-light: 0;
    position: relative;
    overflow: clip;
    border-radius: 4px;
    isolation: isolate;
}

.sh-spot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(calc(0.32 + 0.68 * var(--sh-light))) saturate(calc(0.55 + 0.45 * var(--sh-light)));
    transition: filter 120ms linear;
}

/* Der Lichtkegel selbst: warmes Licht, das von oben in den Raum fällt. */
.sh-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 85% at 50% -12%, rgba(255, 214, 150, 0.5) 0%, rgba(255, 196, 120, 0.16) 38%, transparent 68%);
    opacity: var(--sh-light);
    mix-blend-mode: screen;
}

/* Solange es dunkel ist, liegt ein kühler Schleier über dem Raum. */
.sh-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 16, 22, 0.55), rgba(12, 16, 22, 0.3));
    opacity: calc(1 - var(--sh-light));
}

.sh-spot__note {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 3.5rem clamp(1.1rem, 2.5vw, 2rem) clamp(1.1rem, 2.5vw, 1.75rem);
    background: linear-gradient(180deg, transparent, rgba(22, 23, 15, 0.84));
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Hinweis: Der frühere allgemeine Glanzstreifen (.sh-chrome) ist entfernt.

   Er lief als Verlauf über das ganze Bild und sah nach Website-Effekt aus,
   nicht nach Licht auf Lack. An seine Stelle ist der maskierte Reflex auf
   der Zäsur getreten (.sh-cut--chrome), der nur dort erscheint, wo im Foto
   tatsächlich Chrom ist.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Die Fahrt: Meilensteine leuchten auf, wenn das Motorrad sie passiert
   ---------------------------------------------------------------------- */

.sh-ride__marks span {
    position: relative;
    padding-top: 0.85rem;
    transition: color 420ms var(--sh-ease), opacity 420ms var(--sh-ease);
}

.sh-ride__marks span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0.5rem;
    background: currentColor;
    opacity: 0.5;
    transition: height 420ms var(--sh-ease), opacity 420ms var(--sh-ease);
}

.sh-ride__marks span.is-passed {
    color: var(--sh-lime);
}

.sh-ride__marks span.is-passed::before {
    height: 0.95rem;
    opacity: 1;
}

/* Der Scheinwerfer wirft Licht voraus auf die Fahrbahn – vor das
   Vorderrad, nicht darauf. */
.sh-ride__bike::before {
    content: "";
    position: absolute;
    left: -46%;
    bottom: -14%;
    width: 58%;
    height: 40%;
    background: radial-gradient(70% 100% at 100% 78%, rgba(255, 226, 168, 0.3), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Telefon-Anschluss als Werkstattschild

   Statt eines Kastens mit Akzentkante links: eine kompakte Tafel,
   auf der die Nummer selbst das größte Element ist.
   ---------------------------------------------------------------------- */

.sh-phone {
    display: inline-grid;
    gap: 0.35rem;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.4rem, 3vw, 2rem);
    /* Eine eigene Fläche mit feiner Kante – `currentColor` bei niedriger
       Deckkraft ergibt auf Beige Beige und die Tafel verschwindet. */
    background: rgba(28, 27, 25, 0.05);
    border: 1px solid rgba(28, 27, 25, 0.12);
    clip-path: polygon(0.75rem 0, 100% 0, 100% calc(100% - 0.75rem), calc(100% - 0.75rem) 100%, 0 100%, 0 0.75rem);
    text-align: left;
}

.sh-band--night .sh-phone,
.sh-band--olive .sh-phone,
.sh-ride .sh-phone,
.sh-strip .sh-phone {
    background: rgba(243, 240, 233, 0.08);
    border-color: rgba(243, 240, 233, 0.16);
}

.sh-phone__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.65;
}

.sh-phone__number {
    display: inline-block;
    color: inherit;
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-decoration: none;
    transition: color 200ms var(--sh-ease), transform 260ms var(--sh-ease);
}

.sh-phone__number:hover,
.sh-phone__number:focus-visible {
    color: var(--sh-rust);
    transform: translateX(3px);
}

.sh-band--night .sh-phone__number:hover,
.sh-band--olive .sh-phone__number:hover,
.sh-band--night .sh-phone__number:focus-visible,
.sh-band--olive .sh-phone__number:focus-visible,
.sh-footer .sh-phone__number:hover,
.sh-footer .sh-phone__number:focus-visible {
    color: var(--sh-lime);
}

.sh-phone__note {
    font-size: 0.92rem;
    margin: 0.2rem 0 0;
    opacity: 0.72;
}

.sh-closing .sh-phone {
    justify-self: center;
    margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Öffnungstage: der nächste Termin steht groß, die folgenden kompakt
   ---------------------------------------------------------------------- */

.sh-next-open {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    /* Rechte Winkel: die angeschrägte Ecke bleibt der Telefontafel
       vorbehalten, sonst ist sie keine Signatur mehr, sondern ein Effekt. */
    background: rgba(28, 27, 25, 0.05);
    border: 1px solid rgba(28, 27, 25, 0.1);
}

.sh-band--night .sh-next-open,
.sh-band--olive .sh-next-open {
    background: rgba(243, 240, 233, 0.07);
    border-color: rgba(243, 240, 233, 0.14);
}

.sh-next-open__kicker {
    color: var(--sh-rust);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.sh-band--night .sh-next-open__kicker,
.sh-band--olive .sh-next-open__kicker {
    color: var(--sh-lime);
}

.sh-next-open__date {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}

.sh-next-open__weekday {
    display: block;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0.14em;
    opacity: 0.7;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.sh-next-open__time {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0.75rem 0 0;
}

.sh-next-open__note {
    margin: 0.6rem 0 0;
    opacity: 0.75;
}

.sh-next-open .sh-actions {
    margin-top: 1.5rem;
}

.sh-next-open__more {
    display: grid;
    gap: 0;
}

.sh-next-open__more h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0 0 0.75rem;
    opacity: 0.65;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .sh-next-open {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Footer-Abschluss: eigener Zuruf statt Button in einer Liste
   ---------------------------------------------------------------------- */

.sh-footer__cta {
    align-items: center;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid rgba(243, 240, 233, 0.14);
}

.sh-footer__cta-text {
    color: var(--sh-on-dark);
    font-size: clamp(1.4rem, 1rem + 1.8vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0;
    max-width: 24ch;
    text-wrap: balance;
}

.sh-footer__cta .sh-btn {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .sh-footer__cta {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    /* Umbrechen darf der Zuruf, der Button bleibt in der Spalte. */
    .sh-footer__cta .sh-btn {
        white-space: normal;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   Feinschliff Interaktion
   ---------------------------------------------------------------------- */

/* Der Hauptbutton bekommt beim Überfahren einen kurzen Vorwärtsimpuls. */
.sh-btn {
    position: relative;
    transition: background-color 200ms var(--sh-ease), color 200ms var(--sh-ease),
        border-color 200ms var(--sh-ease), transform 260ms var(--sh-ease-out);
}

.sh-btn--primary:hover,
.sh-btn--primary:focus-visible {
    transform: translateY(-2px);
}

.sh-btn:active {
    transform: translateY(0);
}

/* Bildkacheln: die Auflichtung folgt dem Zeiger, nicht nur der Zoom. */
.sh-occasion::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(70% 60% at 50% 0%, rgba(255, 220, 170, 0.22), transparent 70%);
    opacity: 0;
    transition: opacity 480ms var(--sh-ease);
    pointer-events: none;
}

.sh-occasion:hover::before,
.sh-occasion:focus-within::before {
    opacity: 1;
}

/* Bilder in der Strecke heben sich beim Überfahren leicht an. */
.sh-strip__item img {
    transition: transform 900ms var(--sh-ease-out);
}

.sh-strip__item:hover img {
    transform: scale(1.04);
}

/* Veranstaltungskarten: das Datum rückt beim Überfahren mit vor. */
.sh-event-card__date {
    transition: transform 260ms var(--sh-ease);
}

.sh-event-card:hover .sh-event-card__date,
.sh-event-card:focus-within .sh-event-card__date {
    transform: translateX(4px);
}

.sh-event-card__media img {
    transition: transform 700ms var(--sh-ease-out);
}

.sh-event-card:hover .sh-event-card__media img,
.sh-event-card:focus-within .sh-event-card__media img {
    transform: scale(1.045);
}

/* Öffnungstage: die Zeile hebt sich beim Überfahren hervor. */
.sh-openday {
    transition: background-color 220ms var(--sh-ease);
}

.sh-openday:hover {
    background-color: color-mix(in srgb, currentColor 5%, transparent);
}

/* -------------------------------------------------------------------------
   Reduzierte Bewegung
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sh-js [data-sh-reveal="gate"] > img,
    .sh-js [data-sh-reveal="gate"] > picture,
    .sh-js [data-sh-reveal="gate"] > .sh-gate,
    .sh-js [data-sh-reveal="gate"].is-visible > img {
        clip-path: none;
        transition: none;
    }

    .sh-hero__cue-rail::after,
    .sh-ride__bike-inner {
        animation: none;
    }

    .sh-spot {
        --sh-light: 1;
    }

    .sh-spot img {
        transition: none;
    }

    .sh-btn,
    .sh-occasion img,
    .sh-strip__item img,
    .sh-event-card,
    .sh-event-card__media img,
    .sh-event-card__date {
        transition: none;
    }
}

/* Hinweis an der Strecke – erklärt die Fahrt, ohne sie zu kommentieren. */
.sh-ride__hint {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    max-width: 22rem;
    color: var(--sh-on-dark-faint);
    font-size: 0.82rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 600ms var(--sh-ease), transform 600ms var(--sh-ease);
}

/* Der Hinweis verschwindet, sobald die Fahrt begonnen hat. */
.sh-ride__stage .sh-ride__hint {
    opacity: calc(1 - var(--sh-ride-p, 0) * 4);
    transform: translateY(calc(6px * var(--sh-ride-p, 0)));
}

.sh-js .sh-ride__stage .sh-ride__hint {
    transition: none;
}

@media (max-width: 820px) {
    .sh-ride__hint {
        display: none;
    }

    .sh-ride__marks {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }
}

/* Die Werkstatttafel im dunklen Fußbereich */
.sh-footer .sh-phone {
    background: rgba(243, 240, 233, 0.06);
    margin-top: 1.25rem;
}

.sh-footer .sh-phone__label {
    color: var(--sh-on-dark-faint);
}

.sh-footer .sh-phone__number {
    color: var(--sh-on-dark);
}

.sh-footer .sh-phone__note {
    margin-top: 0.35rem;
}

.sh-footer .sh-phone__note a {
    color: var(--sh-on-dark-muted);
}

/* Telefonnummern in der Tafel brauchen keine zusätzliche Zeilenhöhe –
   die Fläche der Tafel ist bereits groß genug. */
.sh-phone a[href^="tel:"],
.sh-phone a[href^="mailto:"] {
    line-height: inherit;
    min-height: 0;
}

/* =========================================================================
   Menüsteuerung

   Der Navigationsblock von WordPress schaltet bei 600 px auf ein
   Burger-Menü. Für sechs Menüpunkte plus Aktionsbutton ist das zu früh –
   und die zuständigen Kernregeln überleben die Aufräumfunktion von
   WP Rocket ohnehin nicht zuverlässig. Deshalb steuern wir das Menü
   vollständig hier, mit einem Umschaltpunkt bei 1080 px.
   ========================================================================= */

/* Auf schmalen Geräten stößt der Museumshinweis sonst an den
   Scroll-Hinweis darunter. */
@media (max-width: 700px) {
    .sh-hero__inner {
        padding-bottom: clamp(6rem, 18vw, 8rem);
    }

    .sh-hero__aside,
    .sh-hero__open {
        margin-top: 1.5rem;
    }
}

/* -------------------------------------------------------------------------
   Zäsur: ein Fahrzeug groß und allein

   Bricht den gleichmäßigen Takt der Bänder und zeigt einmal in voller
   Breite, worum es hier geht. Das Bild wird nicht in die Schale gesetzt,
   sondern läuft von Rand zu Rand.
   ---------------------------------------------------------------------- */

.sh-cut {
    background: var(--sh-night);
    position: relative;
    overflow: clip;
}

.sh-cut__figure {
    margin: 0;
    position: relative;
}

.sh-cut__figure img {
    display: block;
    width: 100%;
    height: clamp(20rem, 50vw, 38rem);
    object-fit: cover;
    object-position: 50% 55%;
}

/* Die Beschriftung sitzt im Bild, unten links auf der ruhigen dunklen
   Fläche. Der Verlauf dafür ist lokal begrenzt und läuft nicht über das
   Fahrzeug. */
.sh-cut__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: var(--sh-shell);
    margin-inline: auto;
    padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
    display: grid;
    gap: 0.2rem;
    color: #fff;
    pointer-events: none;
}

/* Nur unter der Schrift wird abgedunkelt, nicht über das ganze Bild. */
.sh-cut__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 52%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(14, 15, 10, 0.5) 45%, rgba(14, 15, 10, 0.86) 100%);
}

.sh-cut__extra {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    margin-top: 0.35rem;
    max-width: 34ch;
}

.sh-cut__name {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sh-cut__note {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 620px) {
    .sh-cut__figure img {
        height: clamp(14rem, 62vw, 20rem);
    }
}

/* =========================================================================
   Imagefilm

   Ein schmaler cinematischer Streifen statt eines zweiten Vollbild-Heros.
   Die Vorschau läuft stumm im Hintergrund, der eigentliche Film wird erst
   beim Klick geladen.
   ========================================================================= */

.sh-film {
    background: var(--sh-night);
    position: relative;
}

.sh-film__stage {
    position: relative;
    height: clamp(20rem, 48vh, 32rem);
    overflow: clip;
    isolation: isolate;
}

.sh-film__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.sh-film__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(22, 23, 15, 0.9) 0%, rgba(22, 23, 15, 0.55) 42%, rgba(22, 23, 15, 0.35) 100%),
        linear-gradient(180deg, rgba(22, 23, 15, 0.4), transparent 40%, rgba(22, 23, 15, 0.55));
}

.sh-film__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: var(--sh-shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.sh-film__text {
    max-width: 32rem;
}

/* Die Steuerung sass zu weit aussen. Sie rueckt nach innen, damit die
   Komposition zwischen Text und Bedienung ausgewogen bleibt. */
.sh-film__inner {
    justify-content: flex-start;
    gap: clamp(2rem, 9vw, 8rem);
}

.sh-film .sh-plate {
    color: var(--sh-lime);
}

.sh-film__title {
    color: var(--sh-on-dark);
    font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
}

.sh-film__meta {
    color: var(--sh-on-dark-muted);
    margin: 0.9rem 0 0;
    max-width: 30ch;
}

/* -------------------------------------------------------------------------
   Die Schaltfläche: eine Instrumentenanzeige, kein Video-Kreis
   ---------------------------------------------------------------------- */

.sh-film__play {
    align-items: center;
    background: none;
    border: 0;
    color: var(--sh-on-dark);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    gap: 1.1rem;
    padding: 0.75rem;
}

.sh-film__dial {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(5rem, 9vw, 7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(243, 240, 233, 0.35);
    /* Teilstriche wie auf einer Instrumentenskala */
    background:
        conic-gradient(from 0deg, rgba(243, 240, 233, 0.32) 0deg 1.2deg, transparent 1.2deg 15deg) content-box;
    padding: 6px;
    transition: border-color 260ms var(--sh-ease), transform 320ms var(--sh-ease-out);
}

/* Der Zeiger wandert einmal über die Skala – ruhig, nicht blinkend. */
.sh-film__needle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -95deg, var(--sh-lime) 0deg 6deg, transparent 6deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 58% 100%);
    mask: radial-gradient(circle, transparent 0 58%, #000 58% 100%);
    animation: sh-dial 4.2s var(--sh-ease) infinite;
}

@keyframes sh-dial {
    0%   { transform: rotate(0deg); opacity: 0; }
    12%  { opacity: 1; }
    78%  { transform: rotate(300deg); opacity: 1; }
    100% { transform: rotate(340deg); opacity: 0; }
}

/* Das Abspielzeichen */
.sh-film__triangle {
    width: 0;
    height: 0;
    border-left: 1.15rem solid var(--sh-on-dark);
    border-top: 0.72rem solid transparent;
    border-bottom: 0.72rem solid transparent;
    margin-left: 0.32rem;
    transition: border-left-color 260ms var(--sh-ease);
}

.sh-film__play:hover .sh-film__dial,
.sh-film__play:focus-visible .sh-film__dial {
    border-color: var(--sh-lime);
    transform: scale(1.04);
}

.sh-film__play:hover .sh-film__triangle,
.sh-film__play:focus-visible .sh-film__triangle {
    border-left-color: var(--sh-lime);
}

.sh-film__play:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: 4px;
    border-radius: 4px;
}

.sh-film__play-label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
}

.sh-film__duration {
    color: var(--sh-on-dark-faint);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: none;
}

@media (max-width: 860px) {
    .sh-film__inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(2rem, 6vw, 3rem);
    }

    .sh-film__play {
        padding-left: 0;
    }
}

/* -------------------------------------------------------------------------
   Das Overlay

   Beim Öffnen zieht eine dunkle Karosserieform quer durchs Bild und gibt
   den Film dahinter frei – der Übergang dauert eine knappe halbe Sekunde,
   danach ist der Film sofort bedienbar.
   ---------------------------------------------------------------------- */

.sh-film__dialog {
    /* Stapelordnung des Overlays: vier Ebenen, an einer Stelle benannt.
       Vorher standen die Werte verstreut im Block (3, 4, 6) und liessen
       sich nur durch Ausprobieren nachvollziehen. */
    --sh-z-film: 1;
    --sh-z-blende: 2;
    --sh-z-steuerung: 3;
    --sh-z-schliessen: 4;

    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    /* Die Seite dahinter bleibt schemenhaft sichtbar, statt hinter einer
       schwarzen Flaeche zu verschwinden. */
    background: rgba(12, 13, 9, 0.82);
    backdrop-filter: blur(18px) saturate(0.7) brightness(0.55);
    -webkit-backdrop-filter: blur(18px) saturate(0.7) brightness(0.55);
    overflow: hidden;
}

/* Ohne Weichzeichner traegt die Deckkraft allein.

   Die 0,82 oben sind auf den Weichzeichner hin gewaehlt: Was dahinter
   liegt, ist dann Schemen. Fehlt backdrop-filter, bleibt die Seite
   dahinter scharf lesbar und stiehlt dem Film die Aufmerksamkeit.
   Dann uebernimmt die Flaeche die Arbeit. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sh-film__dialog {
        background: rgba(12, 13, 9, 0.94);
    }
}

.sh-film__dialog::backdrop {
    background: transparent;
}

/* Die Bühne: Der Film sitzt exakt in der Mitte und nutzt die größte
   Fläche, die bei 16:9 in das Fenster passt.

   Bisher lagen Video und Steuerleiste als zwei Zeilen in einem zentrierten
   Raster. Zentriert war damit das Paar, nicht der Film: Er stand um die
   halbe Leistenhöhe zu hoch. Jetzt liegt die Steuerung im Bild, und
   zentriert wird nur noch der Film selbst.

   Die Größe kommt ohne Rechnung aus: Der Kasten bekommt die volle Höhe und
   leitet seine Breite aus dem Seitenverhältnis ab. Passt sie nicht ins
   Fenster, greift max-width und die Höhe wird zurückgerechnet. */
.sh-film__frame {
    --sh-film-luft: clamp(1rem, 3vw, 2.5rem);
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--sh-film-luft);
    position: relative;
    z-index: var(--sh-z-film);
}

/* Die Breite ist der kleinere der beiden Werte: was das Fenster hergibt,
   und was bei 16:9 in die verfügbare Höhe passt. Über aspect-ratio allein
   geht das nicht: Ist eine Achse fest angegeben, rechnet der Browser die
   andere nicht mehr zurück, und der Kasten lief seitlich aus dem Bild. */
.sh-film__box {
    position: relative;
    aspect-ratio: 16 / 9;
    width: min(100%, calc((100vh - 2 * var(--sh-film-luft)) * 16 / 9));
    width: min(100%, calc((100dvh - 2 * var(--sh-film-luft)) * 16 / 9));
    height: auto;
    max-width: 100%;
    background: #000;
}

.sh-film__full {
    position: absolute;
    inset: 0;
    z-index: var(--sh-z-film);
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* Das Schließen-Zeichen wird gezeichnet, nicht gesetzt: Ein Schriftzeichen
   sitzt nie exakt mittig in seiner Fläche. Zwei gedrehte Linien schon.

   Der Knopf hängt am Fenster, nicht am Film. Damit liegt er auf jedem
   Seitenverhältnis an derselben Stelle und nie außerhalb. */
.sh-film__close {
    position: absolute;
    top: max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-top, 0px));
    right: max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-right, 0px));
    z-index: var(--sh-z-schliessen);
    width: 2.75rem;
    height: 2.75rem;
    /* Ohne diese Zeile setzt die globale Knopfregel min-height: 48px, und
       aus 44 x 44 wird 44 x 48. Bei border-radius: 50 % ist das dann kein
       Kreis mehr, sondern ein Ei – auf jeder Breite, gemessen. */
    min-height: 0;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    background: rgba(12, 13, 9, 0.72);
    border: 1px solid rgba(243, 240, 233, 0.28);
    border-radius: 50%;
    color: var(--sh-on-dark);
    cursor: pointer;
    padding: 0;
    transition: background-color 200ms var(--sh-ease), border-color 200ms var(--sh-ease),
        transform 220ms var(--sh-ease);
}

/* Die sichtbare Form ist kleiner als die Trefferfläche: 17 Pixel Kreuz in
   44 Pixel Knopf. Gedreht wird um die Mitte, die Enden bleiben innen. */
.sh-film__close-mark {
    position: relative;
    display: block;
    width: 1.05rem;
    height: 1.05rem;
}

.sh-film__close-mark::before,
.sh-film__close-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.sh-film__close-mark::before { transform: translateY(-50%) rotate(45deg); }
.sh-film__close-mark::after  { transform: translateY(-50%) rotate(-45deg); }

.sh-film__close:hover,
.sh-film__close:focus-visible {
    background: var(--sh-rust);
    border-color: var(--sh-rust);
    transform: rotate(90deg);
}

.sh-film__close:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: 2px;
}

/* Die Karosserieform, die den Übergang trägt */
.sh-film__sweep {
    position: absolute;
    inset: -10% auto -10% 0;
    width: 26vw;
    min-width: 14rem;
    z-index: var(--sh-z-blende);
    pointer-events: none;
    transform: translateX(-140%);
    background:
        linear-gradient(90deg, transparent, var(--sh-night) 18%, var(--sh-night) 82%, rgba(243, 240, 233, 0.85) 97%, transparent);
    filter: blur(0.5px);
}

.sh-film__dialog[open] .sh-film__frame {
    animation: sh-film-reveal 460ms var(--sh-ease-out) both;
}

.sh-film__dialog[open] .sh-film__sweep {
    animation: sh-film-sweep 620ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

@keyframes sh-film-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes sh-film-sweep {
    from { transform: translateX(-140%); }
    to   { transform: translateX(520%); }
}

/* Während der Film offen ist, steht die Seite dahinter still. overflow
   allein genügt auf WebKit nicht: Die Bewegung wandert dann an das
   Wurzelelement weiter. Deshalb beide Ebenen und zusätzlich der Riegel
   gegen die Kettenreaktion. */
html.sh-film-open,
body.sh-film-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
    .sh-film__needle {
        animation: none;
        opacity: 0.6;
    }

    .sh-film__dialog[open] .sh-film__frame {
        animation: sh-fade-in 200ms linear both;
    }

    .sh-film__dialog[open] .sh-film__sweep {
        display: none;
    }

    .sh-film__dial,
    .sh-film__triangle {
        transition: none;
    }
}

@keyframes sh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================================
   Eingebettete Inhalte: Vorschau, Laden, fertig

   Statt einer schwarzen Fläche mit Knopf steht ein echtes Bild der Halle
   im Ruhezustand. Während geladen wird, dreht sich ein Rad – kein Spinner.
   ========================================================================= */

.sh-embed {
    background: var(--sh-dark);
}

.sh-embed__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Über dem Bild liegt nichts. Auch nicht in der Mitte.

   Iteration 6 hatte den ganzflächigen Schleier durch einen radialen
   Fleck hinter dem Knopf ersetzt. Der war mit 66 Prozent aber immer noch
   deutlich, lag dauerhaft dort und machte aus dem hellen Hallenboden
   genau den grauen Eindruck, der beanstandet wurde.

   Jetzt trägt der Knopf seinen Grund selbst - er ist rostrot gefüllt -
   und die Zeile darunter ihren Schatten. Das Foto bleibt unberührt. */

/* Beim Ueberfahren nur ein Hauch - das Bild bleibt vollstaendig
   erkennbar. */
.sh-embed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(22, 23, 15, 0.10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--sh-ease);
}

.sh-embed:hover::before,
.sh-embed:focus-within::before {
    opacity: 1;
}

/* Die Zeile unter dem Knopf steht auf hellem Hallenboden. Sie bekommt
   Kontrast aus sich heraus statt aus einer Flaeche ueber dem ganzen Bild. */
/* Die Zeile steht auf hellem Hallenboden. Ein Schatten allein trägt sie
   dort nicht. Statt einer Fläche über dem Bild bekommt sie ein eigenes
   kleines Schild - so groß wie die Zeile, nicht größer. */
.sh-embed .sh-embed__note {
    color: rgba(243, 240, 233, 0.92);
    background: rgba(10, 11, 6, 0.62);
    padding: 0.3rem 0.65rem 0.34rem;
    border-radius: 2px;
    justify-self: center;
    align-self: center;
    width: fit-content;
    margin-inline: auto;
}

/* Minimaler Zoom, sonst passiert am Bild nichts. */
.sh-embed__preview {
    transform: scale(1);
    transition: transform 700ms var(--sh-ease-out), opacity 420ms var(--sh-ease);
}

.sh-embed:hover .sh-embed__preview,
.sh-embed:focus-within .sh-embed__preview {
    transform: scale(1.01);
}

/* Der Aufruf tritt beim Ueberfahren staerker hervor. */
.sh-embed__btn .sh-embed__label {
    transition: transform 220ms var(--sh-ease), background-color 220ms var(--sh-ease);
}

.sh-embed:hover .sh-embed__label,
.sh-embed__btn:focus-visible .sh-embed__label {
    transform: translateY(-2px);
}

.sh-embed.is-ready::before {
    opacity: 0;
}

.sh-embed__btn {
    position: relative;
    z-index: 2;
}

/* Der Ladezustand: ein Rad mit Speichen dreht sich, bis der Rundgang steht. */
.sh-embed__wheel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    place-items: center;
    pointer-events: none;
}

.sh-embed.is-loading .sh-embed__wheel {
    display: grid;
}

.sh-embed.is-loading .sh-embed__btn {
    opacity: 0;
    pointer-events: none;
}

.sh-embed__wheel-rim {
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(243, 240, 233, 0.28);
    position: relative;
    animation: sh-wheel 1.6s linear infinite;
}

/* Speichen */
.sh-embed__wheel-rim::before,
.sh-embed__wheel-rim::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(243, 240, 233, 0.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(243, 240, 233, 0.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.sh-embed__wheel-rim::after {
    transform: rotate(45deg);
    opacity: 0.55;
}

.sh-embed__wheel-note {
    position: absolute;
    bottom: 22%;
    color: var(--sh-on-dark-muted);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@keyframes sh-wheel {
    to { transform: rotate(360deg); }
}

/* Sobald der Rundgang steht, blenden Vorschau und Schleier weich aus. */
.sh-embed__preview,
.sh-embed__wheel {
    transition: opacity 420ms var(--sh-ease);
}

.sh-embed.is-ready .sh-embed__preview,
.sh-embed.is-ready::before,
.sh-embed.is-ready .sh-embed__wheel {
    opacity: 0;
    pointer-events: none;
}

/* Nach dem Ausblenden ganz aus dem Weg. */
.sh-embed.is-ready .sh-embed__preview {
    visibility: hidden;
    transition: opacity 420ms var(--sh-ease), visibility 0s linear 420ms;
}

.sh-embed iframe {
    position: relative;
    z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
    .sh-embed__wheel-rim {
        animation-duration: 4s;
    }
}

/* Der Rundgang füllt den vorgesehenen Rahmen, statt ihn zu verlängern:
   ein Iframe im Fluss addiert seine Höhe zum Seitenverhältnis dazu. */
.sh-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sh-embed__wheel-rim {
    width: clamp(3.5rem, 7vw, 5.5rem);
}

/* Reihenfolge im Rundgang-Rahmen: Der Rundgang liegt unten, Vorschau und
   Ladeanzeige liegen darüber und verschwinden erst, wenn er steht.
   Vorher war es umgekehrt – man sah eine schwarze Fläche. */
.sh-embed iframe {
    z-index: 1;
}

.sh-embed__preview {
    z-index: 2;
}

.sh-embed::after {
    z-index: 3;
}

.sh-embed__btn {
    z-index: 4;
}

.sh-embed__wheel {
    z-index: 5;
}

.sh-embed.is-ready .sh-embed__wheel,
.sh-embed.is-ready .sh-embed__btn {
    visibility: hidden;
}

/* -------------------------------------------------------------------------
   Chromreflex auf echter Geometrie

   Kein Glanzstreifen über das ganze Bild: Der Lichtverlauf wird durch eine
   aus dem Foto abgeleitete Maske beschnitten und erscheint deshalb nur
   dort, wo im Bild tatsächlich Chrom ist – auf Niere, Scheinwerferringen
   und der Haubenkante. Der Reflex wandert mit der Scrollposition.
   ---------------------------------------------------------------------- */

.sh-cut--chrome .sh-cut__specular {
    --sh-spec: -35%;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: var(--sh-chrome-mask);
    mask-image: var(--sh-chrome-mask);
    /* Das Foto wird beschnitten (object-fit: cover, object-position 50% 55%).
       Die Maske muss denselben Ausschnitt nehmen, sonst liegt das Licht
       neben dem Chrom. */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: 50% 55%;
    mask-position: 50% 55%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background:
        linear-gradient(102deg,
            transparent 0%,
            rgba(255, 250, 236, 0.35) 38%,
            rgba(255, 255, 250, 1) 50%,
            rgba(255, 250, 236, 0.35) 62%,
            transparent 100%);
    background-size: 42% 100%;
    background-repeat: no-repeat;
    background-position: var(--sh-spec) center;
    mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
    .sh-cut--chrome .sh-cut__specular {
        display: none;
    }
}

/* Bild und Reflex liegen in einem eigenen Rahmen: die Maske muss genau
   auf dem Foto sitzen, nicht auf der Bildunterschrift darunter. */
.sh-cut__media {
    display: block;
    position: relative;
    overflow: clip;
}

.sh-cut--chrome .sh-cut__specular {
    inset: 0;
}

/* Die Maske trägt ihre Werte im Alphakanal – so lesen sie alle Browser
   gleich. (Eine Graustufendatei ohne Alpha wird als „überall
   undurchsichtig" interpretiert, die Maske hätte dann keine Wirkung.) */
.sh-cut--chrome .sh-cut__specular {
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

/* -------------------------------------------------------------------------
   Kopfbild der Unterseiten: die Höhe muss durchgereicht werden

   Der Beitragsbild-Block umschließt das Bild mit einer <figure>. Eine
   Prozenthöhe an einem Bild bezieht sich immer auf seinen unmittelbaren
   Elternknoten – also auf diese figure, nicht auf den Rahmen darüber. Da
   die figure keine Höhe hatte, fiel `height: 100%` am Bild auf `auto`
   zurück: Das Bild rendert in voller Eigenhöhe (bei 1920 px rund 1280 statt
   447 px), hängt unten heraus und wird oben abgeschnitten.

   Folge: `object-position` konnte gar nicht wirken, weil es keinen
   Überschuss mehr zu verteilen gab – man sah auf jeder Unterseite den
   oberen Bildrand, also die Hallendecke.
   ---------------------------------------------------------------------- */

.sh-pagehead__media > *,
.sh-pagehead__media figure {
    display: block;
    height: 100%;
    margin: 0;
    width: 100%;
}

/* =========================================================================
   Kopfzeile: überall fest, überall sichtbar

   Vorher hing sie auf Unterseiten an `position: sticky` – und zwar in
   einem Wrapper, der nur so hoch ist wie sie selbst. Damit hatte sie
   keinen Raum zum Kleben und scrollte einfach mit weg. Zugleich fiel der
   Blockabstand des Wrappers durch `.wp-site-blocks` hindurch und erzeugte
   oben den hellen Streifen.

   Beides löst sich mit `position: fixed`: die Kopfzeile ist aus dem Fluss,
   der Streifen verschwindet, und der Inhalt bekommt den Platz über ein
   Innenabstand-Maß zurück.
   ========================================================================= */

/* Bei eingeloggten Redakteuren sitzt sie unter der Adminleiste. */
body.admin-bar .sh-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Der erste Knoten unter .wp-site-blocks darf keinen Blockabstand
   durchreichen – sonst rutscht die ganze Seite nach unten. */
.wp-site-blocks > *:first-child,
main.wp-block-group > *:first-child,
.entry-content > *:first-child,
.sh-page-body > *:first-child {
    margin-block-start: 0;
}

/* =========================================================================
   Die Sammlung als Gegenposition zum Satz

   „Andere Locations haben einen Saal. Wir haben eine Sammlung." – die
   rechte Seite darf deshalb kein beliebiges Bild tragen, sondern muss die
   Aussage zeigen: drei Fahrzeuge nebeneinander, hochkant, mit Schild.
   Wie ein Regal im Museum.
   ========================================================================= */

.sh-statement__text,
.sh-statement__note {
    position: relative;
    z-index: 1;
}

.sh-collection {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(42%, 30rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.2vw, 0.9rem);
    align-items: end;
}

.sh-collection__item {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

/* Gestaffelt wie Exponate auf verschiedenen Sockeln. */
.sh-collection__item:nth-child(1) { transform: translateY(-1.6rem); }
.sh-collection__item:nth-child(3) { transform: translateY(1.4rem); }

.sh-collection__item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 3px;
    filter: saturate(0.92);
    transition: filter 420ms var(--sh-ease), transform 520ms var(--sh-ease-out);
}

.sh-collection__item:hover img {
    filter: saturate(1.05);
    transform: translateY(-3px);
}

.sh-collection__item figcaption {
    color: var(--sh-ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    opacity: 0.62;
    text-transform: uppercase;
}

.sh-collection__note {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
    color: var(--sh-ink);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    opacity: 0.5;
    text-align: right;
}

/* Der Satz braucht daneben Raum. */
@media (min-width: 1024px) {
    .sh-statement__text,
    .sh-statement__note {
        max-width: min(52%, 34rem);
    }
}

/* Schmal: die Reihe rückt unter den Satz und bleibt eine Reihe. */
@media (max-width: 1023px) {
    .sh-collection {
        position: static;
        transform: none;
        width: 100%;
        margin-top: clamp(2rem, 5vw, 3rem);
    }

    .sh-collection__item:nth-child(1),
    .sh-collection__item:nth-child(3) {
        transform: none;
    }

    .sh-collection__note {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-collection__item img {
        transition: none;
    }

    .sh-collection__item:hover img {
        transform: none;
    }
}

.sh-statement {
    position: relative;
}

/* =========================================================================
   Der Videoplayer

   Eine eigene Komponente, kein umgestalteter Browserplayer. Drei Aufgaben:
   Der Film muss bedienbar sein, die Bedienung muss auf jedem Filmbild
   lesbar bleiben, und sie soll aussehen, als gehöre sie zu diesem Haus.

   Farblogik:
     Grund      Nachtoliv, zum unteren Rand hin nahezu deckend
     Fahrbahn   gedämpftes Off-White
     Gefahren   Rust
     Bedienung  Off-White
     Zeiger     die freigestellte BMW R 24, in Fahrtrichtung

   Die Strecke ist als Fahrbahn gelesen und nicht zusätzlich als
   Instrumentenskala: drei Zustände, eine Idee. Was vor dem Motorrad liegt,
   ist die Strecke; was der Browser bereits geladen hat, ist heller; was
   gefahren wurde, ist rostfarben.
   ========================================================================= */

.sh-player {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--sh-z-steuerung, 3);
    align-items: center;
    display: flex;
    gap: clamp(0.35rem, 0.9vw, 0.85rem);
    /* Oben viel Luft: dort läuft der Verlauf aus, damit die Leiste eine
       eigene Fläche bekommt statt auf dem Filmbild zu schwimmen. */
    padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(0.75rem, 2vw, 1.5rem)
        max(clamp(0.5rem, 1.2vw, 0.9rem), env(safe-area-inset-bottom, 0px));
    color: var(--sh-on-dark);
    background: linear-gradient(
        180deg,
        rgba(12, 13, 9, 0) 0%,
        rgba(12, 13, 9, 0.5) 30%,
        rgba(12, 13, 9, 0.9) 55%,
        rgba(12, 13, 9, 0.97) 100%
    );
    opacity: 0;
    transition: opacity 260ms var(--sh-ease);
}

/* Die Leiste zeigt sich, solange der Film steht, bei Zeigerkontakt, bei
   Tastaturfokus und für vier Sekunden nach einer Berührung. Während der
   Film läuft und niemand etwas tut, tritt sie zurück. */
.sh-player:not(.is-playing),
.sh-player:focus-within,
.sh-film__box:hover .sh-player,
.sh-player.is-wach {
    opacity: 1;
}

.sh-player[hidden] {
    display: none;
}

/* Die Bedienelemente sind Formularelemente – und erben damit die Stile,
   die für Eingabefelder und Knöpfe der Website gelten. Im Player ist das
   falsch: Um die unsichtbare Strecke und um das Lautstärkefeld lag dadurch
   eine sichtbare Kapsel (1 px Rahmen, 16 px Rundung), und ein globales
   min-height von 48 px hat die Knöpfe auf jeder Größe aufgeblasen – die
   Verkleinerung für schmale Geräte griff nie.

   Auf dunklen Filmbildern fiel das nicht auf, auf hellen sehr wohl: Die
   Leiste sah dort aus wie ein Standardplayer mit Pillen-Regler. Deshalb
   dieser Rücksetzer an einer Stelle, bevor die eigenen Werte gelten. */
.sh-player__btn,
.sh-player__range,
.sh-player__volume {
    border: 0;
    border-radius: 0;
    min-height: 0;
}

.sh-player__btn {
    align-items: center;
    background: none;
    color: inherit;
    cursor: pointer;
    display: grid;
    flex: 0 0 auto;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    width: 2.75rem;
    transition: color 180ms var(--sh-ease);
}

.sh-player__btn:hover,
.sh-player__btn:focus-visible {
    color: var(--sh-rust-hell);
}

.sh-player__btn:focus-visible,
.sh-player__range:focus-visible,
.sh-player__volume:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Abspielen: ein Dreieck. Pause: zwei Balken. Beides gezeichnet. */
.sh-player__icon--play {
    border-left: 0.85rem solid currentColor;
    border-top: 0.55rem solid transparent;
    border-bottom: 0.55rem solid transparent;
    margin-left: 0.2rem;
}

.sh-player__icon--pause {
    display: none;
    width: 0.8rem;
    height: 1.05rem;
    background: linear-gradient(90deg, currentColor 0 0.28rem, transparent 0.28rem 0.52rem, currentColor 0.52rem 0.8rem);
}

.sh-player.is-playing .sh-player__icon--play { display: none; }
.sh-player.is-playing .sh-player__icon--pause { display: block; }

/* Die laufende Zeit steht in der Systemschrift, nicht in Urbanist.

   tabular-nums stand hier schon immer - Urbanist liefert das Merkmal
   aber nicht. Gemessen an sechs Zeitstaenden: Die Breite schwankte um
   15,0 Pixel (Chromium) beziehungsweise 16,9 (WebKit), obwohl
   Tabellenziffern gerade das verhindern sollen. Die Leiste sprang dank
   min-width zwar nicht, aber innerhalb der Anzeige rueckten die Ziffern
   bei jedem Sekundenwechsel.

   Mit dem Systemstapel: 0,00 Pixel Schwankung in beiden Engines.
   Bei 12,8 Pixel grossen Ziffern neben dem Motorrad ist der Unterschied
   im Schriftbild nicht auszumachen, das Zittern im Lauf dagegen schon. */
.sh-player__time {
    flex: 0 0 auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    opacity: 0.82;
    min-width: 2.6rem;
}

.sh-player__time--total {
    text-align: right;
}

/* -------------------------------------------------------------------------
   Die Strecke: Fahrbahn mit dem Motorrad als Zeiger

   Statt eines Reglerknopfes fährt die freigestellte R 24 über die Strecke.
   Ihre Position ist die Filmposition, nicht umgekehrt: currentTime durch
   duration ergibt --sh-fortschritt, daraus die waagerechte Lage.

   Der eigentliche Regler liegt unsichtbar darüber. Er bringt Tastatur,
   Zeiger, Touch und die Vorlesbarkeit mit, die ein selbst gebauter
   Schieber erst mühsam nachbilden müsste.
   ---------------------------------------------------------------------- */

.sh-player__track {
    --sh-fortschritt: 0;
    --sh-geladen: 0;
    /* Halbe Breite des Zeigers. Alles auf der Strecke rechnet damit:
       Fahrbahn, Fuellstand und Motorrad ruecken um diesen Betrag ein und
       decken sich dadurch mit dem Daumen des Reglers. */
    --sh-halb: 1.7rem;
    flex: 1 1 auto;
    position: relative;
    height: 2.75rem;
    display: flex;
    align-items: center;
    min-width: 4rem;
}

.sh-player__rail,
.sh-player__buffer,
.sh-player__done {
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Die Strecke voraus */
.sh-player__rail {
    left: var(--sh-halb);
    right: var(--sh-halb);
    background: rgba(243, 240, 233, 0.2);
}

/* Was der Browser schon geladen hat: dieselbe Fahrbahn, heller. Kein
   zweiter Farbton, damit Rust die einzige Farbe auf der Strecke bleibt. */
.sh-player__buffer {
    left: var(--sh-halb);
    width: calc(var(--sh-geladen) * (100% - 2 * var(--sh-halb)));
    background: rgba(243, 240, 233, 0.42);
    transition: width 320ms linear;
}

/* Gefahren */
.sh-player__done {
    left: var(--sh-halb);
    width: calc(var(--sh-fortschritt) * (100% - 2 * var(--sh-halb)));
    background: var(--sh-rust-bright);
}

/* Das Motorrad steht mit den Rädern auf der Fahrbahn. Der Bildausschnitt
   endet knapp unter der Aufstandslinie, deshalb der kleine Versatz.
   Die Datei ist eigens für diese Stelle gespiegelt: Auf der Strecke fährt
   die Maschine nach rechts, also muss sie auch nach rechts zeigen. */
.sh-player__bike {
    position: absolute;
    left: calc(var(--sh-halb) + var(--sh-fortschritt) * (100% - 2 * var(--sh-halb)));
    bottom: 50%;
    width: calc(2 * var(--sh-halb));
    aspect-ratio: 360 / 170;
    margin-bottom: -0.14rem;
    transform: translateX(-50%);
    background: url("../images/silberhorn-bmw-r24-zeiger.webp") center bottom / contain no-repeat;
    pointer-events: none;
    will-change: transform;
}

/* Während der Film läuft, federt die Maschine leicht. Im Stillstand steht
   sie. Mehr passiert nicht: Die Zeitsteuerung ist wichtiger als das Bild. */
.sh-player.is-playing .sh-player__bike {
    animation: sh-federung 1100ms ease-in-out infinite;
}

@keyframes sh-federung {
    0%   { transform: translateX(-50%) translateY(0) rotate(0deg); }
    28%  { transform: translateX(-50%) translateY(-0.055rem) rotate(-0.5deg); }
    54%  { transform: translateX(-50%) translateY(0.03rem) rotate(0.35deg); }
    78%  { transform: translateX(-50%) translateY(-0.03rem) rotate(-0.2deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}

/* Der Regler selbst ist unsichtbar, aber vollständig bedienbar. */
.sh-player__range {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 2.75rem;
    position: relative;
    z-index: 2;
}

.sh-player__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(2 * var(--sh-halb));
    height: 2.75rem;
    background: transparent;
    border: 0;
}

.sh-player__range::-moz-range-thumb {
    width: calc(2 * var(--sh-halb));
    height: 2.75rem;
    background: transparent;
    border: 0;
}

.sh-player__range::-webkit-slider-runnable-track,
.sh-player__range::-moz-range-track {
    height: 2.75rem;
    background: transparent;
    border: 0;
}

.sh-player__range:focus-visible ~ .sh-player__rail {
    background: var(--sh-lime);
}

/* Liefert der Server keine Bereichsanfragen aus, lässt sich nicht springen.
   Die Strecke bleibt dann Anzeige und nimmt keine Eingaben an. Seit die
   Auslieferung 206 beantwortet, tritt dieser Zustand nicht mehr auf; die
   Erkennung bleibt, damit ein Rückschritt sichtbar wird statt still zu
   scheitern. */
.sh-player.is-ohne-sprung .sh-player__range {
    cursor: default;
    pointer-events: none;
}

.sh-player.is-ohne-sprung .sh-player__bike {
    opacity: 0.55;
}

/* Lautstärke: derselbe schmale Strich, kleiner. */
/* Die Linie zeichnet das Feld selbst. Über ::-webkit-slider-runnable-track
   säße sie am oberen Rand statt in der Mitte. */
.sh-player__volume {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(rgba(243, 240, 233, 0.38), rgba(243, 240, 233, 0.38)) center / 100% 2px no-repeat;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 2.75rem;
}

/* Der Punkt war das einzige gefüllte Element der rechten Gruppe und zog den
   Blick vor Ton und Vollbild auf sich – bei einem drittrangigen Regler. Die
   Linie darunter war zugleich die leiseste. Beide sind jetzt getauscht:
   Linie kräftiger, Punkt kleiner und zurückgenommen. */
/* Kein margin-top zum Zentrieren.

   Hier stand 1.05rem - das ist genau (2.75rem Spurhoehe - 0.65rem
   Punkthoehe) / 2, die alte Zentrierformel aus der Zeit, als Blink den
   Punkt an den oberen Rand der Spur setzte. Beide Engines zentrieren ihn
   heute selbst; der Versatz kam also obendrauf und der Punkt hing
   8,5 Pixel unter seiner Linie - als einziges Element der Leiste nicht
   auf der gemeinsamen Achse.

   Gemessen bei vierfacher Aufloesung: Linienmitte 25,9 CSS-Pixel,
   Punktmitte 34,4. Ohne die Zeile liegen beide aufeinander.
   Firefox (::-moz-range-thumb) hatte den Versatz nie. */
.sh-player__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(243, 240, 233, 0.88);
    border: 0;
}

.sh-player__volume::-moz-range-thumb {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(243, 240, 233, 0.88);
    border: 0;
}

.sh-player__volume::-webkit-slider-runnable-track,
.sh-player__volume::-moz-range-track {
    height: 2.75rem;
    background: transparent;
    border: 0;
}

/* Ton an: drei Wellen. Ton aus: durchgestrichen. */
.sh-player__icon--sound,
.sh-player__icon--muted {
    width: 1.15rem;
    height: 1.15rem;
    position: relative;
}

.sh-player__icon--sound::before,
.sh-player__icon--muted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.42rem;
    height: 0.62rem;
    background: currentColor;
    clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%);
}

.sh-player__icon--sound::after {
    content: "";
    position: absolute;
    right: 0.05rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.72rem;
    border-right: 1.5px solid currentColor;
    border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}

.sh-player__icon--muted { display: none; }

.sh-player__icon--muted::after {
    content: "";
    position: absolute;
    right: 0.05rem;
    top: 50%;
    width: 0.62rem;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%) rotate(-38deg);
}

.sh-player.is-muted .sh-player__icon--sound { display: none; }
.sh-player.is-muted .sh-player__icon--muted { display: block; }

/* Vollbild: vier Eckwinkel, aus acht Verläufen gezeichnet.
   Die frühere Fassung arbeitete mit einer Maske über einem Rahmen; dabei
   blieben je nach Rundung Reste der Kante stehen und das Zeichen sah
   ausgefranst aus. Acht Rechtecke sind eindeutig. */
.sh-player__icon--expand {
    width: 1.05rem;
    height: 1.05rem;
    background-image:
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size:
        0.36rem 1.5px, 1.5px 0.36rem,
        0.36rem 1.5px, 1.5px 0.36rem,
        0.36rem 1.5px, 1.5px 0.36rem,
        0.36rem 1.5px, 1.5px 0.36rem;
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
}

/* Im Vollbild rücken dieselben Eckwinkel nach innen: dasselbe Zeichen,
   kleinerer Rahmen. */
.sh-player.is-fullscreen .sh-player__icon--expand {
    background-position:
        0.22rem 0.22rem, 0.22rem 0.22rem,
        calc(100% - 0.22rem) 0.22rem, calc(100% - 0.22rem) 0.22rem,
        0.22rem calc(100% - 0.22rem), 0.22rem calc(100% - 0.22rem),
        calc(100% - 0.22rem) calc(100% - 0.22rem), calc(100% - 0.22rem) calc(100% - 0.22rem);
}

/* Schmale Geräte: dieselbe Leiste, weniger Knöpfe. Die Lautstärke regelt
   dort die Hardware, deshalb bleibt nur die Stummschaltung. */
@media (max-width: 760px) {
    .sh-player__volume {
        display: none;
    }

    .sh-player__track {
        --sh-halb: 1.25rem;
    }

    .sh-player__time {
        font-size: 0.72rem;
        min-width: 2.2rem;
    }

    .sh-player {
        gap: 0.2rem;
        padding-top: 1.25rem;
    }

    .sh-player__track,
    .sh-player__range {
        height: 2.5rem;
    }
}

@media (max-width: 420px) {
    .sh-player__time--total {
        display: none;
    }

    .sh-player__track {
        --sh-halb: 1.05rem;
    }
}

/* Ein 16:9-Film in einem hochkant gehaltenen Telefon ist ohnehin flach.
   Dort darf die Leiste nicht auch noch ein Drittel davon verdecken. */
/* Ein 16:9-Film in einem hochkant gehaltenen Telefon ist ohnehin flach.
   Dort darf die Leiste nicht auch noch ein Drittel davon verdecken.

   Verkleinert wird die Luft, nicht die Trefferfläche: Die Knöpfe bleiben
   bei 44 Pixeln. Der Abschnitt sah vorher 36 vor – das war eine Zahl, die
   nie gewirkt hat, weil ein globales min-height sie überschrieb. Beim
   bewussten Nachziehen fällt die Entscheidung anders herum. */
@media (max-height: 560px), (max-width: 480px) {
    .sh-player {
        padding-top: 0.8rem;
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
    }

    .sh-player__track,
    .sh-player__range {
        height: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-player.is-playing .sh-player__bike {
        animation: none;
    }

    .sh-player__buffer {
        transition: none;
    }
}

/* Der Aufruf im Fußbereich ist eine eigene Aktion, kein Listenpunkt. */
.sh-footer__action {
    margin: 1.25rem 0 1.5rem;
}

.sh-footer__action .sh-btn {
    width: auto;
}

@media (max-width: 620px) {
    .sh-footer__action .sh-btn {
        width: 100%;
    }
}

/* Die Höhe des flachen Seitenkopfs steht in 71-silberhorn-pages.css bei
   .sh-pagehead--plain.sh-pagehead--compact. Hier stünde sie mit geringerer
   Spezifität und würde nie greifen. */
.sh-pagehead--compact p {
    max-width: 40rem;
}

/* Als Überschrift der Terminliste genügt die kleine Marke. */
h2.sh-plate {
    font-size: 0.72rem;
}

/* =========================================================================
   Kopfzeile und Navigation

   Diese Regeln standen bis Iteration 5 an fünf Stellen dieses Blatts, aus
   vier Runden übereinander gewachsen. Sie widersprachen sich teilweise:
   `position: sticky` und `position: fixed`, zwei Umschaltpunkte, zwei
   Höhenangaben, ein reservierter Platz, der nicht zur tatsächlichen Höhe
   passte. Genau daraus entstanden die verzogenen Zwischenbreiten.

   Ab hier gilt: eine Höhe, ein Umschaltpunkt, eine Positionierung.

   Die Höhe steht in --sh-header-h und ist zugleich der Platz, den der
   Inhalt darunter freihält. Beide Werte kommen aus derselben Variablen,
   sie können deshalb nicht mehr auseinanderlaufen.
   ========================================================================= */

:root {
    --sh-header-h: 6.25rem;
    --sh-header-h-kompakt: 4.75rem;
    /* Ab hier trägt die Leiste alle sechs Menüpunkte plus Aktionsknopf.
       Darunter übernimmt das Menüsymbol. */
    --sh-header-umbruch: 1080px;
}

.sh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    color: var(--sh-on-dark);
    background: transparent;
    box-shadow: inset 0 -1px 0 transparent;
    transition: background-color 320ms var(--sh-ease), box-shadow 320ms var(--sh-ease),
        backdrop-filter 320ms var(--sh-ease);
}

/* Der Inhalt beginnt unter der Kopfzeile. Über einem Vollbild-Hero nicht:
   dort liegt sie bewusst im Bild. */
body:not(:has(.sh-hero)) .wp-site-blocks {
    padding-top: var(--sh-header-h);
}

/* Ohne Hero steht sie von Anfang an auf ihrem eigenen Grund, über einem
   Hero erst, sobald gescrollt wird. Der Glaseffekt bleibt. */
.sh-header.is-scrolled,
body:not(:has(.sh-hero)) .sh-header {
    background: rgba(22, 23, 15, 0.92);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: inset 0 -1px 0 rgba(243, 240, 233, 0.12);
}

/* Über einem hellen Hero säße weiße Schrift auf hellem Grund. Ein knapper
   Verlauf unter der Leiste trägt sie, solange sie noch transparent ist. */
.sh-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--sh-header-h) + 2rem);
    background: linear-gradient(180deg, rgba(14, 15, 10, 0.62), rgba(14, 15, 10, 0));
    pointer-events: none;
    opacity: 1;
    transition: opacity 320ms var(--sh-ease);
    z-index: -1;
}

.sh-header.is-scrolled::before,
body:not(:has(.sh-hero)) .sh-header::before {
    opacity: 0;
}

/* Beim Weiterlesen wird die Leiste kompakter. Sie verschwindet nicht:
   Ein Menü, das sich beim Scrollen wegzieht, ist ein Effekt, kein
   Bedienelement. Weil die Leiste nicht im Fluss steht, springt dabei
   nichts. */
/* Die Sprungmarke ist das erste Kind der Kopfzeile. Der Blockabstand des
   Gruppenblocks setzte darunter einen Aussenabstand und machte die Leiste
   21 Pixel hoeher als reserviert. */
.sh-header.wp-block-group > * {
    margin-block: 0;
}

.sh-header__inner {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    justify-content: space-between;
    min-height: var(--sh-header-h);
    width: var(--sh-shell);
    margin-inline: auto;
    padding-block: 0;
    transition: min-height 320ms var(--sh-ease);
}

.sh-header.is-scrolled .sh-header__inner {
    min-height: var(--sh-header-h-kompakt);
}

/* Das Logo behält seine Größe. Es darf nicht mitschrumpfen, sobald der
   Platz eng wird: Ein wanderndes Logo ist das erste, was auffällt. */
.sh-header__brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Kundenwunsch 09/2026: Logo deutlich präsenter. In der kompakten
   Leiste nach dem Scrollen nimmt es eine Stufe zurück, bleibt aber
   größer als vorher. */
.sh-header__brand img {
    display: block;
    height: 3.6rem;
    width: auto;
    transition: height 320ms var(--sh-ease);
}

.sh-header.is-scrolled .sh-header__brand img {
    height: 3rem;
}

@media (min-width: 1081px) and (max-width: 1240px) {
    .sh-header__brand img {
        height: 3.1rem;
    }
}

@media (max-width: 1080px) {
    .sh-header__brand img,
    .sh-header.is-scrolled .sh-header__brand img {
        height: 2.9rem;
    }
}

@media (max-width: 380px) {
    .sh-header__brand img,
    .sh-header.is-scrolled .sh-header__brand img {
        height: 2.5rem;
    }
}

/* -------------------------------------------------------------------------
   Breite Ansicht: offene Leiste
   ---------------------------------------------------------------------- */

.sh-header .wp-block-navigation {
    --navigation-layout-wrap: nowrap;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.sh-header .wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: clamp(0.9rem, 1.9vw, 2rem);
}

.sh-header .wp-block-navigation-item__content {
    color: var(--sh-on-dark);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-block: 0.35rem;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: color 200ms var(--sh-ease);
}

/* -------------------------------------------------------------------------
   Hoverzustand: die gesetzte Marke

   Die frühere Fassung war eine Linie, die unter dem Menüpunkt von links
   nach rechts einfuhr – das Muster, das auf jeder zweiten Website steht.
   An seiner Stelle steht jetzt eine kleine, an einer Ecke angeschrägte
   Marke: dieselbe Form wie die Nummernplakette und die Werkstatttafel,
   auf Navigationsgröße heruntergebrochen.

   Beim Überfahren erscheint sie links neben dem Punkt und rückt an ihren
   Platz, während die Schrift ein Stück vorrückt. Es sieht aus, als raste
   der Punkt ein. Keine Linie, kein Kasten, kein Schein.

   Die Marke sitzt außerhalb der Schriftfläche im Abstand zwischen zwei
   Punkten. Dadurch verändert sie keine Breite: Die Nachbarn bleiben, wo
   sie sind, egal welcher Punkt gerade angefahren wird.
   ---------------------------------------------------------------------- */

.sh-header .wp-block-navigation-item__content::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 0.36em);
    width: 0.4rem;
    height: 0.4rem;
    background: var(--sh-rust-hell);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
    opacity: 0;
    transform: translate(0.3rem, -50%);
    transition: opacity 200ms var(--sh-ease), transform 240ms var(--sh-ease),
        background-color 200ms var(--sh-ease);
    pointer-events: none;
}

/* Die Schrift selbst rückt vor. Ein Inline-Element nimmt kein transform an,
   deshalb inline-block. */
.sh-header .wp-block-navigation-item__label {
    display: inline-block;
    transition: transform 240ms var(--sh-ease);
}

/* Der Zustand hängt an :hover nur dort, wo es ein Zeigegerät gibt. Auf
   Touch bleibt ein Hoverzustand nach dem Tippen sonst stehen. */
@media (hover: hover) {
    .sh-header .wp-block-navigation-item__content:hover {
        color: #ffffff;
    }

    .sh-header .wp-block-navigation-item__content:hover::before {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .sh-header .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
        transform: translateX(0.3em);
    }

    /* Auf der bereits aufgerufenen Seite wechselt die Marke die Farbe,
       statt zweimal dasselbe zu behaupten. */
    .sh-header .current-menu-item .wp-block-navigation-item__content:hover::before {
        background: var(--sh-rust-hell);
    }
}

.sh-header .wp-block-navigation-item__content:focus-visible {
    color: #ffffff;
}

.sh-header .wp-block-navigation-item__content:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
}

.sh-header .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
    transform: translateX(0.3em);
}

/* Dauerzustand der aufgerufenen Seite: Die Marke steht, aber in der
   ruhigen Farbe, und die Schrift rückt nicht vor. „Hier bin ich" und
   „hierhin zeige ich" dürfen nicht gleich aussehen. */
.sh-header .current-menu-item .wp-block-navigation-item__content::before,
.sh-header .current-menu-parent .wp-block-navigation-item__content::before,
.sh-header .current-menu-ancestor .wp-block-navigation-item__content::before {
    opacity: 1;
    transform: translate(0, -50%);
    background: var(--sh-lime);
}

@media (prefers-reduced-motion: reduce) {
    .sh-header .wp-block-navigation-item__content::before,
    .sh-header .wp-block-navigation-item__label {
        transition: none;
    }

    .sh-header .wp-block-navigation-item__content::before {
        transform: translate(0, -50%);
    }

    .sh-header .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
    .sh-header .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
        transform: none;
    }
}

.sh-header__cta {
    flex: 0 0 auto;
}

.sh-header__cta .sh-btn {
    white-space: nowrap;
}

/* Zwischen 1081 und 1240 px wird es eng. Statt das Logo zu verkleinern
   oder Menüpunkte umbrechen zu lassen, rücken Abstände und Schrift ein
   Stück zusammen. */
@media (min-width: 1081px) and (max-width: 1240px) {
    .sh-header__inner {
        gap: 1.1rem;
    }

    .sh-header .wp-block-navigation__container {
        gap: 0.9rem;
    }

    .sh-header .wp-block-navigation-item__content {
        font-size: 0.9rem;
    }

    .sh-header__cta .sh-btn {
        font-size: 0.86rem;
        padding-inline: 1.1rem;
    }
}

/* Ab hier trägt die Leiste alles: kein Menüsymbol. */
@media (min-width: 1081px) {
    .sh-header .wp-block-navigation__responsive-container-open,
    .sh-header .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .sh-header .wp-block-navigation__responsive-container {
        background: none !important;
        display: flex !important;
        position: static !important;
        height: auto !important;
        width: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .sh-header .wp-block-navigation__responsive-dialog {
        display: contents;
    }
}

/* -------------------------------------------------------------------------
   Schmale Ansicht: Menüsymbol und Vollbildmenü

   Das offene Menü ist kein Overlay über der Desktopnavigation, sondern
   eine eigene Ansicht: Fläche in Nachtoliv, Punkte groß und linksbündig,
   der Aktionsknopf unten als Abschluss.
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .sh-header .wp-block-navigation {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .sh-header .wp-block-navigation__responsive-container-open,
    .sh-header .wp-block-navigation__responsive-container-close {
        color: var(--sh-on-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .sh-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    /* Der Navigationsblock setzt die Flaeche des offenen Menues selbst auf
       Weiss, mit einer Spezifitaet, die von WordPress-Version zu
       WordPress-Version wandert. Helle Schrift auf weisser Flaeche war das
       Ergebnis. Hier deshalb ausdruecklich uebersteuert. */
    /* Das offene Menü ist eine feste Komposition, kein langes Dokument:
       oben Logo und Schließen, in der Mitte die Punkte, unten der Aufruf.
       Scrollen darf nur der mittlere Teil.

       Vorher scrollte die gesamte Fläche. Auf einem iPhone SE war der
       Inhalt 725 Pixel hoch bei 568 Pixel Fensterhöhe – das Schließen-X
       stand nach dem Scrollen 129 Pixel über dem oberen Rand und war
       schlicht nicht mehr da. */
    .sh-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
        background: var(--sh-night) !important;
        color: var(--sh-on-dark);
        position: fixed;
        inset: 0;
        z-index: 100;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    /* Zwischen Container und Liste liegen zwei weitere Kästen des
       Navigationsblocks. Der äußere trägt eine Identitäts-Transform –
       damit wird er zum Bezugsrahmen für alles, was darin `fixed` steht,
       und ein festgesetztes Schließen-X war trotzdem nicht fest. Deshalb
       scrollt jetzt nicht der Dialog, sondern der Kasten darin. Das X ist
       sein Geschwister und bleibt dadurch stehen, ohne `fixed` zu
       brauchen. */
    /* Ein deckender Streifen in Kopfzeilenhöhe. Der Rumpf scrollt darunter
       durch; ohne ihn schöbe sich der erste Menüpunkt sichtbar über das
       Logo. Er liegt über dem Rumpf, aber unter dem Schließen-X. */
    .sh-header .wp-block-navigation__responsive-container.is-menu-open::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: calc(var(--sh-header-h) + env(safe-area-inset-top, 0px));
        background: var(--sh-night);
        z-index: 2;
        pointer-events: none;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
        position: relative;
    }

    /* Zwischen Dialog und Liste liegt ein weiterer Kasten des
       Navigationsblocks. Ohne Breitenangabe schrumpft er auf die Textbreite,
       und die Trennlinien enden mitten im Bild. */
    /* Das ist der einzige Teil, der scrollt. Mittig, solange Platz ist –
       und oben bündig, sobald es eng wird: `justify-content: center` hätte
       den Anfang abgeschnitten statt ihn nach unten zu schieben, ein
       automatischer Außenabstand tut beides richtig. */
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        padding:
            calc(var(--sh-header-h) + env(safe-area-inset-top, 0px) + 0.5rem)
            max(clamp(1.25rem, 7vw, 3.5rem), env(safe-area-inset-right, 0px))
            8.5rem
            max(clamp(1.25rem, 7vw, 3.5rem), env(safe-area-inset-left, 0px));
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        margin-block: auto;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid rgba(243, 240, 233, 0.1);
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
        border-top: 1px solid rgba(243, 240, 233, 0.1);
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        color: var(--sh-on-dark);
        display: block;
        font-size: clamp(1.4rem, 6vw, 1.9rem);
        font-weight: 700;
        letter-spacing: -0.015em;
        padding-block: 0.9rem;
        width: 100%;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
        display: none;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
        transform: none;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
        color: var(--sh-lime);
    }

    /* iOS legt beim Antippen eine eigene Fläche über den Link. Zusammen mit
       dem Fokus, den WebKit nach einer Berührung stehen lässt, sah ein
       angetippter Punkt aus wie ein dauerhaft gewählter.

       Der Tap-Highlight geht weg, der Fokusring für die Tastatur bleibt:
       :focus-visible erscheint bei Berührung nicht, bei Tastatur schon. */
    .sh-header .wp-block-navigation-item__content,
    .sh-header .wp-block-navigation__responsive-container-open,
    .sh-header .wp-block-navigation__responsive-container-close {
        -webkit-tap-highlight-color: transparent;
    }

    .sh-header .wp-block-navigation-item__content:focus:not(:focus-visible) {
        outline: none;
    }

    /* Das Schließen-Symbol steht auf der Höhe des Menüsymbols, damit der
       Daumen dieselbe Stelle findet – und es steht fest, nicht im
       scrollenden Teil. */
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: max(calc((var(--sh-header-h) - 2.75rem) / 2), env(safe-area-inset-top, 0px));
        right: max(1.25rem, calc((100vw - var(--sh-shell)) / 2), env(safe-area-inset-right, 0px));
        z-index: 3;
    }

    /* Der Aktionsknopf gehört ins offene Menü: dort ist er der
       naheliegende nächste Schritt. In der geschlossenen Leiste hätte er
       neben dem Symbol keinen Platz, ohne zu drücken. */
    .sh-header__cta {
        display: none;
    }

    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta {
        display: block;
        position: fixed;
        left: clamp(1.5rem, 7vw, 3.5rem);
        right: clamp(1.5rem, 7vw, 3.5rem);
        bottom: clamp(1.5rem, 5vw, 2.5rem);
        z-index: 101;
    }

    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta .sh-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 3.25rem;
    }

    /* ---------------------------------------------------------------------
       Der Eingang des Menüs

       Vorher sprang die Fläche hart ins Bild: `is-menu-open` schaltete auf
       `position: fixed; inset: 0`, mehr passierte nicht. Auf dem Telefon
       ist das der auffälligste Moment der ganzen Seite, und er war der
       einzige ohne Gestaltung.

       Die Choreografie hat drei Stimmen und ist nach einer halben Sekunde
       fertig:

       1. Die Fläche kommt zuerst und schnell. Sie ist der Grund, auf dem
          alles andere steht - sie darf nicht auf sich warten lassen.
       2. Der Kopf bewegt sich nicht. Logo und Schließen-X stehen schon an
          ihrer Stelle und bleiben dort. Ein X, das erst einschwebt, ist
          für den Moment, in dem man es sucht, nicht da.
       3. Die Zeilen setzen sich von oben, eine nach der anderen, mit
          32 Millisekunden Abstand. Das ist zu wenig für eine Welle und
          genug, um nicht wie ein Schalter zu wirken.

       Bewegt werden ausschließlich `opacity` und `transform` - beides
       läuft auf dem Compositor, keines löst ein Layout aus. Kein Versatz,
       kein Ruckeln, keine Änderung an der Scrollmechanik.
       --------------------------------------------------------------------- */

    @keyframes sh-menue-flaeche {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes sh-menue-zeile {
        from { opacity: 0; transform: translate3d(0, -10px, 0); }
        to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes sh-menue-aufruf {
        from { opacity: 0; transform: translate3d(0, 6px, 0); }
        to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .sh-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
        animation: sh-menue-flaeche 180ms var(--sh-ease-out, ease-out) both;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        animation: sh-menue-zeile 240ms var(--sh-ease-out, ease-out) both;
        animation-delay: calc(80ms + var(--sh-menue-rang, 0) * 32ms);
    }

    /* Sechs Punkte, sechs Ränge. Eine eigene Eigenschaft statt sechs
       vollständiger Regeln - so bleibt die Staffelung an einer Stelle
       einstellbar, und ein siebter Punkt fällt nicht heraus, sondern
       schließt sich hinten an. */
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { --sh-menue-rang: 0; }
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { --sh-menue-rang: 1; }
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { --sh-menue-rang: 2; }
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { --sh-menue-rang: 3; }
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { --sh-menue-rang: 4; }
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { --sh-menue-rang: 5; }

    /* Der Aufruf am unteren Rand steigt an seine Stelle, nicht von oben:
       Er sitzt an der Kante, und was an einer Kante liegt, kommt von dort. */
    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta {
        animation: sh-menue-aufruf 240ms var(--sh-ease-out, ease-out) both;
        animation-delay: 260ms;
    }

    /* Wer weniger Bewegung eingestellt hat, bekommt nur die Fläche - und
       die ohne Versatz. Der Rest steht sofort. */
    @media (prefers-reduced-motion: reduce) {
        .sh-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
            animation-duration: 120ms;
        }

        .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
        .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta {
            animation: none;
        }
    }

}

/* Solange das Menü offen ist, liegt die Leiste selbst über der Fläche,
   damit Logo und Schließen-Symbol sichtbar bleiben. */
.sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 101;
}

.sh-header:has(.wp-block-navigation__responsive-container.is-menu-open)::before {
    opacity: 0;
}

.sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__inner {
    position: relative;
    z-index: 102;
}

/* Das Logo ist ein Geschwister der Menueflaeche. Ohne eigene Ebene liegt es
   darunter und verschwindet, sobald das Menue offen ist. */
.sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__brand {
    position: relative;
    z-index: 101;
}

/* Sprungmarke bleibt über allem. */
.sh-skip:focus {
    z-index: 110;
}

/* -------------------------------------------------------------------------
   Menü auf flachen Fenstern

   Quer gehaltenes Telefon: 390 Pixel Höhe, davon nimmt die Kopfzeile in
   ihrer normalen Größe ein Viertel. Die Liste lief unter das Logo und der
   Aktionsknopf lag über den Menüpunkten. Hier wird alles eine Stufe
   kleiner, damit die sechs Punkte und der Knopf ohne Überlagerung passen.
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) and (orientation: landscape) and (max-height: 560px) {
    :root {
        --sh-header-h: 4.25rem;
        --sh-header-h-kompakt: 3.75rem;
    }

    .sh-header__brand img {
        height: 1.9rem;
    }

    /* Der Innenabstand gehört an den scrollenden Kasten, nicht an den
       Dialog: Ein Dialog mit Innenabstand kann nicht unter seine
       Mindesthöhe schrumpfen, ragte damit aus dem Container heraus – und
       das Schließen-X wanderte mit ihm nach oben aus dem Bild. */
    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-block: calc(var(--sh-header-h) + 0.6rem) 4.75rem;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        margin-block: 0;
    }

    .sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: 1rem;
        padding-block: 0.45rem;
    }

    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta {
        bottom: 0.75rem;
    }

    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta .sh-btn {
        min-height: 2.75rem;
    }
}

/* Falls der Knopf auf sehr flachen Fenstern doch einmal über der Liste
   liegt, steht er auf einem eigenen Grund und nicht halb im Text. */
@media (max-width: 1080px) {
    .sh-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sh-header__cta::before {
        content: "";
        position: absolute;
        inset: -1.25rem -1.5rem -1.5rem;
        background: linear-gradient(180deg, rgba(22, 23, 15, 0), rgba(22, 23, 15, 0.96) 45%);
        z-index: -1;
        pointer-events: none;
    }
}

/* Wenn die Auslieferung keine Bereichsanfragen beantwortet, kann kein
   Browser im Film springen. Die Strecke bleibt dann als Anzeige stehen,
   nimmt aber sichtbar keine Eingaben an. */
.sh-player.is-ohne-sprung .sh-player__track {
    cursor: default;
}

.sh-player.is-ohne-sprung .sh-player__range {
    cursor: default;
    pointer-events: none;
}

.sh-player.is-ohne-sprung .sh-player__rail {
    background: rgba(243, 240, 233, 0.14);
}

/* Auch die Kopfzeile steht bei reduzierter Bewegung still: kein Übergang
   der Höhe, kein Überblenden des Grundes, kein weiches Scrollen. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .sh-header,
    .sh-header__inner,
    .sh-header::before {
        transition: none;
    }
}

/* Das Sprungziel muss den Fokus annehmen können, sonst springt die Seite
   zwar, aber die Tastatur bleibt am Anfang stehen. */
#inhalt {
    scroll-margin-top: var(--sh-header-h);
}

#inhalt:focus {
    outline: none;
}

/* Der Beitragsbild-Block bringt aus theme.json einen Radius von 1,5rem
   mit. In dieser Gestaltung ist kein Bild rund: Kopfbilder laufen von Rand
   zu Rand, Karten sind rechteckig. Deshalb hier durchgehend abgeschaltet. */
.wp-site-blocks .wp-block-post-featured-image,
.wp-site-blocks .wp-block-post-featured-image img {
    border-radius: 0;
}

/* Als Trennzeichen steht zwischen zwei Kategorien der Mittelpunkt, wie
   überall sonst auf der Seite. Ein Komma bekäme durch die Sperrung der
   Versalien einen Abstand davor und sähe nach Satzfehler aus. */
.sh-plate .wp-block-post-terms__separator {
    letter-spacing: 0;
    opacity: 0.6;
}


/* =========================================================================
   Die Fahrt auf schmalen Geräten

   Das Motorrad ruckelte auf dem iPhone. Der Grund lag nicht in der
   Rechnung, sondern in zwei Filtern auf einem Element, das sich in jedem
   Bild bewegt: ein Schlagschatten am Bild und ein weicher Lichtschein
   davor. WebKit muss dafür pro Bild eine eigene Zwischenfläche anlegen und
   neu zeichnen – bei einem 400 Pixel breiten Bild ist das teuer. Dieselbe
   Ursache hatte in Iteration 6 die Veranstaltungsseite zum Absturz
   gebracht.

   Auf dem Rechner bleiben beide: dort ist genug Luft, und der Schatten
   trägt. Auf Touchgeräten fallen sie weg. Bei der dortigen Bildgröße
   fehlt kaum etwas – und die Fahrt läuft.
   ========================================================================= */

@media (hover: none), (max-width: 820px) {
    .sh-ride__bike img {
        filter: none;
    }

    .sh-ride__bike::before {
        display: none;
    }
}

/* Während die Seite in Bewegung ist, setzt das Motorwippen aus. Zwei
   überlagerte Bewegungen auf demselben Element kosten auf dem Telefon
   mehr, als das Wippen dort einbringt – und im Stillstand ist es ohnehin
   das, was man sieht. */
@media (hover: none), (max-width: 820px) {
    .sh-scrollt .sh-ride__bike-inner {
        animation-play-state: paused;
    }
}