/*
 * RealLabor Blog – Frontend-Styles (Übersicht + Einzelbeitrag)
 *
 * Werte 1:1 von reallabor-bildung.de übernommen (per Browser-Inspektion
 * der echten computed styles, Stand 2026-07):
 *   - Fließtext: Roboto, Farbe #171717, 18px/27px (1.5), letter-spacing -0.5px
 *   - Überschriften: "Roboto Condensed" 600, Farbe #5A2362 (Lila) auf Weiß
 *   - "Eyebrow"-Label (z. B. "REALLABORE ENTDECKEN"): Roboto 500, 17px,
 *     GROSSBUCHSTABEN, letter-spacing 0.5px, Farbe #e6007e (Magenta) –
 *     noch verwendet für [reallabor_blog_standort] im Seitenkopf
 *   - Links: Farbe #e6007e, ohne Unterstreichung
 *   - Buttons: Pill-Form (border-radius 45px), Rahmen 1px #5A2362,
 *     transparenter Hintergrund, Text #5A2362
 *
 * Seit 1.2.0: Beitragstext in 50/50-Abschnitten (.rlb-post__section) wie
 * die Sektionen der Hauptseite selbst – links riesige Lila-Überschrift,
 * rechts Text/Bilder, getrennt durch den 2px-Farbverlauf-Balken
 * (Lila -> Magenta). Siehe Kommentar bei .rlb-post__section unten.
 * Seit 1.3.0: Bild-Slider-Block (.rlb-post__slider), siehe Kommentar dort.
 * Seit 1.4.0: alle Typografie-Werte (font-family/size/line-height/
 * letter-spacing) sind auf var(--rlb-{gruppe}-{feld}, DEFAULT) umgestellt -
 * eine leer gelassene Einstellung unter "Einstellungen -> RealLabor Blog ->
 * Typografie" ändert nichts, der hier hart kodierte DEFAULT-Wert bleibt dann
 * exakt wie bisher aktiv (siehe includes/class-rlb-typography.php).
 * Beide Schriften (Roboto, Roboto Condensed) sind bereits durch das
 * WordPress-Theme selbst geladen – dieses Plugin bindet keine eigenen
 * Fonts ein.
 *
 * Individuell anpassbar, OHNE diese Datei zu bearbeiten (Änderungen hier
 * gehen bei einem Plugin-Update verloren): entweder über die Typografie-
 * Einstellungsseite (siehe oben) ODER unter WordPress -> Design ->
 * Customizer -> Zusätzliches CSS die gewünschten Variablen überschreiben,
 * z. B.:
 *
 *   .rlb-grid, .rlb-post { --rlb-accent: #123456; --rlb-text: #222; }
 */

/*
 * Auf :root definiert (nicht nur auf .rlb-grid/.rlb-post): die Ausgabe
 * des Shortcodes besteht aus mehreren GESCHWISTER-Elementen
 * (.rlb-grid, .rlb-viewall, .rlb-empty, …), CSS-Variablen vererben sich
 * aber nur an Nachfahren – auf einem gemeinsamen Vorfahren wie :root
 * erreichen sie zuverlässig alle Klassen dieses Plugins.
 */
:root {
    --rlb-accent: #5A2362;
    --rlb-accent-2: #e6007e;
    --rlb-text: #171717;
    --rlb-muted: #555;
    --rlb-radius: 12px;
    --rlb-font-body: "Roboto", sans-serif;
    --rlb-font-heading: "Roboto Condensed", sans-serif;
}

.rlb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 24px 0;
}
.rlb-cols-1 { grid-template-columns: 1fr; }
.rlb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rlb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rlb-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .rlb-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .rlb-grid { grid-template-columns: 1fr !important; }
}

.rlb-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    font-family: var(--rlb-font-body);
    border-radius: var(--rlb-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rlb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.rlb-card__img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--accent, var(--rlb-accent));
    overflow: hidden;
}
.rlb-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Standort-Label über dem Bild: helle Großbuchstaben-Schrift auf
   dezentem Verlaufsschatten, damit es über jedem Foto lesbar bleibt. */
