/* Wix' Layout-System, exakt nachgebildet.
   ------------------------------------------------------------------
   Die Originalseite ist nicht responsiv, sondern ein "Mesh"-Raster:
   Abschnitte laufen ueber die volle Breite, darin liegen Streifen mit
   Spalten, und darin sitzen Inhaltsbloecke an fest berechneten Positionen.

   Die Positionsformel von Wix lautet immer:

       margin-left: calc((100% - <Bezugsbreite>) * <Faktor>);
       left:        <Versatz>;
       width:       <Breite>;

   Der Faktor ist 0 (linksbuendig), 0.5 (zentriert) oder 1 (rechtsbuendig)
   und unterscheidet sich von Block zu Block — auf der Startseite nutzen die
   drei Kundenstimmen zum Beispiel alle drei Varianten nebeneinander.

   Deshalb wird die Formel hier eins zu eins uebernommen und ueber CSS-
   Variablen gefuettert, statt die Endposition selbst auszurechnen. So kann
   sich beim Uebertragen kein Rundungs- oder Denkfehler einschleichen. */

/* ---------- Abschnitt: volle Breite, eigene Hintergrundfarbe ---------- */

.sec {
    width: 100%;
    min-width: 980px;
    position: relative;
    /* Eigener Blockkontext: sonst wandert der negative Abstand, den Wix auf
       den Inhalt einzelner Abschnitte legt, an den Abschnitt selbst durch
       und verschiebt dessen Oberkante. Im Original liegen dazwischen noch
       Wix-Wrapper, die dasselbe bewirken. */
    display: flow-root;
}

/* ---------- Streifen ----------
   Zwei Varianten kommen im Original vor. */

/* Randlos ueber die ganze Breite */
.strip {
    width: 100%;
    min-width: 980px;
    display: flex;
    position: relative;
    margin: var(--mt, 0px) 0 var(--mb, 0px);
}

