/**
* Feedivo — geteilte Feed-Darstellung. DIE eine Quelle dafür, wie ein Feed und
* seine Beitragskarten aussehen: von der App geladen UND beim Bauen wortgleich
* ins WordPress-Plugin kopiert (bin/build-plugin.sh), damit Embeds identisch
* aussehen.
*
* In sich geschlossen: ausschließlich --feed-*-Eigenschaften, keine
* Bootstrap-Variablen — so rendert die Datei in jedem WordPress-Theme gleich.
*
* ⚠ Gehärtet gegen Host-CSS: JEDE Deklaration trägt !important, weil Embeds
* sich die Kaskade mit beliebigem Theme-CSS teilen (img { height: auto
* !important }, Button-Resets, *-Selektoren …). Neue Regeln brauchen es ebenso.
* NUR die --feed-*-Eigenschaften bleiben ungeflaggt: das inline
* style="--feed-cols:N" am Container muss die Vorgaben hier schlagen können.
*
* Ein Feed-Container sieht so aus:
* …
* Dazu optional: .feed-corners--square (eckige Karten), .feed-hover--off
* (kein Zoom/Anheben), data-feed-autoplay="off" (Karussell ohne Automatik)
* und --feed-accent als Inline-Token (Akzentfarbe je Feed).
* Familien: grid · masonry · list · carousel. Ein neuer Stil = eine Zeile in
* config/feed_styles.php plus eine Regel hier.
*/
/* Gemeinsamer Rahmen aller Feed-Ausgaben. Er ist ein Query-Container: das
Layout richtet sich nach SEINER Breite (Seitenleiste, schmale Spalte,
Geräte-Vorschau) statt nach dem Viewport. */
.feed-embed {
container-type: inline-size !important;
container-name: feedivo !important;
}
/* Host-Seiten-Reset */
/* Neutralisiert übliche Theme-Stile für Eigenschaften, die die Regeln unten
nicht selbst setzen (Bildrahmen, -radien, -schatten, box-sizing). Die
Lightbox braucht einen eigenen Geltungsbereich: feed-frontend.js hängt sie
an , also außerhalb von .feed-embed. */
.feed-embed,
.feed-embed *,
.feed-embed *::before,
.feed-embed *::after,
.feedivo-lightbox,
.feedivo-lightbox *,
.feedivo-lightbox *::before,
.feedivo-lightbox *::after {
box-sizing: border-box !important;
}
.feed-embed img,
.feed-embed video,
.feedivo-lightbox img,
.feedivo-lightbox video {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Design-Token, bewusst AUCH auf .feed-embed: widget.js und das Plugin hängen
den „Mehr laden"-Button an .feed-embed, also außerhalb von .feed-layout —
ohne die Token dort erbte er die Farben der Host-Seite. */
.feed-embed,
.feed-layout {
--feed-cols: 4;
--feed-gap: 10px;
--feed-radius: 12px;
--feed-bg: #e9eef0;
--feed-card-bg: #fff;
--feed-border: rgba(31, 41, 51, .1);
--feed-text: #1f2933;
--feed-muted: #6b7785;
--feed-accent: #40b8a9;
--feed-chip-bg: rgba(0, 0, 0, .55);
--feed-scrim: rgba(31, 41, 51, .82);
}
.feed-layout {
margin: 0 !important;
}
/* Abstandsstufen (Grid, Masonry, Karussell) */
.feed-gap--tight { --feed-gap: 3px; }
.feed-gap--normal { --feed-gap: 10px; }
.feed-gap--wide { --feed-gap: 22px; }
/* Eckenstil je Feed: der Token wirkt überall, wo var(--feed-radius) gilt. */
.feed-corners--square { --feed-radius: 0px; }
/* Grid */
.feed-layout--grid {
display: grid !important;
grid-template-columns: repeat(var(--feed-cols), minmax(0, 1fr)) !important;
gap: var(--feed-gap) !important;
}
@container feedivo (max-width: 540px) {
.feed-layout--grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.feed-layout--grid.feed-variant--seamless { gap: 0 !important; }
.feed-layout--grid.feed-variant--seamless .post-card { border-radius: 0 !important; }
/* Mosaik: quadratische Kacheln, jede siebte spannt 2×2. Das Verhältnis ist
fest 1:1 — nur so gehen die Spans exakt auf (2 Zellen + 1 Abstand in beiden
Richtungen); der Builder bietet für diesen Stil kein Seitenverhältnis an. */
.feed-layout--grid.feed-variant--mosaic { grid-auto-flow: dense !important; }
.feed-layout--grid.feed-variant--mosaic .post-card { aspect-ratio: 1 / 1 !important; }
.feed-layout--grid.feed-variant--mosaic .post-card:nth-child(7n + 1) {
grid-column: span 2 !important;
grid-row: span 2 !important;
}
/* Masonry (CSS-Grid; Kacheln behalten ihr natürliches Verhältnis) */
/* ⚠ NICHT auf `column-count` zurückbauen. WebKit legt die Kacheln dort korrekt
aus — die Rechtecke stimmen —, malt aber nur die erste Spalte; alle weiteren
Spalten bleiben leer. Nachgewiesen in WebKit gegen die Live-Seite: Spalte 1
voll, Spalten 2 und 3 reines Weiss. Weder `will-change`/`translateZ` auf
Kachel oder Container noch `overflow`, `position`, `break-inside`,
`contain`, ein anderes Element als `` oder ein erzwungener Reflow
(`display:none` und zurück) ändern daran etwas — der Mehrspalten-Pfad ist
hier nicht zu retten. Ohne JS ist das hier ein gewöhnliches Raster; erst
`is-masonry` (app.js bzw. feed-frontend.js) versetzt die Kacheln über
berechnete Zeilen-Spans. */
.feed-layout--masonry {
display: grid !important;
grid-template-columns: repeat(var(--feed-cols), minmax(0, 1fr)) !important;
gap: var(--feed-gap) !important;
align-items: start !important;
}
@container feedivo (max-width: 540px) {
.feed-layout--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Der Zeilenabstand steckt im berechneten Span, sonst zählte er doppelt. */
.feed-layout--masonry.is-masonry {
grid-auto-rows: 1px !important;
row-gap: 0 !important;
}
.feed-layout--masonry .post-card {
display: block !important;
width: 100% !important;
margin-bottom: 0 !important;
aspect-ratio: auto !important; /* im Masonry gilt das Original */
}
.feed-layout--masonry .post-card > img { height: auto !important; }
/* Nahtloses Masonry: der Abstand wird über den TOKEN genullt, nicht über die
gap-Eigenschaft — der Zeilenabstand steckt im berechneten Span, und
app.js/feed-frontend.js lesen dafür columnGap aus. */
.feed-layout--masonry.feed-variant--seamless { --feed-gap: 0px; }
.feed-layout--masonry.feed-variant--seamless .post-card { border-radius: 0 !important; }
/* Karussell — Slider mit Pfeilen und Automatik. Beides setzt JS; der Track
selbst ist ein Snap-Scroller, damit Wischen und Ziehen weiter funktionieren
und keine Bildlaufleiste sichtbar wird. */
.feed-carousel { position: relative !important; }
.feed-layout--carousel {
display: flex !important;
gap: var(--feed-gap) !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important; /* Slider, kein Scrollbereich */
}
.feed-layout--carousel::-webkit-scrollbar { display: none !important; }
.feed-layout--carousel .post-card {
flex: 0 0 calc((100% - (var(--feed-cols) - 1) * var(--feed-gap)) / var(--feed-cols)) !important;
scroll-snap-align: start !important;
}
.feed-carousel-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.25rem !important;
height: 2.25rem !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(31, 41, 51, .55) !important;
color: #fff !important;
font-size: 1.5rem !important;
line-height: 1 !important;
cursor: pointer !important;
transition: background-color .15s ease, opacity .15s ease !important;
}
.feed-carousel-arrow:hover { background: rgba(31, 41, 51, .8) !important; }
.feed-carousel-arrow[hidden] { display: none !important; }
.feed-carousel-prev { left: .4rem !important; }
.feed-carousel-next { right: .4rem !important; }
@container feedivo (max-width: 540px) {
.feed-layout--carousel .post-card { flex-basis: 70% !important; }
}
.feed-layout--carousel.feed-variant--hero .post-card {
flex-basis: min(80%, 520px) !important;
}
/* Karten-Variante im Karussell: der Track beschneidet senkrecht, deshalb
entfällt das Anheben beim Überfahren (der Zoom bleibt) und der Track bekommt
etwas Polsterung, damit Haarlinien und Ruheschatten nicht abgeschnitten
werden. */
.feed-layout--carousel .post-card:hover { transform: none !important; box-shadow: none !important; }
.feed-layout--carousel.feed-variant--cards { padding: 2px 2px 22px !important; }
.feed-layout--carousel.feed-variant--cards .post-card:hover {
box-shadow: 0 1px 2px rgba(31, 41, 51, .05), 0 6px 18px rgba(31, 41, 51, .06) !important;
}
/* Nahtloses Karussell: Token statt gap-Eigenschaft, denn die Kachelbreite
rechnet mit var(--feed-gap) — sonst blieben Lücken in der flex-basis. */
.feed-layout--carousel.feed-variant--seamless { --feed-gap: 0px; }
.feed-layout--carousel.feed-variant--seamless .post-card { border-radius: 0 !important; }
/* Filmstreifen: feste Zeilenhöhe, die Breite folgt dem Medium — das
horizontale Gegenstück zum Masonry, ganz ohne gespeicherte Bildmaße.
max-width: none am Bild ist Pflicht: der Host-Reset (.feed-embed img)
setzt 100 %, und eine gebundene Breite bei erzwungener Höhe verzerrte. */
.feed-layout--carousel.feed-variant--strip { align-items: stretch !important; }
.feed-layout--carousel.feed-variant--strip .post-card {
flex: 0 0 auto !important;
width: auto !important;
height: 340px !important;
aspect-ratio: auto !important;
}
.feed-layout--carousel.feed-variant--strip .post-card > img {
width: auto !important;
height: 100% !important;
max-width: none !important;
}
.feed-layout--carousel.feed-variant--strip .post-card__placeholder {
width: auto !important;
height: 100% !important;
}
@container feedivo (max-width: 540px) {
.feed-layout--carousel.feed-variant--strip .post-card { height: 240px !important; }
}
/* Tablet-breite Container: eine Spalte weniger als eingestellt — zwischen dem
mobilen Zweispalter und der vollen Desktop-Zahl. */
@container feedivo (min-width: 540.02px) and (max-width: 820px) {
.feed-layout--grid { grid-template-columns: repeat(calc(var(--feed-cols) - 1), minmax(0, 1fr)) !important; }
.feed-layout--masonry { grid-template-columns: repeat(calc(var(--feed-cols) - 1), minmax(0, 1fr)) !important; }
.feed-layout--carousel .post-card {
flex-basis: calc((100% - (var(--feed-cols) - 2) * var(--feed-gap)) / (var(--feed-cols) - 1)) !important;
}
}
/* Seitenverhältnis (Grid und Karussell; Masonry bleibt immer im Original) */
.feed-aspect--square .post-card { aspect-ratio: 1 / 1 !important; }
.feed-aspect--portrait .post-card { aspect-ratio: 4 / 5 !important; }
/* 9:16 trifft auch letterboxte Shorts-Thumbnails: der mittige cover-Ausschnitt
eines 16:9-Canvas ist genau der vertikale Frame. */
.feed-aspect--tall .post-card { aspect-ratio: 9 / 16 !important; }
.feed-aspect--landscape .post-card { aspect-ratio: 16 / 9 !important; }
.feed-aspect--original .post-card { aspect-ratio: auto !important; }
.feed-aspect--original .post-card > img { height: auto !important; }
/* ⚠ Masonry ignoriert das Seitenverhältnis IMMER: der Builder bietet es dort
nicht an, der gespeicherte Wert steht aber als Klasse am Container. Diese
Wiederholung steht bewusst NACH den .feed-aspect--*-Regeln — bei gleicher
Spezifität und !important gewinnt die spätere, sonst presste ein
gespeichertes „square" jede Masonry-Kachel ins Quadrat. */
.feed-layout--masonry .post-card { aspect-ratio: auto !important; }
.feed-layout--masonry .post-card > img { height: auto !important; }
/* Karten-Variante — Bild oben, Text als geschlossene Karte darunter; gilt für
Grid und Masonry gleichermaßen. */
.feed-variant--cards .post-card {
aspect-ratio: auto !important;
background: var(--feed-card-bg) !important;
border: 1px solid var(--feed-border) !important;
box-shadow: 0 1px 2px rgba(31, 41, 51, .05), 0 6px 18px rgba(31, 41, 51, .06) !important;
}
.feed-variant--cards .post-card > img,
.feed-variant--cards .post-card__placeholder { aspect-ratio: 1 / 1 !important; height: auto !important; }
.feed-aspect--portrait.feed-variant--cards .post-card > img,
.feed-aspect--portrait.feed-variant--cards .post-card__placeholder { aspect-ratio: 4 / 5 !important; }
.feed-aspect--tall.feed-variant--cards .post-card > img,
.feed-aspect--tall.feed-variant--cards .post-card__placeholder { aspect-ratio: 9 / 16 !important; }
.feed-aspect--landscape.feed-variant--cards .post-card > img,
.feed-aspect--landscape.feed-variant--cards .post-card__placeholder { aspect-ratio: 16 / 9 !important; }
.feed-aspect--original.feed-variant--cards .post-card > img,
.feed-aspect--original.feed-variant--cards .post-card__placeholder { aspect-ratio: auto !important; }
/* Textblock unter dem Bild: das Datum als kleine, gedämpfte Vorzeile, danach
Autor und Text mit Luft. Umsortiert wird nur per Flex — die DOM-Reihenfolge
Autor/Text/Datum bleibt dieselbe wie beim Verlauf über dem Bild. */
.feed-variant--cards .post-card__scrim {
position: static !important;
display: flex !important;
flex-direction: column !important;
background: none !important;
color: var(--feed-text) !important;
padding: .9rem 1.1rem 1.05rem !important;
}
.feed-variant--cards .post-card__author { font-size: .78rem !important; margin-bottom: .25rem !important; }
.feed-variant--cards .post-card__caption {
-webkit-line-clamp: 3 !important;
font-size: .88rem !important;
line-height: 1.55 !important;
text-shadow: none !important;
}
.feed-variant--cards .post-card__date {
order: -1 !important;
margin: 0 0 .4rem !important;
color: var(--feed-muted) !important;
opacity: 1 !important;
font-size: .66rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
/* In der Karten-Variante bleibt JEDE Rückmeldung auf dem Bild: die Karte behält
ihren Ruheschatten, und die Überlagerung wird auf den Medienbereich begrenzt,
indem sie das aspect-ratio des Bildes nachbildet — in CSS kann sie die Höhe
des Geschwister-img nicht auslesen. */
.feed-variant--cards .post-card:hover {
transform: none !important;
box-shadow: 0 1px 2px rgba(31, 41, 51, .05), 0 6px 18px rgba(31, 41, 51, .06) !important;
}
.feed-variant--cards .post-card__hover {
inset: 0 0 auto 0 !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
.feed-aspect--portrait.feed-variant--cards .post-card__hover { aspect-ratio: 4 / 5 !important; }
.feed-aspect--tall.feed-variant--cards .post-card__hover { aspect-ratio: 9 / 16 !important; }
.feed-aspect--landscape.feed-variant--cards .post-card__hover { aspect-ratio: 16 / 9 !important; }
/* Das Originalverhältnis lässt sich nicht nachbilden: dort keine Überlagerung,
der Zoom funktioniert weiter. */
.feed-aspect--original.feed-variant--cards .post-card__hover { display: none !important; }
/* Beitragskarte (geteiltes Partial: views/partials/post_card.php) */
.post-card {
position: relative !important;
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: var(--feed-bg) !important;
border-radius: var(--feed-radius) !important;
overflow: hidden !important;
aspect-ratio: 1 / 1 !important;
cursor: pointer !important;
transition: box-shadow .18s ease, transform .18s ease !important;
/* Karten sind - bzw. -Elemente: Button-Resets fremder Themes
(etwa `button { white-space: nowrap }`) werden neutralisiert, damit Texte
umbrechen wie in der App. */
white-space: normal !important;
font-family: inherit !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.post-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 .75rem 1.5rem rgba(31, 41, 51, .16) !important;
}
/* Nahtlose Mosaike bleiben bündig: kein Anheben, die Rückmeldung kommt aus
Zoom und Pille. */
.feed-variant--seamless .post-card:hover { transform: none !important; box-shadow: none !important; }
.post-card:focus-visible { outline: 3px solid var(--feed-accent) !important; outline-offset: 2px !important; }
/* Karten sind (Lightbox) oder (Link-Modus); die Anker-Vorgaben
werden neutralisiert. */
a.post-card, a.post-row__media { text-decoration: none !important; color: inherit !important; }
/* Inline-Glyphen der Bootstrap Icons (bi_svg() in der App, inline SVG im
Plugin-Renderer), exakt wie die Icon-Schrift dimensioniert: Karten brauchen
damit auf Host-Seiten keine Schrift — eine herkunftsfremde bräuchte CORS. */
svg.bi {
width: 1em !important;
height: 1em !important;
fill: currentColor !important;
vertical-align: -.125em !important;
flex-shrink: 0 !important;
}
/* ⚠ Die Medien-Regeln nutzen bewusst den KIND-Kombinator: Host-Skripte (der
Emoji-Wandler von WordPress) schieben (Lightbox) müssen gleich aussehen. */
.post-row__source {
margin-left: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: .3rem !important;
color: var(--feed-accent) !important;
text-decoration: none !important;
font-weight: 600 !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
cursor: pointer !important;
}
.post-row__caption { color: var(--feed-text) !important; font-size: .95rem !important; line-height: 1.5 !important; white-space: pre-line !important; }
.post-row__author { font-weight: 600 !important; color: var(--feed-text) !important; }
/* Zeitstrahl-Variante: gestapelt, mit vollem Text. Nur das Medium bekommt eine
Höchstbreite, sonst würde es in Listen über die volle Breite aufgeblasen und
hart beschnitten. */
.feed-variant--timeline .post-row { flex-direction: column !important; gap: .75rem !important; }
.feed-variant--timeline .post-row__media {
flex-basis: auto !important;
width: 100% !important;
max-width: 560px !important;
aspect-ratio: 4 / 3 !important;
}
/* „Mehr laden" und Leerhinweis (geteilt von App und Plugin) */
.feed-loadmore-wrap { text-align: center !important; margin-top: 1.25rem !important; }
/* ⚠ Fallback-Werte Pflicht: der Button hängt in .feed-embed, aber außerhalb
von .feed-layout — eine ungültige Token-Referenz ließe border und color
komplett wegfallen und der Button stünde als nackter Text da. */
.feed-loadmore {
display: inline-block !important;
padding: .55rem 1.4rem !important;
border: 1px solid var(--feed-accent, #40b8a9) !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--feed-accent, #40b8a9) !important;
font: inherit !important;
font-weight: 600 !important;
cursor: pointer !important;
}
.feed-loadmore:hover { background: var(--feed-accent, #40b8a9) !important; color: #fff !important; }
.feed-loadmore[disabled] { opacity: .6 !important; cursor: wait !important; }
/* Button-Resets fremder Themes neutralisieren, wie bei .post-card. */
.feed-loadmore { text-transform: none !important; letter-spacing: normal !important; white-space: nowrap !important; }
/* Embed-Lightbox (.feedivo-lightbox) — die EINE abhängigkeitsfreie Lightbox von
WordPress-Plugin und Web-Widget; Markup und Verhalten stehen in
feed-frontend.js. Ab Desktop zwei Spalten: Medien links (2/3), scrollbare
Details rechts (1/3), mobil gestapelt.
⚠ Gegenstück ist die Bootstrap-Modal-Lightbox der App
(partials/post_lightbox.php und die #postLightbox-Regeln in app.css) —
Änderungen gehören in BEIDE. */
.feedivo-lightbox {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 24px !important;
background: rgba(15, 18, 22, .88) !important;
}
.feedivo-lightbox[hidden] { display: none !important; }
/* Sperrt das Scrollen im Hintergrund, solange die Lightbox offen ist (JS setzt
die Klasse an ) — gleiches Verhalten wie das Modal in der App. */
body.feedivo-lightbox-open { overflow: hidden !important; }
.feedivo-lightbox-inner {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: min(1140px, 94vw) !important;
max-height: 90vh !important;
background: var(--feed-card-bg, #fff) !important;
border-radius: 1rem !important;
overflow: hidden !important;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45) !important;
}
/* Medien-Spalte */
.feedivo-lightbox-media {
position: relative !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #0f1216 !important;
min-height: 0 !important;
}
.feedivo-lightbox-media > img,
.feedivo-lightbox-media > video {
width: 100% !important;
max-height: 55vh !important;
object-fit: contain !important;
display: block !important;
}
.feedivo-lightbox-media > img[hidden],
.feedivo-lightbox-media > video[hidden] { display: none !important; }
/* Embed (YouTube-Player): 16:9-iframe statt , per JS injiziert. */
.feedivo-lightbox-embed {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
max-height: 55vh !important;
}
.feedivo-lightbox-embed iframe {
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
.feedivo-lightbox-embed[hidden] { display: none !important; }
/* Blättern in der Galerie (Karussell-Beiträge) */
.feedivo-lightbox-nav {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2 !important;
width: 36px !important;
height: 36px !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, .55) !important;
color: #fff !important;
font-size: 20px !important;
line-height: 1 !important;
text-align: center !important;
cursor: pointer !important;
}
.feedivo-lightbox-nav[hidden] { display: none !important; }
.feedivo-lightbox-prev { left: 10px !important; }
.feedivo-lightbox-next { right: 10px !important; }
.feedivo-lightbox-count {
position: absolute !important;
bottom: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
padding: 2px 10px !important;
border-radius: 99px !important;
background: rgba(0, 0, 0, .55) !important;
color: #fff !important;
font-size: 12px !important;
}
.feedivo-lightbox-count[hidden] { display: none !important; }
/* Video: Vorschaubild mit zentriertem Abspielknopf, der das Original öffnet. */
.feedivo-lightbox-play {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 4.5rem !important;
height: 4.5rem !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, .55) !important;
color: #fff !important;
font-size: 2rem !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background-color .15s ease, transform .15s ease !important;
}
.feedivo-lightbox-play:hover {
background: rgba(0, 0, 0, .78) !important;
transform: translate(-50%, -50%) scale(1.06) !important;
color: #fff !important;
}
.feedivo-lightbox-play[hidden] { display: none !important; }
/* Detail-Spalte */
.feedivo-lightbox-details {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}
.feedivo-lightbox-details-inner {
display: flex !important;
flex-direction: column !important;
min-height: 100% !important;
padding: 1.25rem !important;
color: var(--feed-text, #1f2933) !important;
}
/* Plattform-Badge; die Markenfarbe kommt aus .badge-platform-* weiter unten. */
.feedivo-lightbox-badge {
align-self: flex-start !important;
display: inline-flex !important;
align-items: center !important;
gap: .3rem !important;
margin-bottom: .75rem !important;
padding: .3rem .6rem !important;
font-size: .75rem !important;
font-weight: 600 !important;
line-height: 1 !important;
color: #fff !important;
border-radius: 999px !important;
background: var(--feed-chip-bg, rgba(0, 0, 0, .55)) !important;
}
.feedivo-lightbox-badge[hidden] { display: none !important; }
.feedivo-lightbox-badge svg { width: 13px !important; height: 13px !important; }
.feedivo-lightbox-caption {
white-space: pre-line !important;
margin: 0 0 .75rem !important;
font-size: .9rem !important;
line-height: 1.5 !important;
}
.feedivo-lightbox-date {
margin-bottom: 1rem !important;
font-size: .8rem !important;
color: var(--feed-muted, #6b7785) !important;
}
/* Permalink-Button, nachgebildet nach .btn-outline-primary der App. */
.feedivo-lightbox-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .4rem !important;
margin-top: auto !important;
padding: .5rem .9rem !important;
border: 1px solid var(--feed-accent, #40b8a9) !important;
border-radius: .5rem !important;
color: var(--feed-accent, #40b8a9) !important;
font-size: .85rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background-color .15s ease, color .15s ease !important;
}
.feedivo-lightbox-link:hover { background: var(--feed-accent, #40b8a9) !important; color: #fff !important; }
.feedivo-lightbox-link[hidden] { display: none !important; }
/* Schließen-Button: weißer Kreis oben rechts, wie .btn-close in der App. */
.feedivo-lightbox-close {
position: absolute !important;
top: .6rem !important;
right: .6rem !important;
z-index: 3 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2rem !important;
height: 2rem !important;
border: 0 !important;
border-radius: 50% !important;
background: #fff !important;
color: #1f2933 !important;
font-size: 1.25rem !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3) !important;
}
/* Desktop: zwei Spalten mit einer gemeinsamen festen Höhe, nur die Details
scrollen. Das Verhältnis folgt dem Modal der App (col-md-8 / col-md-4). */
@media (min-width: 768px) {
.feedivo-lightbox-inner {
flex-direction: row !important;
height: min(88vh, 820px) !important;
max-height: none !important;
}
.feedivo-lightbox-media { flex: 2 1 0 !important; min-width: 0 !important; height: 100% !important; }
.feedivo-lightbox-media > img,
.feedivo-lightbox-media > video { height: 100% !important; max-height: none !important; }
.feedivo-lightbox-embed { max-height: 100% !important; }
.feedivo-lightbox-details { flex: 1 1 0 !important; min-width: 0 !important; height: 100% !important; }
}
/* Emoji-Schutz. Das Emoji-Skript von WordPress (aktiv auf WP-Host-Seiten UND
unter dem Plugin; es beobachtet auch DOM-Änderungen, erwischt also ebenso
Widget-HTML) ersetzt Emoji in Bildunterschriften durch