.rlb-card__loc {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 22px 14px 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
    color: #fff;
    font-family: var(--rlb-font-body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.rlb-card__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
/* Kategorie-Label (optional, nur wenn der Beitrag eine Kategorie hat) -
   analog zu .rle-card__cat im Events-Plugin, Farbe je Kategorie. */
.rlb-card__cat {
    color: var(--cat-accent, var(--rlb-accent-2));
    font-family: var(--rlb-font-body);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.rlb-card__cat + .rlb-card__title {
    margin-top: -4px;
}
.rlb-card__title {
    margin: 0;
    font-family: var(--rlb-card-title-font-family, var(--rlb-font-heading));
    font-size: var(--rlb-card-title-font-size, 22px);
    font-weight: 600;
    color: var(--rlb-accent);
    line-height: var(--rlb-card-title-line-height, 1.25);
    letter-spacing: var(--rlb-card-title-letter-spacing, normal);
}
.rlb-card__desc {
    margin: 0;
    font-family: var(--rlb-font-body);
    font-size: 14px;
    color: var(--rlb-muted);
    line-height: 1.5;
    letter-spacing: -0.3px;
    flex: 1;
}
.rlb-card__cta {
    font-family: var(--rlb-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--rlb-accent-2);
}

.rlb-viewall {
    text-align: center;
    margin: 4px 0 20px;
}
.rlb-viewall a {
    display: inline-block;
    font-family: var(--rlb-font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--rlb-accent);
    border: 1px solid var(--rlb-accent);
    border-radius: 45px;
    padding: 10px 28px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.rlb-viewall a:hover { background: var(--rlb-accent); color: #fff; }

/* Übersicht: kompakte Liste (layout="liste") – Titel + Teaser + Pfeil,
   für Standort-Unterseiten gedacht. */
.rlb-list { list-style: none; margin: 24px 0; padding: 0; }
.rlb-list__item { border-bottom: 1px solid rgba(90,35,98,.15); }
.rlb-list__item:first-child { border-top: 1px solid rgba(90,35,98,.15); }
.rlb-list__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 4px;
    text-decoration: none;
    color: inherit;
}
.rlb-list__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rlb-list__title {
    font-family: var(--rlb-list-font-family, var(--rlb-font-heading));
    font-weight: 600;
    font-size: var(--rlb-list-font-size, 19px);
    color: var(--rlb-accent);
    line-height: var(--rlb-list-line-height, normal);
    letter-spacing: var(--rlb-list-letter-spacing, normal);
    transition: color .15s ease;
}
.rlb-list__item a:hover .rlb-list__title { color: var(--rlb-accent-2); }
.rlb-list__desc {
    font-family: var(--rlb-list-font-family, var(--rlb-font-body));
    font-size: var(--rlb-list-font-size, 14px);
    color: var(--rlb-muted);
    line-height: var(--rlb-list-line-height, 1.5);
    letter-spacing: var(--rlb-list-letter-spacing, normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rlb-list__arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--rlb-accent-2);
}

.rlb-empty, .rlb-notfound {
    padding: 24px;
    text-align: center;
    font-family: var(--rlb-font-body);
    color: var(--rlb-muted);
    background: rgba(90,35,98,.05);
    border-radius: 10px;
}
.rlb-admin-error {
    padding: 14px 18px;
    background: #fde7ec;
    color: #b3003a;
    border-radius: 8px;
    font-size: 13px;
}

/* Einzelbeitrag
   Titel, Titelbild und Standort werden bewusst NICHT hier ausgegeben –
   die kommen über die eigenen Variablen-Shortcodes im WordPress-seitigen
   Seitenkopf ([reallabor_blog_titel], [reallabor_blog_bild],
   [reallabor_blog_standort]), siehe readme.txt / Einstellungsseite.

   KEIN eigenes max-width hier: die Breite der Beitragsspalte soll von
   der umgebenden Elementor-Sektion/Spalte bestimmt werden (die schon
   die richtige Spaltenbreite für diese Seite festlegt) – ein zusätzlicher
   Wert hier würde die Spalte nur unnötig gegenüber dem Rest der Seite
   verschmälern. */
.rlb-post { max-width: 100%; font-family: var(--rlb-font-body); }

/* Fußzeile unter dem Beitrag: Zurück-Link + Veröffentlichungsdatum */
.rlb-post__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(90,35,98,.15);
}
.rlb-post__back {
    font-size: 15px;
    font-weight: 400;
    color: var(--rlb-accent-2);
    text-decoration: none;
}
.rlb-post__back:hover { text-decoration: underline; }
.rlb-post__date {
    font-size: 14px;
    color: var(--rlb-muted);
}

/* Für die Header-Variablen-Shortcodes (Platzierung/Layout obliegt dem
   WordPress-seitigen Seitenkopf, hier nur ein dezenter Grundstil) */
.rlb-header-image {
    max-width: 100%;
    height: auto;
    display: block;
}
.rlb-header-standort {
    display: inline-block;
    font-family: var(--rlb-eyebrow-font-family, var(--rlb-font-body));
    color: var(--rlb-accent-2);
    font-size: var(--rlb-eyebrow-font-size, 17px);
    font-weight: 500;
    line-height: var(--rlb-eyebrow-line-height, normal);
    letter-spacing: var(--rlb-eyebrow-letter-spacing, 0.5px);
    text-transform: uppercase;
}

/*
 * !important auf den Typografie-Eigenschaften: Elementor/Theme-Widgets
 * (z. B. das "Text-Editor"-Widget, in das dieser Shortcode meist
 * eingesetzt wird) bringen eigene Absatz-/Schriftregeln mit, deren
 * Spezifität wir vorher nicht kennen. Ohne !important gewinnt im
 * Zweifel die Widget-Vorgabe statt der Beitrags-Typografie.
 * Eigene Anpassungen im Customizer (Zusätzliches CSS) brauchen dann
 * ebenfalls !important, um das zu überschreiben.
 */
.rlb-post__content {
    font-family: var(--rlb-body-font-family, var(--rlb-font-body)) !important;
    font-size: var(--rlb-body-font-size, 18px) !important;
    line-height: var(--rlb-body-line-height, 27px) !important;
    letter-spacing: var(--rlb-body-letter-spacing, -0.5px) !important;
    color: var(--rlb-text) !important;
}
/*
 * Abschnitte im Beitragstext: 50/50-Layout wie auf reallabor-bildung.de
 * selbst (per Browser-Inspektion der echten Seite übernommen, Stand
 * 2026-08). Jede vom Autor gesetzte Zwischenüberschrift startet einen
 * neuen Abschnitt – links die Überschrift riesig in Lila (Roboto
 * Condensed 600, wie die H2-Sektionstitel der Hauptseite), rechts der
 * zugehörige Text/Bilder. Getrennt durch den 2px-Farbverlauf-Balken
 * (Lila -> Magenta, 108°) – exakt der Trenner-Stil des Themes. Die
 * eigentliche Abschnitts-Zerlegung übernimmt PHP (class-rlb-shortcode.php,
 * render_sectioned_content()); hier nur die Optik.
 */
.rlb-post__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 48px;
    padding: 56px 0;
    align-items: start;
}
.rlb-post__intro { padding-bottom: 12px; }
.rlb-post__divider {
    height: 3px;
    margin: 0;
    background: linear-gradient(108deg, var(--rlb-accent) 20%, var(--rlb-accent-2) 80%);
}
.rlb-post__section-head h3 {
    font-family: var(--rlb-heading-font-family, var(--rlb-font-heading)) !important;
    /* Fallback bleibt das eingebaute responsive clamp() - ein manuell in den
       Einstellungen gesetzter fester Wert ersetzt es vollständig (kein
       automatisches Mitskalieren mit der Fensterbreite mehr, siehe Hilfetext). */
    font-size: var(--rlb-heading-font-size, clamp(28px, 4vw, 52px)) !important;
    font-weight: 600 !important;
    line-height: var(--rlb-heading-line-height, 1.08) !important;
    letter-spacing: var(--rlb-heading-letter-spacing, -1px) !important;
    text-transform: none !important;
    color: var(--rlb-accent) !important;
    margin: 0 !important;
}
@media (max-width: 780px) {
    .rlb-post__section {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 36px 0;
    }
}
.rlb-post__content p { font: inherit !important; margin: 0 0 18px; }
.rlb-post__content ul, .rlb-post__content ol { font: inherit !important; margin: 0 0 18px; padding-left: 24px; }
.rlb-post__content a:not(.rlb-btn) { color: var(--rlb-accent-2) !important; text-decoration: none; }
.rlb-post__content a:not(.rlb-btn):hover { text-decoration: underline; }
.rlb-post__content img {
    max-width: 100% !important;
    height: auto;
    border-radius: 10px;
    margin: 18px 0;
    display: block;
}
/* Bildgröße, im CP-Editor beim Einfügen gewählt (#308-Erweiterung).
   !important: manche Themes/Elementor setzen selbst "img { max-width:100% }"
   mit hoher Priorität, das würde die gewählte Größe sonst überstimmen.
   inline-block (statt block) bei allem außer "voller Breite", damit sich
   mehrere kleinere Bilder nebeneinander anordnen, wenn genug Platz ist. */
.rlb-post__content img.rlb-img-s {
    max-width: 33% !important;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}
.rlb-post__content img.rlb-img-m {
    max-width: 60% !important;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}
.rlb-post__content img.rlb-img-l {
    max-width: 85% !important;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
}
.rlb-post__content img.rlb-img-full {
    max-width: 100% !important;
    display: block;
    margin: 18px 0;
}

/*
 * Bild-Slider (seit 1.3.0): durchlaufendes Laufband (Marquee), volle Breite,
 * unabhängig vom 50/50-Grid der Abschnitte. Der Lauf selbst ist reine
 * CSS-Keyframe-Animation (kein JS nötig) – assets/reallabor-blog.js kümmert
 * sich ausschließlich um die Lightbox beim Anklicken.
 */
/* Weißraum zum Farbverlauf-Trenner davor/danach (der Trenner selbst hat
   keinen eigenen Abstand - siehe .rlb-post__divider). */
.rlb-post__slider-wrap { margin: 50px 0; }
.rlb-post__slider {
    overflow: hidden;
    height: var(--rlb-slider-height, 320px);
    position: relative;
}
.rlb-post__slider-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    animation: rlb-marquee var(--rlb-slider-duration, 40s) linear infinite;
    /* Zwingt den Browser, dafür eine eigene Compositor-Ebene anzulegen statt
       bei jedem Frame neu zu layouten/zu malen – ohne diesen Hinweis läuft
       die translateX()-Dauerschleife besonders in Firefox spürbar ruckelig/
       zitterig, da Firefox CSS-Keyframe-Animationen nicht immer automatisch
       auf die GPU auslagert. */
    will-change: transform;
    backface-visibility: hidden;
}
.rlb-post__slider:hover .rlb-post__slider-track { animation-play-state: paused; }
.rlb-post__slider-item { flex: 0 0 auto; height: 100%; margin-right: 6px; }
/* Höhere Spezifität als die generische ".rlb-post__content img"-Regel oben
   (die dort volle Breite/Block/Margin erzwingt) – hier bewusst das Gegenteil:
   feste Höhe, proportionale Breite, kein Abstand zwischen den Kacheln. */
.rlb-post__content .rlb-post__slider-item img {
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    border-radius: 0;
    cursor: zoom-in;
}
/* Fehlte in 1.3.0: die animation-Eigenschaft oben verweist auf diesen Namen,
   ohne diese Regel hat "animation: rlb-marquee ..." keinerlei sichtbaren
   Effekt (Browser akzeptiert den Wert, es gibt aber keine passende
   Keyframe-Definition zum Interpolieren).
   translate3d() statt translateX() (#423, Folge-Meldung nach 1.5.0): das
   erzwingt zuverlässiger als will-change allein eine eigene, GPU-komposit-
   ierte Ebene mit 3D-Matrix-Interpolation – bei reinem translateX() haben
   vor allem Firefox/manche Chromium-Versionen das Band trotz will-change
   gelegentlich wieder auf den Hauptthread zurückfallen lassen (spürbares
   Zittern/Ruckeln beim Endlos-Lauf, gemeldet trotz der 1.5.0-Fixes oben). */
@keyframes rlb-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .rlb-post__slider-track { animation: none; overflow-x: auto; width: 100%; }
}
@media (max-width: 780px) {
    .rlb-post__slider { height: var(--rlb-slider-height, 220px); }
}