/* Mit 80px Luft links und rechts, mindestens aber 980px breit */
.strip--inset {
    width: calc(100% - 80px - 80px);
    min-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Abschnittsinhalt. Streifen liegen normalerweise untereinander. */
.sec__content {
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
}

/* Im Original legt Wix auf der Startseite zwei Streifen in dieselbe
   Rasterzelle, sodass sie sich ueberlappen. Diese Klasse bildet das nach. */
.sec__content--stacked > .strip {
    grid-row: 1;
    grid-column: 1;
    /* Ohne dies zieht der kuerzere Streifen sich auf die Hoehe des
       laengeren auf. */
    align-self: start;
}

/* ---------- Spalte ----------
   Die Spalten teilen sich die Streifenbreite im Verhaeltnis ihrer
   Entwurfsbreiten. --flex traegt diese Entwurfsbreite. */

.col {
    flex: var(--flex) 1 0%;
    min-width: 0;
    position: relative;
    top: 0;
    left: 0;
}

/* Spalteninhalt. --mh ist die Mindesthoehe aus dem Original.

   Wix setzt hier grid-template-rows: repeat(n, min-content) 1fr — die
   Inhaltszeilen sind also so hoch wie ihr Inhalt, und der Rest der
   Spaltenhoehe bleibt unten uebrig. grid-auto-rows: min-content bildet
   das nach. Ohne diese Zeile dehnen sich die Zeilen und die Abstaende
   stimmen nicht mehr. */
.col__content {
    width: 100%;
    min-height: var(--mh, auto);
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
}

/* Hintergrundbild einer Spalte */
.col__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.col__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

/* ---------- Inhaltsblock ----------
   --c   Bezugsbreite der Spalte laut Entwurf
   --m   Faktor 0 / 0.5 / 1
   --l   Versatz
   --w   Breite des Blocks
   --mt  Abstand oben
   --mb  Abstand unten
   --h   feste Hoehe, sofern das Original eine setzt */

.mesh {
    position: relative;
    /* --ml gewinnt, wenn das Original einen einfachen linken Abstand setzt.
       Das ist bei Bloecken innerhalb einer Box und in Wiederholungslisten
       der Fall — dort rechnet Wix nicht mit der Spaltenbreite. */
    margin: var(--mt, 0px) 0px var(--mb, 0px)
            var(--ml, calc((100% - var(--c, 0px)) * var(--m, 0)));
    left: var(--l, 0px);
    width: var(--w);
    height: var(--h, auto);
    justify-self: start;
    align-self: start;
    grid-column: 1;
}

/* ---------- Box ----------
   Ein Wix-Container mit eigener Flaeche, der weitere Bloecke aufnimmt. */

.box {
    background-color: rgb(var(--box-bg));
    border-radius: var(--box-radius, 0);
    border: var(--box-border-w, 0px) solid rgb(var(--box-border-c, 0, 0, 0));
}

.box__content {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    width: 100%;
}

/* ---------- Wiederholungsliste ----------
   Wix' "Repeater". Auf der Preisseite gibt es genau einen, und der ist im
   Original zu Hoehe 0 zusammengefallen — sein Inhalt (das einzelne Wort
   "Gemeinschaft") erscheint auf der Seite nicht. Es handelt sich offenbar um
   ein liegengebliebenes, leeres Element.

   Deshalb wird hier der Zustand des Originals nachgebildet: kein Platz,
   kein sichtbarer Inhalt. Sollte sich beim Abgleich mit der Live-Seite
   zeigen, dass der Eintrag dort doch sichtbar ist, genuegt es, die beiden
   Zeilen height/overflow zu entfernen. */

.repeater {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    height: 0;
    overflow: hidden;
}

.repeater__item {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
}

/* ---------- Rich-Text ----------
   Wix' Textbloecke. font_8 liefert bereits 15px/1.88em Avenir Light in
   #878575 — genau die Werte, die im Original zusaetzlich per inline-style
   wiederholt werden. */

/* Die Mindesthoehe gilt fuer den ganzen Textblock, nicht fuer jeden
   einzelnen Absatz. */
.rt {
    min-height: var(--min-height, 0);
}

/* Aufzaehlungen.
   Der Reset in base.css nimmt Listen ihre Einrueckung — Wix gibt sie ihnen
   an anderer Stelle zurueck. Ohne diese Regeln sind Listenabsaetze zu breit
   und brechen an anderen Stellen um, was den ganzen Block verkuerzt. Die
   Werte stammen aus dem Original: 0.5em am Listenrand, 1.3em je Eintrag. */

.rt ul,
.rt ol {
    letter-spacing: normal;
    line-height: normal;
    margin-inline: 0.5em 0;
}

.rt ul {
    list-style-type: disc;
}

.rt ol {
    list-style-type: decimal;
}

.rt li {
    margin-inline: 1.3em 0;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

.rt ul ul,
.rt ol ul {
    list-style-type: circle;
}

.rt ul ul ul,
.rt ol ul ul,
.rt ul ol ul,
.rt ol ol ul {
    list-style-type: square;
}

.rt a {
    color: inherit;
}

/* ---------- Vektorgrafik (Anfuehrungszeichen) ---------- */

.vector {
    display: block;
}

.vector svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--fill);
    fill-opacity: var(--fill-opacity, 1);
}

/* ---------- Schaltflaeche ----------
   Wix' "Stylable Button": transparent, Text linksbuendig, beim
   Ueberfahren erscheint eine 2px starke Unterlinie. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0);
    border: 0px solid #a26028;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease, visibility 0s;
}

.btn:hover {
    border-bottom: 2px solid #1e1e1e;
}

.btn__label {
    letter-spacing: 0em;
    margin: 0px 4px 0px 0px;
    font-family: avenir-lt-w01_85-heavy1475544, avenir-lt-w05_85-heavy, sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #1e1e1e;
    font-size: 14px;
}

/* Das Pfeil-Symbol ist im Original auf display:none gesetzt. */
.btn__icon {
    display: none;
}