/* =========================================================================
   SILBERHORN – Editorial (Blog: Archiv, Kategorie, Einzelbeitrag;
   Veranstaltungs-Einzelseite)
   Nutzt ausschliesslich die Tokens/Klassen aus 70-silberhorn.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Blogübersicht: dieselbe Bildsprache wie die Terminübersicht

   Gemeinsam mit .sh-event-card: rechteckiges, randloses Bild, eine
   gesperrte Versalzeile in Rost darüber oder darunter, ein kräftiger
   Titel, ruhiger Hover, ein Link je Karte (am Titel, per CSS über die
   Fläche gezogen).

   Unterschied: die Veranstaltung führt mit dem Datum (Kalenderblatt auf
   dem Bild), der Beitrag führt mit der Kategorie. Sie steht als Rubrik
   über dem Bild, das Datum tritt daneben zurück. Die Karte hat keine
   weiße Fläche und keine Rundung mehr: Bild und Text liegen direkt auf
   dem Papierton des Bandes.
   ---------------------------------------------------------------------- */

.sh-post-grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.75rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
}

/* Jedes <li> von core/post-template wird selbst zum Raster, damit die
   Karte darin auf die volle Zeilenhöhe geht und die Bilder einer Reihe
   auf gleicher Höhe beginnen. */
.sh-post-grid > li {
    display: grid;
    margin-block: 0;
}

.sh-post-card {
    align-content: start;
    display: grid;
    /* Die Spur muss ausdrücklich angegeben werden. Ohne Angabe richtet sie
       sich nach dem breitesten Kind: Die Rubrikzeile aus Kategorie und
       Datum lässt sich nicht umbrechen und misst rund 380 Pixel. WebKit
       macht die Spur dann breiter als ihren Kasten, und die Karte ragt auf
       dem iPhone seitlich heraus. Chromium klemmt sie ab und zeigt den
       Fehler nicht. */
    grid-template-columns: minmax(0, 1fr);
    position: relative;
}

/* Rubrikzeile über dem Bild: links die Kategorie, rechts das Datum,
   darunter eine Haarlinie. Sie ersetzt den Rahmen der alten Karte und
   gibt dem Bild eine Oberkante, ohne es einzufassen. */
.sh-post-card__kicker {
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: space-between;
    margin: 0 0 0.9rem;
    padding-bottom: 0.55rem;
}

.sh-post-card__cat {
    color: var(--sh-rust);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* Der Kategorielink führt auf die Kategorieseite und muss deshalb über
   der aufgespannten Titelfläche liegen. */
.sh-post-card__cat a {
    color: inherit;
    position: relative;
    text-decoration: none;
    z-index: 2;
}

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

.sh-post-card__date {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
    line-height: 1.2;
    margin: 0;
    opacity: 0.55;
    text-transform: uppercase;
}

.sh-post-card__media {
    aspect-ratio: 3 / 2;
    background: var(--sh-beige);
    border-radius: 0;
    margin: 0 0 clamp(1rem, 2vw, 1.35rem);
    overflow: clip;
}

/* theme.json gibt core/post-featured-image 1,5rem Radius mit. Genau diese
   runden Ecken sollen im Blog verschwinden: die Bildflaeche ist hier
   rechteckig wie bei den Veranstaltungen. */
.sh-post-card__media img {
    border-radius: 0;
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--sh-ease-out);
    width: 100%;
}

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

/* .sh-prose h3 (70-silberhorn.css) würde die verwandten Beiträge am
   Artikelende sonst mit Fließtext-Abständen versehen. */
.sh-post-card__title,
.sh-prose .sh-post-card__title {
    font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.75rem);
    letter-spacing: -0.012em;
    line-height: 1.14;
    margin: 0 0 0.6rem;
    overflow-wrap: break-word;
    text-wrap: balance;
    word-break: normal;
}

.sh-post-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Klickfläche über die ganze Karte, Linktext bleibt der Titel. */
.sh-post-card__title a::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.sh-post-card:hover .sh-post-card__title a,
.sh-post-card__title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

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

