/* =========================================================================
   SILBERHORN – Formulare und Unterseiten

   WPForms rendert in der modernen Markup-Variante und steuert Aussehen
   über eigene Custom Properties. Wir setzen diese Variablen auf die
   Silberhorn-Werte, statt gegen die Plugin-Selektoren anzuschreiben –
   das überlebt Plugin-Updates deutlich besser.
   ========================================================================= */

.sh-form-wrap .wpforms-container,
.sh-form-wrap .wpforms-container-full {
    --wpforms-field-border-radius: 4px;
    --wpforms-field-border-size: 1px;
    --wpforms-field-border-style: solid;
    --wpforms-field-border-color: rgba(28, 27, 25, 0.28);
    --wpforms-field-border-color-spare: rgba(28, 27, 25, 0.28);
    --wpforms-field-background-color: #ffffff;
    --wpforms-field-text-color: var(--sh-ink);
    --wpforms-field-menu-color: #ffffff;

    --wpforms-field-size-input-height: 3.25rem;
    --wpforms-field-size-input-spacing: 1.15rem;
    --wpforms-field-size-font-size: 1rem;
    --wpforms-field-size-line-height: 1.45;
    --wpforms-field-size-padding-h: 1rem;
    --wpforms-field-size-checkbox-size: 1.15rem;
    --wpforms-field-size-sublabel-spacing: 0.4rem;

    --wpforms-label-color: var(--sh-ink);
    --wpforms-label-sublabel-color: rgba(28, 27, 25, 0.62);
    --wpforms-label-error-color: #a02c2c;
    --wpforms-label-size-font-size: 0.95rem;
    --wpforms-label-size-line-height: 1.35;
    --wpforms-label-size-sublabel-font-size: 0.86rem;
    --wpforms-label-size-sublabel-line-height: 1.4;

    --wpforms-button-background-color: var(--sh-rust);
    --wpforms-button-border-color: var(--sh-rust);
    --wpforms-button-border-radius: 6px;
    --wpforms-button-border-size: 1.5px;
    --wpforms-button-border-style: solid;
    --wpforms-button-text-color: #ffffff;
    --wpforms-button-size-font-size: 1rem;
    --wpforms-button-size-height: 3.4rem;
    --wpforms-button-size-padding-h: 2rem;
    --wpforms-button-size-margin-top: 0.5rem;

    --wpforms-container-padding: 0;
    --wpforms-container-border-style: none;
    --wpforms-container-shadow-size-box-shadow: none;
    --wpforms-page-break-color: var(--sh-rust);

    font-family: inherit;
}

/* Die Hausschrift gilt auch im Formular. */
.sh-form-wrap .wpforms-form,
.sh-form-wrap .wpforms-form input,
.sh-form-wrap .wpforms-form select,
.sh-form-wrap .wpforms-form textarea,
.sh-form-wrap .wpforms-form button,
.sh-form-wrap .wpforms-form label {
    font-family: inherit;
}

/* -------------------------------------------------------------------------
   Raster

   Zusammengehörige Angaben stehen nebeneinander, alles Erzählende über
   die volle Breite. Auf schmalen Geräten wird daraus automatisch eine
   Spalte.
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(1rem, 2.5vw, 1.75rem);
}

.sh-form-wrap .wpforms-form .wpforms-field {
    grid-column: 1 / -1;
    padding: 0 0 1.25rem;
}

.sh-form-wrap .wpforms-form .wpforms-field.sh-half {
    grid-column: span 1;
}

@media (max-width: 640px) {
    .sh-form-wrap .wpforms-form .wpforms-field-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .sh-form-wrap .wpforms-form .wpforms-field.sh-half {
        grid-column: 1 / -1;
    }

    /* Vor- und Nachname stehen ab hier untereinander. WPForms trennt die
       beiden Hälften über je 10 px Innenabstand an der Innenkante – die
       bleiben beim Umbruch stehen und rücken das zweite Feld gegenüber
       dem ersten ein. Genau das war auf dem Telefon zu sehen. */
    .sh-form-wrap .wpforms-container .wpforms-form .wpforms-field-row .wpforms-field-row-block,
    .sh-form-wrap .wpforms-container .wpforms-form .wpforms-field-row .wpforms-field-row-block.wpforms-one-half,
    .sh-form-wrap .wpforms-container .wpforms-form .wpforms-field-row .wpforms-field-row-block.wpforms-first {
        padding-left: 0;
        padding-right: 0;
    }
}

/* -------------------------------------------------------------------------
   Felder
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form .wpforms-field-label {
    font-weight: 600;
    margin-bottom: 0.45rem;
}

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

.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 {
    box-shadow: none;
    transition: border-color 180ms var(--sh-ease), box-shadow 180ms var(--sh-ease);
}

.sh-form-wrap .wpforms-form ::placeholder {
    color: rgba(28, 27, 25, 0.42);
    opacity: 1;
}

.sh-form-wrap .wpforms-form input:hover,
.sh-form-wrap .wpforms-form select:hover,
.sh-form-wrap .wpforms-form textarea:hover {
    border-color: rgba(28, 27, 25, 0.5);
}

/* Der Fokus ist kräftig sichtbar – nicht nur eine feine Linie. */
.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);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-rust) 22%, transparent);
    outline: none;
}

.sh-form-wrap .wpforms-form textarea {
    min-height: 9rem;
    resize: vertical;
}

/* Auswahlfelder bekommen einen eigenen Pfeil statt des Systemdreiecks. */
.sh-form-wrap .wpforms-form select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--sh-rust) 50%),
        linear-gradient(135deg, var(--sh-rust) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.85rem) 55%;
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}

/* -------------------------------------------------------------------------
   Ankreuzfelder
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form .wpforms-field-checkbox ul,
.sh-form-wrap .wpforms-form .wpforms-field-radio ul,
.sh-form-wrap .wpforms-form .wpforms-field-gdpr-checkbox ul {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-form-wrap .wpforms-form .wpforms-field-checkbox li,
.sh-form-wrap .wpforms-form .wpforms-field-radio li,
.sh-form-wrap .wpforms-form .wpforms-field-gdpr-checkbox li {
    align-items: flex-start;
    display: flex;
    gap: 0.7rem;
}

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

.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;
}

/* Die Einwilligung sitzt auf einer eigenen Fläche, damit sie gelesen wird.

   Der Innenabstand steht bewusst als Einzelangabe und mit einer Klasse
   mehr: WPForms setzt unterhalb von 600 px eigene padding-left/-right auf
   1 px. Eine Kurzschreibweise verliert dagegen, eine Einzelangabe mit
   höherer Spezifität nicht. Ohne das klebte das Ankreuzfeld auf dem
   Telefon an der Kante der Fläche. */
