@charset "UTF-8";
/**
 * Block "Boxen" - 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 boxes (nuevo/box-item) are styled here as well: every selector starts at
 * the section of this block anyway.
 *
 * Taken from css/parts/blocks/_box.scss. Die Spaltenbreiten kommen seit 1.2
 * nicht mehr aus den theme-weiten Rasterklassen, sondern aus der Reihe:
 * container-basiert, mit zwei Schwellen und 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 <bastian@creative-feat.com>
 * @author 	Marvin Landau <marvin@creative-feat.com>
 * @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_<slug>__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 <a> gepackt werden - darin stehen Überschrift, Text und
 * Buttons, und ein Link in einem Link ist ungültiges HTML. Stattdessen legt
 * render.php ein leeres <a class="hidden-link"> 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 - <html lang="de"> 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. */
/* Seitenverhältnis des Icons (nuevo/box-item).

   Ohne Auswahl trägt das Icon gar keine Klasse und behält die Größe, die ihm
   das Layout gibt - eine Höhe und "object-fit: contain", also das ganze Bild.
   Mit Auswahl kommt das Seitenverhältnis dazu, und aus contain wird cover: die
   gewählte Form soll man sehen, nicht das Bild darin schweben lassen.

   Als Mixin, weil jedes der drei Layouts sein eigenes .icon hat und die Regel
   dort stehen muss, wo sie das "object-fit" des Layouts auch schlägt. */
