/**
 * Das Raster der alten WPBakery-Seiten – nachgebaut, nicht mitgeliefert.
 *
 * 🔴 WARUM ES DIESE DATEI GIBT
 *
 * Die 11 Inhaltsseiten kommen aus WPBakery. Ihr Markup traegt Klassen wie
 * `vc_row wpb_row vc_row-fluid` und `vc_col-sm-12 vc_col-lg-6`, und die sind
 * NICHT in der gebauten `weserpool.css` des Themes definiert – sie stehen in
 * `js_composer.min.css`, dem Stylesheet des kostenpflichtigen Plugins. Live
 * laedt weserpool.com beide (nachgezaehlt im Kopf von
 * `live-referenz/html/startseite.html`). Der neue Shop laedt WPBakery nicht
 * und soll es auch nie tun.
 *
 * Zwei Wege waren moeglich:
 *
 *   a) Auf Bootstrap-3-Klassen uebersetzen (`row`, `col-sm-12 col-lg-6`).
 *      Geometrisch identisch – die Haltepunkte sind dieselben (768/992/1200),
 *      die Rinne ist dieselbe (15px). ABER: `functions.js:241` sucht
 *      `$('.vc_row')` und haengt beim Scrollen `-in-view -active` an. Mit
 *      `.row` bliebe die Einblend-Animation aus – auf JEDER der 11 Seiten,
 *      lautlos.
 *   b) Die Klassennamen behalten und die ~40 gebrauchten Regeln nachbauen.
 *
 * Es ist (b) geworden. Nebeneffekt, der den Ausschlag gab: das Markup der
 * ACF-Bloecke bleibt damit Zeichen fuer Zeichen das der Live-Seite, und
 * `vergleich-live.sh` kann direkt danebenhalten.
 *
 * ## Woher die Werte stammen
 *
 * Aus `app/live-referenz/css/js_composer.min.css` (WPBakery 6.0.0, 469 KB,
 * am 2026-09-04 von der laufenden Live-Seite geholt und eingefroren – das
 * Original liegt dem Datenbankabzug nicht bei und ist mit der Abschaltung
 * weg). Nicht geschaetzt, sondern herauskopiert.
 *
 * Bewusst NICHT uebernommen: alles zu `vc_row-flex`, `vc_non_responsive`,
 * RTL, den Animationen und den 60 anderen Elementen des Plugins. Kommt eine
 * Seite dazu, die etwas davon braucht, wird es hier ergaenzt – mit derselben
 * Quellenangabe.
 *
 * Eingereiht in `shop/inc/assets.php`, nur auf Shop-Seiten.
 */

/* ----------------------------------------------------------- 1. Die Reihe */

/* Gegenstueck zur 15px-Rinne der Spalten – wie Bootstrap 3 `.row`. */
.vc_row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Die Spalten floaten; ohne diesen Clearfix kollabiert die Reihe. */
.vc_row:before,
.vc_row:after {
    content: " ";
    display: table;
}

.vc_row:after {
    clear: both;
}

/* ---------------------------------------------------------- 2. Die Spalte */

/* Grundregel aller Spalten. `box-sizing` ist Pflicht: ohne sie rechnet die
   Breitenangabe unten die 30px Rinne NICHT ein und die Spalten brechen um. */