.sh-post-card__excerpt {
    font-size: 0.98rem;
    line-height: 1.62;
    margin: 0;
    max-width: 36rem;
    opacity: 0.74;
}

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

.sh-post-pagination {
    align-items: center;
    font-weight: 700;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.sh-post-pagination a {
    color: var(--sh-rust);
    text-decoration: none;
}

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

/* Eine Kategorie mit einem einzigen Beitrag: statt einer halben leeren
   Zeile legt sich die Karte quer, Bild links, Text rechts. */
.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) > li {
    grid-column: 1 / -1;
}

.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card {
    align-content: center;
    column-gap: clamp(1.75rem, 4vw, 3.5rem);
    grid-template-areas:
        "media kicker"
        "media title"
        "media text";
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
}

.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card__kicker {
    align-self: end;
    grid-area: kicker;
}

.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card__media {
    grid-area: media;
    margin: 0;
}

.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card__title {
    grid-area: title;
}

.sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card__excerpt {
    grid-area: text;
}

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

    .sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card {
        grid-template-areas:
            "kicker"
            "media"
            "title"
            "text";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        /* Der Spaltenabstand der zweispaltigen Fassung muss mit zurück.
           WebKit rechnet ihn sonst auch in ein einspaltiges Raster ein: Die
           Spur wurde damit 28 Pixel breiter als ihr Kasten, und der
           Aufmacherbeitrag ragte auf dem iPhone seitlich heraus. Chromium
           zeigt das nicht. */
        column-gap: 0;
    }

    .sh-post-query .sh-post-grid:not(:has(> li:nth-child(2))) .sh-post-card__media {
        margin-bottom: clamp(1rem, 2vw, 1.35rem);
    }
}

/* -------------------------------------------------------------------------
   Aufmacher: der Beitrag der Rubrik „Exponat des Monats"

   Steht als eigene Sektion über dem Raster (Shortcode sh_blog_aufmacher).
   Gleiche Bausteine wie die Karte, nur eine Stufe größer: die Rubrik ist
   hier die Tafel der Sektion, das Bild nimmt die volle Schalenbreite, der
   Titel steht neben dem Teaser statt darüber.
   ---------------------------------------------------------------------- */

.sh-blog-lead {
    margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.sh-blog-lead__card {
    position: relative;
}

.sh-blog-lead__media {
    aspect-ratio: 16 / 9;
    background: var(--sh-beige);
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    overflow: clip;
}

.sh-blog-lead__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--sh-ease-out);
    width: 100%;
}

.sh-blog-lead__card:hover .sh-blog-lead__media img,
.sh-blog-lead__card:focus-within .sh-blog-lead__media img {
    transform: scale(1.03);
}

