@charset "UTF-8";
/**
 * Block "Cleverreach" - block styles.
 *
 * Declared as "style" in block.json, so WordPress loads it on the front end and
 * inside the editor canvas iframe. The fields (nuevo/cleverreach-field) are
 * styled here as well: every selector starts at the section of this block
 * anyway. Compiled to style.css by the SCSS watcher.
 *
 * Taken from css/parts/blocks/_cleverreach.scss. Two things differ from the
 * legacy stylesheet: the content width is a factor in a variable instead of one
 * class per five per cent step, and the grid spacing rides on
 * --block_cleverreach__gridSpace so the two sliders of the block stay
 * independent of each other. Everything the fields themselves look like comes
 * from css/parts/_forms.scss and is untouched.
 *
 * @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 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).
 */
/**
 * Der Zug eines Rasters nach aussen.
 *
 * Die Datei gibt selbst nichts aus - sie wird in mehrere Blockstylesheets
 * eingebunden und würde sonst ihre Regeln in jedes davon schreiben.
 *
 * @package nuevo
 */
/*
 * Der Zug eines Rasters nach aussen - gedeckelt auf den Container.
 *
 * Ein mehrspaltiges Raster gibt jeder Spalte den halben Rasterabstand als
 * Innenabstand und zieht den Wrapper um denselben Betrag nach aussen. So endet
 * der Inhalt der äusseren Spalten bündig mit dem Container, und dazwischen
 * steht der volle Abstand.
 *
 * Bis zu 40 px Rasterabstand geht das auf: der Zug bleibt bei höchstens 20 px,
 * und so viel Innenabstand hat %container (css/parts/_placeholders.scss). Ab
 * 45 px zieht das Raster **aus dem Container heraus** - und weil rechts vom
 * Dokument kein Rand ist, lässt sich die ganze Seite seitlich schieben.
 * Gemessen an einem Boxenblock mit 80 px: 20 px Überhang je Seite, auf dem
 * Schirm wie auf dem Handy.
 *
 * max() deckelt den waagerechten Zug deshalb bei -20 px. Unter 40 px
 * Rasterabstand ändert sich dadurch nichts; darüber rücken die äusseren
 * Spalten um die Differenz nach innen, statt überzustehen. Senkrecht bleibt
 * der Zug ungedeckelt - nach oben und unten begrenzt kein Container.
 *
 * @param $x Rasterabstand waagerecht.
 * @param $y Rasterabstand senkrecht, sonst derselbe.
 */
/* Copied from the head of css/parts/_forms.scss, which cannot be imported here:
   it would bring its whole rule set along. The values are the customizer
   properties, so both worlds read the same numbers. */
