@charset "UTF-8"; /** * Block "Teaser" - 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. * The teaser boxes (nuevo/teaser-item) are styled here as well: every selector * starts at the section of this block anyway. * * Taken from css/parts/blocks/_teaser.scss. Die Spaltenbreiten kommen seit 1.2 * nicht mehr aus Prozentklassen an einer Schwelle, sondern aus der Reihe: * container-basiert, stufenlos, mit fließenden Maßen - siehe * css/parts/_responsive.scss und docs/responsive.md. * * @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. */ /** * 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. */ /** * 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). */ /** * Overlay hinter dem Inhalt einer Box. * * Nur ein Mixin, keine Ausgabe: die Datei wird von den Stylesheets der Blöcke * mit Boxen eingebunden - Boxen, Teaser, Call-To-Action -, und jedes von ihnen * landet in einer eigenen style.css. Alles, was hier direkt Regeln schreiben * würde, stünde danach dreimal im Frontend. * * Die Ebene liegt zwischen der Hintergrundfarbe der Box und ihrem Inhalt. Das * ist dieselbe Sache wie das Overlay über dem Hintergrundbild der Section * (native_block_render_callback()), nur eine Etage tiefer: Farbe und Deckkraft * kommen als Custom Properties vom Wrapper des Blocks und werden vererbt, ohne * Angabe gilt die Hintergrundfarbe des Farbschemas mit 50 %. * * @package nuevo * @subpackage css */ /* Anzuwenden auf das Element, das den Kasten trägt (.grid-content, .cta-content …). Es bekommt einen eigenen Stapelkontext, damit die Ebene mit z-index: -1 über seinem eigenen Hintergrund bleibt und nicht hinter dem der Section verschwindet. */ /* Die Ebene selbst. Aufzurufen im Pseudoelement, das der Block dafür frei hat - ::after bei den Boxen, deren ::before die Nummerierung trägt. */ /** * 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). */ /** * Ein Link, der über einem ganzen Kasten liegt. * * Bild, Box und Teaserkachel lassen sich als Ganzes verlinken. Der Inhalt kann * dafür nicht in ein gepackt werden - darin stehen Überschrift, Text und * Buttons, und ein Link in einem Link ist ungültiges HTML. Stattdessen legt * render.php ein leeres in den Kasten * (nuevo_hidden_link() in src/functions/helpers.php); die Grundregeln dafür - * unsichtbar, über die ganze Fläche gespannt - stehen in * css/parts/_typography.scss. * * Hier steht nur die Stapelung: der Link über der Fläche, alles selbst * Anklickbare darüber. Ohne das läge der Link über den Buttons und schluckte * jeden Klick auf sie - der Kasten hätte dann genau ein Ziel, egal wohin man * tippt. * * @package nuevo */ /** * 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 */ /* Der Rasterabstand - eine Zahl für beide Achsen, wie in den Einstellungen (Einstellungen → NUEVO → Darstellung). Ein Block darf abweichen; sein Wert steht dann als --nuevo-rowGap am Abschnitt, siehe block_space_declarations() in src/functions/responsive.php. Der Customizer gibt ihn seit 1.2 nicht mehr vor - siehe docs/responsive.md. */ section.block.nuevo--native.nuevo--block-teasers { /* Die Ausrichtung der Überschrift - siehe css/parts/_headline-align.scss. */ } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left { text-align: left; } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h1, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h2, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h3, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h4, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h5, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-left h6 { text-align: left !important; } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center { text-align: center; } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h1, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h2, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h3, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h4, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h5, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-center h6 { text-align: center !important; } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right { text-align: right; } section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h1, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h2, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h3, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h4, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h5, section.block.nuevo--native.nuevo--block-teasers .block_headline.align-right h6 { text-align: right !important; } section.block.nuevo--native.nuevo--block-teasers > .content-container { /* 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. Ein Element kann sich nicht selbst abfragen, deshalb steht der Container hier und nicht am gridWrapper. */ container-type: inline-size; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper { /* Die Reihe: Spalten aus den Custom Properties des Wrappers, Abstand aus den beiden Variablen hier - wie bei den Boxen. Der Abstand fließt mit der Breite des Containers, deshalb springt hier nichts mehr an einer Schwelle. */ 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); /* Ein einzelner Teaser läuft nicht über die ganze Contentbreite - so war es immer. Die Reihe wird schmaler und rückt in die Mitte; die Zelle darin füllt sie dann aus. */ /* Overlay hinter dem Inhalt der Teaser. Der Kasten trägt die Hintergrundfarbe seines Farbschemas (.boxBg); die Ebene liegt darüber und unter dem Inhalt, so dass sich der Kasten tönen lässt, ohne dass Bild und Text mitziehen. */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > * { /* * 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-teasers > .content-container > .gridWrapper.nuevo--single { max-width: calc(var(--nuevo-content-max, 1598px) * 0.6); margin-left: auto; margin-right: auto; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper.has-box-overlay > .nuevo--cell > .nuevo--card { position: relative; isolation: isolate; /* Die Fläche des Kastens kommt jetzt von der Ebene. Sonst läge die Tönung über einer zweiten, vollen Fläche derselben Farbe - und die Sättigung bliebe ohne Wirkung, solange kein anderer Farbton gewählt ist. So bezieht sie sich immer auf die Farbe, die der Kasten ohnehin hat; der Farbton überschreibt sie. !important, weil .boxBg in css/parts/_block.scss seine Farbe ebenso setzt - die Klasse hier ist die genauere. */ background: transparent !important; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper.has-box-overlay > .nuevo--cell > .nuevo--card:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; /* Der Customizer rundet die Ecken des Kastens; die Ebene liegt darin und muss dieselbe Rundung tragen, sonst schaut sie an den Ecken heraus. */ border-radius: inherit; background-color: var(--nuevo-boxOverlay-color, var(--colorscheme__boxbackground)); opacity: var(--nuevo-boxOverlay-opacity, 0.5); /* Reine Optik - Klicks und Markierungen gehen hindurch. */ pointer-events: none; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell { height: auto; /* Editor only: a hidden teaser is kept in the canvas and marked there, the front end skips it altogether (render.php). */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell.nuevo--item-hidden { opacity: 0.4; outline: 1px dashed var(--colorscheme__body, currentColor); outline-offset: -4px; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card { position: relative; /* Die Ecken stehen an .boxBg (css/parts/_block.scss). */ /* Die ganze Kachel kann verlinkt sein - siehe css/parts/_hidden-link.scss. */ position: relative; /* Buttons und Links im Kasten bleiben eigenständig. Sie brauchen dafür eine eigene Position: ein Element ohne sie steht in der Stapelung unter jedem positionierten Geschwister, gleich welche Zahl daneben steht. */ display: flex; flex-flow: column; justify-content: flex-start; align-items: center; box-sizing: border-box; height: 100%; overflow: hidden; /* Editor only: stands in for the image until one is chosen. */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card > .hidden-link { z-index: 1; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .button, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card a:not(.hidden-link), section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card button { position: relative; z-index: 2; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img { order: 1; width: 100%; min-width: 100%; max-width: unset; aspect-ratio: 16/9; /* Focal point of the box, 50%/50% without a choice - the centre the legacy block cropped to. */ object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%); object-fit: cover; /* "original" schneidet nicht zu - das Bild behält seine eigene Höhe. Die übrigen Werte in der Reihenfolge der Liste im Editor; 4_5 gibt es dort nicht mehr, hier aber weiter, damit Bestandsseiten ihr Format behalten. */ /* Mit 4_5: der Teaser führt die Form aus dem Altblock weiter. */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-original { aspect-ratio: auto; object-fit: contain; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-21_9 { aspect-ratio: 21/9; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-16_9 { aspect-ratio: 16/9; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-3_2 { aspect-ratio: 3/2; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-4_3 { aspect-ratio: 4/3; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-1_1 { aspect-ratio: 1/1; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-3_4 { aspect-ratio: 3/4; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-2_3 { aspect-ratio: 2/3; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-4_5 { aspect-ratio: 4/5; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-img.ratio-9_16 { aspect-ratio: 9/16; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .components-placeholder { order: 1; width: 100%; box-sizing: border-box; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content { order: 2; display: flex; flex-flow: column; width: 100%; /* Der Innenabstand der Kachel fließt mit dem Container: 40 px, wo Platz ist, darunter weniger. Vorher sprang er bei 786 px auf 20 px. */ padding: clamp(40px * var(--nuevo-fluidFactor, 0.6), 4cqi, 40px); box-sizing: border-box; /* Ohne beschrifteten Button wird die Überschrift zum Link, damit das Ziel der Kachel nicht nur in data-href steht und für eine Suchmaschine überhaupt existiert (render.php). Sichtbar ändert sich dadurch nichts - die Überschrift behält Farbe und Schnitt der Umgebung. */ /* Die Buttons stehen in einer eigenen Reihe - hier eine Spalte: in einer Kachel liegen sie untereinander, so war es immer. align-items: inherit übernimmt die Ausrichtung der Kachel (direction-*), damit sich ohne eigene Wahl nichts ändert; eine gewählte überschreibt genau diese Eigenschaft. */ /* Schmale Kästen: hier wird getrennt - siehe css/parts/_text-wrap.scss. */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content .teaser-headline a { color: inherit; text-decoration: inherit; font: inherit; letter-spacing: inherit; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left { text-align: left; align-items: flex-start; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h1, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h2, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h3, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h4, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h5, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-left h6 { text-align: left !important; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right { text-align: right; align-items: flex-end; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h1, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h2, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h3, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h4, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h5, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-right h6 { text-align: right !important; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center { text-align: center; align-items: center; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h1, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h2, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h3, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h4, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h5, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content.direction-center h6 { text-align: center !important; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .teaser-subheadline { display: block; text-transform: uppercase; margin-bottom: 20px; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .teaser-text { display: block; margin-bottom: 20px; /* The legacy block received the text as a plain string inside a span; here it comes from inner blocks, so it begins and ends with a paragraph carrying margins of its own. .teaser-content is a flex container, so those margins do not collapse out of the box - without this it would grow by 16 px at the top and 10 px at the bottom. */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .teaser-text > :first-child { margin-top: 0; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .teaser-text > :last-child { margin-bottom: 0; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content .teaser-headline, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content .teaser-subheadline, section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content .teaser-text { /* 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; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons { display: flex; flex-flow: column; align-items: inherit; margin-bottom: 20px; /* Die Reihe ist hier eine Spalte und nur so breit wie ihr breitester Button - ausgerichtet wird sie als Ganzes. */ /* * Und die Buttons zueinander. * * Eine Spalte stellt zwei Fragen, wo eine Reihe nur eine stellt: * wo die Spalte steht (align-self, oben) **und** wie ihre Buttons * darin aneinander ausgerichtet sind (align-items). Ohne eigene * Wahl beantwortet beides die Kachel - daher align-items: inherit. * * Eine gewählte Ausrichtung muss beide beantworten. Sonst stand * die Spalte zwar mittig, ihre verschieden breiten Buttons * behielten aber die linke Kante der Kachel: gemessen 155..240 * und 155..253 statt zweier gemeinsamer Mitten. Genau das war * gemeldet - "die Buttons behalten die Anordnung der Teaserbox". */ } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-left { align-self: flex-start; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-center { align-self: center; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-right { align-self: flex-end; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-left { align-items: flex-start; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-center { align-items: center; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons.nuevo--btn-right { align-items: flex-end; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons > .button { margin-top: 0; margin-bottom: 20px; width: fit-content; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > .nuevo--buttons > .button:last-child { margin-bottom: 0; } section.block.nuevo--native.nuevo--block-teasers > .content-container > .gridWrapper > .nuevo--cell .nuevo--card .teaser-content > :last-child { margin-bottom: 0; } /* Die beiden Schwellen von früher - Spaltenbreiten in Prozent und ein kleinerer Innenabstand unter 786 px - sind ersatzlos entfallen. Beides rechnet jetzt die Reihe aus, stufenlos. Siehe docs/responsive.md. */ /* ---------------------------------------- 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-teasers .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_teasers__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-teasers .content-container > .block_abstract.align-left { text-align: left; } section.block.nuevo--native.nuevo--block-teasers .content-container > .block_abstract.align-center { text-align: center; } section.block.nuevo--native.nuevo--block-teasers .content-container > .block_abstract.align-right { text-align: right; } /*# sourceMappingURL=style.css.map */