@charset "UTF-8";
/**
 * Block "Banner" - 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 stylesheet covers the slides as well: nuevo/banner-slide only ever lives
 * inside a banner, and every selector here starts at the section of the parent.
 *
 * @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. */
/**
 * nuevo Wordpress Theme - shared SCSS placeholders.
 *
 * Nothing in here emits CSS on its own, so a block stylesheet can import it
 * without pulling unrelated rules into its own file.
 *
 * @package nuevo
 */
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content {
  width: inherit;
  max-width: 1598px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/**
 * Die Breite eines Abschnitts - und die Breite, auf die sie sich bezieht.
 *
 * Zwei Dinge stecken hier drin:
 *
 * 1. --nuevo-content-max: die Breite des Contentbereichs. Auf der Seite sind
 *    das die $std_extra_large_width des Themes; im Canvas des Editors ist der
 *    Contentbereich schmaler, weil Adminmenü und Seitenleiste danebenstehen -
 *    dort gilt der verschobene Wert, derselbe, den auch %container und die
 *    Breakpoints im Canvas benutzen (siehe css/parts/_breakpoints.scss).
 *
 *    Gesetzt wird sie je einmal pro Welt: in css/default.scss für die Seite, in
 *    css/editor-blocks.scss für den Canvas. Ein Blockstylesheet wird nur einmal
 *    kompiliert und in beiden Welten geladen; es kann den Unterschied deshalb
 *    nicht selbst kennen und liest ihn hier ab.
 *
 *    Ohne diese Variable rechnete jeder Block im Canvas gegen die 1598 px der
 *    Seite, während der Container daneben schon bei 1158 px endete: eine Breite
 *    von 70 % sah dort aus wie 97 %, und ab einem gewissen Fenster gar nicht
 *    mehr. Genau das war im Backend zu sehen.
 *
 * 2. --nuevo-content-width: der Anteil, den der Regler "Breite (%)" schreibt -
 *    siehe nuevo_content_width_style() in src/functions/helpers.php und
 *    contentWidthStyle() in js/nuevo-block-editor.js. Nicht gesetzt heißt volle
 *    Breite.
 *
 * @package nuevo
 */
/* Die Breite des Contentbereichs, wie sie in dieser Welt gilt. Der zweite Wert
   ist der Rückfall für den Fall, dass keine der beiden Dateien geladen ist. */
/**
 * Die max-width eines Abschnitts.
 *
 * @param {Number} $fallback Anteil ohne eigene Wahl - 1, außer wo ein Block
 *                           von Haus aus schmaler ist (ein einzelnes Video).
 */
/**
 * Die Ausrichtung einer Buttonreihe.
 *
 * Acht Blöcke haben eine Buttonliste, und jeder legt seine Reihe dort ab, wo
 * sie in seinem Zusammenhang hingehört: mittig im CTA, im Textfluss in einer
 * Box, der Inhaltsausrichtung folgend im Bannerelement. Das bleibt die Vorgabe.
 * Eine ausdrückliche Wahl schreibt eine Klasse an die Reihe
 * (nuevo_button_align_class() in src/functions/helpers.php), und die übersetzt
 * dieses Mixin in das, was Ausrichtung an dieser Stelle heißt.
 *
 * Warum eine Eigenschaft als Parameter: eine Reihe richtet sich mit
 * justify-content aus, eine Spalte - der Teaser stapelt seine Buttons - mit
 * align-items. Dieselben drei Klassen, zwei Bedeutungen; der Block sagt, welche
 * seine ist.
 *
 * @package nuevo
 */
/*
 * Und derselbe Fall eine Ebene höher.
 *
 * Steht die Reihe in einer Spalte - im Bannerelement, in einer Teaserkachel -,
 * ist sie nur so breit wie ihre Buttons: innen bleibt kein Platz, den
 * justify-content verteilen könnte. Verschoben wird dann die Reihe selbst, und
 * dafür ist align-self zuständig.
 */
/**
 * Was mit einem Wort geschieht, das nicht in seine Zeile passt.
 *
 * Zwei verschiedene Dinge, die oft verwechselt werden:
 *
 * "overflow-wrap: break-word" ist die Notbremse. Sie greift erst, wenn ein Wort
 * für seine Zeile zu lang ist, und bricht es dann irgendwo - ohne Trennstrich,
 * ohne Rücksicht auf Silben. Solange nichts überläuft, ist sie nicht zu sehen;
 * deshalb steht sie theme-weit in der Basistypografie
 * (css/parts/_typography.scss). Die Eigenschaft wird vererbt, eine Deklaration
 * genügt.
 *
 * "hyphens: auto" ist die Worttrennung. Der Browser trennt nach dem Wörterbuch
 * der Dokumentsprache - <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
 */
section.block.nuevo--native.nuevo--block-banner {
  /* A keyvisual runs to the edges of the section, so the block overrides the
     inner spacing every other block gets from css/parts/_block.scss. It offers
     no control for it either - see block.json, there is no nuevo_blockSpacing. */
  padding: 0;
  overflow: hidden;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider {
  position: relative;
  height: 50vw;
  /*
   * Die Pagination liegt auf dem Banner, nicht darunter.
   *
   * Theme-weit steht sie als Reihe unter dem Slider (margin-top in
   * css/parts/_typography.scss) - bei einer Galerie ist das richtig, beim
   * Banner nicht: dort ist der Slider das Bild, und eine Zeile Punkte
   * darunter schiebt den nächsten Abschnitt weg. Hier liegt sie deshalb
   * absolut am unteren Rand und mittig, über Medium, Overlay und Inhalt
   * (z-index 1, 2 und 3) - aber unter nichts, was man anklicken müsste:
   * sie steht am Rand, wo kein Button liegt.
   */
  /* Der Pfeil steht mittig auf dem Bild. Die Punkte liegen hier darauf und
     nicht darunter, es gibt also nichts abzuziehen - siehe
     --nuevo-sliderDots in css/parts/_typography.scss. */
  /* The overlay belongs to the element: it carries the class, from its own
     setting or from the one it inherits from the banner. The variables come
     from the banner and are overwritten by an element that sets its own. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 12;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-arrow {
  --nuevo-sliderDots: 0px;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider .slick-slide.hasOverlay {
  position: relative;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider .slick-slide.hasOverlay:before {
  content: "";
  position: absolute;
  inset: 0;
  /* The overlay colour follows the colour scheme of the section unless
     banner or element set one of their own. */
  background: var(--banner-overlay-color, var(--colorscheme__background, var(--defaultcolor__background, #ffffff)));
  opacity: var(--banner-overlay-opacity, 0.5);
  z-index: 2;
  pointer-events: none;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider .slick-slide.hasOverlay .banner-content {
  position: relative;
  z-index: 3;
  color: var(--colorscheme__body, var(--defaultcolor__body, #000000)) !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list {
  height: 100%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track {
  height: 100%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  /*
   * Jedes andere Bild in der Ebene bleibt ein gewöhnliches Bild.
   *
   * css/parts/blocks/_banner.scss stellt seit jeher **jedes** <img> in
   * einer Ebene absolut und auf volle Breite - gemeint war das
   * Hintergrundbild, getroffen wird alles. Die Regel hängt an
   * .nuevo--block-banner, und die trägt der native Block auch; sie wiegt
   * sechs Klassen und gewinnt damit gegen alles, was der Block seinem
   * Symbol sonst mitgibt.
   *
   * Sichtbar wurde das am **Symbol eines Buttons**: es wurde 100 % breit,
   * und weil ein Button "overflow: hidden" hat, verschwand die
   * Beschriftung dahinter - im Canvas wie auf der Seite, ohne dass
   * jemand "Beschriftung ausblenden" angehakt hätte. Dasselbe träfe ein
   * Bild, das ein Innenblock in den Text der Ebene setzt.
   *
   * Hier steht deshalb der Gegensatz, eine Klasse tiefer (.banner-content)
   * und mit der Markerklasse .nuevo--native davor: acht Klassen schlagen
   * sechs, in jeder Breite - auch gegen die Mobilregel der Altdatei, die
   * jedem Bild 400 px Mindesthöhe gibt. Der Altblock bleibt unberührt.
   */
  /* Und das Symbol eines Buttons behält die Grösse aus %button. */
  /* Only the image of the element itself, not any image the media
     editor or an inner block puts inside the slide. */
  /* HTML: eine fremde Seite als Hintergrund der Ebene.
     Sie füllt die Ebene wie ein Video - eine Karte oder ein fremder
     Player bringt sein eigenes Seitenverhältnis mit, hier gibt die
     Höhe des Banners das Maß. */
  /* ------ nur im Editor ------
     Der Canvas zeigt das eigene Video und die Einbettung wirklich und
     YouTube als Standbild - dieselben Regeln wie im Videoblock und in
     "Text & Medien".

     Ein <video> und ein <iframe> nehmen den Mauszeiger an sich: der
     Klick gälte dem Inhalt, und die Ebene liesse sich weder auswählen
     noch verschieben. Die durchsichtige Fläche darüber nimmt ihn
     entgegen und tritt zur Seite, sobald die Ebene ausgewählt ist. */
  /* Das Standbild von YouTube füllt denselben Ausschnitt wie der
     Player - und folgt dem Fokuspunkt, anders als der Player selbst. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content img {
  position: static;
  transform: none;
  max-width: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  object-fit: fill;
  z-index: auto;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button .button__icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > figure.img > img {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  /* Focal point of the element, written by render.php. Without one the
     crop stays centred, exactly as before. */
  object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
  transform: translate(-50%, -50%);
  max-width: unset;
  width: 100%;
  /* The box has to be the element, not the aspect ratio of the file.
     With "min-height" the image kept its own proportions and was merely
     clipped by the element - object-fit had nothing left to crop, and
     the focal point stayed without effect. The visible section is the
     same as before at 50%/50%. */
  height: 100%;
  z-index: 1;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  max-width: unset;
  min-width: 100%;
  /*
   * Die Höhe der Ebene - ausdrücklich, nicht nur als Mindestmass.
   *
   * Ein Prozentwert braucht eine Höhe zum Rechnen, und eine
   * Mindesthöhe ist keine: stand hier nur min-height, war die Höhe
   * dieses Kastens für alles darin "automatisch", der Rahmen des
   * Videos rechnete seine eigenen 100 % zu 0 - und das Video darin
   * ebenso. Zu sehen war dann gar kein Video, weder auf der Seite
   * noch im Canvas. Der Kasten liegt absolut in der Ebene und ist
   * mittig gestellt; mit height: 100% ist er genau die Ebene, und
   * darin schneidet object-fit zu.
   */
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  /* Focal point of the element, written by render.php - dieselbe
     Variable wie beim Bild. Der YouTube-Player bekommt sie nicht:
     dort bestimmt YouTube den Ausschnitt. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content .video-container,
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content .youtube-container {
  width: unset;
  min-width: 100vw;
  min-height: 100%;
  aspect-ratio: unset;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content .video-container > video {
  object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .embed-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .embed-content > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .nuevo--canvas-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide.is-selected .nuevo--canvas-shield {
  display: none;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .nuevo--video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*
   * Eine gewählte Ausrichtung der Buttons geht vor.
   *
   * Die Regeln darüber richten die Reihe nach dem Inhalt aus - Text
   * links, Buttons links. Wer sie ausdrücklich anders stellt, löst sie
   * davon. Beide Regeln sind gleich stark; entschieden wird über die
   * Reihenfolge, deshalb steht diese hier unten.
   */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-0 {
  max-width: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-10 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.1);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-20 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.2);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-30 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.3);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-40 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.4);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-50 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.5);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-60 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.6);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-70 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.7);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-80 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.8);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-90 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 0.9);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.content > .banner-content-inner.cw-100 {
  max-width: calc(var(--nuevo-content-max, 1598px) * 1);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport {
  padding-left: 20px;
  padding-right: 20px;
  /* Über die volle Viewportbreite heißt "links" auch links: der
     Kasten sitzt bündig an der Kante, ohne den Rest des Abstands
     dazwischen. Nur die genannte Seite - die gegenüberliegende
     behält ihren Abstand, sonst liefe der Inhalt in die andere
     Kante.

     Nur mit Kasten (has-box, siehe banner-slide/render.php): der
     bringt seinen eigenen Innenabstand mit, blanker Text stünde
     sonst direkt auf der Bildkante. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-top-left, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-center-left, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-bottom-left {
  padding-left: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-top-right, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-center-right, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport.has-box.align-bottom-right {
  padding-right: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-0 {
  max-width: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-10 {
  max-width: 10%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-20 {
  max-width: 20%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-30 {
  max-width: 30%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-40 {
  max-width: 40%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-50 {
  max-width: 50%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-60 {
  max-width: 60%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-70 {
  max-width: 70%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-80 {
  max-width: 80%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-90 {
  max-width: 90%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-100 {
  max-width: 100%;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.overlappedMargin {
  padding-top: var(--header_height, 0);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-left .button-container {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-center .button-container {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-top-right .button-container {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-left .button-container {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-center .button-container {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right {
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-center-right .button-container {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-left .button-container {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-center .button-container {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right > .banner-content-inner {
  align-items: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.align-bottom-right .button-container {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container {
  /* Der Inhalt der Ebene ist so breit wie sein Text; die Reihe
     darin hat keinen Platz zu verteilen und rückt als Ganzes. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-left {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-center {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-right {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-left {
  align-self: flex-start;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-center {
  align-self: center;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content .button-container.nuevo--btn-right {
  align-self: flex-end;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
  /* Der Kasten ist so breit wie sein Inhalt und über der
     Viewportbreite selten breit: hier wird getrennt - siehe
     css/parts/_text-wrap.scss. */
  /* Safari braucht das Präfix bis heute. */
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Und die Notbremse dazu: nicht jedes lange Wort hat eine Trennstelle, die
     passt - eine URL zum Beispiel hat gar keine. */
  overflow-wrap: break-word;
  /*
   * Damit beides überhaupt zum Zug kommt.
   *
   * Ein Element in einem Raster oder in einer Flexzeile ist von Haus aus
   * mindestens so breit wie sein breitester Inhalt ("min-width: auto"). Ein
   * langes Wort machte damit die Spalte breiter, statt selbst umzubrechen -
   * die Regel darüber stand da und tat nichts. Genau so war es im Videoblock
   * zu sehen. Wo das Element kein Raster- und kein Flexelement ist, ändert die
   * Zeile nichts.
   */
  min-width: 0;
  display: flex;
  flex-flow: column;
  /* As wide as its content, at most as wide as the chosen maximum
     content width (cw-*, above). The cross size of a flex item in a
     column follows align-items, and every align-* class above sets
     one - so the content really does sit in the corner it names,
     with or without the box behind it. With width:100% it filled
     the row instead and only the text moved. */
  width: auto;
  color: var(--colorscheme__body, var(--defaultcolor__body, #000000));
  /* The "Innenabstand" control writes the variable on
     the slider; without it the value of the legacy block applies. */
  padding-top: var(--banner-content-space, 40px);
  padding-bottom: var(--banner-content-space, 40px);
  box-sizing: border-box;
  user-select: text;
  /* Box behind the content. It exists only when it is switched on,
     so nothing changes for a banner without it - see render.php.

     A flex column like its container, so headline, text and buttons
     stay flex items: as block children their margins would collapse
     and the spacing between them would shrink.

     The colour sits on a layer of its own, exactly as the overlay
     does it above: opacity on the box itself would fade the text
     with it. The layer stays inside the stacking context of
     .banner-content (z-index: 3), so it covers the image and stays
     under the text. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner > .banner-box {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  box-sizing: border-box;
  padding: var(--banner-box-space, 40px);
  border-radius: var(--banner-box-radius, 0);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner > .banner-box:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Without a colour of its own the box takes the box colour of
     the colour scheme - the one a box, a teaser or the CTA has. */
  background: var(--banner-box-color, var(--colorscheme__boxbackground, var(--defaultcolor__boxbackground, #f0f0f0)));
  opacity: var(--banner-box-opacity, 1);
  pointer-events: none;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h1, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h2, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h3, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h4, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h5, section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content h6 {
  color: var(--colorscheme__body, var(--defaultcolor__body, #000000));
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport {
  height: 100vh;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide {
  padding: 0;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
  /* More room at viewport height: a fixed or overlapping header
     would otherwise sit on the title. */
  padding-top: var(--banner-content-space, 160px);
  padding-bottom: var(--banner-content-space, 160px);
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-content {
  height: auto;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-content > .slick-list > .slick-track > .slick-slide {
  min-height: 400px;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.height-content > .slick-list > .slick-track > .slick-slide .banner-content {
  min-height: inherit;
}

/* --------------------------------- std_extra_large_width [xl] --------------------------------- */
/* ------------------------------------ std_large_width [lg] ------------------------------------ */
/* --------------------------------- std_middle_large_width [md] -------------------------------- */
@media screen and (max-width: 900px) {
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-0, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-10, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-20, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-30, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-40, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-50, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-60, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-70, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-80, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-90, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-100 {
    max-width: unset;
  }
}
@media screen and (max-width: 584px) {
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-0, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-10, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-20, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-30, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-40, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-50, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-60, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-70, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-80, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-90, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.viewport > .banner-content-inner.cw-100 {
    max-width: unset;
  }
}
/* --------------------------------- std_middle_small_width [ms] -------------------------------- */
@media screen and (max-width: 786px) {
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner {
    /* height-viewport sits on .slick__slider, not on a slide - nested one
       level deeper the rule matched nothing and the reduced padding never
       applied. The [sm] block below has it at the right level. */
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 470px) {
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner {
    /* height-viewport sits on .slick__slider, not on a slide - nested one
       level deeper the rule matched nothing and the reduced padding never
       applied. The [sm] block below has it at the right level. */
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
/* ------------------------------------ std_small_width [sm] ------------------------------------ */
@media screen and (max-width: 480px) {
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .button-container {
    flex-wrap: wrap;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > figure.img > img {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    /* Stacked layout: the image carries the height again. */
    height: auto;
    min-height: 400px;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    aspect-ratio: 1/1;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content {
    height: auto;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.overlappedMargin {
    padding-top: 0;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    /* Die Box halbiert ihren eigenen Innenabstand mit - sonst
       frisst sie auf einem 400 px breiten Schirm 80 px allein für
       das Polster, während ringsum alles auf 20 px zurückgeht. So
       macht es der CTA-Block mit seinem Kasten auch. */
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner > .banner-box {
    padding: calc(var(--banner-box-space, 40px) / 2);
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport {
    height: auto !important;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content {
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h1, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h2, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h3, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h4, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h5, body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h6 {
    text-align: center !important;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content .button-container {
    justify-content: center !important;
  }
  body:not(.editor-styles-wrapper) section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 400px) {
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .button-container {
    flex-wrap: wrap;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > figure.img > img {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    /* Stacked layout: the image carries the height again. */
    height: auto;
    min-height: 400px;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide > .video-content {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    aspect-ratio: 1/1;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content {
    height: auto;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content.overlappedMargin {
    padding-top: 0;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    /* Die Box halbiert ihren eigenen Innenabstand mit - sonst
       frisst sie auf einem 400 px breiten Schirm 80 px allein für
       das Polster, während ringsum alles auf 20 px zurückgeht. So
       macht es der CTA-Block mit seinem Kasten auch. */
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner > .banner-box {
    padding: calc(var(--banner-box-space, 40px) / 2);
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport {
    height: auto !important;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content {
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h1, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h2, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h3, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h4, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h5, body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content h6 {
    text-align: center !important;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content .button-container {
    justify-content: center !important;
  }
  body.editor-styles-wrapper section.block.nuevo--native.nuevo--block-banner .slick__slider.height-viewport > .slick-list > .slick-track > .slick-slide .banner-content > .banner-content-inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
/* ------------------------------------------------------------------ editor */
/*
 * In the canvas slick never runs: it is a front end script and would fight the
 * block editor for the DOM. The slides are therefore stacked below each other,
 * which is also the only way to edit each of them. These rules replace the
 * geometry slick writes inline on the front end - they are scoped to the marker
 * class the edit() function adds and can never reach a rendered page.
 */
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides {
  height: auto;
  /* A full viewport slide would push everything below it out of reach. */
  /* A hidden element is kept, but the front end skips it. */
  /* Stands in for the YouTube iframe and for a video that is not chosen yet. */
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides > .slick-list {
  height: auto;
  overflow: visible;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides > .slick-list > .slick-track {
  height: auto;
  display: block;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides > .slick-list > .slick-track > .slick__slide {
  display: block;
  float: none;
  width: auto;
  /* On the front end the slick list clips the media of every slide. In
     the canvas the list has to stay open for the block interface, so
     each element clips its own - otherwise the image, which is centred
     and taller than its element, runs into the neighbours. */
  overflow: hidden;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides.height-viewport > .slick-list > .slick-track > .slick__slide {
  height: 70vh;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides.height-content > .slick-list > .slick-track > .slick__slide {
  min-height: 400px;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides .slick__slide.nuevo--slide-hidden {
  opacity: 0.4;
  outline: 1px dashed var(--colorscheme__body, currentColor);
  outline-offset: -4px;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides .nuevo--video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border: 1px dashed currentColor;
  opacity: 0.6;
  text-align: center;
  padding: 20px;
}
section.block.nuevo--native.nuevo--block-banner .slick__slider.nuevo--editor-slides .video-container > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
}

/* ------------------------------------------------- mobile video alternative */
/*
 * Below the small breakpoint an element may put a still image or a second file
 * in place of its video. Without one nothing changes - the rules only ever
 * apply to an element that carries a .video-mobile.
 */
section.block.nuevo--native.nuevo--block-banner .slick__slide > .video-content > .video-mobile {
  display: none;
}
@media screen and (max-width: 480px) {
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .video-container,
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .youtube-container {
    display: none;
  }
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .video-mobile {
    display: block;
    width: 100%;
    height: 100%;
  }
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > img,
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > video,
  section.block.nuevo--native.nuevo--block-banner body:not(.editor-styles-wrapper) .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
  }
}
@media screen and (max-width: 400px) {
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .video-container,
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .youtube-container {
    display: none;
  }
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .video-mobile {
    display: block;
    width: 100%;
    height: 100%;
  }
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > img,
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > video,
  section.block.nuevo--native.nuevo--block-banner body.editor-styles-wrapper .slick__slide > .video-content:has(> .video-mobile) > .video-mobile > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: var(--nuevo-focal-x, 50%) var(--nuevo-focal-y, 50%);
  }
}

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