[class*="vc_col-xs-"],
[class*="vc_col-sm-"],
[class*="vc_col-md-"],
[class*="vc_col-lg-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Der Spaltenbehaelter von WPBakery. */
.vc_column_container {
    width: 100%;
}

/* 🔴 Der Clearfix der Spalten-Innenhuelle. NACHGETRAGEN 2026-09-04.
 *
 * Ohne diese drei Zeilen faellt jede Spalte auf ihre `min-height` von 1px
 * zusammen, sobald ihr Inhalt floatet – und `.icon__box` tut genau das
 * (`weserpool.css`: `float:left`). Auf Desktop faellt es NICHT auf, weil die
 * Spalten dort selbst floaten und der Clearfix der Reihe alles auffaengt;
 * unterhalb von 768px floaten die Spalten aber nicht mehr.
 *
 * Gefunden beim Messen von Aquitaine auf 390px: die Innenreihe war 2px
 * niedriger als live. Die Spur fuehrte nicht zur Reihe, sondern zur Spalte –
 * die MIT der Iconbox war 1px hoch statt 274, die beiden LEEREN daneben
 * hielten die Reihe zufaellig auf der richtigen Hoehe. Ein 2px-Fehler mit
 * einer 273px-Ursache.
 *
 * Steht in js_composer als `.vc_column-inner::after,.vc_column-inner::before`.
 */
.vc_column-inner::before,
.vc_column-inner::after {
    content: " ";
    display: table;
}

.vc_column-inner::after {
    clear: both;
}


/* --- Stufe xs: ohne Haltepunkt, gilt ab 0px --- */

.vc_col-xs-1,
.vc_col-xs-2,
.vc_col-xs-3,
.vc_col-xs-4,
.vc_col-xs-5,
.vc_col-xs-6,
.vc_col-xs-7,
.vc_col-xs-8,
.vc_col-xs-9,
.vc_col-xs-10,
.vc_col-xs-11,
.vc_col-xs-12 {
    float: left;
}

.vc_col-xs-12 {
    width: 100%;
}

.vc_col-xs-11 {
    width: 91.66666667%;
}

.vc_col-xs-10 {
    width: 83.33333333%;
}

.vc_col-xs-9 {
    width: 75%;
}

.vc_col-xs-8 {
    width: 66.66666667%;
}

.vc_col-xs-7 {
    width: 58.33333333%;
}

.vc_col-xs-6 {
    width: 50%;
}

.vc_col-xs-5 {
    width: 41.66666667%;
}

.vc_col-xs-4 {
    width: 33.33333333%;
}

.vc_col-xs-3 {
    width: 25%;
}

.vc_col-xs-2 {
    width: 16.66666667%;
}

.vc_col-xs-1 {
    width: 8.33333333%;
}


/* --- Stufe sm: ab 768px --- */

@media (min-width: 768px) {

    .vc_col-sm-1,
    .vc_col-sm-2,
    .vc_col-sm-3,
    .vc_col-sm-4,
    .vc_col-sm-5,
    .vc_col-sm-6,
    .vc_col-sm-7,
    .vc_col-sm-8,
    .vc_col-sm-9,
    .vc_col-sm-10,
    .vc_col-sm-11,
    .vc_col-sm-12 {
        float: left;
    }

    .vc_col-sm-12 {
        width: 100%;
    }

    .vc_col-sm-11 {
        width: 91.66666667%;
    }

    .vc_col-sm-10 {
        width: 83.33333333%;
    }

    .vc_col-sm-9 {
        width: 75%;
    }

    .vc_col-sm-8 {
        width: 66.66666667%;
    }

    .vc_col-sm-7 {
        width: 58.33333333%;
    }

    .vc_col-sm-6 {
        width: 50%;
    }

    .vc_col-sm-5 {
        width: 41.66666667%;
    }

    .vc_col-sm-4 {
        width: 33.33333333%;
    }

    .vc_col-sm-3 {
        width: 25%;
    }

    .vc_col-sm-2 {
        width: 16.66666667%;
    }

    .vc_col-sm-1 {
        width: 8.33333333%;
    }

}


/* --- Stufe md: ab 992px --- */

@media (min-width: 992px) {

    .vc_col-md-1,
    .vc_col-md-2,
    .vc_col-md-3,
    .vc_col-md-4,
    .vc_col-md-5,
    .vc_col-md-6,
    .vc_col-md-7,
    .vc_col-md-8,
    .vc_col-md-9,
    .vc_col-md-10,
    .vc_col-md-11,
    .vc_col-md-12 {
        float: left;
    }

    .vc_col-md-12 {
        width: 100%;
    }

    .vc_col-md-11 {
        width: 91.66666667%;
    }

    .vc_col-md-10 {
        width: 83.33333333%;
    }

    .vc_col-md-9 {
        width: 75%;
    }

    .vc_col-md-8 {
        width: 66.66666667%;
    }

    .vc_col-md-7 {
        width: 58.33333333%;
    }

    .vc_col-md-6 {
        width: 50%;
    }

    .vc_col-md-5 {
        width: 41.66666667%;
    }

    .vc_col-md-4 {
        width: 33.33333333%;
    }

    .vc_col-md-3 {
        width: 25%;
    }

    .vc_col-md-2 {
        width: 16.66666667%;
    }

    .vc_col-md-1 {
        width: 8.33333333%;
    }

}


/* --- Stufe lg: ab 1200px --- */

@media (min-width: 1200px) {

    .vc_col-lg-1,
    .vc_col-lg-2,
    .vc_col-lg-3,
    .vc_col-lg-4,
    .vc_col-lg-5,
    .vc_col-lg-6,
    .vc_col-lg-7,
    .vc_col-lg-8,
    .vc_col-lg-9,
    .vc_col-lg-10,
    .vc_col-lg-11,
    .vc_col-lg-12 {
        float: left;
    }

    .vc_col-lg-12 {
        width: 100%;
    }

    .vc_col-lg-11 {
        width: 91.66666667%;
    }

    .vc_col-lg-10 {
        width: 83.33333333%;
    }

    .vc_col-lg-9 {
        width: 75%;
    }

    .vc_col-lg-8 {
        width: 66.66666667%;
    }

    .vc_col-lg-7 {
        width: 58.33333333%;
    }

    .vc_col-lg-6 {
        width: 50%;
    }

    .vc_col-lg-5 {
        width: 41.66666667%;
    }

    .vc_col-lg-4 {
        width: 33.33333333%;
    }

    .vc_col-lg-3 {
        width: 25%;
    }

    .vc_col-lg-2 {
        width: 16.66666667%;
    }

    .vc_col-lg-1 {
        width: 8.33333333%;
    }

}


/* ------------------------------------------------ 3. Die Inhaltselemente */

/* Der Abstand zwischen zwei Elementen derselben Spalte. Steht in
   js_composer als `.wpb_button,.wpb_content_element,ul.wpb_thumbnails-fluid>li`
   – uebernommen ist nur der Teil, den die 11 Seiten benutzen. */
.wpb_content_element {
    margin-bottom: 35px;
}

/* Der letzte Absatz eines Textblocks laesst seinen Abstand fallen, sonst
   addiert er sich auf die 35px oben und die Reihe wird 20px zu hoch. */
.wpb_text_column :last-child,
.wpb_text_column p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- 3b. Reihen auf gleicher Höhe */

/* 🔴 NACHGETRAGEN 2026-09-04, fuer die alte Shop-Startseite.
 *
 * Dort steht eine Reihe mit `equal_height="yes"` – ein hervorgehobenes Produkt
 * links, Text rechts, beide gleich hoch in einem Koralle-Rahmen. WPBakery
 * loest das mit Flexbox.
 *
 * `vc_row-o-equal-height` und `vc_row-has-fill` stehen bereits in
 * `weserpool.css` (1 bzw. 7 Regeln) – NUR `vc_row-flex` fehlt dort, und ohne
 * die Grundregel greift keine der anderen. Deshalb steht hier auch nur diese
 * eine Familie.
 *
 * ⚠️ `display:flex` an der Reihe haengt den Clearfix aus Abschnitt 1 aus. Das
 * ist richtig so – floatende Spalten und Flexbox schliessen sich aus, und
 * WPBakery macht es genauso.
 */
.vc_row.vc_row-flex {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.vc_row.vc_row-flex > .vc_column_container {
    display: flex;
}

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Ohne diese Zeile fallen leere Spalten in der Flex-Reihe auf 0 zusammen. */
.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner > * {
    min-height: 1em;
}

/* 🔴 DIE REIHE DANACH RUECKT 35 PX NACH UNTEN. Nachgetragen 2026-09-04.
 *
 * js_composer setzt:
 *
 *   .vc_col-has-fill>.vc_column-inner,
 *   .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner,
 *   .vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner,
 *   .vc_row-has-fill>.vc_column_container>.vc_column-inner { padding-top:35px }
 *
 * ⚠️ Uebernommen ist davon NUR die dritte Zeile – die Nachbarregel. Der Grund
 * steht in `weserpool.css`: das Quell-Theme nimmt die anderen wieder zurueck
 *
 *   .vc_row-has-fill+.vc_row-full-width+.vc_row>…>.vc_column-inner,
 *   .vc_row-has-fill>.vc_column_container>.vc_column-inner { padding-top:0 }
 *
 * – aber eben nicht die Nachbarregel. Live nachgemessen: die Spalten der
 * Fuellreihe selbst stehen auf 0, die der Reihe DANACH auf 35.
 *
 * Wer die ganze Gruppe kopiert, bekommt 35 px zu viel in der Reihe mit dem
 * hervorgehobenen Produkt.
 *
 * Gefunden beim Messen der alten Shop-Startseite: die Download-Reihe war
 * 35 px zu NIEDRIG – auf allen drei Breakpoints gleich. Genau daran erkennt
 * man einen festen Abstand und keinen Umbruchfehler. Die Ursache lag eine
 * Reihe HOEHER, bei der Reihe mit dem Koralle-Rahmen.
 *
 * Betrifft nur diese eine Seite: `equal_height="yes"` steht im Quellinhalt
 * genau einmal, und nur damit entsteht `vc_row-has-fill`.
 */
.vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner {
    padding-top: 35px;
}

/* ------------------------------------------------------ 4. Das Einzelbild */

/* 🔴 NACHGETRAGEN 2026-09-04, beim Bau der Farbwelt-Seite.
 *
 * `vc_single_image` gibt das Bild MIT `width`/`height`-Attributen aus (auf
 * `farbwelt` sind das 800x800). Ohne `max-width:100%` sprengt es damit seine
 * Spalte: die Seite wurde auf Tablet 10px und auf Mobil 17px zu breit, die
 * Vierteilung riss auf, und der Einleitungstext darueber brach voellig anders
 * um – auf Tablet 336px statt 72px hoch.
 *
 * Das ist die Falle an dieser Stelle: sichtbar war eine falsche TEXTHOEHE,
 * die Ursache lag beim BILD zwei Reihen weiter unten.
 *
 * `weserpool.css` faengt es nicht ab – dort steht keine allgemeine
 * `img{max-width:100%}`-Regel.
 *
 * Uebernommen sind nur die vier Regeln, die unser Markup wirklich braucht.
 * Die 20 Varianten fuer Rahmen, Schatten und Kreisformen bleiben draussen:
 * die 11 Seiten benutzen ausschliesslich `vc_box_border_grey`, und das ist
 * OHNE das zugehoerige `vc_box_border` gesetzt – es greift also gar keine
 * Rahmenregel.
 */
.wpb_single_image img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
}

.wpb_single_image .vc_single_image-wrapper {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

.wpb_single_image .vc_figure {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    max-width: 100%;
}

.wpb_single_image.vc_align_left {
    text-align: left;
}