@charset "UTF-8"; /** * Block "Text & Bild" - 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. * * @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. */ /** * Die Seitenverhältnisse, einmal. * * Fünf Blockstylesheets schrieben dieselbe Liste aus acht bis neun Zeilen, * jedes ein wenig anders: das eine mit `object-fit: cover`, das andere ohne, * das dritte am Kindelement, und zwei führten zusätzlich `4_5`. Eine neue Form * wäre damit an fünf Stellen nachzutragen gewesen. * * Die Namen sind dieselben, die die `block.json` speichert und * js/nuevo-block-editor.js zur Auswahl stellt: `ratio-16_9` und so fort. * * @package nuevo */ /* Name der Klasse => Seitenverhältnis. Die Reihenfolge ist die der Auswahl im Editor, und sie ist zugleich die Reihenfolge im Kompilat - wer sie ändert, ändert, welche Regel bei gleichem Gewicht gewinnt. */ /* Als Zeichenkette, nicht als Bruch: sass rechnete "21/9" sonst aus und schriebe 2.3333333333 ins Stylesheet. Dasselbe Ergebnis im Browser, aber niemand liest dort noch, welche Form gemeint ist. */ /** * Eine Regel je Seitenverhältnis. * * @param {List} $namen Welche Formen; leer heisst alle ausser 4_5, das nur * zwei Blöcke führen. * @param {String} $ziel Kindelement, das das Verhältnis bekommt - ohne * Angabe trägt es die Klasse selbst. * @param {Bool} $deckend Zusätzlich `object-fit: cover`, wo ein Bild in die * gewählte Form geschnitten wird statt hineinzupassen. */ /** * Die Raster einer Galerie - Slider, Spalten, Masonry, Reihen. * * Nur Mixins, keine Ausgabe. Das Markup einer Galerie steht seit dem Block * "Text & Medien" an zwei Stellen: im Galerieblock unter dessen * Inhaltscontainer, und daneben in der Medienspalte von Text & Medien. Vorher * hingen diese Regeln fest am Abschnitt des Galerieblocks - in Text & Medien * sah deshalb jede Darstellung gleich aus, ein schlichter Stapel. * * @package nuevo * @subpackage css */ /* Die Spaltenzahl je Breite. Die Stufen stehen in einem eigenen Mixin, weil die Medienabfragen nur auf oberster Ebene funktionieren - der Aufrufer gibt den Selektor mit, unter dem sie gelten sollen. */ /* Aufzurufen an dem Element, in dem die .gallery-frame steckt. */ /** * 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. */ /** * Der Zug eines Rasters nach aussen. * * Die Datei gibt selbst nichts aus - sie wird in mehrere Blockstylesheets * eingebunden und würde sonst ihre Regeln in jedes davon schreiben. * * @package nuevo */ /* * Der Zug eines Rasters nach aussen - gedeckelt auf den Container. * * Ein mehrspaltiges Raster gibt jeder Spalte den halben Rasterabstand als * Innenabstand und zieht den Wrapper um denselben Betrag nach aussen. So endet * der Inhalt der äusseren Spalten bündig mit dem Container, und dazwischen * steht der volle Abstand. * * Bis zu 40 px Rasterabstand geht das auf: der Zug bleibt bei höchstens 20 px, * und so viel Innenabstand hat %container (css/parts/_placeholders.scss). Ab * 45 px zieht das Raster **aus dem Container heraus** - und weil rechts vom * Dokument kein Rand ist, lässt sich die ganze Seite seitlich schieben. * Gemessen an einem Boxenblock mit 80 px: 20 px Überhang je Seite, auf dem * Schirm wie auf dem Handy. * * max() deckelt den waagerechten Zug deshalb bei -20 px. Unter 40 px * Rasterabstand ändert sich dadurch nichts; darüber rücken die äusseren * Spalten um die Differenz nach innen, statt überzustehen. Senkrecht bleibt * der Zug ungedeckelt - nach oben und unten begrenzt kein Container. * * @param $x Rasterabstand waagerecht. * @param $y Rasterabstand senkrecht, sonst derselbe. */ /* * Das Seitenverhältnis der Medienspalte. * * Video und Einbettung bringen es mit: sie füllen die Spalte in der Breite und * richten die Höhe danach. Nur im Viewportlayout gilt das nicht - dort hat die * Spalte die Höhe der Textspalte, und das Medium füllt sie. Deshalb steht die * Liste hier und wird zweimal eingebunden: für alle anderen Layouts, und im * Viewportlayout wieder, sobald die Spalten untereinander stehen. */ section.block.nuevo--native.nuevo--block-text-media { overflow: hidden; /* * Geometry of the page content, for the viewport layout: only the image runs * to the edge there, the text column stays inside the content width like * every other block. The values mirror %container in * css/parts/_placeholders.scss. A child theme that changes the padding of * .content-container says so here - one value, or one per side when the two * differ: * * section.block.nuevo--block-text-media { * --nuevo-contentPadding-left: 60px; * --nuevo-contentPadding-right: 80px; * } */ --nuevo-contentWidth: var(--nuevo-content-max, 1598px); --nuevo-contentPadding: 20px; /* The background layout already fills the section with the block image, so an additional background image would never be visible. The editor no longer offers the field there; this catches stored content where both are set. */ } section.block.nuevo--native.nuevo--block-text-media:has(> .text-image_wrapper[layout=background]) > .block-background-image { display: none; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper { /* In the viewport layout the text column's padding is the only thing separating text and image. The grid spacing therefore applies to the side the image is on; the opposite side faces the edge and keeps the outer value. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] { padding: 0; position: relative; overflow: hidden; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container { /* The container would otherwise cap the width and add side padding. Here the image runs to the edge; all spacing lives in the padding of the text column, so the image column keeps its full height. */ max-width: none; padding: 0; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper { align-items: stretch; margin: 0; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid { height: auto; padding: 0; /* align-self beats the row's align-items. Without it a chosen vertical alignment would cancel the stretch and the image column would lose its height - its only content is absolutely positioned. */ align-self: stretch; /* Flex instead of a percentage chain: height:100% on .gc-image only resolves against a definite parent height, and .grid is auto. */ display: flex; align-items: stretch; /* * How far the column reaches past the content width, expressed * through the column itself - no viewport unit, so the scrollbar * does not shift it. * * The column is the fraction f of the section, the gap beside the * content is (section - contentWidth) / 2 + the container padding. * Substituting section = column / f gives * * gap = column / (2f) - contentWidth / 2 + padding * * and 1 / (2f) is the factor below: 100% for a half column, 75% for * two thirds, 150% for one third. The result is the same number for * every division - exactly the distance the text of any other block * keeps from the edge. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid > .grid-content { width: 100%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid > .grid-content.gc-text { --nuevo-columnFactor: 100%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid.grid-ms-2-3 > .grid-content.gc-text { --nuevo-columnFactor: 75%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid.grid-ms-1-3 > .grid-content.gc-text { --nuevo-columnFactor: 150%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-text { /* Three separate distances: block spacing top and bottom, grid spacing towards the image (set per direction below), and the gap beside the content width towards the outer edge - the latter untouched by either slider. On a screen narrower than the content width there is no gap left, and the padding of the content container remains: the text then stands exactly where the text of every other block stands. Die beiden äußeren Abstände stehen in je einer Variablen: über die ganze Fensterbreite gibt es keine Contentbreite, an der sich die Spalte ausrichten könnte - dort wird die Rechnung am Ende dieser Datei durch den schlichten Seitenrand ersetzt. */ --nuevo-textOuter-left: max( var(--nuevo-contentPadding-left, var(--nuevo-contentPadding, 20px)), calc(var(--nuevo-columnFactor, 100%) - var(--nuevo-contentWidth, 1598px) / 2 + var(--nuevo-contentPadding-left, var(--nuevo-contentPadding, 20px))) ); --nuevo-textOuter-right: max( var(--nuevo-contentPadding-right, var(--nuevo-contentPadding, 20px)), calc(var(--nuevo-columnFactor, 100%) - var(--nuevo-contentWidth, 1598px) / 2 + var(--nuevo-contentPadding-right, var(--nuevo-contentPadding, 20px))) ); padding-top: var(--blocks__gridSpace, 30px) !important; padding-bottom: var(--blocks__gridSpace, 30px) !important; padding-left: var(--nuevo-textOuter-left) !important; padding-right: var(--nuevo-textOuter-right) !important; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image { position: relative; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap { position: absolute; top: 0; bottom: 0; /* Without left/right the box has no definite width and object-fit, hence object-position, stays without effect. */ left: 0; right: 0; z-index: 1; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap .img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%); border-radius: 0 !important; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background] { /* Dieselbe Rechnung wie für jeden nativen Abschnitt, siehe css/parts/_block.scss - hier noch einmal, weil dieses Layout seinen eigenen Abstand mitbringt. */ padding: clamp(var(--nuevo-blockPadding, 60) * var(--nuevo-fluidFactor, 0.6) * 1px, var(--nuevo-blockPadding, 60) * 0.0833vw, var(--nuevo-blockPadding, 60) * 1px) 0; position: relative; overflow: hidden; /* * Das Overlay: ein Verlauf von durchsichtig zur Farbe des Schemas, damit * der Text über dem Bild lesbar bleibt. Es lief hier fest mit - dieselbe * Farbe, dieselbe Deckkraft, ohne Einstellung. Jetzt gehört es dem * Abschnitt Bild: Farbe und Deckkraft kommen als Variablen, und wer es * im Dreipunktmenü abwählt, bekommt gar keines. Die Werte hier sind die, * die es immer hatte. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background].hasOverlay:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: var(--nuevo-overlay-opacity, 0.75); z-index: 2; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background].hasOverlay[direction=image-text]:before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--nuevo-overlay-color, var(--colorscheme__background, var(--defaultcolor__background, #ffffff))) 100%); } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background].hasOverlay[direction=text-image]:before { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--nuevo-overlay-color, var(--colorscheme__background, var(--defaultcolor__background, #ffffff))) 100%); } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background] > .image-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; overflow: hidden; /* Bild und Video füllen denselben Ausschnitt: beide bringen ihr eigenes Seitenverhältnis mit, beide werden auf die Fläche zugeschnitten, und der Bildmittelpunkt entscheidet, welcher Teil dabei stehen bleibt. Im Canvas ist das Standbild von YouTube auch nur ein und läuft über dieselbe Regel. */ /* * YouTube im Hintergrund - auf der Seite, nicht im Canvas. * * Ein iframe lässt sich nicht zuschneiden: object-fit gilt für Bilder * und Videos, nicht für eine fremde Seite. Der Player legt schwarze * Balken an, sobald sein 16:9 nicht zur Fläche passt. Deshalb wird der * Rahmen selbst auf 16:9 der Viewportbreite gebracht - der Abschnitt * läuft ohnehin über die volle Breite -, mittig gestellt und überstehen * gelassen. Ein Bildmittelpunkt hat hier keine Wirkung: der Ausschnitt * ist immer die Mitte. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background] > .image-container > img, section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background] > .image-container > video { display: block; width: 100vw; height: 100%; object-fit: cover; object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%); } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=background] > .image-container.is-youtube > iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; border: 0; /* Der Klick gehört dem Abschnitt, nicht dem Player: im Hintergrund gibt es nichts zu bedienen. */ pointer-events: none; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container { z-index: 3; /* Die Breite des Abschnitts - siehe css/parts/_content-width.scss. */ max-width: calc(var(--nuevo-content-max, 1598px) * var(--nuevo-content-width, 1)); } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper { margin: calc(var(--block_text_media__gridSpace, var(--blocks__gridSpace, 30px)) / -2) max(var(--block_text_media__gridSpace, var(--blocks__gridSpace, 30px)) / -2, -20px); align-items: center; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid { padding: calc(var(--block_text_media__gridSpace, var(--blocks__gridSpace, 30px)) / 2); min-height: 100%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content { height: 100%; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text { padding: 0; box-sizing: border-box; /* Long compounds and URLs would otherwise widen the column; with overflow:hidden in the viewport layout the text simply disappears. hyphens needs the document language, overflow-wrap is the fallback when no hyphenation point fits. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text h2, section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text .text { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text h2 { margin: 0; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport][direction=image-text] > .content-container > .gridWrapper > .grid .gc-text { padding-left: var(--block_text_media__gridSpace, var(--blocks__gridSpace, 30px)) !important; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport][direction=text-image] > .content-container > .gridWrapper > .grid .gc-text { padding-right: var(--block_text_media__gridSpace, var(--blocks__gridSpace, 30px)) !important; } /* --------------------------------- std_extra_large_width [xl] --------------------------------- */ /* ------------------------------------ std_large_width [lg] ------------------------------------ */ /* --------------------------------- std_middle_large_width [md] -------------------------------- */ /* --------------------------------- std_middle_small_width [ms] -------------------------------- */ @media screen and (max-width: 786px) { body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper { /* Stacked columns have no row height to stretch into, so the image goes back into the flow and is shown complete instead of cropped. */ /* Für die anderen drei Medien steht dasselbe am Ende der Datei - dort, wo auch ihr Verhalten im Viewportlayout steht. */ /* * Stacked, both columns fill the section: the grid classes no longer * apply, so the factor of the viewport layout has to follow - one full * column means 1 / (2 x 1) = 50%. Without it the formula would keep * calculating with a third or two thirds of the width and push the text * inwards. */ /* * Gestapelt steht das Medium **immer unter dem Text**. * * Nicht die gewählte Reihenfolge entscheidet das, sondern die Lesbarkeit: * auf einem Handy ist der Text die Ansage und das Medium die Illustration * dazu. Steht es davor, scrollt der Leser erst an einer Karte oder einem * Video vorbei, bevor er erfährt, worum es geht. * * Vorher stand hier ein ausnahmsloses column-reverse mit dem Kommentar * "Image above, text below, regardless of the chosen order" - das war es * aber nur in der Hälfte der Fälle: column-reverse dreht die **DOM**- * Reihenfolge um, und die ist je Richtung eine andere. Bei * direction="text-image" (Text zuerst im Markup) kam dadurch das Medium * nach oben, bei "image-text" der Text. Genau diese Hälfte war gemeldet. * * Die Richtung hängt deshalb jetzt an der Reihenfolge im Markup: wo der * Text ohnehin vorn steht, bleibt die Spalte, wie sie ist; wo das Medium * vorn steht, wird gedreht. Beides ergibt dieselbe Ansicht. */ } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap { position: unset; top: unset; bottom: unset; } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap .img { min-height: auto; object-fit: contain; width: 100%; } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid > .grid-content.gc-text { --nuevo-columnFactor: 50%; /* No column stands beside the text any more, so neither side faces the image: both keep the distance of the content container. */ padding-left: var(--nuevo-contentPadding-left, var(--nuevo-contentPadding, 20px)) !important; padding-right: var(--nuevo-contentPadding-right, var(--nuevo-contentPadding, 20px)) !important; } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper { flex-direction: column !important; } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text { padding: 0; margin: 0 !important; } body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[direction=image-text] > .content-container > .gridWrapper { flex-direction: column-reverse !important; } } @media screen and (max-width: 470px) { body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper { /* Stacked columns have no row height to stretch into, so the image goes back into the flow and is shown complete instead of cropped. */ /* Für die anderen drei Medien steht dasselbe am Ende der Datei - dort, wo auch ihr Verhalten im Viewportlayout steht. */ /* * Stacked, both columns fill the section: the grid classes no longer * apply, so the factor of the viewport layout has to follow - one full * column means 1 / (2 x 1) = 50%. Without it the formula would keep * calculating with a third or two thirds of the width and push the text * inwards. */ /* * Gestapelt steht das Medium **immer unter dem Text**. * * Nicht die gewählte Reihenfolge entscheidet das, sondern die Lesbarkeit: * auf einem Handy ist der Text die Ansage und das Medium die Illustration * dazu. Steht es davor, scrollt der Leser erst an einer Karte oder einem * Video vorbei, bevor er erfährt, worum es geht. * * Vorher stand hier ein ausnahmsloses column-reverse mit dem Kommentar * "Image above, text below, regardless of the chosen order" - das war es * aber nur in der Hälfte der Fälle: column-reverse dreht die **DOM**- * Reihenfolge um, und die ist je Richtung eine andere. Bei * direction="text-image" (Text zuerst im Markup) kam dadurch das Medium * nach oben, bei "image-text" der Text. Genau diese Hälfte war gemeldet. * * Die Richtung hängt deshalb jetzt an der Reihenfolge im Markup: wo der * Text ohnehin vorn steht, bleibt die Spalte, wie sie ist; wo das Medium * vorn steht, wird gedreht. Beides ergibt dieselbe Ansicht. */ } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap { position: unset; top: unset; bottom: unset; } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid .gc-image .img-wrap .img { min-height: auto; object-fit: contain; width: 100%; } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport] > .content-container > .gridWrapper > .grid > .grid-content.gc-text { --nuevo-columnFactor: 50%; /* No column stands beside the text any more, so neither side faces the image: both keep the distance of the content container. */ padding-left: var(--nuevo-contentPadding-left, var(--nuevo-contentPadding, 20px)) !important; padding-right: var(--nuevo-contentPadding-right, var(--nuevo-contentPadding, 20px)) !important; } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper { flex-direction: column !important; } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-text { padding: 0; margin: 0 !important; } body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[direction=image-text] > .content-container > .gridWrapper { flex-direction: column-reverse !important; } } /* ------------------------------------ std_small_width [sm] ------------------------------------ */ /* --------------------------------- vertical alignment ----------------------------------------- */ /* Deliberately after the layout rules so an explicit alignment overrides the align-items they set - stretch in the viewport layout, for instance. */ section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper { /* In the viewport layout the columns always fill the full height, otherwise the image column loses its reference box. The alignment applies to the text inside its column instead. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[vertical-alignment=top] > .content-container > .gridWrapper { align-items: flex-start; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[vertical-alignment=center] > .content-container > .gridWrapper { align-items: center; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[vertical-alignment=bottom] > .content-container > .gridWrapper { align-items: flex-end; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport][vertical-alignment=top] > .content-container > .gridWrapper > .grid:has(> .gc-text) { align-items: flex-start; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport][vertical-alignment=center] > .content-container > .gridWrapper > .grid:has(> .gc-text) { align-items: center; } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper[layout=viewport][vertical-alignment=bottom] > .content-container > .gridWrapper > .grid:has(> .gc-text) { align-items: flex-end; } /* ------------------------------------- buttons ------------------------------------------------ */ /* Up to three buttons in the text column, in the button row of the theme (css/parts/_typography.scss). That row is built for the centred CTA: it centres its content, keeps 40px to whatever stands above it and takes the margin off its buttons. All three are undone here. The distance stays on the button itself, and that is the point: %button gives it margin-top:20px, and an inline-flex button is an inline-level box whose margin never collapses with the text above it. A block-level row with the same margin would collapse and sit 10px higher - so the row keeps no margin of its own, and the buttons keep theirs. Inside a flex container they are flex items, whose margins never collapse either, so a single button ends up exactly where it stood before there was a row around it - whatever the last element of the text body is. The horizontal gap therefore comes from the row, the vertical one from the same margin-top once the buttons wrap; a row-gap on top of it would double the distance. */ section.block.nuevo--native.nuevo--block-text-media .gc-text > .button-container { justify-content: flex-start; flex-wrap: wrap; margin: 0; column-gap: 20px; row-gap: 0; } section.block.nuevo--native.nuevo--block-text-media .gc-text > .button-container.nuevo--btn-left { justify-content: flex-start; } section.block.nuevo--native.nuevo--block-text-media .gc-text > .button-container.nuevo--btn-center { justify-content: center; } section.block.nuevo--native.nuevo--block-text-media .gc-text > .button-container.nuevo--btn-right { justify-content: flex-end; } section.block.nuevo--native.nuevo--block-text-media .gc-text > .button-container > .button { margin-top: 20px; } /* ------------------------------------- Medien neben dem Text ---------------------------------- */ /* Der Block zeigt neben dem Text nicht nur ein Bild: eine Galerie, ein Video oder eine Einbettung stehen an derselben Stelle. Die Container heißen wie in den Blöcken, aus denen sie stammen - so trägt jedes Medium sein Verhalten mit, und hier steht nur, was die halbe Spalte davon abweichen lässt. */ section.block.nuevo--native.nuevo--block-text-media { /* Jedes Layout ausser der Viewportbreite: das Medium füllt die Spalte in der Breite und bringt sein Seitenverhältnis mit. */ /* * Viewportbreite: die Spalte reicht bis an den Rand des Fensters und hat die * Höhe der Textspalte. Das Medium füllt sie, statt sein eigenes Format * mitzubringen - sonst stünde ein 16/9-Kasten in einer Spalte, die viel höher * ist, und daneben bliebe eine leere Fläche. Dasselbe tut hier das Bild. */ /* Ist der Block ausgewählt, tritt die Fläche zur Seite: erst dann sind die Bedienelemente des Videos und die Karte in der Einbettung erreichbar. Der Editor setzt die Klasse am Wurzelelement des Blocks. */ } section.block.nuevo--native.nuevo--block-text-media > .text-image_wrapper > .content-container > .gridWrapper > .grid > .grid-content.gc-media { /* Der Rahmen des Mediums. Wie er sich in die Spalte legt, hängt vom Layout ab und steht darunter; hier nur, was in jedem Layout gilt. */ /* Die Galerie: dieselben Raster wie im Galerieblock. Sie hingen einmal am Abschnitt jenes Blocks - hier sah deshalb jede Darstellung gleich aus, ein schlichter Stapel. Jetzt stehen sie in css/parts/_gallery-layouts.scss und gelten an beiden Stellen. */ /* Bild und Bildunterschrift gehören zusammen. css/parts/blocks/_gallery.scss - der Altblock - gibt dem Lightbox-Link "height: 100%". Der Selektor trifft auch den nativen Block, und im Raster ist das Element so hoch wie seine Reihe: der Link wurde damit höher als das Bild und schob die Unterschrift 25 px nach unten, in der Spaltenansicht sogar aus dem Element heraus. Hier steht deshalb, was gelten soll: das Element ist eine Spalte, der Link umschließt nur das Bild, und die Unterschrift steht 5 px darunter. "line-height: 0" nimmt dem Link den Zeilenabstand, den ein Inline-Bild sonst unter sich lässt. */ /* Slider. slick sizes the slides on the front end; the margins here are what puts the gap between them, the negative one on the track keeps the outer images flush with the container. */ /* Rahmen um jedes Raster. Er ist der Bezug für die Spaltenbreite: ein Element kann sich nicht selbst abfragen, und das Skript misst hier die Breite, aus der es die Zeilenzahl der Masonry-Bilder rechnet. */ /* Spaltenzahl je Breite: die Stufen stehen am Ende der Datei, weil das Mixin für die Medienabfragen nur auf oberster Ebene funktioniert. */ /* Masonry. Ohne JavaScript: Spalten wie bisher, aber mit break-inside - ein Bild wird nie mehr mitten durchgeschnitten. Die Reihenfolge ist dann spaltenweise, das ist die Eigenart von CSS-Spalten. Mit JavaScript (Klasse is-grid): ein Raster aus 1-px-Zeilen, in dem jedes Bild so viele Zeilen belegt, wie seine Proportion verlangt - zeilenweise Reihenfolge und überall dieselbe Fuge. Die Zeilenzahl misst js/nuevo-blocks.js aus der Spaltenbreite; in CSS allein ginge das nicht, weil sich eine Länge nicht durch eine Länge teilen lässt. */ /* Spalten: ein Raster gleich breiter Spalten. Vorher rechnete das Skript "100% / n - Fuge" und traf damit weder die Breite noch die Ränder - die Reihe stand zehn Pixel eingerückt, und eine angebrochene Reihe wurde zentriert. Das Raster verteilt die Breite selbst, exakt und ohne Rechnung. */ /* Reihen: jede Reihe füllt die Breite, die Bilder behalten ihre Proportionen, und alle Bilder einer Reihe sind gleich hoch - die klassische Fotogalerie. Jedes Bild wächst proportional zu seinem Seitenverhältnis; die Grundbreite ist Verhältnis mal Zielhöhe. Das ::after mit dem sehr großen flex-grow fängt die letzte, angebrochene Reihe ab: ohne es würde sie auf die volle Breite gezogen und die Bilder dort viel zu groß. */ /* Im Canvas gelten dieselben Stufen wie auf der Seite - das Editor-Skript schreibt sie genauso wie render.php. Vorher stand hier ein fester Wert aus der Blockeinstellung: der Canvas zeigte immer die Höchstzahl an Spalten, egal wie schmal er war. */ /* Vorschau des Sliders im Canvas. slick läuft hier nicht - ohne Ersatz stehen die Bilder untereinander, und die Spalteneinstellung sieht aus, als täte sie nichts. Diese Regeln zeigen so viele Bilder nebeneinander, wie der Slider auf der Seite zeigen wird, und schneiden den Rest ab. Die Breite rechnet das Raster selbst, aus derselben Stufe wie die anderen Typen. Der negative Außenabstand der Spur und die Ränder der Bilder gehören zu slick und werden dafür abgeräumt. */ /* The lightbox link does nothing in the canvas; without a target the cursor would still promise one. */ /* ------ nur im Editor ------ Was hier folgt, gibt es auf der Seite nicht: der Canvas zeigt das eigene Video und die Einbettung wirklich, damit sich der Ausschnitt beurteilen lässt, ohne die Vorschau zu öffnen. */ /* Ein