section.block.nuevo--native.nuevo--block-boxes {
  /* Die Ausrichtung der Überschrift - siehe css/parts/_headline-align.scss. */
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left {
  text-align: left;
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h1, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h2, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h3, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h4, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h5, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h1, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h2, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h3, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h4, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h5, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right {
  text-align: right;
}
section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h1, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h2, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h3, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h4, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h5, section.block.nuevo--native.nuevo--block-boxes .block_headline.align-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-boxes > .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-boxes > .content-container > .gridWrapper {
  /* Die Reihe: Spalten aus den Custom Properties des Wrappers, Abstand aus
     den beiden Variablen hier. Jede fällt auf den Abstand aus den
     Einstellungen zurück, dann auf 30 px.

     Der Abstand fließt mit der Breite des Containers: bei weitem Container
     der eingestellte Wert, darunter weniger, nie unter den Anteil, den der
     Faktor lässt. 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);
  /* A hidden box is not rendered on the front end at all; in the canvas it
     stays visible so it can be switched back on. */
  /* Ein Symbol aus der mitgelieferten Sammlung ist ein <svg> mit
     Strichzeichnung - fill="none" steht am Element, und ein Stylesheet,
     das pauschal "svg { fill: currentColor }" setzt, würde daraus einen
     schwarzen Klotz machen. Deshalb hier ausdrücklich. Auf einem <img>
     richten die beiden Angaben nichts an. */
  /* Die Kopfzeile aus Icon und Überschrift.

     Zwei der vier Darstellungen legen beides nebeneinander und
     unterscheiden sich nur in der Reihenfolge; die beiden zentrierten
     stellen sie übereinander. */
  /* ÜBERSCHRIFT RECHTS - dieselbe Zeile, andersherum.

     Der Rand am jeweils anderen Ende schiebt die Überschrift auf ihre
     Seite, und zwar auch dann, wenn sie allein in der Zeile steht: mit
     "space-between" allein bliebe sie ohne Icon links. */
  /* Beide zentrierten Darstellungen: Icon und Überschrift stehen
     untereinander, alles mittig. */
  /* ICON UNTEN - der Inhalt steht mittig darüber.

     Im Markup steckt es in der Kopfzeile, zusammen mit der Überschrift;
     unter den Text kommt es nur, wenn es in derselben Reihenfolge steht
     wie Text und Buttons. "display: contents" löst die Kopfzeile auf und
     macht Icon und Überschrift zu Kindern des Kastens - dann greift
     "order" über alles hinweg. Die Buttons behalten dabei ihre Breite:
     ohne align-self würden sie als Flex-Element auf die volle Breite
     gezogen. */
  /* NUMMERIERTE BOXEN - eine eigene Auswahl, die sich mit jeder der vier
     Darstellungen verträgt. Die Zahl sitzt in der linken oberen Ecke und
     ragt zur Hälfte heraus, deshalb rückt der Kasten ein Stück ein. */
  /* Overlay hinter dem Inhalt der Boxen.

     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 der Text mitzieht. Die Nummerierung sitzt auf
     dem ::before derselben Box - deshalb hier das ::after. */
}
section.block.nuevo--native.nuevo--block-boxes > .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-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card {
  height: 100%;
  /* Innenabstand der Box, ebenfalls fließend: 40 px bei weitem
     Container, nach unten bis auf den Faktor. Vorher sprang er bei
     480 px auf 20 px. */
  padding: clamp(40px * var(--nuevo-fluidFactor, 0.6), 4cqi, 40px);
  box-sizing: border-box;
  /* Rahmen und Ecken.
     Sie kamen bis 1.2 aus dem Customizer, der seine Regel an
     ".grid .grid-content" hängte; jetzt stehen sie unter
     Einstellungen → NUEVO → Blockstandards und kommen als Custom
     Properties am Abschnitt an (src/functions/block_defaults.php).
     Ohne Farbe gilt die Schriftfarbe des Farbschemas. */
  /* Rahmen und Ecken stehen an .boxBg (css/parts/_block.scss) - dort
     für jeden Kasten der Website an einer Stelle. */
  /* Die ganze Box 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. */
  /* Schmale Kästen: hier wird getrennt - siehe
     css/parts/_text-wrap.scss. */
  /* Die Buttons stehen in einer eigenen Reihe.

     Sie lagen bisher lose im Kasten, als inline-flex im Textfluss -
     ausrichten liess sich das nicht, ohne den Text mitzunehmen. Die
     Reihe ändert nichts an der Vorgabe: der Abstand nach oben bleibt
     der des Buttons selbst (20 px aus %button), der Abstand daneben
     war es auch. Erst eine gewählte Ausrichtung wirkt.

     row-gap: 0, weil jeder Button seinen Abstand nach oben mitbringt;
     ein Zeilenabstand käme oben drauf, sobald sie umbrechen. */
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card > .hidden-link {
  z-index: 1;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .button,
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card a:not(.hidden-link),
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card button {
  position: relative;
  z-index: 2;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .box-head,
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .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-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .text {
  display: block;
  /* Der Abstand nach oben kommt von der Kopfzeile, nicht vom ersten
     Absatz. In den Darstellungen mit Kopfzeile fällt sein Rand
     ohnehin mit deren zusammen; in "Icon unten" ist der Kasten eine
     Spalte, dort fällt nichts zusammen und beide Ränder addierten
     sich - der Abstand war dort sichtbar größer. */
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .text > :first-child {
  margin-top: 0;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .nuevo--buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 0;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .nuevo--buttons.nuevo--btn-left {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .nuevo--buttons.nuevo--btn-center {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .nuevo--buttons.nuevo--btn-right {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell.nuevo--box-hidden {
  opacity: 0.4;
  outline: 1px dashed var(--colorscheme__body, currentColor);
  outline-offset: -4px;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper > .nuevo--cell > .nuevo--card .box-head .icon {
  fill: none;
  stroke: currentColor;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  /* Beide stehen zueinander mittig, auch wenn eines viel höher ist
     als das andere - ein Icon mit eigener Breite kann das sein.
     align-items oben legt es fest, align-self hält es auch dann,
     wenn ein Element sich später selbst ausrichtet. */
  /* Ohne das säße die Überschrift zu hoch: "align-items: center"
     mittet die Außenkanten samt Rand, und eine Überschrift bringt
     aus der Typografie einen Abstand nach unten mit. Der Abstand
     zum Text darunter kommt vom margin-bottom der Kopfzeile. */
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head > *, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head > * {
  align-self: center;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .box-headline, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .box-headline {
  margin-top: 0;
  margin-bottom: 0;
  /* Sonst ist die Überschrift als Flex-Element mindestens so
     breit wie ihr längstes Wort und schiebt das Icon aus dem
     Kasten, statt selbst umzubrechen. */
  min-width: 0;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon {
  width: auto;
  /* Die Höhe steht unter Einstellungen → NUEVO → Blockstandards,
     Abschnitt „Boxen“; bis 1.2 im Customizer. */
  height: var(--nuevo-iconSizeSmall, 40px);
  object-fit: contain;
  /* Die Hälfte ist hier die Grenze.

     Icon und Überschrift teilen sich eine Zeile, und das Icon
     schrumpft nicht (flex-shrink: 0 am Inline-Stil). Über der
     Hälfte bleibt der Überschrift weniger Platz als dem Icon,
     bei 100 % steht sie außerhalb des Kastens - gemessen
     119 px, die herauslaufen. render.php und der Editor deckeln
     die eingestellte Breite schon auf 50 %; das hier gilt
     zusätzlich für Bestände und für jede Breite, die von
     woanders kommt. */
  max-width: 50%;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-21_9, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-21_9 {
  aspect-ratio: 21/9;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-16_9, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-16_9 {
  aspect-ratio: 16/9;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_2, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_2 {
  aspect-ratio: 3/2;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-4_3, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-4_3 {
  aspect-ratio: 4/3;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-1_1, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-1_1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_4, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_4 {
  aspect-ratio: 3/4;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-2_3, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-2_3 {
  aspect-ratio: 2/3;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon.ratio-9_16, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon.ratio-9_16 {
  aspect-ratio: 9/16;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .box-headline {
  order: 1;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-left > .nuevo--cell > .nuevo--card .box-head .icon {
  order: 2;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .icon {
  order: 1;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-headline-right > .nuevo--cell > .nuevo--card .box-head .box-headline {
  order: 2;
  margin-left: auto;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head {
  margin-bottom: 20px;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon {
  width: auto;
  /* Siehe oben - die zentrierten Darstellungen haben ihre
     eigene Größe, weil das Icon dort für sich steht. */
  height: var(--nuevo-iconSizeBig, 100px);
  object-fit: contain;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-21_9, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-21_9 {
  aspect-ratio: 21/9;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-16_9, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-16_9 {
  aspect-ratio: 16/9;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_2, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_2 {
  aspect-ratio: 3/2;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-4_3, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-4_3 {
  aspect-ratio: 4/3;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-1_1, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-1_1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_4, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-3_4 {
  aspect-ratio: 3/4;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-2_3, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-2_3 {
  aspect-ratio: 2/3;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon.ratio-9_16, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon.ratio-9_16 {
  aspect-ratio: 9/16;
  object-fit: cover;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .box-headline, section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .box-headline {
  text-align: center;
  /* Wie in den Kopfzeilen-Darstellungen: der Abstand nach unten
     gehört der Kopfzeile (margin-bottom oben), nicht der
     Typografie der Überschrift. */
  margin-top: 0;
  margin-bottom: 0;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-after > .nuevo--cell > .nuevo--card .box-head .icon {
  margin-bottom: 40px;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card {
  display: flex;
  flex-direction: column;
  /* "display: contents" oben löst die Kopfzeile auf - mit ihr
     verschwindet ihr Abstand nach unten. Die Überschrift bringt ihn
     deshalb hier selbst mit, in derselben Größe. Der Selektor nennt
     die Kopfzeile mit, damit er die Regel der beiden zentrierten
     Darstellungen schlägt, die den Rand abräumt. */
  /* Der Kasten ist hier eine Spalte; die Reihe ist ein Element
     darin und rückt als Ganzes in die Mitte. */
  /*
   * Nur das Icon der Box - nicht jedes .icon im Kasten.
   *
   * Ein Button kann selbst ein Symbol tragen, und das heisst im
   * Markup <svg class="button__icon icon"> (nuevo_button_link() in
   * src/functions/helpers.php). Ohne die Kopfzeile im Selektor traf
   * diese Regel es mit: das Symbol bekam order 4 und 40 px Abstand
   * nach oben und rutschte damit im Button **unter** die
   * Beschriftung, die Fläche wurde entsprechend hoch. Zu sehen war
   * das nur in dieser einen Darstellung - in den anderen drei steht
   * der Selektor schon seit jeher mit .box-head davor.
   *
   * Der Selektor nennt die Kopfzeile deshalb ausdrücklich. Dass sie
   * "display: contents" hat, ändert daran nichts: sie steht weiter
   * im Baum, nur ohne eigenen Kasten.
   */
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head {
  display: contents;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-headline {
  order: 1;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .box-headline {
  margin-bottom: 20px;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .text {
  order: 2;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .nuevo--buttons {
  order: 3;
  align-self: center;
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.layout-center-before > .nuevo--cell > .nuevo--card .box-head .icon {
  order: 4;
  margin-top: 40px;
  margin-bottom: 0;
  /* Der Kasten ist hier eine Spalte, und in einer Spalte ist die
     Flex-Basis die *Höhe*. Eine eigene Breite in Prozent
     (render.php schreibt sie als Inline-Stil) würde damit zur
     Höhe: das Icon bekäme Abstand nach oben und fiele unten aus
     der Box. Die Basis kommt deshalb wieder aus dem Inhalt. */
  flex-basis: auto;
  /* Ohne das zöge der Kasten das Icon auf seine volle Breite -
     mit gewähltem Seitenverhältnis (object-fit: cover) wäre das
     ein grober Beschnitt. */
  align-self: center;
}
section.block.nuevo--native.nuevo--block-boxes > .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-boxes > .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-boxes > .content-container > .gridWrapper.has-counter {
  counter-reset: count;
  /* Der Einzug der Nummer fließt mit dem Container: 40 px, wenn Platz
     ist, darunter weniger. Vorher sprang er bei 480 px auf 20 px. */
  --nuevo-boxCounterInset: clamp(40px * var(--nuevo-fluidFactor, 0.6), 4cqi, 40px);
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.has-counter > .nuevo--cell > .nuevo--card {
  position: relative;
  margin: var(--nuevo-boxCounterInset) 0 0 var(--nuevo-boxCounterInset);
  height: calc(100% - var(--nuevo-boxCounterInset));
}
section.block.nuevo--native.nuevo--block-boxes > .content-container > .gridWrapper.has-counter > .nuevo--cell > .nuevo--card:before {
  counter-increment: count;
  content: counter(count);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  color: var(--colorscheme__highlight, var(--colorscheme__body, #000000));
  /* Die Schrift der Nummer - Größe, Stärke, Familie, Schnitt -
     steht unter Einstellungen → NUEVO → Blockstandards; nur die
     Farbe kommt weiter aus dem Farbschema. Die Größe fließt mit
     dem Container, damit die Zahl im schmalen Kasten nicht über
     ihn hinauswächst. */
  font-size: clamp(var(--nuevo-counterSize, 20px) * var(--nuevo-fluidFactor, 0.6), 8cqi, var(--nuevo-counterSize, 20px));
  font-weight: var(--nuevo-counterWeight, 400);
  /* Ohne eigene Wahl steht keine Variable da und die Nummer erbt
     die Schrift ihres Kastens - siehe Blockstandards. */
  font-family: var(--nuevo-counterFamily, inherit);
  font-style: var(--nuevo-counterStyle, normal);
  line-height: 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-boxes .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_boxes__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-boxes .content-container > .block_abstract.align-left {
  text-align: left;
}
section.block.nuevo--native.nuevo--block-boxes .content-container > .block_abstract.align-center {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-boxes .content-container > .block_abstract.align-right {
  text-align: right;
}

/*# sourceMappingURL=style.css.map */