.sh-form-wrap .wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox {
    background: var(--sh-beige);
    margin-top: 0.5rem;
    padding-block: 1.15rem;
    padding-inline: 1.35rem;
}

.sh-form-wrap .wpforms-form .wpforms-field-gdpr-checkbox .wpforms-field-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* -------------------------------------------------------------------------
   Absenden
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form .wpforms-submit-container {
    grid-column: 1 / -1;
    padding-top: 0.5rem;
}

.sh-form-wrap .wpforms-form button[type="submit"] {
    background-image: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 200ms var(--sh-ease), transform 220ms var(--sh-ease);
}

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

.sh-form-wrap .wpforms-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--sh-ink);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Fehler und Bestätigung
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form label.wpforms-error,
.sh-form-wrap .wpforms-form em.wpforms-error {
    color: #a02c2c;
    display: block;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.4rem;
}

/* Der Tippfehler-Hinweis „Meinten Sie …?“ erscheint, wenn das E-Mail-Feld
   den Fokus verliert – also genau während des Klicks auf das nächste
   Element. Im Fluss schob er alles darunter um eine Zeile nach unten, und
   der Klick auf die Einwilligung ging daneben. Deshalb steht für ihn
   dauerhaft eine Zeile bereit, in der er ohne Verschiebung erscheint. */
.sh-form-wrap .wpforms-form .wpforms-field-email {
    padding-bottom: 2.75rem;
    position: relative;
}

.sh-form-wrap .wpforms-form .wpforms-field-email label.mailcheck-error {
    left: 0;
    line-height: 1.35;
    margin: 0;
    position: absolute;
    right: 0;
    top: calc(100% - 2.35rem);
}

.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-form input.wpforms-error:focus,
.sh-form-wrap .wpforms-form textarea.wpforms-error:focus {
    box-shadow: 0 0 0 3px rgba(160, 44, 44, 0.2);
}

/* -------------------------------------------------------------------------
   Formularfläche

   Das Formular steht auf einer eigenen hellen Fläche, auch wenn die
   Sektion dunkel ist – Eingabefelder wollen Kontrast.
   ---------------------------------------------------------------------- */

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

.sh-band--night .sh-form-wrap .wpforms-field-label,
.sh-band--olive .sh-form-wrap .wpforms-field-label {
    color: var(--sh-ink);
}

/* -------------------------------------------------------------------------
   Kontaktseite: Karte
   ---------------------------------------------------------------------- */

.sh-map {
    border-radius: 4px;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    overflow: clip;
    aspect-ratio: 16 / 9;
    background: var(--sh-beige);
}

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

@media (max-width: 620px) {
    .sh-map {
        aspect-ratio: 4 / 3;
    }
}

/* -------------------------------------------------------------------------
   Feldbreiten

   WPForms begrenzt Felder je nach eingestellter Größe auf einen Anteil
   der Zeile. In unserem Zweispalter ist die Spalte bereits die richtige
   Breite – die Felder füllen sie vollständig aus.
   ---------------------------------------------------------------------- */

.sh-form-wrap .wpforms-form .wpforms-field-small,
.sh-form-wrap .wpforms-form .wpforms-field-medium,
.sh-form-wrap .wpforms-form .wpforms-field-large,
.sh-form-wrap .wpforms-form div.wpforms-field-row {
    max-width: 100%;
    width: 100%;
}

/* Vor- und Nachname stellt WPForms selbst nebeneinander – ein eigenes
   Raster darüberzulegen bringt die beiden Spalten durcheinander. */

/* Das Honeypot-Feld des Spamschutzes bleibt außerhalb des Rasters. */
.sh-form-wrap .wpforms-form .wpforms-field[style*="absolute"],
.sh-form-wrap .wpforms-form .wpforms-field-hp {
    grid-column: 1 / -1;
}

/* =========================================================================
   Veranstaltungen

   Das Datum ist die Information, nach der zuerst gesucht wird. Es sitzt
   deshalb als Kalenderblatt auf dem Bild – wie ein Aufkleber auf einer
   Windschutzscheibe.
   ========================================================================= */

.sh-event-card__media {
    position: relative;
}

.sh-event-card__stamp {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 0.05rem;
    padding: 0.7rem 0.85rem 0.6rem;
    background: var(--sh-rust);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6rem), calc(100% - 0.6rem) 100%, 0 100%);
    transition: transform 280ms var(--sh-ease);
}