/* Button-Element (Call-to-Action-Link, seit 1.9.0): Pill-Form nach dem
   site-eigenen Button-Stil (siehe Kopf-Kommentar dieser Datei - Rahmen 1px
   --rlb-accent, transparenter Hintergrund, radius 45px). Pfeil rein per
   ::after, kein zusätzliches Markup im gespeicherten Beitragstext nötig
   (siehe HtmlSanitizer::BUTTON_CLASS). */
.rlb-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--rlb-font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-radius: 45px;
    padding: 16px 40px;
    margin: 20px 0;
    border: 1px solid var(--rlb-accent);
    color: var(--rlb-accent);
    background: transparent;
    transition: color .3s, border-color .3s;
}
.rlb-btn:hover { border-color: var(--rlb-accent-2); color: var(--rlb-accent-2); }
.rlb-btn::after { content: "→"; display: inline-block; transition: transform .25s ease; }
.rlb-btn:hover::after { transform: translateX(4px); }

/* Embed-Block (seit 1.7.0): responsives 16:9-iframe (YouTube/Vimeo/Google
   Maps o.ä., Domain vorab im Event-System freigegeben). Aspect-Ratio-Box
   statt fixer Höhe, damit es bei jeder Bildschirmbreite proportional bleibt. */
.rlb-post__embed-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 50px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.rlb-post__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Generischer Skript-Embed (z.B. Podigee-Podcast-Player): das eingebettete
   Skript baut sein eigenes Markup selbst in dieses <div> ein (kein iframe,
   siehe class-rlb-shortcode.php::render_script_block()) - hier nur Abstand
   zum umgebenden Text, keine feste Höhe/Breite (das Skript bestimmt seine
   Größe selbst). */
.rlb-post__script-wrap {
    margin: 32px 0;
}

/* Lightbox-Großansicht (assets/reallabor-blog.js) */
#rlb-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 8, 16, 0.88);
    z-index: 100000;
    padding: 24px;
}
#rlb-lightbox.rlb-lightbox--open { display: flex; }
.rlb-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
/* !important: der Button erhält beim Öffnen programmatisch den Fokus
   (assets/reallabor-blog.js, closeBtn.focus()) – Browser zeigen dafür
   standardmäßig einen eigenen Fokus-Rahmen (outline), der optisch wie ein
   zusätzlicher Rand um das Icon wirkt und nicht von "border" abgedeckt wird.
   Theme-/Elementor-Grundstile für <button> könnten außerdem einen eigenen
   Rahmen mitbringen – hier ganz bewusst rahmenlos, weiß, kreisrund. */
.rlb-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.rlb-lightbox__close:hover,
.rlb-lightbox__close:focus,
.rlb-lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.3); }