/* [rr_post_nav] — rollenbewusste Beitragsnavigation.
   Drei tap-freundliche Kacheln: vorheriger · Übersicht · nächster.
   Jede Kachel nennt Titel UND Datum des Ziels, damit vor dem Klick klar ist,
   wohin er führt (frühere Beschriftung „Vorheriger Beitrag" tat das nicht). */

.rr-post-nav {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--tss-line);
}
.rr-post-nav-prev,
.rr-post-nav-next { flex: 1 1 0; min-width: 0; display: flex; }
.rr-post-nav-up   { flex: 0 0 auto; display: flex; }

/* ── Kachel ─────────────────────────────────────────────────────────────── */
.rr-post-nav-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 44px;                       /* sichere Tap-Größe */
    box-sizing: border-box;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    background: var(--tss-surface);
    border: 1px solid var(--tss-line);
    border-radius: 8px;
    transition: background .12s, border-color .12s, transform .12s;
}
.rr-post-nav-card:hover,
.rr-post-nav-card:focus-visible {
    background: var(--tss-primary-faint);
    border-color: var(--tss-primary);
}
.rr-post-nav-card:focus-visible {
    outline: 2px solid var(--tss-primary);
    outline-offset: 2px;
}
.rr-post-nav-card:active { transform: translateY(1px); }

/* Richtungszeile („← Vorheriger" / „Nächster →") */
.rr-post-nav-dir {
    display: block;
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tss-faint);
}
.rr-post-nav-arrow { font-weight: 700; }

/* Titel des Ziels — der eigentliche Orientierungsanker. Zwei Zeilen erlaubt,
   damit auf dem Handy nicht schon nach drei Wörtern abgeschnitten wird. */