.sh-event-card__day {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sh-event-card__month {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0.88;
}

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

/* Ausverkauft oder abgesagt: das Kalenderblatt verliert seine Farbe. */
.sh-event-card--ausverkauft .sh-event-card__stamp,
.sh-event-card--abgesagt .sh-event-card__stamp {
    background: var(--sh-ink);
}

.sh-event-card__badge {
    background: var(--sh-ink);
}

/* -------------------------------------------------------------------------
   Archiv: kommende Termine oben, vergangene als ruhige Chronik
   ---------------------------------------------------------------------- */

.sh-archive-lead {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
}

@media (max-width: 820px) {
    .sh-archive-lead {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Einzelne Veranstaltung */
.sh-event-single__media {
    border-radius: 4px;
    overflow: clip;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

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

/* Seitenkopf ohne Bild: die Fläche trägt die Überschrift allein. */
.sh-pagehead--plain {
    padding-block: clamp(9rem, 16vw, 13rem) clamp(3rem, 6vw, 5rem);
}

/* Auf der Terminübersicht darf der Kopf keine halbe Bildschirmhöhe
   verbrauchen: Der erste Termin soll ohne Scrollen zu sehen sein. */
.sh-pagehead--plain.sh-pagehead--compact {
    padding-block: clamp(7rem, 11vw, 8.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

.sh-pagehead--plain::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, var(--sh-rust) 0 6rem, transparent 6rem);
}

/* Auf der Einzelseite steht das Bild im Textfluss, nicht als Kopfbild. */
.sh-event-single__media {
    max-width: none;
}

.sh-event-single__media figure,
.sh-event-single__media img {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
}

/* Zwei Abschluss-Aufrufe direkt untereinander wären eine Wiederholung:
   endet die Seite bereits mit dem Abschluss-Block, tritt der Zuruf im
   Fußbereich zurück. */
body:has(main .sh-closing) .sh-footer__cta {
    display: none;
}

/* =========================================================================
   Preisliste

   Kein Tabellenraster, sondern eine Liste mit Führungslinie – wie eine
   Preistafel an der Kasse. Der Betrag steht rechts und ist die zweite
   Information, die man sucht.
   ========================================================================= */

.sh-price {
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: 44rem;
}

.sh-price__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-price__row {
    align-items: baseline;
    border-top: 1px solid rgba(28, 27, 25, 0.16);
    display: flex;
    gap: 1rem;
    padding-block: 1.05rem;
}

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

.sh-price__label {
    flex: 1 1 auto;
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
}

/* Die Führungslinie zwischen Bezeichnung und Betrag */
.sh-price__label::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.sh-price__value {
    flex: 0 0 auto;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sh-price__note {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 1.1rem 0 0;
    opacity: 0.72;
    max-width: 42rem;
}

.sh-price + .sh-actions {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* Im Fließtext färbt `.sh-prose a` alle Links rostfarben – ein Button
   innerhalb des Fließtexts wurde dadurch rostrot auf rostrot und war
   nicht mehr lesbar. */
.sh-prose a.sh-btn--primary,
.sh-content a.sh-btn--primary {
    color: #fff;
}

.sh-prose a.sh-btn,
.sh-content a.sh-btn {
    text-decoration: none;
}

.sh-prose a.sh-btn--ghost,
.sh-content a.sh-btn--ghost {
    color: var(--sh-ink);
}

.sh-band--night .sh-prose a.sh-btn--ghost,
.sh-band--olive .sh-prose a.sh-btn--ghost {
    color: var(--sh-on-dark);
}

/* Der Zuruf im Fußbereich tritt zurück, wenn die Seite ohnehin mit einem
   Abschluss endet – oder wenn das Anfrageformular auf derselben Seite
   steht. Zweimal derselbe Aufruf direkt untereinander liest sich wie ein
   Fehler, und der Button würde auf die Stelle verweisen, an der man
   gerade steht. */
body:has(main .sh-closing) .sh-footer__cta,
body:has(main #anfrage) .sh-footer__cta {
    display: none;
}

/* Die Telefonnummer in der Werkstatttafel ist ein Hauptziel auf dem
   Telefon und braucht eine greifbare Fläche. */
.sh-phone__number {
    align-items: center;
    display: inline-flex;
    min-height: 2.75rem;
}

/* Auf dem Telefon sind zwei 150 px breite Namensfelder unbrauchbar –
   dort stehen Vor- und Nachname untereinander. */
@media (max-width: 640px) {
    /* WPForms legt die Zeile selbst als zweispaltiges Raster an. */
    .sh-form-wrap .wpforms-form .wpforms-field-name .wpforms-field-row {
        display: block;
    }

    /* WPForms setzt die halbe Breite über einen ID-Selektor
       (#wpforms-71 …) – dagegen kommt keine Klasse an. */
    .sh-form-wrap .wpforms-form .wpforms-field-name .wpforms-field-row-block {
        display: block;
        float: none;
        margin-left: 0;
        margin-right: 0;
        width: 100% !important;
    }

    .sh-form-wrap .wpforms-form .wpforms-field-name .wpforms-field-row-block + .wpforms-field-row-block {
        margin-top: 0.9rem;
    }
}

/* =========================================================================
   Anlässe als Rad

   Vier Anlässe bilden vier Viertel eines Kreises. Die Geometrie kommt vom
   Rad, nicht von einem Markenzeichen: vier Segmente um eine Nabe, durch
   schmale Fugen getrennt. Beim Überfahren tritt ein Segment aus dem Rad
   heraus, die übrigen treten zurück.

   Unter 900 px wird daraus eine Liste – ein Kreis auf 390 px wäre eine
   Briefmarke.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Das Rad im Band

   Bis Iteration 6 stand der Kreis allein und mittig unter der Überschrift.
   Bei 1440 Pixeln blieben links und rechts je rund 300 Pixel leer, und das
   Band wurde dadurch hoch und ruhig bis zur Leblosigkeit.

   Jetzt steht der Kreis rechts, der Text begleitet ihn links. Bewusst kein
   halbe-halbe-Raster: Die Textspalte ist schmaler, und ihre drei Zeilen
   sitzen vertikal in der Mitte des Kreises, nicht an seiner Oberkante.
   ---------------------------------------------------------------------- */

@media (min-width: 1000px) {
    .sh-wheel-band .sh-shell {
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
        /* Zwei federnde Zeilen oben und unten: Die drei Textzeilen liegen
           dadurch als Gruppe auf der Höhe der Kreismitte, statt sich über
           die ganze Kreishöhe zu verteilen. */
        grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: clamp(2.5rem, 5vw, 5.5rem);
    }

    .sh-wheel-band .sh-plate {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        margin-bottom: 0;
    }

    .sh-wheel-band .sh-title {
        grid-column: 1;
        grid-row: 3;
        margin-top: 1.1rem;
    }

    .sh-wheel-band__lead {
        grid-column: 1;
        grid-row: 4;
        align-self: start;
        margin-top: 1.1rem;
        max-width: 30ch;
    }

    .sh-wheel-band .sh-wheel {
        grid-column: 2;
        grid-row: 1 / -1;
        margin: 0;
        max-width: min(100%, 38rem);
        justify-self: end;
        align-self: center;
    }
}

/* Auf schmalen Geräten bleibt es eine Spalte – aber ohne den großen
   Leerraum vor dem Rad, den die Desktopfassung dort hinterlassen hatte. */
@media (max-width: 999px) {
    .sh-wheel-band__lead {
        margin-top: 1rem;
        max-width: 40ch;
    }

    .sh-wheel-band .sh-wheel {
        margin-top: clamp(1.75rem, 4vw, 2.5rem);
    }
}

.sh-wheel {
    /* Keine Fuge zwischen den Vierteln. Die Trennung entsteht aus den
       gegenueberliegenden Grauwerten selbst; eine gezeichnete Linie waere
       eine Kontur, die das Rad nicht hat. */
    --sh-wheel-gap: 0px;
    /* Der Reifen traegt jetzt die Proportion einer Fahrzeugplakette statt
       eines Haarrings. Prozent statt Pixel, damit das Verhaeltnis bei
       jeder Groesse gleich bleibt und die Beschriftung im Ring sitzt. */
    --sh-wheel-rim: 6.6%;
    position: relative;
    width: min(100%, 50rem);
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    aspect-ratio: 1;
    border-radius: 50%;
    /* Der Reifen ist der Rand dieses Elements, kein Ring darüber. Die vier
       Viertel liegen darin und werden von ihm nie verdeckt.

       Die Breite steckt nicht mehr im padding: Ein Prozentwert im padding
       bezieht sich auf die Breite des Elternelements, nicht auf die eigene.
       Bei 1280 px Schale und 800 px Rad wurde der Reifen dadurch um die
       Haelfte zu breit und die Ringbeschriftung sass daneben. Die Scheibe
       rueckt jetzt selbst ein - ein Prozentwert in inset bezieht sich auf
       das umgebende Kaestchen, also auf das Rad. */
    background: #0a0b06;
    box-shadow:
        inset 0 0 0 1px rgba(243, 240, 233, 0.13),
        0 0 0 1px rgba(243, 240, 233, 0.1);
}

/* EVENTS laeuft im oberen Ringabschnitt mit, gesperrt und zurueckhaltend.
   Der Bogen kommt aus einem Pfad im SVG, weil sich Schrift nur so wirklich
   auf eine Rundung legen laesst. Unten bleibt der Ring leer: Text oben und
   unten waere die Anordnung eines bekannten Markenzeichens. */
.sh-wheel__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.sh-wheel__ring text {
    fill: rgba(243, 240, 233, 0.52);
    font-family: inherit;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 2.6px;
}

.sh-wheel__disc {
    position: absolute;
    inset: var(--sh-wheel-rim);
    border-radius: 50%;
    overflow: hidden;
    /* Die Fugen zwischen den Vierteln zeigen diese Fläche. */
    background: #0a0b06;
    isolation: isolate;
}

/* -------------------------------------------------------------------------
   Grundzustand: nur Flächen

   Ohne Zeigerkontakt zeigt das Rad keine Fotos, sondern vier Grautöne.
   Gegenüberliegende Viertel tragen denselben Ton. Das ergibt die
   viergeteilte Geometrie eines Rades, ohne die Farben oder das Zeichen
   einer Marke zu übernehmen.
   ---------------------------------------------------------------------- */

.sh-wheel__seg {
    position: absolute;
    width: calc(50% - var(--sh-wheel-gap) / 2);
    height: calc(50% - var(--sh-wheel-gap) / 2);
    overflow: hidden;
    display: grid;
    gap: 0.45rem;
    padding: 9%;
    text-decoration: none;
    color: var(--sh-on-dark);
    background: var(--sh-seg-ton);
    transition: transform 420ms var(--sh-ease-out), filter 420ms var(--sh-ease),
        background-color 420ms var(--sh-ease);
}

.sh-wheel__seg--tl,
.sh-wheel__seg--br {
    --sh-seg-ton: #191b15;
}

.sh-wheel__seg--tr,
.sh-wheel__seg--bl {
    --sh-seg-ton: #3a3d32;
}

.sh-wheel__seg--tl {
    top: 0;
    left: 0;
    align-content: end;
    justify-items: end;
    text-align: right;
}

.sh-wheel__seg--tr {
    top: 0;
    right: 0;
    align-content: end;
    justify-items: start;
    text-align: left;
}

.sh-wheel__seg--bl {
    bottom: 0;
    left: 0;
    align-content: start;
    justify-items: end;
    text-align: right;
}

.sh-wheel__seg--br {
    bottom: 0;
    right: 0;
    align-content: start;
    justify-items: start;
    text-align: left;
}

/* Das Foto liegt bereit und ist unsichtbar. Erst beim Überfahren oder bei
   Tastaturfokus wird es eingeblendet, und nur in diesem einen Viertel. */
.sh-wheel__seg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    filter: saturate(0.9) brightness(0.82);
    transform: scale(1.03);
    transition: opacity 420ms var(--sh-ease), transform 700ms var(--sh-ease-out);
}

/* Unter der Schrift dunkelt ein Verlauf ab, sobald das Foto sichtbar ist. */
.sh-wheel__seg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 420ms var(--sh-ease);
    background: radial-gradient(135% 135% at var(--sh-wheel-origin, 100% 100%),
        rgba(10, 11, 6, 0.9), rgba(10, 11, 6, 0.35));
}

.sh-wheel__seg--tl { --sh-wheel-origin: 100% 100%; }
.sh-wheel__seg--tr { --sh-wheel-origin: 0 100%; }
.sh-wheel__seg--bl { --sh-wheel-origin: 100% 0; }
.sh-wheel__seg--br { --sh-wheel-origin: 0 0; }

.sh-wheel__label,
.sh-wheel__note {
    position: relative;
    z-index: 2;
}

.sh-wheel__label {
    font-size: clamp(1rem, 0.86rem + 0.5vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    max-width: 14ch;
    color: rgba(243, 240, 233, 0.86);
    transition: color 300ms var(--sh-ease);
}

.sh-wheel__note {
    color: rgba(243, 240, 233, 0.6);
    font-size: 0.86rem;
    line-height: 1.42;
    margin: 0;
    max-width: 22ch;
    transition: color 300ms var(--sh-ease);
}

/* -------------------------------------------------------------------------
   Angefahrenes Viertel

   Nur dieses eine zeigt sein Bild. Die anderen drei bleiben in ihren
   Grautönen stehen und treten nur leicht zurück: Die Geometrie muss
   erhalten bleiben, sonst zerfällt das Rad.
   ---------------------------------------------------------------------- */

.sh-wheel__seg:hover img,
.sh-wheel__seg:focus-visible img,
.sh-wheel__seg.is-aktiv img {
    opacity: 1;
    transform: scale(1);
}

.sh-wheel__seg:hover::after,
.sh-wheel__seg:focus-visible::after,
.sh-wheel__seg.is-aktiv::after {
    opacity: 1;
}

.sh-wheel__seg:hover .sh-wheel__label,
.sh-wheel__seg:focus-visible .sh-wheel__label,
.sh-wheel__seg.is-aktiv .sh-wheel__label {
    color: #fff;
}

.sh-wheel__seg:hover .sh-wheel__note,
.sh-wheel__seg:focus-visible .sh-wheel__note,
.sh-wheel__seg.is-aktiv .sh-wheel__note {
    color: rgba(255, 255, 255, 0.82);
}

.sh-wheel__disc:hover .sh-wheel__seg:not(:hover),
.sh-wheel__disc:focus-within .sh-wheel__seg:not(:focus-visible):not(:hover) {
    filter: brightness(0.78);
}

.sh-wheel__seg:focus-visible {
    outline: 2px solid var(--sh-lime);
    outline-offset: -4px;
    z-index: 3;
}

/* Ohne Zeigegerät gibt es kein Überfahren. Dort zeigen alle vier Viertel
   ihr Bild, damit kein Inhalt dauerhaft verborgen bleibt. */
@media (hover: none) {
    .sh-wheel__seg img {
        opacity: 1;
        transform: scale(1);
    }

    .sh-wheel__seg::after {
        opacity: 1;
    }

    .sh-wheel__seg .sh-wheel__label {
        color: #fff;
    }

    .sh-wheel__seg .sh-wheel__note {
        color: rgba(255, 255, 255, 0.82);
    }
}

/* Schmale Geräte: aus dem Rad wird eine Liste. Ein Kreis auf 390 px wäre
   eine Briefmarke. */
@media (max-width: 1100px) {
    .sh-wheel__note {
        display: none;
    }
}

@media (max-width: 900px) {
    .sh-wheel {
        aspect-ratio: auto;
        border-radius: 4px;
        padding: 0;
        background: none;
        box-shadow: none;
        width: 100%;
    }

    .sh-wheel__disc {
        position: static;
        inset: auto;
        display: grid;
        gap: 0.85rem;
        height: auto;
        border-radius: 0;
        overflow: visible;
        background: none;
    }

    .sh-wheel__ring {
        display: none;
    }

    .sh-wheel__note {
        display: block;
        max-width: 42ch;
    }

    .sh-wheel__seg {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 13rem;
        border-radius: 4px;
        padding: 1.25rem;
        text-align: left;
        align-content: end;
        justify-items: start;
    }

    .sh-wheel__seg img,
    .sh-wheel__seg::after {
        opacity: 1;
        transform: none;
    }

    .sh-wheel__seg .sh-wheel__label {
        color: #fff;
    }

    .sh-wheel__seg .sh-wheel__note {
        color: rgba(255, 255, 255, 0.82);
    }

    .sh-wheel__disc:hover .sh-wheel__seg:not(:hover) {
        filter: none;
    }
}

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

/* =========================================================================
   Raeumlichkeiten: drei Bereiche als Bildfolge

   Kein Wechsel aus Bild links / Text rechts, wie ihn jedes Template kann,
   sondern eine Reihe: drei Aufnahmen nebeneinander, die Halle breiter als
   die beiden anderen, darunter eine Haarlinie und die Beschriftung. Das
   liest sich wie ein Blatt aus einer Mappe, nicht wie ein Baukasten.
   ========================================================================= */

.sh-areas {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    margin-top: clamp(2.75rem, 5vw, 4rem);
}

.sh-area {
    display: grid;
    align-content: start;
}

.sh-area__media {
    overflow: clip;
    position: relative;
}

.sh-area__media img {
    display: block;
    width: 100%;
    height: clamp(16rem, 27vw, 24rem);
    object-fit: cover;
    transition: transform 900ms var(--sh-ease-out);
}

.sh-area:hover .sh-area__media img {
    transform: scale(1.03);
}

/* Die Haarlinie traegt links die Nummer, rechts die Kapazitaet - wie die
   Massangabe unter einer Zeichnung. */
.sh-area__scale {
    align-items: baseline;
    border-top: 1px solid rgba(22, 23, 15, 0.22);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.1rem;
    padding-top: 0.7rem;
}

.sh-area__idx,
.sh-area__cap {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0;
    text-transform: uppercase;
}

.sh-area__idx {
    color: var(--sh-rust);
}

.sh-area__cap {
    color: rgba(22, 23, 15, 0.6);
    text-align: right;
}

.sh-area h3 {
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.65rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0.85rem 0 0;
}

.sh-area p:not(.sh-area__idx):not(.sh-area__cap) {
    color: rgba(22, 23, 15, 0.78);
    font-size: 0.98rem;
    line-height: 1.62;
    margin: 0.6rem 0 0;
    max-width: 38ch;
}

@media (prefers-reduced-motion: reduce) {
    .sh-area__media img,
    .sh-area:hover .sh-area__media img {
        transform: none;
        transition: none;
    }
}

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

    .sh-area:first-child {
        grid-column: 1 / -1;
    }

    .sh-area:first-child .sh-area__media img {
        height: clamp(16rem, 34vw, 26rem);
    }
}

@media (max-width: 680px) {
    .sh-areas {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 7vw, 2.75rem);
    }

    .sh-area:first-child {
        grid-column: auto;
    }

    .sh-area .sh-area__media img,
    .sh-area:first-child .sh-area__media img {
        height: clamp(13rem, 56vw, 18rem);
    }
}

/* =========================================================================
   Termine: das Motorrad schaut in die Karte

   Beim Überfahren einer Veranstaltungskarte fährt die freigestellte
   R 24 ein Stück von rechts herein und wieder zurück. Nur mit Zeigegerät,
   nur auf breiten Bildschirmen – auf dem Telefon bleibt die Karte einfach
   eine Karte.
   ========================================================================= */

/* Ohne Zeigegeraet faehrt niemand vor: Das Motorrad bleibt aussen. */
.sh-event-card__ride {
    display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .sh-event-card__ride {
        display: block;
        position: absolute;
        right: 0;
        bottom: 6%;
        width: 78%;
        aspect-ratio: 900 / 425;
        background: url("../images/silberhorn-bmw-r24-freigestellt.webp") right bottom / contain no-repeat;
        transform: translateX(100%);
        transition: transform 620ms var(--sh-ease-out);
        pointer-events: none;
        z-index: 2;
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
    }

    .sh-event-card:hover .sh-event-card__ride,
    .sh-event-card:focus-within .sh-event-card__ride {
        transform: translateX(64%);
    }

    /* -----------------------------------------------------------------
       Der Lichtkegel

       Er ist kein heller Fleck unter dem Mauszeiger, sondern ein Keil,
       der am Scheinwerfer der R 24 sitzt. Der Drehpunkt liegt exakt auf
       der Scheinwerferachse (19,4 % / 17,6 % der freigestellten Datei),
       der Keil selbst wird per clip-path beschnitten und nur gedreht.
       Die Karte gibt den Winkel als --sh-beam vor.
       ----------------------------------------------------------------- */
    .sh-event-card__beam {
        position: absolute;
        right: 80.6%;
        top: -57.4%;
        width: 132%;
        height: 150%;
        transform-origin: 100% 50%;
        transform: rotate(var(--sh-beam, 0deg));
        transition: opacity 420ms var(--sh-ease);
        clip-path: polygon(100% 46%, 100% 54%, 0 100%, 0 0);
        background: linear-gradient(
            to left,
            rgba(255, 241, 205, 0.58),
            rgba(255, 238, 196, 0.19) 24%,
            rgba(255, 236, 190, 0.05) 52%,
            rgba(255, 236, 190, 0) 76%
        );
        filter: blur(11px);
        opacity: 0;
        pointer-events: none;
    }

    .sh-event-card:hover .sh-event-card__beam,
    .sh-event-card:focus-within .sh-event-card__beam {
        opacity: 1;
        transition-delay: 260ms;
    }

    /* Ein wenig Streulicht direkt am Glas, damit der Kegel nicht aus dem
       Nichts beginnt. */
    .sh-event-card__ride::after {
        content: "";
        position: absolute;
        left: 19.4%;
        top: 17.6%;
        width: 9%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 244, 214, 0.9), rgba(255, 240, 200, 0) 70%);
        opacity: 0;
        transition: opacity 420ms var(--sh-ease);
        z-index: 3;
    }

    .sh-event-card:hover .sh-event-card__ride::after,
    .sh-event-card:focus-within .sh-event-card__ride::after {
        opacity: 1;
        transition-delay: 260ms;
    }

    /* Ausverkauft oder abgesagt: dann faehrt niemand vor. */
    .sh-event-card--ausverkauft .sh-event-card__ride,
    .sh-event-card--abgesagt .sh-event-card__ride {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-event-card__ride {
        display: none;
    }
}


/* =========================================================================
   Abschluss für den Besucher-Strang

   Museum, Veranstaltungen und Blog enden nicht mit der Eventanfrage.
   Wer einen Blogartikel über den Barockengel liest, plant keinen
   Firmenabend – er will wissen, wann geöffnet ist.
   ========================================================================= */

.sh-visit-out__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.sh-visit-out__address {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
}

.sh-visit-out__note {
    line-height: 1.65;
    margin: 0.9rem 0 0;
    max-width: 34ch;
    opacity: 0.78;
}

.sh-visit-out .sh-actions {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

@media (max-width: 900px) {
    .sh-visit-out__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   Die Sammlung: eine Bildreihe, die beim Scrollen seitwaerts wandert

   Anders als die Impressionen auf der Startseite klebt hier nichts. Der
   Abschnitt laeuft im normalen Seitenfluss vorbei, waehrend die Reihe
   selbst ein Stueck nach links faehrt - so wie eine Vitrinenfront am
   Fenster vorbeizieht, wenn man daran entlanggeht.
   ========================================================================= */

.sh-rail {
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    overflow: clip;
}

.sh-rail__track {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-inline-start: max(1.25rem, calc((100% - var(--sh-shell)) / 2));
    padding-inline-end: 1.25rem;
    transform: translate3d(var(--sh-rail-x, 0), 0, 0);
    width: max-content;
    will-change: transform;
}

.sh-rail__item {
    flex: 0 0 auto;
    margin: 0;
    width: var(--sh-rail-w, 28vw);
}

.sh-rail__item img {
    display: block;
    width: 100%;
    height: var(--sh-rail-h, 25rem);
    object-fit: cover;
}

.sh-rail__item figcaption {
    color: rgba(22, 23, 15, 0.62);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    margin-top: 0.7rem;
}

.sh-rail__item figcaption strong {
    color: var(--sh-ink);
    display: block;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* Die Reihe braucht Rhythmus, sonst ist sie ein Streifen aus gleichen
   Kacheln. Breite und Hoehe wechseln, die Bildmitte bleibt auf einer
   Linie. */
.sh-rail__item:nth-child(1) { --sh-rail-w: 33vw; --sh-rail-h: 26rem; }
.sh-rail__item:nth-child(2) { --sh-rail-w: 20vw; --sh-rail-h: 19rem; }
.sh-rail__item:nth-child(3) { --sh-rail-w: 27vw; --sh-rail-h: 26rem; }
.sh-rail__item:nth-child(4) { --sh-rail-w: 21vw; --sh-rail-h: 19rem; }
.sh-rail__item:nth-child(5) { --sh-rail-w: 30vw; --sh-rail-h: 26rem; }
.sh-rail__item:nth-child(6) { --sh-rail-w: 22vw; --sh-rail-h: 19rem; }
.sh-rail__item:nth-child(7) { --sh-rail-w: 27vw; --sh-rail-h: 26rem; }
.sh-rail__item:nth-child(8) { --sh-rail-w: 21vw; --sh-rail-h: 19rem; }

/* Zwei Spalten Text unter der Ueberschrift, damit die Reihe die Buehne
   bekommt und nicht mit einem Absatzblock konkurriert. */
.sh-collection-lead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    max-width: 62rem;
}

.sh-collection-lead h3 {
    color: var(--sh-rust);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.sh-collection-lead p {
    color: rgba(22, 23, 15, 0.8);
    line-height: 1.62;
    margin: 0;
}

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

    .sh-rail {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .sh-rail__track {
        transform: none;
        gap: 1rem;
        padding-inline: 1.25rem;
    }

    .sh-rail__item {
        scroll-snap-align: start;
        width: 78vw;
    }

    .sh-rail__item:nth-child(n) {
        --sh-rail-w: 78vw;
        --sh-rail-h: 15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-rail {
        overflow-x: auto;
    }

    .sh-rail__track {
        transform: none;
    }
}

/* Die Liste beginnt direkt unter der kleinen Marke. */
.sh-band--tight .sh-plate + div {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* =========================================================================
   Anfahrt: ein eigener Lageplan statt einer fremden Kachel

   Die Karte lädt erst nach Klick. Bis dahin stand dort eine graue Fläche
   mit Knopf. Jetzt steht dort ein schlichter Lageplan in unseren Farben:
   die Durchgangsstraße, die Querstraße, die Halle und die Nadel. Er
   erklärt die Lage schon vor dem Laden und stammt aus keiner fremden
   Quelle.
   ========================================================================= */

.sh-embed--map {
    aspect-ratio: 16 / 10;
    background: #14150f;
}

/* Über dem Lageplan liegt kein zusätzlicher Schleier: Er ist bereits
   dunkel und soll lesbar bleiben. */
.sh-embed--map::after {
    background: radial-gradient(42% 46% at 50% 50%, rgba(20, 21, 15, 0.74), rgba(20, 21, 15, 0) 76%);
}

.sh-embed--map:hover::after {
    opacity: 0.55;
}

.sh-plan {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: clip;
    background:
        repeating-linear-gradient(90deg, rgba(243, 240, 233, 0.05) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(0deg, rgba(243, 240, 233, 0.05) 0 1px, transparent 1px 68px),
        linear-gradient(160deg, #1b1d14, #101109);
}

.sh-plan__road {
    position: absolute;
    background: rgba(243, 240, 233, 0.14);
}

/* Die Durchgangsstraße läuft schräg durchs Bild. */
.sh-plan__road--haupt {
    left: -20%;
    right: -20%;
    top: 30%;
    height: 14px;
    transform: rotate(-9deg);
    box-shadow: 0 0 0 1px rgba(243, 240, 233, 0.06);
}

.sh-plan__road--quer {
    top: -10%;
    bottom: -10%;
    left: 72%;
    width: 9px;
    transform: rotate(6deg);
}

.sh-plan__block--halle {
    position: absolute;
    left: 11%;
    top: 40%;
    width: 23%;
    height: 21%;
    background: rgba(168, 74, 47, 0.24);
    border: 1px solid rgba(168, 74, 47, 0.55);
}

/* Die Nadel: ein Kreis mit Spitze, aus zwei Formen gebaut. */
.sh-plan__pin {
    position: absolute;
    left: 19%;
    top: 45%;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--sh-rust);
    box-shadow: 0 0 0 5px rgba(168, 74, 47, 0.2);
}

.sh-plan__label {
    position: absolute;
    left: 6%;
    bottom: 7%;
    margin: 0;
    color: rgba(243, 240, 233, 0.82);
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Ist die Karte da, verschwindet der Plan. */
.sh-embed.is-ready .sh-plan {
    opacity: 0;
    transition: opacity 520ms var(--sh-ease);
    pointer-events: none;
}

@media (max-width: 820px) {
    .sh-plan__block--halle {
        top: 16%;
        left: 8%;
        width: 30%;
        height: 20%;
    }

    .sh-plan__pin {
        top: 21%;
        left: 18%;
    }

    .sh-plan__road--haupt {
        top: 12%;
    }
}

@media (max-width: 620px) {
    .sh-embed--map {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================================================
   Kontaktseite: zwei Zuständigkeiten, eine Linie

   Die beiden Blöcke standen unterschiedlich hoch, weil der eine eine
   Anschrift trägt und der andere einen Satz. Jetzt sitzen die Telefonfelder
   auf einer gemeinsamen Grundlinie, und eine Haarlinie trennt die Spalten,
   statt sie im Leerraum auseinanderfallen zu lassen.
   ========================================================================= */

.sh-contact-grid {
    align-items: stretch;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.sh-contact-card {
    border-top: 1px solid rgba(22, 23, 15, 0.2);
    display: grid;
    align-content: start;
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sh-contact-card > p {
    max-width: 34ch;
}

/* Das Telefonfeld schließt den Block unten ab, in beiden Spalten gleich. */
.sh-contact-card .sh-phone {
    align-self: end;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 46rem) {
    .sh-contact-card {
        grid-template-rows: auto auto auto 1fr;
    }

    .sh-contact-card .sh-phone {
        grid-row: -1;
    }
}

/* =========================================================================
   Eventlocation: der Anschluss an den Seitenkopf

   Nach dem Kopfbild stand eine große helle Fläche mit einem Absatz darin,
   danach ein zweites Band mit denselben Zahlen noch einmal als Überschrift.
   Bis „02 Räumlichkeiten" waren das zwei volle Bildhöhen.

   Jetzt trägt ein Band beides: links der Vorspann, rechts die Kennzahlen.
   Es schiebt sich ein Stück über die Kante des Kopfbilds, damit der
   Übergang nicht als leerer Streifen gelesen wird.
   ========================================================================= */

/* Das Band ist das erste Kind des Inhalts. Dafür setzen sowohl das
   Basisblatt als auch die globalen Stile von WordPress den oberen Abstand
   auf null, beide mit zwei Klassen Gewicht. Hier deshalb mit drei. */
.entry-content > .sh-band.sh-band--anschluss,
main > .sh-band.sh-band--anschluss,
.sh-page-body > .sh-band.sh-band--anschluss {
    margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));
    box-shadow: 0 -18px 40px rgba(14, 15, 10, 0.28);
    position: relative;
    z-index: 2;
    width: min(100% - 2.5rem, 96rem);
    margin-inline: auto;
    border-radius: 2px;
}

.sh-lead-facts {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
}

/* Der Aufruf gehoert in die vorhandene Box, nicht in eine zweite Karte
   darunter. */
.sh-lead-facts__action {
    margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
}

.sh-lead-facts__text .sh-lead {
    font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.35rem);
    line-height: 1.55;
    margin: 0.9rem 0 0;
    max-width: 34ch;
}

/* Vier Kennzahlen nebeneinander wären hier zu schmal: zwei mal zwei. */
.sh-lead-facts .sh-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 900px) {
    .sh-lead-facts {
        grid-template-columns: 1fr;
    }

    .entry-content > .sh-band.sh-band--anschluss,
    main > .sh-band.sh-band--anschluss,
    .sh-page-body > .sh-band.sh-band--anschluss {
        width: 100%;
        margin-top: 0;
        box-shadow: none;
    }
}

/* Die Eventbilder gehen ein paar Prozent zurück. Das Motorrad und sein
   Lichtkegel stehen dadurch klarer im Bild, ohne dass die Karten dunkel
   wirken. Beim Überfahren einen Schritt weiter, weil dann das Licht
   dazukommt.

   Nicht über einen Filter am Bild: `filter: brightness()` zwingt WebKit,
   für jedes Bild eine eigene Zwischenfläche anzulegen. Bei sechs
   Veranstaltungskarten mit großen Aufnahmen bringt das ab 1024 Pixeln
   Fensterbreite den Renderprozess zum Absturz – die Seite verschwand in
   Safari beim Scrollen. Reproduzierbar eingegrenzt: Ohne genau diese Regel
   überlebt die Seite, mit ihr nicht.

   Dieselbe Wirkung erzeugt eine dünne dunkle Lage über dem Bild. Sie
   kostet keine Zwischenfläche und liegt unter Stempel, Motorrad und
   Lichtkegel. */
.sh-event-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(14, 15, 10, 0.07);
    pointer-events: none;
    transition: background-color 420ms var(--sh-ease);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .sh-event-card:hover .sh-event-card__media::after,
    .sh-event-card:focus-within .sh-event-card__media::after {
        background: rgba(14, 15, 10, 0.14);
    }
}

/* =========================================================================
   Museum: der Auftakt mit dem Wagen

   Der erste helle Bereich war ein Absatz auf halber Seitenbreite, rechts
   daneben nichts. Jetzt steht dort ein Fahrzeug aus der Sammlung, und der
   Text bekommt den Aufruf, der bisher erst weit unten kam.

   Der BMW 501/502 ist die einzige Aufnahme im Bestand, die ein Automobil
   sauber von der Seite zeigt, mit beiden Rädern frei und ohne Verdeckung.
   Genau daran war die Radrotation in Iteration 3 gescheitert.
   ========================================================================= */

.sh-auftakt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    /* Der Wagen steht auf der Bandkante, nicht in der Mitte der Zeile. */
    align-items: end;
}

.sh-auftakt__text {
    align-self: center;
}

.sh-auftakt__text .sh-lead {
    margin: 0.9rem 0 0;
    max-width: 40ch;
}

.sh-auftakt__text .sh-actions {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* -------------------------------------------------------------------------
   Der Wagen auf der Bandkante

   Seit Iteration 7 steht dort der BMW 2002 turbo der Sammlung - das Modell
   ist durch die Museumstafel im Bild belegt. Er ersetzt den Barockengel:
   dessen Radläufe schnitten so tief in die Reifen, dass von der Drehung
   wenig zu sehen war. Beim 2002 turbo liegen beide Räder frei, und die
   schwarze Stahlfelge mit ihren Rippen zeigt die Drehung deutlich.

   Der Wagen zeigt nach links, also in die Seite hinein, nicht aus ihr
   heraus. Der Bildausschnitt endet exakt an der Aufstandslinie
   der Reifen, und das Bild wird um den unteren Bandabstand nach unten
   gezogen. Dadurch stehen die Reifen auf der Kante zum nächsten Abschnitt –
   diese Kante ist die Fahrbahn.
   ---------------------------------------------------------------------- */
.sh-wagen {
    position: relative;
    width: 100%;
    max-width: 34rem;
    margin-left: auto;
    margin-bottom: calc(-1 * var(--sh-pad-sm));
    /* Kein Schlagschatten: Der Wagen steht auf einer Kante, nicht über der
       Fläche. Ein weicher Schatten rundherum hätte ihn schweben lassen. */
}

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

/* -------------------------------------------------------------------------
   Die Räder

   Es dreht sich die vollständige Rad- und Reifeneinheit, nicht nur die
   Nabe. Dafür liegen zwei Ebenen übereinander:

   1. Die Scheibe trägt das ganze Rad als geschlossenen Kreis. Was im Foto
      hinter dem Radlauf verschwindet – rund vier Prozent der Fläche –
      wurde aus der gegenüberliegenden Seite ergänzt; ein Rad ist um seine
      Achse symmetrisch, deshalb stimmt das Ergebnis.
   2. Der Rahmen darum trägt als Maske die tatsächlich sichtbare
      Radöffnung. Er dreht sich nicht. Dadurch dreht sich das Rad im
      Radkasten, und kein Karosserieteil wandert mit.
   ---------------------------------------------------------------------- */
.sh-wagen__rad {
    position: absolute;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sh-wagen__rad--vorn {
    left: 15.332%;
    top: 76.554%;
    width: 16.711%;
    -webkit-mask-image: url("../images/silberhorn-bmw-2002-rad-vorn-maske.png");
    mask-image: url("../images/silberhorn-bmw-2002-rad-vorn-maske.png");
}

.sh-wagen__rad--hinten {
    left: 77.194%;
    top: 77.426%;
    width: 16.405%;
    -webkit-mask-image: url("../images/silberhorn-bmw-2002-rad-hinten-maske.png");
    mask-image: url("../images/silberhorn-bmw-2002-rad-hinten-maske.png");
}

.sh-wagen__scheibe {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(var(--sh-rad-winkel, 0deg));
    will-change: transform;
}

.sh-wagen__rad--vorn .sh-wagen__scheibe {
    background-image: url("../images/silberhorn-bmw-2002-rad-vorn-scheibe.webp");
}

.sh-wagen__rad--hinten .sh-wagen__scheibe {
    background-image: url("../images/silberhorn-bmw-2002-rad-hinten-scheibe.webp");
}

/* Steht die Seite still, atmet der Wagen kaum merklich. Kein Wippen, eher
   das, was ein Fahrzeug im Leerlauf macht. Die Räder machen es nicht mit –
   genau das tut eine Federung auch nicht. */
.sh-wagen__koerper {
    animation: sh-leerlauf 4200ms ease-in-out infinite;
}

@keyframes sh-leerlauf {
    0%   { transform: translateY(0) rotate(0deg); }
    35%  { transform: translateY(-0.9px) rotate(0.045deg); }
    70%  { transform: translateY(0.5px) rotate(-0.03deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@media (max-width: 900px) {
    .sh-auftakt {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 3rem);
    }

    .sh-wagen {
        max-width: 100%;
        margin-inline: auto;
    }
}

/* Auf Touchgeräten steht der Wagen still, wenn gerade gescrollt wird -
   dasselbe Prinzip wie beim Motorrad auf der Startseite. Die Räder drehen
   sich weiter, denn genau die sind der Grund für den Wagen; nur das
   Leerlaufatmen der Karosserie setzt aus. */
@media (hover: none), (max-width: 820px) {
    .sh-scrollt .sh-wagen__koerper {
        animation-play-state: paused;
    }
}

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

    .sh-wagen__scheibe {
        transform: none;
    }
}

/* Der Aufruf springt zum Besuchsbereich. Unter der festen Kopfzeile
   braucht das Ziel etwas Vorlauf. */
#besuch {
    scroll-margin-top: calc(var(--sh-header-h) + 1rem);
}

/* Die Fehlerseite kam noch aus dem Agenturtemplate: Karte, du-Ansprache,
   fehlender Umlaut. Jetzt trägt sie dieselbe Schrift wie der Rest und
   bietet die sechs Ziele an, nach denen Besucher tatsächlich suchen. */
.sh-404-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 0;
    list-style: none;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
    padding: 0;
    max-width: 58rem;
}

.sh-404-liste li {
    border-bottom: 1px solid rgba(22, 23, 15, 0.16);
}

.sh-404-liste a {
    color: var(--sh-ink);
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    padding: 0.9rem 0;
    text-decoration: none;
}

.sh-404-liste a:hover,
.sh-404-liste a:focus-visible {
    color: var(--sh-rust);
}

.sh-404-liste + .sh-actions {
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Der Wagen ragt bewusst über die Schale hinaus. Ohne Beschnitt am Band
   erzeugt das auf mittleren Breiten eine waagerechte Scrollleiste. */
.sh-auftakt-band {
    overflow: clip;
}

/* Suche und die allgemeine Übersicht trugen noch die Gestaltung des
   Agenturtemplates: Karten mit Rundung, dreispaltig, andere Typografie.
   Sie verwenden jetzt dieselbe Kartensprache wie der Blog. */
.sh-suche {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: 32rem;
}

.sh-suche .wp-block-search__input {
    background: rgba(243, 240, 233, 0.08);
    border: 1px solid rgba(243, 240, 233, 0.28);
    border-radius: 2px;
    color: var(--sh-on-dark);
    padding: 0.85rem 1rem;
}

.sh-suche .wp-block-search__input::placeholder {
    color: rgba(243, 240, 233, 0.55);
}

.sh-suche .wp-block-search__button {
    background: var(--sh-rust);
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-weight: 700;
    margin-left: 0.5rem;
    padding: 0.85rem 1.4rem;
}

.sh-suche .wp-block-search__button:hover {
    background: var(--sh-rust-bright);
}

.sh-pagination {
    border-top: 1px solid rgba(22, 23, 15, 0.16);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.25rem;
}

.sh-pagination a {
    color: var(--sh-ink);
    font-weight: 700;
    text-decoration: none;
}

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