@charset "UTF-8";
/**
 * Block "FAQ" - 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 sections (nuevo/faq-item) are styled here as well: every selector starts
 * at the section of this block anyway.
 *
 * Taken from css/parts/blocks/_faq.scss. Two things differ from the legacy
 * stylesheet: the content width is a factor in a variable instead of one class
 * per ten per cent step, and the mask image is addressed from this directory.
 *
 * @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. */
/**
 * 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). */
/**
 * 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).
 */
/**
 * 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-faq {
  /* Die Ausrichtung der Überschrift - siehe css/parts/_headline-align.scss. */
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-left {
  text-align: left;
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h1, section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h2, section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h3, section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h4, section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h5, section.block.nuevo--native.nuevo--block-faq .block_headline.align-left h6 {
  text-align: left !important;
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-center {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h1, section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h2, section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h3, section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h4, section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h5, section.block.nuevo--native.nuevo--block-faq .block_headline.align-center h6 {
  text-align: center !important;
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-right {
  text-align: right;
}
section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h1, section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h2, section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h3, section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h4, section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h5, section.block.nuevo--native.nuevo--block-faq .block_headline.align-right h6 {
  text-align: right !important;
}
section.block.nuevo--native.nuevo--block-faq > .content-container {
  /* Content width. The legacy block held one class per ten 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));
  /* Editor canvas.
     js/nuevo-blocks.js does not run here, so nothing would ever open a
     section - the text of every section would be invisible and uneditable.
     The marker class is written by edit(), see src/editor.js. */
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element {
  /* Schmale Kästen: hier wird getrennt - siehe
     css/parts/_text-wrap.scss. */
  width: 100%;
  margin: 0 auto;
  border-bottom: 2px solid var(--colorscheme__body, var(--defaultcolor__body, #000000));
  /* Editor only: a hidden section stays in the canvas and is marked there,
     the front end skips it altogether (render.php). */
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline,
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-answer {
  /* 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-faq > .content-container .faq-element .faq-headline {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 15px 0;
  cursor: pointer;
  /* Die Überschrift bringt den Abstand mit, den eine Überschrift im
     Fließtext zu ihrem Absatz hält - hier ist das der Abstand zur
     Antwort, und den setzt die Klappzeile schon selbst. Zweimal
     gemessen ergab das 20 px zu viel. */
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h1, section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h2, section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h3, section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h4, section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h5, section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline h6 {
  margin-bottom: 0;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-headline:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--colorscheme__body, var(--defaultcolor__body, #000000));
  mask-image: url(../../../css/img/arrow_down.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  transition: -webkit-transform 550ms ease;
  transition: transform 550ms ease;
  transition: transform 550ms ease, -webkit-transform 550ms ease;
  -moz-transition: -moz-transform 550ms ease;
  -ms-transition: -ms-transform 550ms ease;
  -o-transition: -o-transform 550ms ease;
  -webkit-transition: -webkit-transform 550ms ease;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description {
  /* Die Buttons stehen in einer eigenen Reihe. Sie lagen bisher lose in
     der Antwort, als inline-flex im Textfluss; die Reihe ändert daran
     nichts, bis jemand eine Ausrichtung wählt. */
  display: none;
  width: 100%;
  /* Nach oben nichts: den Abstand zur Frage macht der Innenabstand der
     Klappzeile darüber. Vorher standen 71 px zwischen Frage und Antwort
     - 15 px Klappzeile, 20 px Überschrift, 20 px hier und 16 px vom
     ersten Absatz. Übrig bleiben die 15 px der Klappzeile. */
  padding: 0 0 20px;
  /* Der erste Absatz einer Antwort bringt seinen eigenen Rand mit; nach
     oben hat der Kasten ihn schon von der Klappzeile.

     Zwei Wege zum selben Absatz: auf der Seite steckt die Antwort in
     .faq-answer - dem einzigen Element, das für die
     schema.org-Auszeichnung dazukam (render.php) -, im Editor-Canvas
     hängen die inneren Blöcke direkt hier, weil useInnerBlocksProps
     keinen Zwischenbehälter zulässt. Ohne beide Selektoren stünde der
     Text im Canvas 16 px tiefer als auf der Seite. */
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description .nuevo--buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 0;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description .nuevo--buttons.nuevo--btn-left {
  justify-content: flex-start;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description .nuevo--buttons.nuevo--btn-center {
  justify-content: center;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description .nuevo--buttons.nuevo--btn-right {
  justify-content: flex-end;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description > :first-child,
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description > .faq-answer > :first-child {
  margin-top: 0;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description > :last-child,
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element .faq-description > .faq-answer > :last-child {
  margin-bottom: 0;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element.faq-open .faq-headline:after {
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-element.nuevo--item-hidden {
  opacity: 0.4;
  outline: 1px dashed var(--colorscheme__body, currentColor);
  outline-offset: -4px;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-container.nuevo--editor-preview .faq-headline {
  cursor: auto;
}
section.block.nuevo--native.nuevo--block-faq > .content-container .faq-container.nuevo--editor-preview .faq-description {
  display: block;
}

/* ---------------------------------------- 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-faq .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_faq__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-faq .content-container > .block_abstract.align-left {
  text-align: left;
}
section.block.nuevo--native.nuevo--block-faq .content-container > .block_abstract.align-center {
  text-align: center;
}
section.block.nuevo--native.nuevo--block-faq .content-container > .block_abstract.align-right {
  text-align: right;
}

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