/*
* Wird verwendet, wenn Gerät = Desktop
* Konfiguriert in: Configuration/brazil-config/global/brand-story.cfg
*/

/* Da das Karussell als alte Liste implementiert ist,
Alle Listen im Kartentext haben einen sekundären Listenstil (Buchstaben).
Dadurch wird den Zuschauern ein falsches Erscheinungsbild vermittelt.
Deshalb stellen wir alle Listen auf den primären Listenstil (Zahlen) ein. */
.aplus-brand-story-card ol li {
Listenstil: dezimal;
}

/* Container der obersten Ebene */
.aplus-module .apm-brand-story-hero {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Breite: 1464px;
Höhe: 625px;
Hintergrundfarbe: #fff;
}

.aplus-module .apm-brand-story-card {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Breite: 362px;
Höhe: 453px;
Hintergrundfarbe: #fff;
}

.apm-brand-story-hero,
.apm-brand-story-card {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Position: relativ;
Breite: 100 %;
Höhe: 100 %;
float: keine;
}

.aplus-module.brand-story-card-1-four-asin .apm-brand-story-card {
/* Nur 12 Pixel, um den Bildzellenrand zu berücksichtigen */
Polsterung: 12px;
}

/* Vollständiges Hintergrundbild (Held 1 und Karte 2) */
.aplus-module .apm-brand-story-background-image {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Überlauf: versteckt;
Position: absolut;
Breite: 100 %;
Höhe: 100 %;
}

/* Karte 1 kleine Bilder */
.aplus-module .apm-brand-story-image-row {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Höhe: 185px;
Polsterung: 0px;
Rand: automatisch;
Anzeige: Flex;
}

.aplus-module .apm-brand-story-image-row .apm-brand-story-image-cell {
/* Content-Box verwenden, um sicherzustellen, dass die Bildgröße mit dem Editor-Schema übereinstimmt */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Polsterung: 0px;
Rand: 0px;
Breite: 166px;
Rand: 1px fest #fff;
}

.aplus-module .apm-brand-story-image-row .apm-brand-story-image-cell .apm-brand-story-image-link {
Anzeige: Block;
Breite: 100 %;
Höhe: 100 %;
}

.aplus-module .apm-brand-story-image-row .apm-brand-story-image-cell .apm-brand-story-image-link .apm-brand-story-image-img {
Anzeige: Block;
Breite: 100 %;
Höhe: 100 %;
Objektanpassung: Abdeckung;
}

/* Logobild der Karte 3 */
.aplus-module .apm-brand-story-logo-image {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Höhe: 145px;
Rand: 0px 4px;
Polsterung: 20px;
Polsterung unten: 0px;
}

/* Textüberlagerungen */
.aplus-module .apm-brand-story-text-bottom {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Boxgröße: border-box;
Position: absolut;
unten: 13px;
links: 13px;
}

.aplus-module .apm-brand-story-hero .apm-brand-story-text-bottom {
Hintergrundfarbe: rgba(0,0,0,0.6);
Farbe: #fff;
Polsterung: 13px 65px 13px 13px; /* berücksichtigt Überlappung der ersten Karte */
Breite: 437px;
}

.aplus-module.brand-story-card-2-media-asset .apm-brand-story-text-bottom {
Hintergrundfarbe: rgba(255,255,255,0.6);
Farbe: #000;
Polsterung: 13px;
Breite: 336px;
}

.aplus-module.brand-story-card-1-four-asin .apm-brand-story-text {
Rand oben: 8px;
}

.aplus-module.brand-story-card-1-four-asin .apm-brand-story-text.apm-brand-story-text-single {
Rand oben: 20px;
}

.aplus-module.brand-story-card-1-four-asin .apm-brand-story-text h3 {
Leerraum: nowrap;
Überlauf: versteckt;
Textüberlauf: Auslassungspunkte;
}

.aplus-module .apm-brand-story-slogan-text {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Rand: 0px 4px;
Polsterung: 20px;
}

.aplus-module .apm-brand-story-faq {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Polsterung oben: 10px;
}

.aplus-module .apm-brand-story-faq-block {
Rand: 0px 10px;
Polsterung: 10px;
}.aplus-v2 .apm-brand-story-carousel-container {
Position: relativ;
}

.aplus-v2 .apm-brand-story-carousel-hero-container,
.aplus-v2 .apm-brand-story-carousel-hero-container > div {
Position: absolut;
Breite: 100 %;
}/*
Sicherstellen, dass das Karussell nur den Platz einnimmt, den es benötigt.
Die Größen müssen an den absolut positionierten Elementen neu eingestellt werden, damit diese Platz beanspruchen können.
*/
.aplus-v2 .apm-brand-story-carousel-container,
.aplus-v2 .apm-brand-story-carousel-hero-container {
Höhe: 625px;
Breite: calc(100% + 15px);
maximale Breite: 1464px;
margin-left: auto;
Rand rechts: auto;
}

/*
Dadurch wird das Karussell vertikal über dem Hero-Image-Container und hinter dem Logo-Bereich (125 Pixel) zentriert.
Margin-top = (heroHeight – cardHeight – logoAreaHeight) / 2 + logoAreaHeight
*/
.aplus-v2 .apm-brand-story-carousel .a-carousel-row-inner{
Rand oben: 149px;
}

/*
Für Karten muss eine Breite festgelegt werden, andernfalls beträgt sie standardmäßig etwa 50 Pixel.
Alle Karten müssen die gleiche Breite haben. Die Größe des Karussells ändert sich automatisch, sodass alle Karten die Breite der größten Karte einnehmen.
Der linke Rand dient dazu, zwischen den einzelnen Karten einen Abstand zu lassen.
*/
.aplus-v2 .apm-brand-story-carousel .a-carousel-card {
Breite: 362px;
Rand links: 30px !important;
}

/* Gestalten Sie die Navigationsschaltflächen so, dass sie höher sind, bündig mit den Seiten abschließen und einen sauberen weißen Hintergrund haben */
.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left,
.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-right {
Polsterung: 0px;
}

.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left .a-button-image,
.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-right .a-button-image {
Grenze: keine;
Rand: 0px;
}

.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left .a-button-image .a-button-inner,
.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-right .a-button-image .a-button-inner {
Hintergrund: #fff;
Polsterung: 20px 6px;
}

.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left .a-button-image .a-button-inner {
Randradius: 0px 4px 4px 0px;
}

.aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-right .a-button-image .a-button-inner {
Randradius: 4px 0px 0px 4px;
}