section.block.nuevo--native.nuevo--block-cleverreach {
  /* Die Ausrichtung der Überschrift - siehe css/parts/_headline-align.scss. */
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left {
  text-align: left;
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h1, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h2, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h3, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h4, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h5, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h1, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h2, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h3, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h4, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h5, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right {
  text-align: right;
}
section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h1, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h2, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h3, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h4, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h5, section.block.nuevo--native.nuevo--block-cleverreach .block_headline.align-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container {
  /* Content width. The legacy block held one class per five per cent step,
     all of them against the same base; the factor covers the whole range in
     one rule. Without the variable this is the max-width of %container. */
  max-width: calc(var(--nuevo-content-max, 1598px) * var(--nuevo-content-width, 1));
  /* The answer of the form. Empty until something has been submitted, and an
     empty block box is exactly as high as it was before - the legacy block
     wrote its notice into the same place without a container of its own. */
  /* The asterisk of a required field must not make its label taller than the
     one next to it - otherwise the two inputs of a row stand at different
     heights. css/default.css carries this from normalize; the canvas
     stylesheet does not, which is why the misalignment shows up in the editor
     only. Same declarations, so nothing changes on the front end. */
  /* Geometry of a field: label above, input below, and the input pinned to the
     bottom of the column. That last part is what keeps a field whose label
     carries the asterisk of a required field - or has no label at all - on the
     same line as its neighbours: the columns of a row are stretched to the
     same height, and space-between pushes the input down. Same source as the
     rules below, css/parts/_forms.scss, and on the front end therefore a
     no-op. */
  /* The looks of the fields.
     css/parts/_forms.scss holds these very declarations, so on the front end
     they change nothing - the values are identical and only the file they
     come from differs. The canvas is why they are here at all:
     css/editor-blocks.scss deliberately imports only variables, grid and
     block styles, so without this the inputs would fall back to the browser
     default and none of them would fill its column. */
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container > .cleverreach-messages:empty {
  display: none;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .gridWrapper {
  /* Grid spacing, as in every multi column block: half of it as padding on
     each column, pulled back at the edges so the outer columns still line
     up with the container. Without an override this is the value from
     _typography.scss, which is why the geometry does not move. */
  margin: calc(var(--block_cleverreach__gridSpace, var(--blocks__gridSpace, 30px)) / -2) max(var(--block_cleverreach__gridSpace, var(--blocks__gridSpace, 30px)) / -2, -20px);
  /* Only the row of fields, not the one carrying the submit button: there
     a stretched flex child would pull the button across the full width. */
  /* Only in the editor canvas: the marker class comes from edit(), the
     front end never carries it. The theme wide grid classes start at 900 px,
     and the canvas iframe is usually narrower - without this rule every
     field would run the full width there, no matter what was chosen. */
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .gridWrapper > .grid {
  padding: calc(var(--block_cleverreach__gridSpace, var(--blocks__gridSpace, 30px)) / 2);
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .gridWrapper.cleverreach-fields > .grid {
  display: flex;
  flex-flow: column;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .gridWrapper.nuevo--editor-preview > .grid {
  width: calc(100% * var(--nuevo-editor-share, 1));
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container sub,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container sup {
  top: -0.5em;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container sub {
  bottom: -0.25em;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper {
  display: flex;
  justify-content: space-between;
  /* The one deliberate deviation from the legacy block: the wrapper fills
     the height of its column instead of only its content. The columns of a
     row are stretched to the same height anyway, so space-between now has
     something to distribute - labels line up at the top of the row, inputs
     at the bottom. Without it a field without a label, or one beside a
     taller neighbour, stands higher than the rest. The legacy block still
     does that; there the wrapper is only as high as what is in it.

     A height in per cent would not resolve here: the column is a stretched
     flex item and has no definite height to measure against. The column
     itself becomes the flex container instead, see .cleverreach-fields. */
  flex: 1 1 auto;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper > .form-input--label {
  width: 140px;
  text-align: left;
  padding-top: 8px;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper > .form-input--label label {
  font-weight: var(--typography_body-font-weight);
  color: var(--colorscheme__body, var(--defaultcolor__body, #000000));
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper > .form-input--content {
  width: calc(100% - 140px - 20px);
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper.layout-horizontal > .form-input--label {
  width: 140px;
  padding-top: 8px;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper.layout-horizontal > .form-input--content {
  width: calc(100% - 140px - 20px);
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper.layout-vertical {
  flex-flow: column;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper.layout-vertical > .form-input--label {
  width: 100%;
  padding-bottom: 8px;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container .form-input--wrapper.layout-vertical > .form-input--content {
  width: 100%;
  /* The second half of the deviation. space-between alone does not do
     it: with a single child - a field without a label - it puts that
     child at the start, not at the end. An auto margin takes the free
     space in every case, so the label stays at the top of the column
     and the input at its bottom, next to the inputs of its row. */
  margin-top: auto;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=text],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=email],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=tel],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=password],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=number],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=date],
section.block.nuevo--native.nuevo--block-cleverreach > .content-container textarea,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=text]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=email]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=tel]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=password]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=number]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=date]:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container textarea:not(.no-style),
section.block.nuevo--native.nuevo--block-cleverreach > .content-container select:not(.no-style) {
  font-family: var(--typography_body-font-family);
  font-weight: var(--typography_body-font-weight);
  font-style: var(--typography_body-font-style);
  width: 100%;
  height: var(--forms__input__height);
  border: var(--forms__input__borderWidth) var(--forms__input__borderStyle) var(--forms__input__borderColor);
  border-radius: var(--forms__input__borderRadius-border-top-left-radius, 0) var(--forms__input__borderRadius-border-top-right-radius, 0) var(--forms__input__borderRadius-border-bottom-right-radius, 0) var(--forms__input__borderRadius-border-bottom-left-radius, 0);
  background: var(--forms__input__backgroundColor) !important;
  padding: 8px;
  box-sizing: border-box !important;
  color: var(--forms__input__textColor) !important;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=text]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=email]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=tel]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=password]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=number]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container input[type=date]:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container textarea:not(.no-style)::placeholder,
section.block.nuevo--native.nuevo--block-cleverreach > .content-container select:not(.no-style)::placeholder {
  font-style: italic;
  color: var(--forms__input__textColor);
  opacity: 1;
}
section.block.nuevo--native.nuevo--block-cleverreach > .content-container textarea:not(.no-style) {
  height: auto;
}

/* --------------------------------- std_extra_large_width [xl] --------------------------------- */
/* ------------------------------------ std_large_width [lg] ------------------------------------ */
/* --------------------------------- std_middle_large_width [md] -------------------------------- */
/* --------------------------------- std_middle_small_width [ms] -------------------------------- */
/* ------------------------------------ std_small_width [sm] ------------------------------------ */

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