.rr-post-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--tss-primary);
}
/* Termin/Ort bzw. Beitragsdatum */
.rr-post-nav-meta {
    display: block;
    font-size: .8rem;
    color: var(--tss-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* „Nächster"-Kachel rechtsbündig, damit die Richtung auch räumlich stimmt */
.rr-post-nav-next .rr-post-nav-card { text-align: right; }

/* ── Übersichts-Kachel (Mitte) ──────────────────────────────────────────── */
.rr-post-nav-card-up {
    align-items: center;
    gap: 2px;
    padding: 12px;
    min-width: 84px;
    color: var(--tss-primary);
    font-weight: 600;
}
.rr-post-nav-card-up .rr-post-nav-arrow { font-size: 1.05rem; line-height: 1; }
.rr-post-nav-uplabel { font-size: .8rem; }

/* ── Mobil: gestapelt, volle Breite, Übersicht zuletzt ──────────────────── */
@media (max-width: 600px) {
    .rr-post-nav { flex-direction: column; gap: 8px; }
    .rr-post-nav-next .rr-post-nav-card { text-align: left; }
    .rr-post-nav-up { order: 3; }
    .rr-post-nav-card-up {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
}

/* Rückweg-Knopf oben im Beitrag. Nutzt Gutenberg-Button-Markup, damit Theme-
   Stile und das Scroll-Button-Snippet (Schatten, 3D-Verlauf) automatisch
   greifen. Hier nur Ausrichtung und die Farbe der redaktionellen Leisten. */
/* Rechtsbündig. !important, weil das Button-Snippet auf derselben Klasse
   `justify-content: safe center` setzt (für scrollbare Leisten sinnvoll, hier
   bei genau einem Knopf aber nicht) — ohne Gewichtung gewönne je nach
   Ladereihenfolge das Snippet. Schatten/3D-Look kommen weiterhin von dort. */
.rr-back-bar {
    display: flex;
    justify-content: flex-end !important;
    margin: 0 0 8px;
}
/* Kein rechter Innenabstand — sonst endet der Knopf auf schmalen Bildschirmen
   40 px vor der rechten Kante der Termin-Box darunter.

   Herkunft: Das Button-Snippet setzt unterhalb seines Umbruchpunkts
   (TSS_SCROLL_BUTTONS_BREAKPOINT, derzeit 768 px)
   `.wp-block-buttons.horizontal-scroll { padding-right: 40px }`. Dort ist das
   richtig: Der Platz sorgt dafür, dass der letzte Knopf einer scrollbaren
   Leiste nicht unter dem Verlaufsschleier endet. Diese Leiste hier ist aber
   keine scrollbare Leiste, sondern genau EIN Knopf, der bündig rechts stehen
   soll. `justify-content: flex-end` richtet am Innenmaß aus — also 40 px vor
   der Außenkante. Auf breiten Bildschirmen greift die Regel nicht, deshalb war
   dort nichts zu sehen. Gemessen auf der Live-Seite: Abstand zur Termin-Box
   40.0 px mit, 0.0 px ohne diesen Innenabstand.

   BEWUSST OHNE MEDIENABFRAGE: Eine eigene `@media (max-width: 768px)` würde den
   Umbruchpunkt des Snippets hier ein zweites Mal festschreiben und beim
   Verstellen der dortigen Konstante still falsch werden. Oberhalb des
   Umbruchpunkts setzt das Snippet ohnehin keinen rechten Innenabstand, `0` ist
   dort also folgenlos.

   !important und die doppelte Klasse aus demselben Grund wie oben bei
   justify-content: Das Snippet kommt als Inline-Style über einen eigenen
   Handle, die Ladereihenfolge gegenüber diesem Stylesheet ist nicht zugesichert. */
.wp-block-buttons.rr-back-bar {
    padding-right: 0 !important;
}
/* Grundfarbe des Knopfs. Der 3D-Verlauf des Snippets legt sich als halb-
   transparente Schicht DARÜBER (background-image) und funktioniert deshalb mit
   jeder Grundfarbe — hier wird also nur die Fläche gesetzt, nicht der Effekt.

   Bezieht die Hausfarbe aus der globalen Farbpalette des Themes, wechselt also
   automatisch mit, wenn dort die Farbe geändert wird.

   Übersteuern bei Bedarf entweder per Variable:
     .rr-back-bar { --rr-back-bg: #ffd400; --rr-back-fg: #1a1a1a; }
   oder mit der Gutenberg-Farbklasse eines Buttons (hat Vorrang, siehe :not):
     add_filter( 'rr_back_button_classes', fn() => 'has-…-background-color' ); */
.rr-back-bar .wp-block-button__link:not([class*="has-"]) {
    /* Palette 1 = kräftiges Gelb der Button-Leisten, Palette 4 = Schwarz.
       (Palette 3 war das Dunkelgrau — daher der zwischenzeitlich schwarze
       Knopf.) Fester Wert nur als Rückfall, falls die Variablen fehlen. */
    background-color: var(--rr-back-bg, var(--theme-palette-color-1, #f5c518));
    color: var(--rr-back-fg, var(--theme-palette-color-4, #1a1a1a));
    border: 0;
}

/* ── Meta-Zeile auf Veranstaltungs-Einzelseiten ────────────────────────────
   Auf rr_event-Seiten steht unter dem Titel die Theme-Meta-Zeile mit Autor,
   Veröffentlichungsdatum und Kategorie. Das VERÖFFENTLICHUNGSDATUM wird dort
   leicht für den Veranstaltungstermin gehalten — es steht unmittelbar über der
   Termin-Box, die das tatsächliche Datum nennt. Autor und Datum sind für eine
   Terminankündigung ohne Wert, Kategorie und Schlagworte dagegen schon.

   Blocksy Free erlaubt keine Meta-Konfiguration je Beitragstyp, deshalb hier
   gezielt ausgeblendet. Betrifft ausschliesslich Einzelansichten von
   Veranstaltungen (body.single-rr_event); Beiträge bleiben unberührt.
   Greift das Theme künftig zu anderen Klassen, fällt die Regel wirkungslos aus
   (Datum wäre wieder sichtbar) — ohne Schaden am Layout. */
body.single-rr_event .entry-meta > li.meta-author,
body.single-rr_event .entry-meta > li.meta-date {
    display: none;
}

/* Blocksys eigener Schlagwort-Block sitzt fest am Seitenende (Position in der
   Free-Version nicht konfigurierbar) — dort landet er unterhalb der
   Blätter-Navigation und wird praktisch übersehen. Ausgeblendet; die
   Schlagwörter erscheinen stattdessen oben (rr_event_prepend_tags). */
body.single-rr_event .entry-tags { display: none; }

/* Schlagwörter oben, direkt unter der Meta-Zeile. Optik an die Theme-Variante
   angelehnt (Raute + Begriff), aber dezenter, damit sie den Termin nicht
   überstrahlen. */
.rr-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 14px;
    font-size: .85rem;
}
.rr-event-tags .rr-event-tag {
    text-decoration: none;
    color: var(--tss-faint, #666);
    border-bottom: 1px solid transparent;
}
.rr-event-tags .rr-event-tag:hover,
.rr-event-tags .rr-event-tag:focus-visible {
    color: var(--tss-primary, #1a1a1a);
    border-bottom-color: currentColor;
}

/* ── Kopfbereich der Veranstaltungsseite kompakter ─────────────────────────
   Zwischen Kategorie-Zeile, Schlagwörtern, Zurück-Knopf und Termin-Box stand
   viel Leerraum: Das Theme setzt unter den Titelbereich 40px Abstand
   (.hero-section), dazu kamen die Eigenabstände unserer Blöcke. Zusammen ergab
   das auf dem Handy fast einen halben Bildschirm, bevor der Termin sichtbar
   wurde. Gilt nur für Veranstaltungen. */
body.single-rr_event .hero-section[data-type="type-1"] {
    --margin-bottom: 10px;
}
/* Titel -> Kategorie-Zeile enger (Theme-Vorgabe: 20px). */
body.single-rr_event .entry-header > :not(:first-child) {
    --item-spacing: 8px;
}
/* Schlagwörter direkt unter die Kategorie, ohne Luft darüber. */
body.single-rr_event .rr-event-tags {
    margin-top: 0;
    margin-bottom: 10px;
}
/* Zurück-Leiste dichter an die Schlagwörter. */
body.single-rr_event .rr-back-bar {
    margin-bottom: 10px;
}