/* =========================================================================
   Silberhorn: Öffnungszeiten, Kontakt und Karte

   Dieses Blatt liegt hinter 70/71/72 und trägt ausschließlich die
   Seitenspezifika dieser drei Bereiche. Es existiert, damit an den
   gewachsenen Basisblättern nicht mehrere Hände gleichzeitig arbeiten.
   ========================================================================= */

/* =========================================================================
   Flacherer Seitenkopf auf der Öffnungszeitenseite

   Die Seite hat eine klare Hauptsache: der nächste Öffnungstag. Der
   Standardkopf (.sh-pagehead) verbraucht mit clamp(8rem, 15vw, 12rem)
   oben rund die Hälfte eines 900er Bildschirms, bevor überhaupt etwas
   Nutzbares beginnt. Die Werte hier entsprechen denen von
   .sh-pagehead--plain.sh-pagehead--compact auf der Terminübersicht; die
   Klasse selbst lässt sich nicht setzen, weil der Kopf aus
   templates/page.html kommt und dort für alle Seiten gilt.
   ========================================================================= */

body.page-id-80 .sh-pagehead {
    padding-block: clamp(7rem, 11vw, 8.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

/* Der Fließtext unter der Überschrift darf im flachen Kopf nicht über die
   halbe Breite laufen, sonst kippt das Verhältnis von Titel zu Zeile. */
body.page-id-80 .sh-pagehead p {
    max-width: 40rem;
}

/* =========================================================================
   Kontaktseite: Videokopf statt Seitenkopf

   Die Kontaktseite bringt ihren Kopfbereich im Seiteninhalt mit, als
   .sh-kontakt-kopf mit Film, und trägt dort auch die h1.

   Der Kopf aus templates/page.html stünde zusätzlich darüber. Ein erster
   Versuch hat ihn hier per display:none ausgeblendet; das half nur der
   Darstellung, im Quelltext blieb die zweite h1 stehen. Entfernt wird er
   deshalb nicht mehr im Stylesheet, sondern in
   templates/page-kontakt.html: Block-Vorlagen kennen keine Bedingungen,
   also zieht WordPress für /kontakt/ eine eigene Vorlage ohne
   .sh-pagehead. Hier steht dazu bewusst keine Regel mehr, damit es für
   dieselbe Sache nicht zwei Mechanismen gibt.
   ========================================================================= */

/* Der Film ist Dekoration. Die Aussage trägt der Text darüber, deshalb
   liegt er ganz hinten und nimmt keine Zeigereingaben an. */
.sh-kontakt-kopf {
    position: relative;
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: clip;
    background: var(--sh-night);
    color: var(--sh-on-dark);
    /* Deutlich flacher als der Hero der Startseite (dort 100svh). Die
       Höhe ist so gewählt, dass die Formularfläche auf 1440 x 900 noch
       angeschnitten in den Blick fällt. */
    min-height: clamp(14rem, 22vw, 20rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.sh-kontakt-kopf__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    /* Der Ausschnitt ist ein breites Band aus einem 16:9-Film. In der
       Mitte liegen Doppelniere und Scheinwerfer, also bleibt es bei der
       Mitte. */
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
}

/* Die Karosserie im Film ist hell, an einer Stelle der Kamerafahrt blitzt
   Chrom fast weiß auf. Ohne Abdunklung säße weiße Schrift dort auf
   Cremeweiß.

   Die drei Werte sind nicht geschätzt, sondern gerechnet: über alle Bilder
   des Films wurde der ungünstigste Bildpunkt hinter Titel und Zeile
   gesucht und der Kontrast gegen #f3f0e9 bestimmt. Der Wendepunkt liegt
   bei 22 Prozent, also oberhalb des Textes; dadurch bleibt der hellste
   Teil des Films sichtbar, und der Text sitzt trotzdem auf sicherem Grund.

   Gemessen bei 1440 x 900: Titel 4,23:1 (nötig 3,0:1 für große Schrift),
   Zeile 6,99:1 (nötig 4,5:1). */
.sh-kontakt-kopf::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(22, 23, 15, 0.66) 0%, rgba(22, 23, 15, 0.48) 22%, rgba(22, 23, 15, 0.9) 100%);
    pointer-events: none;
}

/* Auf schmalen Geräten steht der Titel im Film über der hellen Haube,
   nicht wie am Desktop über dem dunklen Kühlergrill. Dort trägt der
   Schleier deshalb mehr. */
@media (max-width: 820px) {
    .sh-kontakt-kopf::after {
        background: linear-gradient(180deg, rgba(22, 23, 15, 0.72) 0%, rgba(22, 23, 15, 0.64) 35%, rgba(22, 23, 15, 0.9) 100%);
    }
}

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

/* Gleiche Schriftgröße wie im bisherigen Seitenkopf: Der Wechsel soll
   den Film bringen, nicht eine neue Titelgröße. */
.sh-kontakt-kopf__titel {
    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-kontakt-kopf__zeile {
    color: var(--sh-on-dark-muted);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    margin: 0.9rem 0 0;
    max-width: 40rem;
}

/* Wer Bewegung abbestellt hat, bekommt das Standbild. Der Film wird nicht
   nur angehalten, sondern gar nicht erst dargestellt; das Poster steht
   dann als Hintergrund an derselben Stelle. */
@media (prefers-reduced-motion: reduce) {
    .sh-kontakt-kopf__video {
        display: none;
    }

    .sh-kontakt-kopf {
        background-image: url("/wp-content/uploads/2026/08/silberhorn-kontakt-poster.jpg");
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
}

/* Die Kopfzeile steht fest über der Seite. Ein Sprung auf das Formular
   landet sonst hinter ihr. */
body.page-id-115 #anfrage {
    scroll-margin-top: calc(var(--sh-header-h) + 1rem);
}

/* =========================================================================
   Anfahrt und Karte

   Die Karte lädt jetzt direkt, ohne eigene Sperre und ohne vorgelagerten
   Lageplan. Die Einwilligung steuert später CCM19; eine zweite,
   selbstgebaute Klickhürde davor wäre für Besucherinnen und Besucher nur
   ein zusätzlicher Schritt.

   Dadurch fällt die gesamte .sh-embed-Behandlung für die Karte weg,
   einschließlich des dunklen Verlaufs aus der Mitte (.sh-embed::after).
   Es gibt keine Ersatzanimation: Die Karte steht einfach da.
   ========================================================================= */

.sh-anfahrt {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* Der Absatz sitzt schon im Raster, sein eigener Abstand nach oben würde
   sich mit dem Rasterabstand addieren. */
.sh-anfahrt .sh-lead,
.sh-anfahrt .sh-actions {
    margin-top: 0;
}

@media (min-width: 62rem) {
    .sh-anfahrt {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

/* Die Karte trägt sich selbst: fester Rahmen, das Iframe füllt ihn aus.
   Ein Iframe im Fluss würde seine eigene Höhe zum Seitenverhältnis
   addieren und den Rahmen verlängern. */
.sh-map {
    position: relative;
    aspect-ratio: 21 / 9;
    margin-top: clamp(2rem, 4vw, 3rem);
    border-radius: 4px;
    overflow: clip;
    background: var(--sh-beige);
}

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

/* Auf schmalen Geräten braucht die Karte Höhe statt Breite, sonst bleibt
   vom Umland nichts übrig. */
@media (max-width: 820px) {
    .sh-map {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 520px) {
    .sh-map {
        aspect-ratio: 1 / 1;
    }
}

/* =========================================================================
   Öffnungstage: der Hinweis steht unter den Terminen, nicht davor

   Die Angaben zu Tageskasse und Voranmeldung gehören zur Seite, aber
   nicht vor das Datum. Wer hierherkommt, sucht den nächsten Öffnungstag.
   ========================================================================= */

body.page-id-80 .sh-note {
    margin-bottom: 0;
    max-width: 46rem;
}

/* =========================================================================
   Weitere Termine: die schmale Spalte trägt keine drei festen Spalten

   .sh-openday (70-silberhorn.css) setzt für jede Terminzeile
   minmax(13rem, auto) minmax(9rem, auto) 1fr. Das passt in der vollen
   Schale. Neben dem großen Datum steht die Liste aber in einer Spalte von
   rund 400 Pixeln, und die drei Mindestbreiten ergeben zusammen mehr:
   Die Zeile schob den Seiteninhalt bei 1024 Pixeln um 25 Pixel über den
   rechten Rand hinaus. Unterhalb von 1120 Pixeln stehen Datum, Uhrzeit
   und Titel deshalb untereinander, so wie auf dem Telefon auch.

   Der Fehler steckt in 70-silberhorn.css und war schon vorher da; er wird
   hier nur für diese Stelle abgefangen.
   ========================================================================= */

.sh-next-open__more {
    min-width: 0;
}

@media (max-width: 1120px) {
    .sh-next-open__more .sh-openday {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

/* =========================================================================
   Kontakt: das Formular ist die Hauptsache

   Es steht jetzt direkt hinter dem Kopfbereich. Damit die weiße
   Formularfläche auf einem 1440 x 900 Bildschirm ohne Scrollen beginnt,
   nimmt das erste Band oben etwas weniger Luft als ein reguläres
   .sh-band--tight. Nach unten bleibt der Abstand voll erhalten, sonst
   klebt das Formular am nächsten Band.

   Angesprochen wird das Band über den Nachbarn, nicht über :first-child:
   Erstes Kind ist seit dem Videokopf dieser selbst.
   ========================================================================= */

.sh-kontakt-kopf + .sh-band {
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
}