@charset "UTF-8"; /** * Block "Beitragsübersicht" - block styles. * * Declared as "style" in block.json, so WordPress loads it on the front end and * inside the editor canvas iframe. Compiled to style.css by the SCSS watcher. * * Taken from css/parts/blocks/_posttype.scss. Two things differ from the legacy * stylesheet: the alignment of the section headline, and the grid spacing, * which hangs on --block_posts__gridSpace instead of the theme wide gutter in * css/parts/_typography.scss - only then are the two sliders independent of * each other. With the customizer defaults the geometry is the same. * * @package nuevo * @subpackage blocks */ /** * nuevo Wordpress Theme * * @abstract * @author Bastian Schröder * @author Marvin Landau * @copyright Copyright (c) 2024, creative feat GmbH * @package cf-wp-theme-template * @version 2024-04-18 */ /* Der Seitenrand des Content-Containers - die einzige Stelle, an der die Zahl steht. %container setzt ihn, und wer bis an die Fensterkante laufen will, nimmt ihn mit @include nuevo-bleed wieder zurück. */ /** * nuevo Wordpress Theme - breakpoints for the front end and the editor canvas. * * Since WordPress 7.0 the editor renders inside an iframe, so a media query in * the canvas measures that iframe: the browser window minus the admin menu and * the editor sidebar. On the very same screen a block therefore reaches a * breakpoint in the canvas that the front end never reaches, and the editor * shows a narrower layout than the visitor will get - two columns where the * page has four, stacked fields where the form has a row. * * These mixins write the rule twice: once for the front end at the real * breakpoint, once for the canvas at the shifted one. The body class is the * switch - only the iframe body carries .editor-styles-wrapper - so neither * branch can reach the other side, and both carry the same specificity. * * Use them for every top level breakpoint of a block stylesheet: * * @include nuevo-bp-max( $std_middle_large_width ) { ... } * @include nuevo-bp-min( $std_small_width ) { ... } * * css/editor-blocks.scss takes the other route. It is loaded in the canvas * only, so it shifts the breakpoint variables themselves and sets the chrome to * zero afterwards - that covers the theme wide grid classes without writing a * second set of rules. * * @package nuevo */ /* Was neben dem Canvas steht, und zwar je nach Fensterbreite verschieden: WordPress klappt das Adminmenü unterhalb von 960 px selbst auf 36 px ein und blendet es unterhalb von 782 px ganz aus. Die Editor-Seitenleiste ist 280 px breit. Eine einzige Zahl kann deshalb nicht stimmen. Vorher stand hier 280 - nur die Seitenleiste, ohne das Menü -, und in der voreingestellten Ansicht (Menü ausgeklappt, Seitenleiste offen) schaltete der Canvas 160 px zu früh um: er zeigte zwei Spalten, wo die Seite noch vier hat. Genau das war im Backend zu sehen. Jetzt bekommt jeder Breakpoint das Chrom, das bei seiner Fensterbreite wirklich daneben steht. */ /* Floor for the shifted value. Without it the smallest breakpoint would land near 200 px and WordPress' own mobile preview (360 px) would no longer reach it - the canvas would show the tablet layout on a phone. */ /** * nuevo Wordpress Theme - die Reihe: Spalten, Umbruch, fließende Maße. * * Die Regel für alles, was Kinder nebeneinander stellt (siehe * docs/responsive.md): * * - Gemessen wird der **Container**, nicht der Bildschirm. Der Block erklärt * den Kasten um die Reihe zum Abfrage-Container (@include nuevo-row-scope), * die Reihe selbst rechnet darin. Ein Element kann sich nicht selbst * abfragen - deshalb sind es zwei Ebenen. * - **Keine Stufen.** Die eingestellte Spaltenzahl ist die Obergrenze, und * eine Spalte wird nie schmaler als die eingestellte Mindestbreite. Passen * nicht mehr alle nebeneinander, nimmt das Raster von selbst eine weg - * stufenlos, bei sechs Spalten früh, bei zwei Spalten spät. * - Die Maße fließen mit der Containerbreite (nuevo-fluid), es springt also * auch dazwischen nichts. * * Mindestbreite und Faktor sind einstellbar (Einstellungen → NUEVO → * Darstellung), je Block überschreibbar. Die Werte hier sind nur der Rückfall, * falls das Inline-CSS einmal nicht mitkommt. * * @package nuevo */ /* Der Kasten, dessen Breite zählt - der Elternteil der Reihe. */ /** * Bis an die Fensterkante, obwohl der Container einen Seitenrand hat. * * Über die ganze Fensterbreite behält der Content-Container seine 20 px, damit * Überschrift und Abstract nicht am Rand kleben (css/parts/_block.scss). Ein * Inhalt, der wie das Bild wirklich bis an die Kante laufen soll, nimmt sie * hier zurück - und rechnet den Seitenrand aus seiner Containerbreite heraus, * damit die Reihe darin weiter richtig teilt. */ /** * Die Reihe. * * Die Spur ist so breit wie der Anteil an der Reihe (100% geteilt durch die * eingestellte Spaltenzahl, ohne die Lücken), mindestens aber so breit wie die * Mindestbreite - und nie breiter als der Container selbst. "auto-fill" legt * so viele Spuren an, wie damit hineinpassen: bei weitem Container genau die * eingestellte Zahl, darunter weniger. Leere Spuren bleiben stehen, damit drei * Kästen in einer Vierer-Reihe so breit sind wie in einer vollen. * * Die Rechnung steht als Zeichenkette, weil Sass sonst versucht, min() und * max() selbst auszurechnen - mit 100% und px in einem Ausdruck geht das nicht. */ /** * Ein Maß, das mit der Breite des Containers fließt. * * Zwischen dem eingestellten Wert (Maximum, bei weitem Container) und dem * Anteil daraus, den der Faktor lässt (Minimum). Dazwischen wächst es mit der * Containerbreite - deshalb springt zwischen zwei Spaltenzahlen nichts mehr. * * @param {Number|String} $max Der eingestellte Wert, auch eine var()-Kette. * @param {Number} $share Anteil der Containerbreite in cqi. */ /** * Dasselbe für ein Maß, das als blanke Zahl in einer Variablen steht. * * Der Grund für die blanke Zahl: der fließende Anteil muss mit dem Wert * wachsen. Stand dort ein fester Anteil - früher 5vw -, erreichte ein großer * Wert sein Maximum nie: 400 px kamen bei 1440 px Fenster als 240 px an, weil * 5vw nur 72 px sind und der Faktor die Untergrenze bei 240 zieht. Mit der * Zahl lässt sich der Anteil je Einheit rechnen, und jeder Wert erreicht sein * Maximum an derselben Stelle: 0.0833vw je px sind 100 % bei 1200 px Fenster, * 0.1cqi je px sind 100 % bei 1000 px Container. * * @param {String} $var Name der Variablen. * @param {Number} $fallback Zahl ohne Einheit, falls sie nicht gesetzt ist. * @param {Number} $share Anteil je Einheit, etwa 0.0833vw oder 0.1cqi. */ /** * Das Abstract eines Blocks - ein Absatz hinter der Überschrift. * * Nur ein Mixin, keine Ausgabe: die Datei wird von den Stylesheets der neun * Blöcke eingebunden, die ein Abstract tragen können, und jedes von ihnen * landet in einer eigenen style.css. * * Der Absatz sieht aus wie Fließtext überall sonst im Theme - hier steht nur, * wo er steht: zwischen Überschrift und Inhalt des Blocks, über die volle * Inhaltsbreite. Im Canvas zeichnet der Editor dasselbe Element an derselben * Stelle, eine eigene Regel für die Bearbeitung braucht es deshalb nicht. * * @package nuevo * @subpackage css */ /* Aufzurufen im Inhaltscontainer des Blocks. $slug ist der Blockname, wie ihn der Customizer für seinen Rasterabstand führt (--block___gridSpace). */ /** * Die Ausrichtung der Abschnittsüberschrift - und des Abstracts darunter. * * Nur ein Mixin, keine Ausgabe: die Datei wird von den Stylesheets der Blöcke * eingebunden, die eine Überschrift mit Ausrichtung tragen, und jedes von ihnen * landet in einer eigenen style.css. * * Warum die Überschriften unmittelbar angesprochen werden: css/parts/_block.scss * zentriert jedes .block_headline, und der Customizer schreibt sein eigenes * "body h2 { text-align: … }" in den Kopf der Seite - eine Angabe an der * Überschrift selbst, die kein geerbter Wert schlägt. Deshalb h1-h6 mit * !important, so wie es der Bannerblock schon immer tat. * * Der Absatz darunter braucht das nicht: an ihn schreibt der Customizer nichts * Eigenes, der geerbte Wert genügt. * * Die Regeln standen wortgleich in zehn Blöcken; ein elfter (Buttons) schrieb * die Klasse, hatte aber gar keine Regel dazu - dort blieb die Einstellung ohne * Wirkung. * * @package nuevo * @subpackage css */ /* Aufzurufen im Abschnitt des Blocks. */ /** * Die Breite eines Abschnitts - und die Breite, auf die sie sich bezieht. * * Zwei Dinge stecken hier drin: * * 1. --nuevo-content-max: die Breite des Contentbereichs. Auf der Seite sind * das die $std_extra_large_width des Themes; im Canvas des Editors ist der * Contentbereich schmaler, weil Adminmenü und Seitenleiste danebenstehen - * dort gilt der verschobene Wert, derselbe, den auch %container und die * Breakpoints im Canvas benutzen (siehe css/parts/_breakpoints.scss). * * Gesetzt wird sie je einmal pro Welt: in css/default.scss für die Seite, in * css/editor-blocks.scss für den Canvas. Ein Blockstylesheet wird nur einmal * kompiliert und in beiden Welten geladen; es kann den Unterschied deshalb * nicht selbst kennen und liest ihn hier ab. * * Ohne diese Variable rechnete jeder Block im Canvas gegen die 1598 px der * Seite, während der Container daneben schon bei 1158 px endete: eine Breite * von 70 % sah dort aus wie 97 %, und ab einem gewissen Fenster gar nicht * mehr. Genau das war im Backend zu sehen. * * 2. --nuevo-content-width: der Anteil, den der Regler "Breite (%)" schreibt - * siehe nuevo_content_width_style() in src/functions/helpers.php und * contentWidthStyle() in js/nuevo-block-editor.js. Nicht gesetzt heißt volle * Breite. * * @package nuevo */ /* Die Breite des Contentbereichs, wie sie in dieser Welt gilt. Der zweite Wert ist der Rückfall für den Fall, dass keine der beiden Dateien geladen ist. */ /** * Die max-width eines Abschnitts. * * @param {Number} $fallback Anteil ohne eigene Wahl - 1, außer wo ein Block * von Haus aus schmaler ist (ein einzelnes Video). */ /** * Die Ausrichtung einer Buttonreihe. * * Acht Blöcke haben eine Buttonliste, und jeder legt seine Reihe dort ab, wo * sie in seinem Zusammenhang hingehört: mittig im CTA, im Textfluss in einer * Box, der Inhaltsausrichtung folgend im Bannerelement. Das bleibt die Vorgabe. * Eine ausdrückliche Wahl schreibt eine Klasse an die Reihe * (nuevo_button_align_class() in src/functions/helpers.php), und die übersetzt * dieses Mixin in das, was Ausrichtung an dieser Stelle heißt. * * Warum eine Eigenschaft als Parameter: eine Reihe richtet sich mit * justify-content aus, eine Spalte - der Teaser stapelt seine Buttons - mit * align-items. Dieselben drei Klassen, zwei Bedeutungen; der Block sagt, welche * seine ist. * * @package nuevo */ /* * Und derselbe Fall eine Ebene höher. * * Steht die Reihe in einer Spalte - im Bannerelement, in einer Teaserkachel -, * ist sie nur so breit wie ihre Buttons: innen bleibt kein Platz, den * justify-content verteilen könnte. Verschoben wird dann die Reihe selbst, und * dafür ist align-self zuständig. */ /** * Was mit einem Wort geschieht, das nicht in seine Zeile passt. * * Zwei verschiedene Dinge, die oft verwechselt werden: * * "overflow-wrap: break-word" ist die Notbremse. Sie greift erst, wenn ein Wort * für seine Zeile zu lang ist, und bricht es dann irgendwo - ohne Trennstrich, * ohne Rücksicht auf Silben. Solange nichts überläuft, ist sie nicht zu sehen; * deshalb steht sie theme-weit in der Basistypografie * (css/parts/_typography.scss). Die Eigenschaft wird vererbt, eine Deklaration * genügt. * * "hyphens: auto" ist die Worttrennung. Der Browser trennt nach dem Wörterbuch * der Dokumentsprache - in src/partials/html-header.php -, mit * Trennstrich und an erlaubten Stellen, und zwar auch dort, wo nichts * überliefe. Das ist eine typografische Entscheidung: in einem schmalen Kasten * hält sie den Flattersatz zusammen, über die volle Contentbreite sähe sie nach * Zeitungssatz aus. Sie gilt deshalb nur dort, wo eine Spalte schmal ist - * Boxen, Teaser, Textspalten, FAQ, CTA, Bannerebene, Kacheln. * * @package nuevo */ section.block.nuevo--native.nuevo--block-posts { /* Die Ausrichtung der Überschrift - siehe css/parts/_headline-align.scss. */ } section.block.nuevo--native.nuevo--block-posts .block_headline.align-left { text-align: left; } section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h1, section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h2, section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h3, section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h4, section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h5, section.block.nuevo--native.nuevo--block-posts .block_headline.align-left h6 { text-align: left !important; } section.block.nuevo--native.nuevo--block-posts .block_headline.align-center { text-align: center; } section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h1, section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h2, section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h3, section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h4, section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h5, section.block.nuevo--native.nuevo--block-posts .block_headline.align-center h6 { text-align: center !important; } section.block.nuevo--native.nuevo--block-posts .block_headline.align-right { text-align: right; } section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h1, section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h2, section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h3, section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h4, section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h5, section.block.nuevo--native.nuevo--block-posts .block_headline.align-right h6 { text-align: right !important; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container { /* Die Ausrichtung der Buttonreihe des Blocks. Der Nachladeknopf trägt seine eigene Klasse (.center) und bleibt davon unberührt. */ /* Die Breite des Abschnitts - siehe css/parts/_content-width.scss. */ max-width: calc(var(--nuevo-content-max, 1598px) * var(--nuevo-content-width, 1)); /* Die Breite, nach der sich die Reihe richtet - siehe css/parts/_responsive.scss. */ container-type: inline-size; /* Filters, laid out like a row of buttons: every filter is as wide as its own content - for a select that is its longest option - plus the padding of the control, and they stand next to each other with one gap between them, wrapping when the row is full. The grid classes of the theme are gone from the markup for that reason; .filter-item is the block's own class, so the archive templates, which share .posttype-filter from css/parts/_post-types.scss, keep the three column layout they have always had. */ /* * Seitenschaltung. * * Die Regeln standen bisher nur in css/parts/_post-types.scss und damit * nur in css/default.css - im Editor-Canvas, der css/editor-blocks.css * lädt, gab es sie nicht: die Vorschau zeigte dort eine nackte Liste * "1 2 3" untereinander. Der native Block bringt seine Auszeichnung * deshalb selbst mit, wie jeden anderen Teil seines Markups auch. Die * Archivseiten behalten ihre Regeln aus dem Theme-Stylesheet. * * Dieselben Klassen in beiden Welten: render_pagination() schreibt * , die Vorschau in * src/editor.js dieselbe Klasse an einem . */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .button-container.nuevo--btn-left { justify-content: flex-start; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .button-container.nuevo--btn-center { justify-content: center; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .button-container.nuevo--btn-right { justify-content: flex-end; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter { /* Abstand zu den Beiträgen. Steht so auch in css/parts/_post-types.scss, das aber nur im Frontend geladen wird - im Canvas klebten die Filter sonst an der ersten Reihe. */ margin-bottom: 40px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--block_posts__filterGap, 20px); margin: 0; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item { width: auto; /* Die Beschriftung steht über dem Feld. Dieselbe Regel steht in css/parts/_post-types.scss, die aber nur im Frontend geladen wird - im Canvas stünde die Beschriftung sonst daneben. */ max-width: 100%; padding: 0; box-sizing: border-box; /* Both controls size themselves: a select to its longest option, a text field to its size attribute. _forms.scss puts them on 100%, which would stretch every filter to the width of the row. */ /* Room for the arrow of the select, which sits on top of the text as an absolutely positioned square. */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item > .filter-title { display: block; margin-bottom: 10px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item > .select-wrapper { display: inline-flex; width: auto; max-width: 100%; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item select, section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item input[type=search] { width: auto; max-width: 100%; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-filter > .gridWrapper > .filter-item select { padding-right: var(--forms__input__height, 40px); } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts { /* Aspect ratio of the entry images. Only the column layout crops them; the list layout fills a fixed area, masonry shows the whole picture. 16:9 is the default and the value the legacy block wrote. */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper { /* Die Reihe - Spuren aus der Spaltenzahl und der Mindestbreite, Abstand fließend. Masonry bleibt eine Mehrspaltigkeit von CSS und trägt die Klasse nicht (render.php). */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper.nuevo--row { display: grid; gap: var(--nuevo-rowGapY, 0px) var(--nuevo-rowGapX, 0px); grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--nuevo-colMin, 260px), calc((100% - (var(--nuevo-columns, 1) - 1) * var(--nuevo-rowGapX, 0px)) / var(--nuevo-columns, 1)))), 1fr)); margin: 0; --nuevo-rowGapX: clamp(var(--nuevo-rowGap, 30) * var(--nuevo-fluidFactor, 0.6) * 1px, var(--nuevo-rowGap, 30) * 0.1cqi, var(--nuevo-rowGap, 30) * 1px); --nuevo-rowGapY: clamp(var(--nuevo-rowGap, 30) * var(--nuevo-fluidFactor, 0.6) * 1px, var(--nuevo-rowGap, 30) * 0.1cqi, var(--nuevo-rowGap, 30) * 1px); } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper.nuevo--row > * { /* * Ein Kind nimmt eine Spur ein. Mehr als eine (--nuevo-span) ist für die * Fußzeile gedacht und gilt nur, solange die Reihe so viele Spuren hat - * siehe docs/responsive.md. */ grid-column: span var(--nuevo-span, 1); width: auto; padding: 0; /* * Kein automatischer Rand. Im Canvas gibt der Editor jedem Block * "margin-inline: auto" (.editor-styles-wrapper :where(:not(.is-layout-flex, * .is-layout-grid)) > .wp-block); an einem Rasterfeld heißt das nicht * "zentriert", sondern "so breit wie der Inhalt" - die Box stand dann * schmaler mitten in ihrer Spalte, während sie auf der Seite die ganze * füllte. Der lange Selektor des Blockstylesheets schlägt die Regel des * Editors. */ margin: 0; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell { box-sizing: border-box; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; /* Die Ecken stehen an .boxBg (css/parts/_block.scss). */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-image { order: 1; /* Focal point of every entry image. Without a choice this is the centre - the same point object-position: center named in the legacy stylesheet. */ object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%); } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-content { /* Eine Kachel ist schmal: hier wird getrennt - siehe css/parts/_text-wrap.scss. */ /* Safari braucht das Präfix bis heute. */ -webkit-hyphens: auto; hyphens: auto; /* Und die Notbremse dazu: nicht jedes lange Wort hat eine Trennstelle, die passt - eine URL zum Beispiel hat gar keine. */ overflow-wrap: break-word; /* * Damit beides überhaupt zum Zug kommt. * * Ein Element in einem Raster oder in einer Flexzeile ist von Haus aus * mindestens so breit wie sein breitester Inhalt ("min-width: auto"). Ein * langes Wort machte damit die Spalte breiter, statt selbst umzubrechen - * die Regel darüber stand da und tat nichts. Genau so war es im Videoblock * zu sehen. Wo das Element kein Raster- und kein Flexelement ist, ändert die * Zeile nichts. */ min-width: 0; order: 2; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; box-sizing: border-box; width: 100%; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-content > .post-content-inner > .post-head { font-size: 0.8em; text-transform: uppercase; margin-bottom: 20px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-content > .post-content-inner > .post-head > .post-date { display: block; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-content > .post-content-inner > .post-head > .post-categories { display: block; margin-top: 10px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts > .gridWrapper > .nuevo--cell > .nuevo--card .post-content .button { width: fit-content; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns] > .gridWrapper > .nuevo--cell > .nuevo--card { height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: space-between; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns] > .gridWrapper > .nuevo--cell > .nuevo--card .post-image { width: 100%; object-fit: cover; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns] { /* 4_5 wird im Editor nicht mehr angeboten, bleibt aber gültig. */ } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-original .post-image { aspect-ratio: auto; object-fit: contain; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-21_9 .post-image { aspect-ratio: 21/9; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-16_9 .post-image { aspect-ratio: 16/9; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-3_2 .post-image { aspect-ratio: 3/2; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-4_3 .post-image { aspect-ratio: 4/3; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-1_1 .post-image { aspect-ratio: 1/1; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-3_4 .post-image { aspect-ratio: 3/4; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-2_3 .post-image { aspect-ratio: 2/3; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-4_5 .post-image { aspect-ratio: 4/5; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=columns].ratio-9_16 .post-image { aspect-ratio: 9/16; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=list] > .gridWrapper > .nuevo--cell > .nuevo--card.hasImage { padding-left: 30%; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=list] > .gridWrapper > .nuevo--cell > .nuevo--card > .post-image { position: absolute; left: 0; top: 0; bottom: 0; object-fit: cover; object-position: center; width: 30%; height: 100%; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=masonry] > .gridWrapper { display: block; column-count: 2; column-gap: 0; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=masonry] > .gridWrapper > .nuevo--cell > .nuevo--card > .post-image { width: 100%; object-fit: contain; object-position: center; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list { display: flex; align-items: center; justify-content: center; margin-top: 40px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item { margin: 0 5px; padding: 0; width: 40px; height: 40px; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item:before { display: none; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number { display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; text-align: center; letter-spacing: 0 !important; background: var(--colorscheme__buttonBg, var(--defaultcolor__buttonBg, #f0f0f0)) !important; border-color: var(--colorscheme__buttonBorder, var(--defaultcolor__buttonBorder, #f0f0f0)) !important; color: var(--colorscheme__buttonText, var(--defaultcolor__buttonText, #000000)) !important; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.current { background: var(--colorscheme__buttonHoverBg, var(--defaultcolor__buttonHoverBg, #FFFFFF)) !important; border-color: var(--colorscheme__buttonHoverBorder, var(--defaultcolor__buttonHoverBorder, #000000)) !important; color: var(--colorscheme__buttonHoverText, var(--defaultcolor__buttonHoverText, #000000)) !important; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.prev, section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.next { position: relative; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.prev:after, section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.next:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--colorscheme__buttonText, var(--defaultcolor__buttonText, #000000)) !important; mask-image: url(../../../css/img/arrow_down.svg); mask-repeat: no-repeat; mask-size: 50%; mask-position: center; } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.prev { transform: rotate(90deg); } section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container .pagination > .pagination-list > .pagination-item > .pagination-number.next { transform: rotate(270deg); } /* --------------------------------- std_middle_small_width [ms] -------------------------------- */ @media screen and (max-width: 786px) { body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=masonry] > .gridWrapper { column-count: 1; } } @media screen and (max-width: 470px) { body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-posts > .posttype_wrapper > .content-container > .posttype-posts[layout=masonry] > .gridWrapper { column-count: 1; } } /* ---------------------------------------- Abstract -------------------------------------------- */ /* Ein Absatz hinter der Überschrift, aus dem Attribut nuevo_abstract. Er steht im Frontend und im Canvas an derselben Stelle im selben Element - deshalb genügt eine Regel für beide Welten. */ section.block.nuevo--native.nuevo--block-posts .content-container > .block_abstract { margin-top: 0; /* * Der Abstand nach unten folgt dem Rasterabstand des Blocks - aber nicht * bis auf null. * * Eine Galerie ohne Abstand zwischen den Bildern ist eine gültige Wahl; * ein Vorspann, der die Bilder darunter berührt, ist keine. Der * Rasterabstand meint den Abstand der Kacheln zueinander, nicht den des * Textes zum Bildblock, und teilte sich hier nur die Variable. Deshalb ein * Mindestmaß. */ margin-bottom: max(20px, var(--block_posts__gridSpace, var(--blocks__gridSpace, 30px))); /* * Die Ausrichtung folgt der Überschrift: derselbe Wert, dieselbe Klasse. * Der Absatz gehört zur Überschrift, und eine linksbündige Überschrift über * einem mittigen Vorspann sieht nach Versehen aus. * * Nur eine ausdrückliche Wahl schreibt die Klasse - siehe * nuevo_abstract_paragraph() in src/functions/helpers.php. Ohne sie bleibt * es bei der Ausrichtung des Fließtexts aus dem Customizer, denn welche das * für die Überschrift ist, weiss hier niemand. */ } section.block.nuevo--native.nuevo--block-posts .content-container > .block_abstract.align-left { text-align: left; } section.block.nuevo--native.nuevo--block-posts .content-container > .block_abstract.align-center { text-align: center; } section.block.nuevo--native.nuevo--block-posts .content-container > .block_abstract.align-right { text-align: right; } /*# sourceMappingURL=style.css.map */