/** * Feedivo — Darstellung eines Feeds und seiner Beitragskarten. Das EINE * Feed-Stylesheet, geteilt von App, Widget und WordPress-Plugin. * * In sich geschlossen: nur --feed-*-Eigenschaften, keine externen Variablen. * Jede Deklaration trägt !important gegen Theme-CSS der Host-Seite; die * --feed-*-Eigenschaften bleiben ungeflaggt, damit spätere Regeln sie setzen. * Farbwerte stehen als Hex (#rrggbbaa), nie als rgba(): manche Optimierer * verwerfen eine Deklaration, die eine Farbfunktion mit !important kombiniert. * * Container: *

…

* Optional: .feed-corners--square, .feed-hover--off, .feed-peek--on, * data-feed-autoplay="off" und --feed-accent als Inline-Token. * Familien: grid · masonry · list · carousel. * * Jeder gestaltende Selektor kommt im ausgelieferten HTML vor; Zustandsklassen * tragen keine Gestaltung. Sonst verwirft ein „nicht benutztes CSS"-Durchlauf * die Regel, weil er am gerenderten HTML entscheidet. */ /* Gemeinsamer Rahmen aller Feed-Ausgaben, zugleich Query-Container: das Layout richtet sich nach seiner Breite, nicht nach dem Viewport. */ .feed-embed { container-type: inline-size !important; container-name: feedivo !important; } /* Jede Feed-Hülle braucht eine ausdrückliche Breite: als Flex-Item einer umbrechenden Spalten-Anordnung kollabiert width:auto auf nahezu null. Ohne !important, damit eine von der Host-Seite gesetzte Breite gewinnt; die gedoppelte Elementor-Klasse hält gegen dessen Basis-CSS. */ .feedivo-widget, .feedivo-feed, .wp-block-feedivo-feed, .elementor-widget.elementor-widget-feedivo-feed { width: 100%; box-sizing: border-box; } /* Reset gegen Theme-Stile für Eigenschaften, die die Regeln unten nicht selbst setzen (Bildrahmen, -radien, -schatten, box-sizing). Die Lightbox hängt an und braucht deshalb einen eigenen Geltungsbereich. */ .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, auch auf .feed-embed: der „Mehr laden"-Button hängt dort und damit außerhalb von .feed-layout. */ .feed-embed, .feed-layout { --feed-cols: 4; --feed-gap: 10px; /* Breite des angeschnittenen Streifens der nächsten Karussell-Kachel; 0 heißt, es passen genau --feed-cols Kacheln. Gesetzt von .feed-peek--on. */ --feed-peek: 0px; --feed-radius: 12px; --feed-bg: #e9eef0; --feed-card-bg: #fff; --feed-border: #1f29331a; --feed-text: #1f2933; --feed-muted: #6b7785; --feed-accent: #40b8a9; --feed-chip-bg: #0000008c; --feed-scrim: #1f2933d1; } .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; } .feed-corners--square { --feed-radius: 0px; } /* Spaltenzahl als Klasse statt als Inline-Token. Damit setzen die Breakpoint-Regeln literale Werte, und weder in repeat() noch im Divisor der Karussell-Formel steht je eine Rechnung: bei einer Spalte ergäbe „eine weniger" repeat(0) und eine Division durch null. */ .feed-cols--1 { --feed-cols: 1; } .feed-cols--2 { --feed-cols: 2; } .feed-cols--3 { --feed-cols: 3; } .feed-cols--4 { --feed-cols: 4; } .feed-cols--5 { --feed-cols: 5; } .feed-cols--6 { --feed-cols: 6; } /* Schmaler Container: höchstens zwei Spalten, ein Karussell zeigt genau eine Kachel. Tablet-breit: eine Spalte weniger, nie unter zwei. Ein einspaltiger Feed bleibt auf jeder Breite einspaltig. Die Karussell-Regel steht zuletzt, sie hat dieselbe Spezifität wie die Spaltenklassen. */ @container feedivo (max-width: 540px) { .feed-cols--3, .feed-cols--4, .feed-cols--5, .feed-cols--6 { --feed-cols: 2; } .feed-layout--carousel { --feed-cols: 1; } } @container feedivo (min-width: 540.02px) and (max-width: 820px) { .feed-cols--3 { --feed-cols: 2; } .feed-cols--4 { --feed-cols: 3; } .feed-cols--5 { --feed-cols: 4; } .feed-cols--6 { --feed-cols: 5; } } /* Grid */ .feed-layout--grid { display: grid !important; grid-template-columns: repeat(var(--feed-cols), minmax(0, 1fr)) !important; gap: var(--feed-gap) !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, damit die Spans aufgehen. */ .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; } /* Bei einer Spalte gibt es nichts zu verdoppeln — der Span erzwänge sonst eine zweite Spalte. Steht nach der Regel darüber, gleiche Spezifität. */ .feed-cols--1.feed-variant--mosaic .post-card:nth-child(7n + 1) { grid-column: span 1 !important; grid-row: span 1 !important; } /* Masonry über CSS-Grid; Kacheln behalten ihr natürliches Verhältnis. Ohne JS bleibt es ein gewöhnliches Raster, erst `is-masonry` 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; } /* Den Versatz schaltet JS ein, indem es grid-auto-rows und row-gap inline setzt — nicht über eine Klasse: die stünde beim Zuschnitt durch einen CSS-Optimierer nicht im HTML und die Regel wäre weg. */ .feed-layout--masonry .post-card { display: block !important; width: 100% !important; margin-bottom: 0 !important; aspect-ratio: auto !important; } .feed-layout--masonry .post-card > img { height: auto !important; } /* Nahtloses Masonry: Abstand über den Token nullen, nicht über gap. */ .feed-layout--masonry.feed-variant--seamless { --feed-gap: 0px; } .feed-layout--masonry.feed-variant--seamless .post-card { border-radius: 0 !important; } /* Karussell: Snap-Scroller ohne sichtbare Bildlaufleiste; Pfeile und Automatik setzt JS. */ .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-peek)) / var(--feed-cols)) !important; scroll-snap-align: start !important; } /* Anschnitt: die Kacheln werden um einen festen Betrag schmaler, sodass am rechten Rand ein Streifen der nächsten sichtbar bleibt. Der Betrag steckt im Token, nicht in einer eigenen flex-basis-Regel. */ .feed-layout.feed-peek--on { --feed-peek: 3.25rem; } .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: #1f29338c !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:not(:disabled) { background: #1f2933cc !important; } .feed-carousel-arrow[hidden] { display: none !important; } /* Am Anfang und Ende des Streifens: sichtbar, aber wirkungslos. */ .feed-carousel-arrow:disabled { opacity: .35 !important; cursor: default !important; } .feed-carousel-prev { left: .4rem !important; } .feed-carousel-next { right: .4rem !important; } /* Bühne: eine große Slide, gedeckelt auf 520px. Der Anschnitt wird von der gedeckelten Breite abgezogen, nicht mit ihr verglichen. */ .feed-layout--carousel.feed-variant--hero .post-card { flex-basis: calc(min(100%, 520px) - var(--feed-peek)) !important; } /* Karten-Variante im Karussell: kein Anheben beim Überfahren, der Zoom bleibt; Polsterung am Track für Haarlinien und Ruheschatten. */ .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 #1f29330d, 0 6px 18px #1f29330f !important; } /* Nahtloses Karussell: Abstand über den Token nullen, die Kachelbreite rechnet mit var(--feed-gap). */ .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. max-width: none am Bild, sonst verzerrt der 100-%-Reset die erzwungene Höhe. */ .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; } } /* 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; } .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. Diese Wiederholung steht nach den .feed-aspect--*-Regeln, damit sie bei gleicher Spezifität gewinnt. */ .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. */ .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 #1f29330d, 0 6px 18px #1f29330f !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: Datum als Vorzeile, danach Autor und Text. Umsortiert per Flex, die DOM-Reihenfolge bleibt Autor/Text/Datum. */ .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 die Rückmeldung auf dem Bild: die Karte behält ihren Ruheschatten, die Überlagerung bildet das aspect-ratio des Bildes nach und bleibt damit auf den Medienbereich begrenzt. */ .feed-variant--cards .post-card:hover { transform: none !important; box-shadow: 0 1px 2px #1f29330d, 0 6px 18px #1f29330f !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; } /* Im Originalverhältnis gibt es keine Überlagerung, der Zoom bleibt. */ .feed-aspect--original.feed-variant--cards .post-card__hover { display: none !important; } /* Masonry-Karten folgen dem natürlichen Bildverhältnis. Ohne feste Bildhöhe lässt sich die Überlagerung nicht auf das Bild begrenzen, sie entfällt. */ .feed-layout--masonry.feed-variant--cards .post-card > img { aspect-ratio: auto !important; } .feed-layout--masonry.feed-variant--cards .post-card__hover { display: none !important; } /* Beitragskarte */ .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