.sh-blog-lead__body {
    align-items: start;
    display: grid;
    gap: clamp(1.1rem, 3vw, 3rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.sh-blog-lead__title {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}

.sh-blog-lead__link {
    color: inherit;
    text-decoration: none;
}

.sh-blog-lead__link::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.sh-blog-lead__card:hover .sh-blog-lead__link,
.sh-blog-lead__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.sh-blog-lead__card:focus-within {
    outline: 2px solid var(--sh-rust);
    outline-offset: 6px;
}

.sh-blog-lead__aside {
    align-content: start;
    display: grid;
    gap: 1.1rem;
}

.sh-blog-lead__text {
    font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
    line-height: 1.62;
    margin: 0;
    opacity: 0.78;
}

/* Kein zweiter Link, nur der sichtbare Hinweis: die ganze Fläche hängt
   schon am Titel. Deshalb ein span mit derselben Optik wie .sh-link. */
.sh-blog-lead__cue {
    align-items: center;
    color: var(--sh-rust);
    display: inline-flex;
    font-weight: 700;
    gap: 0.5rem;
}

.sh-blog-lead__cue::after {
    content: "\2192";
    transition: transform 220ms var(--sh-ease);
}

.sh-blog-lead__card:hover .sh-blog-lead__cue::after,
.sh-blog-lead__card:focus-within .sh-blog-lead__cue::after {
    transform: translateX(5px);
}

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

/* Am Telefon traegt ein hohes Bild mehr als ein breiter Streifen. */
@media (max-width: 620px) {
    .sh-blog-lead__media {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-post-card__media img,
    .sh-blog-lead__media img,
    .sh-blog-lead__cue::after {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
   Einzelbeitrag
   ---------------------------------------------------------------------- */

.sh-pagehead__date {
    color: var(--sh-on-dark-muted);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.9rem 0 0;
}

/* .sh-pagehead ist immer eine dunkle Bildbuehne (Foto + Verlauf) – das
   rostfarbene Plate-Label ist dort zu kontrastarm. Gleiche Behandlung wie
   .sh-band--night, kommt allen Seiten mit sh-pagehead zugute. Bei
   post-terms steckt der Text in einem <a>, das per Basis-Stylesheet seine
   eigene Linkfarbe mitbringt – daher zusaetzlich explizit adressieren. */
.sh-pagehead .sh-plate,
.sh-pagehead .sh-plate a {
    color: var(--sh-lime);
    text-decoration: none;
}

/* Groesseres Titelbild fuer den Blogbeitrag – mehr Buehne, bevor der
   Fliesstext beginnt. */
body.single-post .sh-pagehead {
    padding-block: clamp(10rem, 18vw, 15rem) clamp(4rem, 8vw, 6rem);
}

/* -------------------------------------------------------------------------
   Breite Lesespalte statt linksbuendiger Schale

   Fehlerbild: .sh-content > .sh-shell > * (70-silberhorn.css) begrenzt nur
   die max-width jedes direkten Kindes der Schale, zentriert es aber nicht
   (kein margin-inline: auto). Bei 1920/1440px stand der Fliesstext dadurch
   links in der 1280px-Schale, rechts blieb eine grosse leere Flaeche –
   das war der staerkste Grund fuer den "Standard-Blog"-Eindruck. Jedes
   Kind zentriert sich hier selbst; wo ein Kind (Fliesstext-Wrapper,
   Exponatbezug, Termin-Kopf) die volle Schale ausfuellen soll, wird sein
   max-width zusaetzlich aufgehoben. */
body.single-post .sh-content > .sh-shell > *,
body.single-veranstaltung .sh-content > .sh-shell > * {
    margin-inline: auto;
}

body.single-post .sh-content > .sh-shell > .entry-content,
body.single-veranstaltung .sh-content > .sh-shell > .entry-content,
body.single-post .sh-content > .sh-shell > .sh-exhibit {
    max-width: none;
}

/* Der Fliesstext-Wrapper selbst darf jetzt die volle Schale fuellen –
   seine eigenen Kinder (Absaetze, Ueberschriften, normale Bilder) bleiben
   in Lesebreite und zentrieren sich darin. Bilder mit alignwide/alignfull
   duerfen diese Breite gezielt verlassen, siehe unten. */
body.single-post .entry-content > *,
body.single-veranstaltung .entry-content > * {
    margin-inline: auto;
    max-width: 40rem;
}

/* Langer Fliesstext liest sich eine Spur groesser besser. Die Einleitung
   (.dg-lead) bringt ihre eigene Groesse mit und bleibt davon unberuehrt. */
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-veranstaltung .entry-content > p,
body.single-veranstaltung .entry-content > ul,
body.single-veranstaltung .entry-content > ol {
    font-size: 1.075rem;
    line-height: 1.78;
}

body.single-post .entry-content h2,
body.single-veranstaltung .entry-content h2 {
    margin-top: clamp(3.25rem, 6vw, 5rem);
}

body.single-post .entry-content p,
body.single-veranstaltung .entry-content p {
    margin-bottom: 1.5rem;
}

/* Die Einleitung (erster Absatz, Klasse dg-lead aus dem Basistheme) hebt
   sich als kurzer Auftakt vom Fliesstext ab – groesser, kein Volltext-Grau,
   damit sie wirklich wie ein Einstieg wirkt statt wie ein Absatz unter
   vielen. */
body.single-post .entry-content > .dg-lead {
    color: var(--sh-ink);
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.65;
    margin-bottom: 0.5rem;
    opacity: 0.82;
}

/* -------------------------------------------------------------------------
   Grosse Bilder zwischen den Textabschnitten

   Zwei Stufen, wie im Auftrag beschrieben: alignwide fuellt die Schale
   (angeschnitten gegenueber dem Fliesstext, aber innerhalb des
   Seitenrands), alignfull geht bis an den Viewportrand. Beide sind reine
   Editor-Standardklassen (theme.json traegt contentSize/wideSize bereits),
   hier wird nur ihre Wirkung innerhalb der schmalen Lesespalte definiert. */
body.single-post .entry-content > .wp-block-image,
body.single-veranstaltung .entry-content > .wp-block-image {
    margin-block: clamp(2.5rem, 5vw, 4rem);
}

body.single-post .entry-content > .wp-block-image img,
body.single-veranstaltung .entry-content > .wp-block-image img {
    border-radius: 4px;
    display: block;
    height: auto;
    width: 100%;
}

body.single-post .entry-content > .wp-block-image figcaption,
body.single-veranstaltung .entry-content > .wp-block-image figcaption {
    color: var(--sh-ink);
    font-size: 0.86rem;
    margin-top: 0.65rem;
    opacity: 0.6;
}

body.single-post .entry-content > .wp-block-image.alignwide,
body.single-veranstaltung .entry-content > .wp-block-image.alignwide {
    max-width: 100%;
}

body.single-post .entry-content > .wp-block-image.alignwide img,
body.single-veranstaltung .entry-content > .wp-block-image.alignwide img {
    border-radius: 4px;
}

/* alignfull bricht bis an den Viewportrand aus – unabhaengig davon, wo
   die Lesespalte gerade steht (Schalenbreite ist variabel). Der Trick
   funktioniert, weil margin-left: 50% sich auf die Breite des Elternteils
   bezieht, translateX(-50%) danach auf die eigene (100vw breite) Box. */
body.single-post .entry-content > .wp-block-image.alignfull,
body.single-veranstaltung .entry-content > .wp-block-image.alignfull {
    margin-left: 50%;
    max-width: 100vw;
    transform: translateX(-50%);
    width: 100vw;
}

body.single-post .entry-content > .wp-block-image.alignfull img,
body.single-veranstaltung .entry-content > .wp-block-image.alignfull img {
    border-radius: 0;
}

body.single-post .entry-content > .wp-block-image.alignfull figcaption,
body.single-veranstaltung .entry-content > .wp-block-image.alignfull figcaption {
    margin-inline: auto;
    max-width: 40rem;
    padding-inline: 1.25rem;
    text-align: center;
}

/* Spezifitaet bewusst .sh-prose .sh-post-back statt nur .sh-post-back:
   .sh-prose p (70-silberhorn.css) setzt margin-top:0 mit hoeherer
   Spezifitaet (Klasse+Element schlaegt eine Klasse) und hat den Abstand
   sonst wieder aufgehoben – sichtbar wurde das erst, seit hier auch
   Bloecke ohne eigenen unteren Rand vorausgehen koennen. */
.sh-prose .sh-post-back {
    margin-top: 2.5rem;
    max-width: 40rem;
}

/* -------------------------------------------------------------------------
   Bezug zum Exponat (Shortcode sh_exponat_bezug)
   Wiederverwendet .sh-exhibit unveraendert (gleiche Kartensprache wie
   „Exponat des Monats"), nur die Weiss-Flaeche der Paper-Baender wird
   nachgezogen, da der Block hier nicht in einem .sh-band--paper sitzt,
   sondern direkt auf dem Papierhintergrund von .sh-content liegt.
   ---------------------------------------------------------------------- */

.sh-prose .sh-exhibit {
    background: #fff;
    margin-inline: auto;
}

.sh-exhibit__cta {
    margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
   Verwandte Beitraege (Shortcode sh_verwandte_beitraege)
   Nutzt dieselben Kartenklassen wie die Uebersicht (.sh-post-grid /
   .sh-post-card), damit kein zweites Kartenmuster entsteht. Nur enger
   gesetzt: drei Karten nebeneinander, ohne Teasertext.
   ---------------------------------------------------------------------- */
/* Spezifitaet bewusst mit body.single-post-Praefix: die Lesebreiten-Regel
   oben (body.single-post .entry-content > *) betrifft nur den
   Fliesstext-Wrapper, .sh-related ist aber ein eigener direkter Kind der
   Schale (eigener [Shortcode]-Block) und braucht dieselbe Ausnahme. */
body.single-post .sh-prose .sh-related {
    margin-top: clamp(3rem, 6vw, 5rem);
    max-width: none;
}

.sh-related__grid {
    gap: clamp(1.5rem, 3vw, 2.25rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.sh-related__grid .sh-post-card__media {
    aspect-ratio: 4 / 3;
}

.sh-related__grid .sh-post-card__title,
.sh-prose .sh-related__grid .sh-post-card__title {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    margin-bottom: 0;
}

/* Weniger als drei Treffer: die Karten behalten ihre Groesse, statt sich
   auf die halbe Schale zu dehnen oder eine leere Spalte offen zu lassen. */
.sh-related__grid:not(:has(> li:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 58rem;
}

.sh-related__grid:not(:has(> li:nth-child(2))) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 28rem;
}

@media (max-width: 900px) {
    .sh-related__grid,
    .sh-related__grid:not(:has(> li:nth-child(3))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .sh-related__grid:not(:has(> li:nth-child(2))) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 26rem;
    }
}

@media (max-width: 560px) {
    .sh-related__grid,
    .sh-related__grid:not(:has(> li:nth-child(3))),
    .sh-related__grid:not(:has(> li:nth-child(2))) {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }
}

/* Auf breiten Schirmen duerfen Exponatbezug und verwandte Beitraege aus
   der Lesespalte heraustreten. Sobald die Schale nur noch wenig breiter
   ist als die Lesespalte, wirkt derselbe Versatz wie ein Satzfehler:
   dort stehen beide wieder auf der Textkante. */
@media (max-width: 1000px) {
    body.single-post .sh-prose .sh-related,
    body.single-post .sh-content > .sh-shell > .sh-exhibit {
        max-width: 40rem;
    }
}

/* -------------------------------------------------------------------------
   Veranstaltungs-Einzelseite: Landingpage statt Infokarte

   Termin-Kopf (Metadaten + Ticket-CTA aus [sh_event_meta]) und Ort stehen
   nebeneinander in voller Schalenbreite, bevor der eigentliche
   Beschreibungstext beginnt. .sh-event-meta/.sh-event-meta__list selbst
   bleiben unveraendert (70-silberhorn.css, vom Shortcode erzeugt) – hier
   wird nur ihre Umgebung neu komponiert.
   ---------------------------------------------------------------------- */

body.single-veranstaltung .sh-pagehead {
    padding-block: clamp(9rem, 16vw, 13rem) clamp(4rem, 8vw, 6rem);
}

.sh-event-single__top {
    align-items: start;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.single-veranstaltung .sh-content > .sh-shell > .sh-event-single__top {
    max-width: none;
}

.sh-event-single__top .sh-event-meta {
    margin: 0;
}

.sh-event-single__top .sh-event-meta__list {
    gap: 1.75rem 1.5rem;
}

.sh-event-single__top .sh-event-meta__list dd {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}

/* Der Ort ist auf jeder Veranstaltung derselbe – kein Feld im Shortcode,
   sondern eine feste Angabe im Template (dieselbe Adresse wie im
   Fussbereich und im Abschluss-Block). */
.sh-event-single__venue {
    background: #fff;
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.sh-event-single__venue-address {
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    margin: 0.75rem 0 1.25rem;
}

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

.sh-event-single__back {
    margin-top: 2.5rem;
}


/* =========================================================================
   Verfasser eines Blogbeitrags

   Steht auf einer Zeile mit dem Datum, getrennt durch denselben
   Mittelpunkt, der auf der ganzen Website Angaben trennt. Der Name führt
   zum Autorenarchiv.
   ========================================================================= */

.sh-pagehead__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 0.9rem;
}

.sh-pagehead__meta .sh-pagehead__date {
    margin: 0;
}

.sh-pagehead__autor {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    opacity: 0.86;
}

.sh-pagehead__autor::before {
    content: "\00B7";
    opacity: 0.55;
}

.sh-pagehead__autor a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(243, 240, 233, 0.28);
    padding-bottom: 1px;
    transition: color 200ms var(--sh-ease), border-color 200ms var(--sh-ease);
}

.sh-pagehead__autor a:hover,
.sh-pagehead__autor a:focus-visible {
    color: #ffffff;
    border-color: rgba(243, 240, 233, 0.7);
}


/* Das Autorenbild in der Kopfzeile eines Beitrags. Es kommt aus der
   eigenen Mediathek, nicht von Gravatar - siehe mu-plugin
   silberhorn-autor.php. */
.sh-pagehead__avatar {
    flex: 0 0 auto;
    line-height: 0;
}

.sh-pagehead__avatar img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(243, 240, 233, 0.28);
}

/* Steht das Bild davor, braucht der Name keinen Mittelpunkt mehr. */
.sh-pagehead__meta .sh-pagehead__avatar + .sh-pagehead__date + .sh-pagehead__autor::before {
    content: none;
}

.sh-pagehead__meta .sh-pagehead__avatar ~ .sh-pagehead__autor {
    gap: 0;
}

/* -------------------------------------------------------------------------
   Die Autorenseite

   Die Karte unter einem Beitrag verweist hierher. Bis hierher stand hier
   der Name als Überschrift und danach sofort die Beiträge - das Versprechen
   der Karte wurde nicht eingelöst.

   Es ist eine redaktionelle Seite, keine zweite Unternehmensseite. Deshalb
   kein Kopfbild, keine Inszenierung: Porträt, Name, zwei Sätze, dann die
   Beiträge in derselben Gestaltung wie im Blog.
   ---------------------------------------------------------------------- */

.sh-autor {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.25rem);
}

.sh-autor__bild {
    flex: 0 0 auto;
    width: clamp(5rem, 14vw, 7.5rem);
}

.sh-autor__bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.sh-autor__text {
    min-width: 0;
}

.sh-autor__name {
    font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0.35rem 0 0;
}

.sh-autor__bio {
    margin: 0.7rem 0 0;
    max-width: 46rem;
    opacity: 0.88;
}

/* Das Band mit dem Kopf und das Band mit den Beiträgen liegen direkt
   aufeinander. Ohne diesen Eingriff stünde zwischen ihnen die volle
   Bandpolsterung zweimal. */
.sh-autor-band {
    padding-bottom: 0;
}

/* Das Kopfband endet ohne Polsterung, das Beitragsband beginnt ohne. Der
   Abstand zwischen Bio und Beitragsliste kommt deshalb allein von hier -
   ohne diese Zeile stünden beide 17 Pixel auseinander. */
.sh-autor__titel {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: clamp(2.25rem, 5vw, 3.5rem) 0 1.5rem;
}

.sh-autor__zurueck {
    margin-top: 2.5rem;
}

/* Auf dem Telefon steht das Porträt über dem Namen: Nebeneinander bliebe
   für den Namen eine Spalte von wenigen Zeichen. */
@media (max-width: 560px) {
    .sh-autor {
        display: block;
    }

    .sh-autor__bild {
        width: 5.5rem;
        margin-bottom: 1rem;
    }
}