/** Reuffel-CI
coral: 		ff4a5d
mint: 		bde0d5
darkblue:	184158
curry:		EFC241

**/


/** COOKIE-Warning **/

#alertHolder {
    width: 100%;
    max-width: 100%;
    bottom: 0;
}

.alert {
    max-height: 80%;
    max-width: 100%;
}

#alertHolder .alert.warning.dialogCookieWarning {
    position: fixed;
    width: 100%;
    background: #eee;
    color: #888;
    border-color: #ccc;
    vertical-align: baseline;
    bottom: -2rem;
    text-align: center;
}

.alert.warning.dialogCookieWarning a {
    color: #888;
    text-decoration: underline;
}

.alert.warning.dialogCookieWarning .acceptCookies {
    margin: 0 0 0rem 0.5rem;
    vertical-align: baseline;
}

.alert.warning.dialogCookieWarning .W00002,
.alert.warning.dialogCookieWarning .W00002 div {
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.alert.warning.dialogCookieWarning .close:before {
    color: #999;
}

.alert.warning.dialogCookieWarning .button.continue a {
    font-weight: 600;
    border-color: #66a99c;
    padding: 0 0.8rem 0 0.8rem;
    background-color: #ccc;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
}

.alert.warning.dialogCookieWarning .button.continue a:hover {
    color: #333;
}

body:not(.step-XL) .alert.warning.dialogCookieWarning .content {
    display: flex;
    flex-wrap: nowrap;
}

body:not(.step-XL) .alert.warning.dialogCookieWarning .W00002:before {
    content: '';
    display: none;
}

body:not(.step-XL) #alertHolder .alert.warning.dialogCookieWarning {
    bottom: 0;
}

body:not(.step-XL) #alertHolder .alert.warning.dialogCookieWarning .close {
    display: none;
}

body:not(.step-XL) .alert.warning.dialogCookieWarning .acceptCookies {
    margin: 1rem;
}

body:not(.step-XL) .alert.warning.dialogCookieWarning .W00002,
body:not(.step-XL) .alert.warning.dialogCookieWarning .W00002 div {
    margin: 0;
    text-align: left;
}

body.step-M .alert.warning.dialogCookieWarning .button.continue a,
body.step-S .alert.warning.dialogCookieWarning .button.continue a,
body.step-XS .alert.warning.dialogCookieWarning .button.continue a {
    font-size: 0;
}

body.step-M .alert.warning.dialogCookieWarning .button.continue a:before,
body.step-S .alert.warning.dialogCookieWarning .button.continue a:before,
body.step-XS .alert.warning.dialogCookieWarning .button.continue a:before {
    content: 'OK';
    font-size: 1.8rem;
}


/** iPhone Xr iOS-Anzeigezoom=Standard (Anzeige & Helligkeit / Anzeigezoom/ Anzeige / Standard) etwas groesser als bpm-Standard **/

@media screen and (device-width: 414px) and (device-height: 896px) and (orientation: portrait) {
    html {
        font-size: 80%;
        -webkit-text-size-adjust: 80%;
    }
}


/** iPhone Xr, iOS-Anzeigezoom=Vergroessert (Anzeige & Helligkeit / Anzeigezoom/ Anzeige / Vergroessert) etwas groesser als bpm-Standard **/

@media screen and (device-width: 375px) and (device-height: 812px) and (orientation: portrait) {
    html {
        font-size: 80%;
        -webkit-text-size-adjust: 80%;
    }
}


/* -------------------- BIZ-styles importieren
@import url(biz.css);
*/

@font-face {
    font-family: 'rekIcons';
    font-style: normal;
    font-weight: normal;
    src: url("/rekweb/css/default/fonts/rekIcons.woff") format("woff")
}


/* -------------------- START bpm-overrides */

body {
    color: #111111;
}


/* -------------------- links, anpassen mittels .rekStyle */

.rekStyle .value span a {
    color: #333333;
    text-decoration: underline;
}

.login .link,
.login .doc,
.login .docLink {
    color: #333333;
    text-decoration: underline;
    margin-left: 0.25rem;
}

.rekStyle .value span.button a {
    color: #fff;
    text-decoration: none;
}

body.step-XL.layout-main main,
body:not(.step-XL) main {
    width: 100%;
}


/* -------------------- header (.header -> header) */


/** Neuer header **/

header {
    background-image: none;
    padding: 0;
    background-color: #FF4A5D;
}

body.step-XL.rekVerify header {
    height: 12.9rem;
}

body.step-XL header .screen {
    padding: 0 1rem;
}

.rekHeaderInfosWrap {
    width: 100%;
    padding: 0 0rem;
}

.rekHeaderNavWrap {
    width: 100%;
}

body:not(.step-XL) header .screen .row1 {
    height: 7rem;
}

body:not(.step-XL) header .screen .row2 {
    display: block;
}

.rekHeaderInfos,
.rekHeaderNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

body.step-XL .rekHeaderInfos {
    min-height: 9.5rem;
}

body.step-XL .rekHeaderInfos a {
    font-size: 1.6rem !important;
    font-weight: 700;
    text-decoration: none;
}

.rekHeaderInfos .headerLogo a {
    padding-left: 0;
}

.rekHeaderInfos .rekHeaderKontakt a {
    border-bottom: 2px solid transparent;
}

.rekHeaderInfos .rekHeaderKontakt a:hover {
    border-bottom: 2px solid #fff;
}

body.step-XL .rekHeaderNav .headerNotepad {
    margin-left: auto;
}

body.step-XL .rekHeaderNav .headerAccount {
    width: 22rem;
}

body.step-S .headerAccountPreview,
body.step-XS .headerAccountPreview {
    margin-left: auto;
    margin-top: 1.2rem;
}

body.step-M .headerAccountPreview,
body.step-L .headerAccountPreview {
    margin-left: auto;
}

body.step-S .headerBasketPreview,
body.step-XS .headerBasketPreview {
    margin-top: 1.2rem;
}

.rekHeaderInfos .headerBasketPreview .preview.basket .icon-basket:before,
body:not(.step-XL) .preview.basket .icon-basket:before {
    font-family: rekIcons;
    line-height: 4rem;
    line-height: 5rem;
    margin-right: 0rem;
    margin-right: -2.8rem;
    padding: 0;
    vertical-align: middle;
    top: 0;
    left: 0;
    height: 3rem;
    width: 3rem;
    font-weight: 400;
    font-size: 4rem;
    font-size: 3rem;
    text-align: center;
    content: '\f800';
}

body:not(.step-XL) .rekHeaderInfos .headerBasketPreview .preview.basket .icon-basket:before {
    font-size: 2.4rem;
    line-height: inherit;
    height: 2.4rem;
    width: 2.4rem;
}

body.step-M .rekHeaderInfos .headerAccountPreview .icon-user a {
    font-size: 0 !important;
    color: transparent;
}

.rekHeaderInfos .preview.basket .hoverDropdown {
    padding-top: 0;
}

.rekHeaderInfos .preview.basket .icon-basket a .totalAmount,
body:not(.step-XL) .preview.basket .icon-basket a .totalAmount {
    display: inline-block;
    padding: 0.1rem 0 0 1rem;
    font-size: 1.6rem;
    line-height: 1.6rem;
    vertical-align: top;
}

.rekHeaderInfos .preview.basket .icon-basket a .totalAmount .key {
    margin: 0.2rem 1rem 0 0;
    font-weight: 400;
    font-size: 1.6rem;
    vertical-align: bottom;
    line-height: 2.2rem;
}

.rekHeaderInfos .preview.basket .icon-basket a .totalAmount .value {
    margin: 0.2rem 0.4rem 0 0;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-size: 2.0rem;
    line-height: 2.0rem;
    overflow: visible;
}

body:not(.step-XL) .preview.basket .icon-basket a .totalAmount .value {
    font-weight: 700;
}

.rekHeaderInfos .preview.basket .icon-basket a .totalQuantity,
body:not(.step-XL) .preview.basket .icon-basket a .totalQuantity {
    width: 1.8rem;
    height: 1.8rem;
    top: -0.1rem;
    left: 2.1rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.6rem;
    text-align: center;
    text-shadow: none;
}

.rekHeaderInfos .preview.basket .hoverDropdown .hoverDropdownTrigger {
    overflow: visible;
}

body:not(.step-XL) .rekHeaderInfos .preview.basket .icon-basket a .totalQuantity {
    top: -0.3rem;
    left: 2.1rem;
}

.rekHeaderInfos .preview.basket .hoverDropdown:hover .icon-basket a .totalQuantity {
    color: #222;
}

.rekHeaderInfos .preview.basket .icon-basket a {
    overflow: visible;
    padding-top: 1rem;
}

.headerBasketPreview .hoverDropdown:hover .hoverDropdownTrigger [class*='icon-'],
.headerBasketPreview .hoverDropdown:focus .hoverDropdownTrigger [class*='icon-'],
.headerBasketPreview .hoverDropdown.keepVisibleOnAutocomplete .hoverDropdownTrigger [class*='icon-'] {
    margin-bottom: 0rem;
    padding: 0.5rem 0 0.8rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.rekHeaderInfos .headerLogo {
    width: calc((100% - 50rem) / 2);
    font-size: 0;
}

.rekHeaderInfos .headerLogo>:first-child {
    height: inherit;
}

body.step-XL .headerSearch {
    width: 50rem;
    margin: 0 auto;
}


/** wg. Affilinet **/

body.step-XL .rekHeaderInfos .headerLogo .logo a {
    display: block;
    width: 17rem;
    width: 20rem;
    height: auto;
}

body.step-XL.rekVerify .headerLogo .logo a {
    display: block;
    width: 20rem;
    height: auto;
    margin-top: 3rem;
}

body.step-XL .rekHeaderInfos .headerLogo .logo>span {
    display: initial;
}

body.rekVerify header .screen .row2 {
    display: none;
}


/* Neue Anordnung Schnellsuche */

.rekHeaderInfos .headerLogo {
    width: calc((100% - 50rem) / 2);
    width: 25rem;
    font-size: 0;
}

.rekHeaderInfos .headerLogo>:first-child {
    height: inherit;
}

body.step-XL .headerSearch {
    width: 50rem;
    margin: 0 auto;
}

body.step-XL header .headerSearch .formSearch .field-select.bpmSeFieldWrapper,
body.step-L header .headerSearch .formSearch .field-select.bpmSeFieldWrapper,
body.step-M header .headerSearch .formSearch .field-select.bpmSeFieldWrapper {
    border-left: 1px solid #b6bbbc;
    min-width: 16rem;
}

header .headerSearch .biblioSearch .formSearch form>div {
    height: 4.2rem;
}

body.step-XS header .headerSearch .biblioSearch .formSearch form>div,
body.step-S header .headerSearch .biblioSearch .formSearch form>div {
    height: inherit;
}

header .headerSearch .biblioSearch .formSearch form>div .field-text input {
    border-left: none;
}

header .headerSearch .biblioSearch .formSearch .expand+form {
    margin-right: 3.8rem;
}

header .headerSearch .quick .expand a:after {
    content: '\e603';
    width: 3.8rem;
    line-height: 4.3rem;
    font-size: 1.3rem;
    font-weight: bold;
}

header .headerSearch .formSearch .field-select.bpmSeFieldWrapper .select2-chosen:after {
    content: "Produkte";
    display: inline-block;
    width: 6rem;
    padding-left: 0.3rem;
}


/** // ende wg. Affilinet **/

body:not(.step-XL) .rekHeaderInfos .headerLogo .logo>a,
body:not(.step-XL) .rekHeaderInfos .headerLogo .logo>span,
body:not(.step-XL) .rekHeaderNav .headerLogo .logo>a,
body:not(.step-XL) .rekHeaderNav .headerLogo .logo>span {
    height: 3.2rem;
    padding-top: 0;
    text-align: center;
}

header .rekHeaderNav nav.flyoutNavigation>ul>li>a,
header .rekHeaderNav [class*="icon-"] a,
header .rekHeaderNav [class*="icon-"]:before {
    color: #fff;
    /** MIT Schulbuch **/
    font-size: 1.7rem;
    /** OHNE Schulbuch
	font-size: 1.8rem;
	**/
}

body.step-XL .rekHeaderInfos .headerBasketPreview {
    height: auto;
    width: calc((100% - 50rem) / 2);
    width: 25rem;
    z-index: 12;
}

body.step-XL header nav.flyoutNavigation>ul>li>div.fullsize {
    min-width: 100rem;
}

.flyoutOpen .articleDetail .col.colMain .articlePicture~.articleHtmlText {
    width: calc(100% - 3rem);
}


/** ende neuer header **/

header nav.flyoutNavigation>ul>li>a,
header [class*="icon-"] a,
header [class*="icon-"]:before {
    color: #ffffff;
    font-size: 1.78rem;
}

header .hoverDropdown:hover a,
header .hoverDropdown:hover [class*="icon-"]:before {
    color: #333333;
}

.headerNavigation {
    white-space: normal;
    /*-- bpm-Original:nowrap, verhindert aber Textumbruch in Navigation */
    width: auto;
    margin: 0 2rem 0 -1rem;
    margin: 0 1rem 0 -1rem;
}

.headerSearch .quick .suggestionList.visible {
    width: calc(100% - 2px);
    margin-top: 1px;
    border-radius: 0 0 0.2rem 0.2rem;
}

.headerSearch .quick form {
    border: 1px solid #b6bbbc;
    border-radius: 0.2rem;
    /** formrausch **/
    background-color: #fff;
    /** formrausch **/
}

.headerSearch .quick .field-text {
    border-top417: 1rem solid transparent;
    border-bottom417: 1rem solid transparent;
}

body:not(.step-XL) .headerSearch .quick .field-text {
    border: none;
}

.headerSearch .quick .field-text input {
    height: 2rem;
    border-left: 1px solid #184158;
    line-height: 2rem;
}

.headerSearch .quick .confirm:before {
    border-left: none;
}

.headerSearch .quick .reset.icon-close:before {
    color: #184158;
}

.headerSearch .quick .confirm:before {
    color: #184158;
}

.headerSearch .quick .confirm:hover {
    background-image: none;
    color: inherit;
}

.headerSearch .quick .expand a:after {
    color: #184158;
}

.headerSearch .quick .expand a:hover:after {
    background-image: none;
    background: #f6f6f6;
}

.dropdown {
    width: 50rem;
}

header nav.flyoutNavigation>ul>li>a:not(:only-child):after {
    color: #184158;
    /** formrausch **/
}

header nav.flyoutNavigation>ul li.flyoutOpen>a:not(:only-child):after {
    color: #184158;
    /** formrausch **/
}

.columns .rack>div.makeNavigation2_3 {
    width: 0;
    margin: 0;
    flex-grow: 0;
}

.columns .rack>div.makeNavigation2_3+div {
    width: 62%;
}

.columns .rack>div.makeNavigation2_3+div+div {
    width: 30.1%;
    margin-left: 1%;
    margin-right: 2%;
}

.headerSearch .quick .field-select,
.headerSearch .quick .field-select:hover {
    background-image: none;
    background: #fff;
    max-height: 5rem;
}

body.step-XL .headerSearch .quick .field-select a {
    padding-left: 2rem;
}

.quick .field-select .select2-container .select2-choice .select2-chosen,
.quick .field-select .select2-container .select2-choice .select2-search-choice-close {
    color: #184158;
    /** formrausch **/
    font-size: 1.4rem;
    font-weight: 600;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
}

body.step-XS .headerSearch ::placeholder,
body.step-S .headerSearch ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
    opacity: 1;
    font-size: 1.8rem;
    /* Firefox */
}

body.step-XS .headerSearch :-ms-input-placeholder,
body.step-S .headerSearch :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
    font-size: 1.8rem;
}

body.step-XS .headerSearch ::-ms-input-placeholder,
body.step-S .headerSearch ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #b3b3da !important;
    /** formrausch **/
    font-weight: 600;
    font-size: 1.8rem;
}


/** OHNE Schulbuch **/

header nav.flyoutNavigation>ul>li {
    margin-right: 1.7rem;
}


/** MIT Schulbuch **/

header nav.flyoutNavigation>ul>li {
    margin-right: 0.5rem;
}

header nav.flyoutNavigation>ul>li:last-child {
    margin-right: 0;
}

header nav.flyoutNavigation>ul>li.active {
    background-color: rgba(50, 50, 50, 0.5);
}

header nav.flyoutNavigation>ul>li.active>a,
header nav.flyoutNavigation>ul>li.activePath>a,
.button.continue>:first-child:hover,
.button.continue>:first-child:focus,
.button.continue>:first-child:active,
header .hoverDropdown:hover .continue a {
    color: #ffffff;
}

header nav.flyoutNavigation>ul>li:hover>a,
header nav.flyoutNavigation>ul>li:focus>a,
header nav.flyoutNavigation>ul>li:active>a {
    margin-bottom: -1px;
    border-color: #ced2d2 #ced2d2 transparent #ced2d2;
    padding-bottom: 1px;
    background-color: #ffffff;
    color: #333;
}

.preview.basket .hoverDropdown {
    padding-top: 1rem;
}


/** Anzeige im CMS entfernt
.preview.basket .freeShippingInfo {
    color:#ffffff;
    font-size:1.8rem;
    margin-top:0.5rem;
}
**/

header nav.flyoutNavigation>ul>li>div.shownav {
    /*-- kleiner Debug-Hack zum Anzeigen des flyouts, dazu Klasse im Inspektor shownav einfuegen --*/
    max-height: 500px;
    opacity: 1;
    transform: none !important;
}

nav.flyoutNavigation .column.links .actions a,
nav.flyoutNavigation .column .articleText {
    font-size: 1.6rem;
}

nav.flyoutNavigation .articleDetail .col.colMain .articlePicture {
    width: 100%;
}

nav.flyoutNavigation .articleDetail .col.colMain .articlePicture .value {
    max-width: 90%;
    border: 1px solid #eee;
}

nav.flyoutNavigation .articleDetail .col.colMain .articlePicture~.articleHtmlText {
    width: 90%;
}

nav.flyoutNavigation .articleDetail.text h5.articleHeading.outside {
    padding: 0.8rem 0 1.6rem 0;
    color: #5b5b5b;
}


/** Neues Menue, (12rem*2)+2rem = 26rem = 30rem-4rem **/

nav.flyoutNavigation .columns .rack .column .one {
    width: 30rem;
}

nav.flyoutNavigation .columns .rack .column.biblio.animation .two {
    width: 30rem;
    padding-right: 4rem;
}

nav.flyoutNavigation .columns .rack .column.animation .biblioItem.coverItem {
    width: 12rem;
    margin-right: 2rem;
}

nav.flyoutNavigation .columns .rack .column.animation .biblioItem.coverItem:not(:last-child) {
    margin-right: 2rem;
}

nav.flyoutNavigation .columns .rack .column.animation span+.biblioItem.coverItem,
nav.flyoutNavigation .columns .rack .column.animation .biblioItem.coverItem+.biblioItem.coverItem {
    margin-right: 0;
}


/** IE10/11, Konto-flyout zu breit **/

body.ua-ie10 nav.flyoutNavigation .customer.account,
body.ua-ie11 nav.flyoutNavigation .customer.account {
    width: 98rem;
}


/** IE11-bug **/

.headerLogo a .value>span img {
    flex: 1;
}


/** MAIN **/


/** BODY **/

body.step-XL .body:before {
    display: none;
}


/** XMAS-background **/


/** https://azmind.com/4-free-christmas-backgrounds-psd-jpg-patterns/ **/


/**
@media screen and (min-width: 1550px) {
	body:not(.tdbPage).step-XL .body {
		background-image:  url('/csp/shop/rekweb/css/default/images/snow1.png');
	}
	body:not(.tdbPage).step-XL .body>.content {
		padding: 0.0rem 0.8rem 0 0.8rem;
		margin-top: 5rem;
		margin-bottom: 7rem;
	}
	body:not(.tdbPage).step-XL .content {
		background:#fff;
		box-shadow:0 1rem 4rem 4rem rgba(255,255,255,1);
	}
}
**/


/** // ende XMAS-background **/


/** FOOTER **/

footer {
    color: #ffffff;
    background: #555;
    background-image: -moz-linear-gradient(top, #333 0%, #666 100%);
    /* FF3.6-15 */
    background-image: -webkit-linear-gradient(top, #333 0%, #666 100%);
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to bottom, #333 0%, #666 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

footer a,
footer h5,
footer [class*="icon-"] {
    color: #ffffff;
}

footer .bottom {
    border-top: 1px solid #999999;
    padding-top: 1rem;
}

footer a:hover,
footer a:focus,
footer .breadcrumb>nav li>a:hover,
footer .social [class*='icon-']:hover:before,
footer .payment [class*='icon-']:hover,
footer .payment [class*='icon-']:hover:before,
footer .bottom .actions [class*='icon-']:hover:before,
footer .bottom .actions .icon-mail:hover:after {
    color: #cccccc;
}

footer .column.payment .linktext-icon {
    padding-left: 3rem;
}

.zahlungsarten .bar,
.zahlungsarten .rc,
.zahlungsarten .be,
.zahlungsarten .rg,
.zahlungsarten .pp,
.zahlungsarten .visa,
.zahlungsarten .mc,
.zahlungsarten .amex,
.zahlungsarten .giropay,
.zahlungsarten .regiomark,
.zahlungsarten .gs {
    position: relative;
    padding-left: 6rem;
    height: 5rem;
    font-size: 1.7rem;
}

.footerFB a,
.footerTW a,
.footerIN a {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.zahlungsarten .bar:before,
.zahlungsarten .rc:before,
.zahlungsarten .be:before,
.zahlungsarten .rg:before,
.zahlungsarten .pp:before,
.zahlungsarten .visa:before,
.zahlungsarten .mc:before,
.zahlungsarten .amex:before,
.zahlungsarten .giropay:before,
.zahlungsarten .regiomark:before,
.zahlungsarten .gs:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    width: 5rem;
    height: 3.5rem;
    display: inline-block;
}

.zahlungsarten .bar:before {
    background-image: url(images/payment/bar.png);
}

.zahlungsarten .rc:before {
    background-image: url(images/payment/rc.png);
}

.zahlungsarten .be:before {
    background-image: url(images/payment/be.png);
}

.zahlungsarten .rg:before {
    background-image: url(images/payment/rg.png);
}

.zahlungsarten .pp:before {
    background-image: url(images/payment/pp.png);
}

.zahlungsarten .visa:before {
    background-image: url(images/payment/visa.png);
}

.zahlungsarten .mc:before {
    background-image: url(images/payment/mc.png);
}

.zahlungsarten .amex:before {
    background-image: url(images/payment/amex.png);
}

.zahlungsarten .giropay:before {
    background-image: url(images/payment/giropay.png);
}

.zahlungsarten .regiomark:before {
    background-image: url(images/payment/regiomark.png);
}

.zahlungsarten .gs:before {
    background-image: url(images/payment/gs.png);
}

.footerbar,
.footerrc,
.footerbe,
.footerrg,
.footerpp,
.footervisa,
.footermc,
.footeramex,
.footergiropay,
.footerregiomark,
.footergs {
    display: inline-block;
    margin: 0 0.6rem 1rem 0;
}

.footerbar a,
.footerrc a,
.footerbe a,
.footerrg a,
.footerpp a,
.footervisa a,
.footermc a,
.footeramex a,
.footergiropay a,
.footerregiomark a,
.footergs a {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 2.75rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.footerFB a {
    background-image: url(images/footer/fb.png);
}

.footerTW a {
    background-image: url(images/footer/tw.png);
}

.footerIN a {
    background-image: url(images/footer/in.png);
}

.footerbar a {
    background-image: url(images/footer/bar.png);
}

.footerrc a {
    background-image: url(images/footer/rc.png);
}

.footerbe a {
    background-image: url(images/footer/be.png);
}

.footerrg a {
    background-image: url(images/footer/rg.png);
}

.footerpp a {
    background-image: url(images/footer/pp.png);
}

.footervisa a {
    background-image: url(images/footer/visa.png);
}

.footermc a {
    background-image: url(images/footer/mc.png);
}

.footeramex a {
    background-image: url(images/footer/amex.png);
}

.footergiropay a {
    background-image: url(images/footer/giropay.png);
}

.footerregiomark a {
    background-image: url(images/footer/regiomark.png);
}

.footergs a {
    background-image: url(images/footer/gs.png);
}

footer .columns .rack {
    flex-wrap: wrap;
}

footer .bottom {
    display: none;
}

footer .columns .rack .bottom.rekFooterBottom {
    display: block;
    width: 100%;
    border-top: 1px solid #999999;
    padding-top: 1rem;
    margin-top: 1.6rem;
    text-align: center;
}

footer .bottom.rekFooterBottom .articleDetail .articleHtmlText {
    text-align: center;
}

body.step-S footer .bottom.rekFooterBottom .articleDetail .articleHtmlText .text,
body.step-XS footer .bottom.rekFooterBottom .articleDetail .articleHtmlText .text {
    text-align: left;
}

.bottom.rekFooterBottom .articleDetail.text {
    margin-bottom: 0;
}

.bottom.rekFooterBottom .actions [class*='icon-'] {
    margin-bottom: 1rem;
}

body.step-XS footer .bottom.rekFooterBottom .actions [class*='icon-'],
body.step-S footer .bottom.rekFooterBottom .actions [class*='icon-'] {
    text-align: left;
    width: 100%;
    margin: 0 0 1rem 0;
}

body.step-S footer .columns .rack div:nth-child(5) {
    width: 100%;
}

.icon-whatsapp:before {
    content: '';
    background-image: url(images/footer/WhatsAppFooter2.png);
}

.icon-whatsapp a {
    padding-left: 2.4rem;
    font-weight: 600;
}

.icon-whatsapp:hover {
    opacity: 0.8;
}

.icon-facebookREK:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(images/footer/iconfacebookREK.png);
}


/** MAIN **/

main img {
    max-width: 100%;
}


/** /account/downloads,
	- action-icons original direkt nebeneinander platziert => viel zu gefaehrlich, besser untereinander
	- Beschriftungen hinzufuegen
**/

.customer.downloads .cellActions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

body.step-M .customer.downloads .cellActions,
body.step-S .customer.downloads .cellActions,
body.step-XS .customer.downloads .cellActions {
    display: block;
}

.customer.downloads .cellActions span {
    margin: 1rem 0 0 0;
    flex-grow: 1;
    width: 12.8rem;
}

body.step-M .customer.downloads .cellActions .icon-save.button.continue,
body.step-S .customer.downloads .cellActions .icon-save.button.continue,
body.step-XS .customer.downloads .cellActions .icon-save.button.continue {
    margin-bottom: 2rem;
}

.step-XL .customer.downloads .cellActions .icon-save+.otherActions,
.step-L .customer.downloads .cellActions .icon-save+.otherActions {
    margin-bottom: 1rem;
}

.step-XL .customer.downloads .cellActions .icon-delete:before,
.step-L .customer.downloads .cellActions .icon-delete:before {
    right: 0;
    left: inherit;
}

.customer.downloads .cellActions .icon-delete a:before {
    content: "Loeschen";
    display: inline-block;
    position: relative;
    left: -2rem;
    top: -0.25rem;
    padding-right: 1rem;
}

.step-XL .customer.settings .keyAccFields .fields .icon-edit a:before,
.step-L .customer.settings .keyAccFields .fields .icon-edit a:before {
    content: "Bearbeiten";
    display: inline-block;
    position: relative;
    left: -7rem;
    top: 0rem;
    padding-right: 1rem;
}


/* -------------------- Links , z.B. in .overlay besser erkennbar machen */

.overlay a,
.alert.error a {
    text-decoration: underline;
    color: #333333;
}

.overlay a:hover,
.alert.error a:hover {
    color: #000000;
}


/* -------------------- search-inputs in selects ausblenden - verwirrend, unverstaendlich, Suche sinnlos in Listen mit n=1(!) bis n=15 */

.select2-search {
    display: none;
}

.basketPage .select2-search {
    /* testweise reaktiviert in /basket, wg. GK-Feldern, leider fuer "Ansicht" nicht separat deaktivierbar */
    display: inherit;
}


/* ZAT BAR in /basket/verify, neuer Text **/

body.rekVerify .select2-chosen .paymentMethod.Cash,
body.rekVerify .select2-results .paymentMethod.Cash {
    font-size: 0;
}

body.rekVerify .select2-chosen .paymentMethod.Cash:before,
body.rekVerify .select2-results .paymentMethod.Cash:before {
    font-size: 1.4rem;
    vertical-align: top;
}

body.rekVerify .select2-chosen .paymentMethod.Cash:after,
body.rekVerify .select2-results .paymentMethod.Cash:after {
    font-size: 1.4rem;
    content: 'Bar, Kreditkarte oder reuffelCard bei Abholung';
}

body.step-XL .basket .progress>:first-child,
body.step-XL .basket .progress>a:not(:first-child),
body.step-XL .basket .progress>div:not(:first-child),
body.step-L .basket .progress>:first-child,
body.step-L .basket .progress>a:not(:first-child),
body.step-L .basket .progress>div:not(:first-child),
body.step-M .basket .progress>:first-child,
body.step-M .basket .progress>a:not(:first-child),
body.step-M .basket .progress>div:not(:first-child),
body.step-S .basket .progress>:first-child,
body.step-S .basket .progress>a:not(:first-child),
body.step-S .basket .progress>div:not(:first-child) {
    width: 33%;
    padding-left: 0;
}

body.step-L.rekVerify .basket .progress>:first-child {
    width: 40%;
    padding-left: 0;
}

body.step-L.rekVerify .basket .progress>a:not(:first-child),
body.step-L.rekVerify .basket .progress>div:not(:first-child) {
    width: 30%;
    padding-left: 0;
}

body.step-S.rekVerify .basket .progress>:first-child {
    width: 46%;
    padding-left: 0;
}

body.step-S.rekVerify .basket .progress>a:not(:first-child),
body.step-S.rekVerify .basket .progress>div:not(:first-child) {
    width: 27%;
    padding-left: 0;
}

body.step-XS.rekVerify .basket .progress>:first-child {
    width: 50%;
    padding-left: 0;
}

body.step-XS.rekVerify .basket .progress>a:not(:first-child),
body.step-XS.rekVerify .basket .progress>div:not(:first-child) {
    width: 25%;
    padding-left: 0;
}

body.step-XS .basket .progress>:first-child {
    width: 30%;
    padding-left: 0;
}

body.step-XS .basket .progress>a:not(:first-child) {
    width: 40%;
    padding-left: 0;
}

body.step-XS .basket .progress>div:not(:first-child) {
    width: 30%;
    padding-left: 0;
}

.basket .navigationTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
    text-align: right;
}

.basket .navigationTop .button.continue>:first-child {
    padding-top: 1px;
    padding-right: 2rem;
}

.basket .navigationTop .button.continue a:before {
    content: '\e61d';
    position: absolute;
    right: 0;
    margin-right: 0.6rem;
    margin-top: 1px;
    font-family: beeIcons;
    font-weight: 400;
    font-size: 1rem;
    padding-left: 0.4rem;
}


/** ACCOUNT **/

.customer.account.cockpit .tile:before,
.customer.account.cockpit .tile .score {
    pointer-events: none;
    z-index: 9;
}

.customer.account.cockpit .tile.notepads:before {
    content: '\e902';
    color: green;
}

.icon-notepad:before {
    content: '\e902';
}

.customer.account.cockpit .tile.downloads:before {
    color: darkblue;
}

.customer.account.cockpit .tile.orders:before {
    color: brown;
}

.customer.account.cockpit .tile.invoices:before {
    color: darkorange;
}

.customer.account.cockpit .tile.benefits:before {
    color: darkcyan;
}

.customer.account.cockpit .tile.newsletter:before {
    color: darkgreen;
}

.customer.account.cockpit .tile.statistics:before {
    color: darkolivegreen;
}

.customer.account.cockpit .tile.settings:before {
    color: darkred;
}

.customer.account.cockpit .tile.logout:before {
    color: darkslateblue;
}

body:not(.step-XL) .preview.account .icon-user.loggedIn:before {
    margin-top: 0.6rem;
    line-height: 2.6rem;
}


/** ORDERS **/

.customer.orders.overview .flexTable .positions .item .values .cellActions {
    width: 16.3rem;
}

.customer.periodicals.overview .flexTable .positions .item .values .cellActions,
.customer.standingOrders.overview .flexTable .positions .item .values .cellActions {
    width: 8rem;
}


/** LOYALTY **/

.loyaltyPage .score {
    text-indent: -100rem;
}

.loyaltyPage h1.articleHeading .value span {
    margin-right: 2rem;
}

.loyaltyPage .barcode:before {
    content: 'Falls Die Ihre reuffelCard im Gesch\E4 ft nicht dabeihaben sollten, \A zeigen Sie an der Kasse auf Ihrem Mobilger\E4 t einfach diesen Barcode vor:';
    display: inline-block;
    margin-bottom: 1rem;
}


/** DETAIL **/


/** eBook bereits gekauft **/

.biblio.detail .columnPriceActions .containerAddToBasket .icon-basket~a,
.basket .item.biblioItem .cellActions a[href*="/account/downloads"] {
    display: inline-block;
    max-width: 16.8rem;
    margin: 1rem 0 0 0;
    padding: 0.3rem;
    background: #66a99c;
    border-radius: 0.5rem;
    border-radius: 0.2rem;
    text-align: center;
    color: #ffffff;
}

.biblio.detail .columnPriceActions .containerAddToBasket .icon-basket~a:hover,
.basket .item.biblioItem .cellActions a[href*="/account/downloads"]:hover {
    background: #5b5b5b;
}

.biblioTag .value>span.KLK a {
    background-color: #bde0d5;
    color: #666;
}


/** VERLAUF / HISTORY **/

.detail .history a,
.articleDetail .history a {
    line-height: 1.4rem;
}

.biblioCover .downloadArticle:after,
.biblioCover .downloadEbook:after,
.biblioCover .vinyl:after {
    background-color: #5b5b5b;
    background-color: rgba(50, 50, 50, 0.7);
}


/** RESULT **/


/** Suchauftrag ausblenden **/

.result .button.continue.icon-comment,
.notepad .button.continue.icon-comment {
    display: none;
}


/* Seeehr grosse Suchabfragen in der Hoehe auf max. 3 Zeilen begrenzen */

.result>h1 {
    max-height: 13.34rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.biblioList .positions.flexRows .blurbItem {
    width: calc(50% - 5rem);
    margin: 0.8rem 3rem 3.8rem 2rem;
}

.biblioItem.blurbItem {
    border-top: 1px solid #ced2d2;
    padding-top: 2rem;
}

.biblioItem.blurbItem .sectionBlurb {
    font-size: 1.6rem;
}


/** F�r unerfahrene User, etwas mehr Erkl�rung f�r moderne Ikonographie ... **/

.step-XL main .biblioAnimation .icon-more a:before {
    content: "Mehr";
    display: inline-block;
    position: relative;
    left: -3.5rem;
    top: -0.25rem;
    padding-right: 1rem;
}

.step-XL main .katzeimsackmain .biblioAnimation .icon-more a {
    left: -10rem !important;
    font-weight: 700;
}

.step-XL main .katzeimsackmain .biblioAnimation .icon-more a:before {
    content: none;
    display: none;
    position: inherit;
    left: inherit;
    top: inherit;
    padding-right: inherit;
}

.step-XL .biblio.detail .columnPriceActions .containerOtherActions .icon-share a:before {
    content: "Teilen";
    display: inline-block;
    position: relative;
    left: -4.5rem;
    top: -0.25rem;
    font-family: "Source Sans Pro Regular", sans-serif;
    padding-right: 1rem;
}

.step-XL .biblio.detail .columnPriceActions .containerOtherActions .icon-notepad:before {
    left: inherit;
    right: 0;
}

.step-XL .biblio.detail .columnPriceActions .containerOtherActions .icon-notepad a:before {
    content: "Merkzettel";
    display: inline-block;
    position: relative;
    left: -1.5rem;
    top: -0.25rem;
    font-family: "Source Sans Pro Regular", sans-serif;
    padding-right: 1rem;
}

.step-XL .biblioItem .containerOtherActions .icon-location a {
    width: 2.2rem;
}

.step-XL .biblioItem .containerOtherActions .icon-location a:before {
    content: "Filialbestand zeigen";
    display: inline-block;
    position: relative;
    left: -13rem;
    top: -0.25rem;
    font-family: "Source Sans Pro Regular", sans-serif;
}


/** REGISTER, LOGIN **/

.panel.register .tabs li.activeTab a,
.panel.once .tabs li.activeTab a {
    font-weight: 900;
    font-size: 1.75rem;
}


/** BASKET **/


/** Alternative Lieferadressen, die Klasse .rekVerify gibt es unique nur am body von TPL,basketPage,verify **/

.rekVerify .contextMenu .content {
    margin-top: 2rem;
    /* verhindert Kollision von close und scrollbalken */
}


/** EBOOK-BANDEROLE AUCH IN VERIFY **/

.basket.verify .biblioCover .downloadEbook {
    display: inline-block;
    width: 100%;
    font-size: 1.0rem;
    line-height: 1.2;
}

.biblioCover .downloadEbook:after {
    content: 'eBook';
}

.basket.verify .biblioCover .downloadEbook:after {
    width: 100%;
    margin: 0;
    padding: 0.1rem;
    transform: none;
}


/** Gutschein in verify TODO: PIN-Feld verbessern **/

.basket.verify .giftcard .searchCard .cardPin {
    /** width: 6.4rem; **/
}

.basket>div.underBasketWrapper {
    clear: both;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}


/* -------------------- RSS-Feed auf Neuheitenseite anzeigen nicht ben�tigt, ausblenden */

.customer.newsletter .icon-rss {
    display: none;
}


/** SOCIAL **/

.shareByFacebook {
    display: none;
}

.detail .socialMedia {
    display: none;
}

.register .social {
    display: none;
}

.basket .navigationBottom {
    text-align: inherit;
}


/* -------------------- ENDE bpm-overrides */


/* -------------------- START AKR-styles GLOBAL */


/* -------------------- helferlein */

.makeBr br {
    display: block;
    content: " ";
    margin-bottom: 0.8rem;
}

.positionRelative {
    position: relative;
}

.displayNone {
    /* besser bpm-Klasse .hidden verwenden */
    display: none !important;
}

.displayInlineBlock {
    display: inline-block;
}

.displayBlock {
    display: block;
}

.displayFlex {
    display: flex;
}

body.step-XS .noDisplayFlexSXS .displayFlex,
body.step-S .noDisplayFlexSXS .displayFlex {
    display: block;
}

.flexWrapBetween {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flexWrapCenter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flexWrapWrap {
    flex-wrap: wrap;
}

.spaceBetween {
    justify-content: space-between;
}

.flexStart {
    justify-content: flex-start;
}

.textIndent5000 {
    position: absolute;
    display: inline-block;
    left: -5000px;
    max-width: 10px;
    max-height: 10px;
    overflow: hidden;
    color: transparent;
}

.verticalAlignTop {
    vertical-align: top;
}

.blockLinks a {
    display: block;
}

.width50 {
    width: 50%;
}

.width100 {
    width: 100%;
}

.maxWidth80 {
    max-width: 80.6rem;
}

.marginAll2 {
    margin: 2rem;
}

.marginRight0 {
    margin-right: 0 !important;
}

.marginRight1 {
    margin-right: 1rem !important;
}

.marginRight2 {
    margin-right: 2rem !important;
}

.marginRight3 {
    margin-right: 3rem !important;
}

.marginRight4 {
    margin-right: 4rem !important;
}

.marginRight5 {
    margin-right: 5rem !important;
}

.marginLeft1 {
    margin-left: 1rem !important;
}

.marginLeft2 {
    margin-left: 2rem !important;
}

.marginLeft3 {
    margin-left: 3rem !important;
}

.marginLeft4 {
    margin-left: 4rem !important;
}

.marginLeft5 {
    margin-left: 5rem !important;
}

.marginBottom0 {
    margin-bottom: 0 !important;
}

.marginBottom1 {
    margin-bottom: 1rem !important;
}

.marginBottom2 {
    margin-bottom: 2rem !important;
}

.marginBottom3 {
    margin-bottom: 3rem !important;
}

.marginBottom4 {
    margin-bottom: 4rem !important;
}

.marginBottom5 {
    margin-bottom: 5rem !important;
}

.marginBottom6 {
    margin-bottom: 6rem !important;
}

.marginBottom7 {
    margin-bottom: 7rem !important;
}

.marginBottom8 {
    margin-bottom: 8rem !important;
}

.marginTop0 {
    margin-top: 0 !important;
}

.marginTop1 {
    margin-top: 1rem !important;
}

.marginTop2 {
    margin-top: 2rem !important;
}

.marginTop3 {
    margin-top: 3rem !important;
}

.marginTop4 {
    margin-top: 4rem !important;
}

.marginTop5 {
    margin-top: 5rem !important;
}

.padding0 {
    padding: 0 !important;
}

.padding1 {
    padding: 1rem !important;
}

.padding2 {
    padding: 2rem !important;
}

.clearBoth {
    clear: both !important;
}

.noDownloadIcon .sectionPicture {
    display: none;
}

.noDownloadIcon .sectionDesc {
    padding: 0;
}

.noDownloadIcon .articleItem.listItem>a,
.noDownloadIcon .articleItem.listItem>div {
    padding: 0;
}

.fontSize16 {
    font-size: 1.6rem;
}

.fontSize17 {
    font-size: 1.7rem;
    line-height: 1.3;
}

.fontSize18 {
    font-size: 1.8rem;
    line-height: 1.3;
}

.fontSize19 {
    font-size: 1.9rem;
}

.fontSize20 {
    font-size: 2.0rem;
}

.fontWeight300 {
    font-weight: 300;
}

.fontWeight400 {
    font-weight: 400;
}

.fontWeight600 {
    font-weight: 600;
}

.fontWeight700 {
    font-weight: 700;
}

.makeH2 a {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.pointerEventsNone a,
input.pointerEventsNone,
.pointerEventsNone input {
    pointer-events: none !important;
    cursor: default !important;
}


/** Alte JAlbum-"Lesefotos" und Youtube-Links, Youtube-Iframes ausblenden, die evtl. noch in Klappentexten engebunden sind **/

.buttonGruen .showJAlbum,
p strong .showVideo,
.detailPage .buttonBlau,
.detailPage .videoResponsive {
    display: none;
}

.textareaHeight20 textarea {
    height: 20rem;
}

.textareaHeight30 textarea {
    height: 30rem;
}

.textareaHeight40 textarea {
    height: 40rem;
}


/** Struktur fuer .makeCheckbox:
<div class='makeCheckbox'>
	<label for='inputName'>
		<input type='checkbox' value='1' name='inputName' id='inputName' />
		<span class='checkboxHaken'></span>
		<span class='checkboxText'>Lorem Ipsum ...</span>
	</label>
</div>
**/

.makeCheckbox label {
    position: relative;
    padding-left: 3rem;
    margin-top: 1rem;
}

.makeCheckbox label:before {
    position: absolute;
    left: 0;
    display: inline-block;
    content: '';
    height: 2.4rem;
    width: 2.4rem;
    border: 1px solid #9ea5a6;
    border-radius: 0.2rem;
    background-color: #fff;
}

.makeCheckbox .checkboxText {
    display: inline-block;
    padding-left: 1rem;
}

.makeCheckbox input[type="checkbox"] {
    display: none;
}

.makeCheckbox input[type="checkbox"]:checked~.checkboxHaken:before {
    content: '\e62c';
    position: absolute;
    display: inline-block;
    color: #5b5b5b;
    font-family: beeIcons;
    font-weight: 400;
    font-size: 1.8rem;
    top: 0.2rem;
    left: 0.3rem;
    /** Image- Variante
	background-image:url(img/check.png);
    background-repeat:no-repeat;
	background-size:2.6rem;
	color:transparent;
	**/
}

.gridPage .content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

main.grid {
    background-image: url(images/grid.png);
    background-repeat: no-repeat;
    width: 200% !important;
    height: 200rem !important;
    margin: 0;
    z-index: 20;
}

main.grid textarea {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.75);
    width: 20rem;
    max-width: 90%;
    display: inline-block;
    height: 15rem !important;
    font-weight: bold;
    margin: 2rem 0 0 12rem;
}

.browserTest input[type="text"] {
    height: 5rem !Important;
    font-size: 2rem !important;
}

.noDataHref div[data-href] {
    pointer-events: none;
}

.noDataHref div[data-href] a {
    pointer-events: all;
}

iframe {
    font-family: "Source Sans Pro";
    font-size: 1.0rem;
}


/** LINKS **/

body:not(.step-XL) .button a {
    white-space: normal;
    text-align: left;
}

.external a {
    text-decoration: underline;
}

.makeExternal a[href*="//"]:not([href*="reuffel.de"]) {
    text-decoration: underline;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: underline;
    font-weight: bold;
}

.textDecorationUnderline a {
    text-decoration: underline;
}

.anker {
    margin-top: 6rem;
}

.anchor:before {
    display: block;
    content: " ";
    margin-top: -20px;
    height: 20px;
    visibility: hidden;
}


/* -------------------- Box erzeugen, z.B. fuer /service/gutscheine [an Kontainer] */

.makeExternal a[href*="//"]:not([href*="reuffel.de"]):after {
    content: '\e615';
    display: inline-block;
    height: 1.5rem;
    padding-left: 0.4rem;
    font-family: beeIcons;
    font-weight: 400;
    font-size: 1rem;
    overflow: hidden;
}


/* -------------------- Box erzeugen, z.B. fuer /service/gutscheine [an Kontainer] */

.makeBox1 {
    background: #f6f6f6;
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 2rem 0;
}

.makeBox1 .listFooter {
    display: none;
}

.karrierePreviews .makeBox1 {
    background: #f6f6f6;
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 2rem 2rem 1rem 0;
    width: 30rem;
}

body.step-S .karrierePreviews .makeBox1,
body.step-XS .karrierePreviews .makeBox1 {
    width: 100%;
}

.karrierePreviews .makeBox1 h3 {
    background: #FF4A5D;
    color: #fff;
    padding: 1rem;
    margin: -2.2rem -1.1rem 1.1rem -1rem;
    line-height: 1.1;
}

.karrierePreviews .makeBox1 h6 {
    margin-bottom: 0.5rem;
}

.jointBox1 {
    background: #f6f6f6;
    border: 1px solid #ddd;
    border-bottom: none;
    padding: 1rem 1rem 0 1rem;
    margin: 2rem 0 0 0;
}

.jointBox2 {
    background: #f6f6f6;
    border: 1px solid #ddd;
    border-top: none;
    padding: 0 1rem 1rem 1rem;
    margin: 0 0 3rem 0 !important;
}


/* -------------------- Button-Breite festlegen [an button/action/link] */

.bigButton20,
.bigButton25,
.bigButton30,
.bigButton35,
.bigButton40,
.bigButton45,
.bigButton50,
.bigButton60 {
    white-space: normal;
}

.bigButton20 {
    width: 20rem;
}

.bigButton25 {
    width: 25rem;
}

.bigButton30 {
    width: 30rem;
}

.bigButton35 {
    width: 35rem;
}

.bigButton40 {
    width: 40rem;
}

.bigButton45 {
    width: 45rem;
}

.bigButton50 {
    width: 50rem;
}

.bigButton60 {
    width: 60rem;
}

.button.bigButton20> :first-child,
.button.bigButton25> :first-child,
.button.bigButton30> :first-child,
.button.bigButton35> :first-child,
.button.bigButton40> :first-child,
.button.bigButton45> :first-child,
.button.bigButton50> :first-child,
.button.bigButton60> :first-child {
    text-align: left;
    margin: 0 0 1rem 0;
}

body:not(.step-XL) .bigButton40,
body:not(.step-XL) .bigButton45,
body:not(.step-XL) .bigButton50 {
    width: 100%;
}

.maxWidth100 {
    max-width: 100%;
}

.maxWidth75 {
    max-width: 75%;
}

.maxWidth100rem {
    max-width: 100rem;
}

.articleDetail.text {
    margin-bottom: 4rem;
}

.downloadOnlyButton {
    position: relative;
}

.downloadOnlyButton .download {
    margin-right: 1rem;
}

.downloadOnlyButton .download .listHeader,
.downloadOnlyButton .download .sectionPicture,
.downloadOnlyButton .download .sectionDesc .articleHeading,
.downloadOnlyButton .download .listFooter {
    display: none;
}

.downloadOnlyButton .download,
.downloadOnlyButton .download div,
.downloadOnlyButton .download .sectionDesc {
    display: inline-block;
    width: auto;
}

.downloadOnlyButton .download .articleFile.button {
    margin-top: 0;
}

.downloadOnlyButton .download .articleListItem>div {
    display: inline-block;
    width: auto;
}


/* -------------------- Youtube-Video per iframe im Klappentext */

.videoResponsive {
    background-color: #eee;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 2rem;
}

.videoResponsive iframe {
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay .videoResponsive {
    width: 64rem;
    max-width: 100%;
    margin-top: 0;
}

body.resultPage.step-S .overlay .dialogHeading,
body.resultPage.step-XS .overlay .dialogHeading,
body.detailPage.step-S .overlay .dialogHeading,
body.detailPage.step-XS .overlay .dialogHeading {
    margin: 0;
}

body.resultPage.step-S .overlay .availablity .storeAvailability .item,
body.resultPage.step-XS .overlay .availablity .storeAvailability .item,
body.detailPage.step-S .overlay .availablity .storeAvailability .item,
body.detailPage.step-XS .overlay .availablity .storeAvailability .item {
    display: flex;
}

body.resultPage.step-S .overlay .availablity .storeAvailability .item .columnAmount,
body.resultPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount,
body.detailPage.step-S .overlay .availablity .storeAvailability .item .columnAmount,
body.detailPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount {
    order: 2;
    width: 40%;
    color: #fff;
    line-height: 0;
    font-size: 0;
    margin-top: 1.0rem;
}

body.resultPage.step-S .overlay .availablity .storeAvailability .item .columnStore,
body.resultPage.step-XS .overlay .availablity .storeAvailability .item .columnStore,
body.detailPage.step-S .overlay .availablity .storeAvailability .item .columnStore,
body.detailPage.step-XS .overlay .availablity .storeAvailability .item .columnStore {
    width: 60%;
    font-size: 1.6rem;
}

body.resultPage.step-S .overlay .availablity .storeAvailability .item .columnAmount>div,
body.resultPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount>div,
body.detailPage.step-S .overlay .availablity .storeAvailability .item .columnAmount>div,
body.detailPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount>div {
    color: #111;
    font-size: 1.6rem;
}

body.resultPage.step-S .overlay .availablity .storeAvailability .item .columnAmount>div:after,
body.resultPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount>div:after,
body.detailPage.step-S .overlay .availablity .storeAvailability .item .columnAmount>div:after,
body.detailPage.step-XS .overlay .availablity .storeAvailability .item .columnAmount>div:after {
    content: "Exemplar(e) \A vorhanden";
    display: inline-block;
    padding-left: 3rem;
    white-space: pre;
    line-height: 2rem;
    vertical-align: top;
    font-weight: normal;
    margin-top: -0.8rem;
}


/** teaserServices **/

.teaserServices {
    margin: 2rem 0;
}

body:not(.step-XL) .teaserServices {
    margin: 2rem 0 0rem 0;
}

.teaserServices div.teaserServicesRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    text-align: center;
}

.teaserServices div.teaserServicesRow div {
    position: relative;
    flex: 0 1 20%;
}

.services6 .teaserServices div.teaserServicesRow div {
    position: relative;
    flex: 0 1 16.65%;
}

.teaserServices div.teaserServicesRow div span.hoverInfo {
    display: none;
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: inherit;
    background: #fafafa;
    border: 1px solid #666;
    border-radius: 0.2rem;
    width: 100%;
    min-width: 20rem;
    height: auto;
    min-height: 10rem;
    margin: 0 auto;
    padding: 1rem 1rem 0.5rem 0.5rem;
    font-weight: bold;
    box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.teaserServices a {
    display: block;
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 0;
}

body:not(.step-XL) .teaserServices a {
    top: 2.5rem;
}

body:not(.step-XL) .teaserServices div.teaserServicesRow div span.hoverInfo {
    box-shadow: 0 0 10rem 0 rgba(0, 0, 0, 0.8);
}

body.step-XS .teaserServices div.teaserServicesRow div.servicesCenter span.hoverInfo,
body.step-S .teaserServices div.teaserServicesRow div.servicesCenter span.hoverInfo {
    left: -100%;
}

body.step-M .teaserServices div.teaserServicesRow div.servicesCenter span.hoverInfo {
    left: -30%;
}

.teaserServices div.teaserServicesRow div.servicesRight span.hoverInfo {
    left: inherit;
    right: 0;
}

body.step-XL .teaserServices div.teaserServicesRow div:hover span.hoverInfo,
body:not(.step-XL) .teaserServices div.teaserServicesRow div.hover span.hoverInfo {
    display: inline-block;
}

body.step-XL .teaserServices div.teaserServicesRow span.closeMe {
    display: none;
}

body:not(.step-XL) .teaserServices div.teaserServicesRow div.hover span.closeMe {
    display: inline-block;
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(images/services/close.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.teaserServices img {
    max-width: 33%;
}

body.step-XS .teaserServices img {
    max-width: 66%;
}

body.step-S .teaserServices img {
    max-width: 66%;
}

body.step-M .teaserServices img {
    max-width: 40%;
}

body.step-L .teaserServices img {
    max-width: 25%;
}

body:not(.step-XL):not(.step-L) .teaserServices .titelServices {
    display: none;
}


/**Fake-Buttons, bewusster Bruch der StyleGuides **/

.fakeButtonArticleLink .articleText div {
    height: auto !important;
}

.fakeButton a,
.fakeButtonArticleLink .articleLink a,
.education a[href*="/schulbuch/basketAddManually"] {
    position: relative;
    display: inline-block;
    text-decoration: none;
    min-height: 2.8rem;
    padding: 0.4rem 0.8rem 0 0.8rem;
    font-family: "Source Sans Pro Semibold", sans-serif;
    color: #ffffff;
    border-color: #66a99c;
    border-radius: 0.2rem;
    background-color: #66a99c;
    outline: 0;
    font-size: 1.4rem;
    text-align: center;
}

.fakeButton a:hover,
.fakeButtonArticleLink .articleLink a:hover,
.education a[href*="/schulbuch/basketAddManually"]:hover {
    border-color: #5b5b5b;
    background-color: #5b5b5b;
    color: #ffffff;
}

.fakeButtonArticleLink .articleLink .key {
    display: none;
}


/* -------------------- Eigene Formatierung fuer images setzen/aufheben [an .main oder an das Bild] */

.floatLeftImage img,
.floatLeftImage .articlePicture,
.floatLeftImage .sectionPicture {
    float: left;
    width: auto;
    margin: 0 2rem 0 0;
}

.floatLeftImage .articleDetail .col.colMain .articlePicture.imageLeft {
    margin-right: 0;
    float: left;
    width: auto;
}

.floatLeftImage .articleItem.coverItemPlus>a {
    display: flex;
    flex-direction: inherit;
}

.floatLeftImage .articleItem.coverItemPlus>a {
    display: flex;
    flex-direction: inherit;
    pointer-events: none;
}

.floatLeftImage .articleItem.coverItemPlus .sectionPicture {
    pointer-events: all;
}

.floatLeftImage9rem div~div {
    margin-left: 9rem;
}

.floatRightImage img {
    float: right;
    margin: 0 0 0 2rem;
}

.floatLeftImage:after,
.floatRightImage:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

.noArticlePictureBefore .articlePicture .value:before,
.noArticlePictureBefore .articlePicture .value a:before,
.mainMultiLinks .articlePicture .value:before,
.mainMultiLinks .articlePicture .value a:before {
    content: none;
    box-shadow: none;
}

.noArticlePictureBefore a .articlePicture:hover .value,
.noArticlePictureBefore .articlePicture a:hover {
    box-shadow: none;
    transition: none;
}

.rekImage img,
.customer.register.complete img {
    margin: 0.2rem 2rem 1rem 0;
    max-width: 100%;
    -moz-box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    border: 3px solid #fff;
}

.customer.register.complete img {
    margin: 0;
}

.rekImage.floatRightImage img {
    margin: 0.2rem 0 1rem 2rem;
}

.noRekImage img {
    margin: inherit;
    -moz-box-shadow: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    border: inherit;
}

.rekImage .biblioCover .cover a:before,
.rekImage .biblioCover>.value:before {
    box-shadow: none;
}

.noTableBorders table,
.noTableBorders table td {
    border: none;
}


/** Spacer zur Trennung von Textbereichen [an Kontainer] **/

.spacer {
    margin: 1rem 0 1rem 0;
    clear: both;
}


/** ZIMMERMANNSCHE **/

.zimmermannscheAppend {
    display: inline-block;
    font-family: "Source Sans Pro Semibold", sans-serif;
    font-weight: bold;
    margin: 1rem 0 2rem -0.5rem;
    padding: 0.5rem;
    background: #f9f9f9;
}

.zimmermannscheBeitrag {
    display: none;
}

.zimmermannschePage main .query .panel:after {
    content: 'Massenaktion';
    display: block;
    font-size: 2rem;
    color: #5b5b5b;
}

.zimmermannschePage .listFooter .selectedActionsContainer:before {
    content: 'Alle markieren:';
    display: inline-block;
    margin-right: 1rem;
    font-weight: bold;
    color: #5b5b5b;
}

.zimmermannschePage .listFooter .checkSelect .action:after {
    content: 'Markierte in den Warenkorb:';
    display: inline-block;
    margin: 0 0 0 2rem;
    font-weight: bold;
    color: #5b5b5b;
}

.zimmermannschePage .listFooter .icon-notepad {
    display: none;
}

.zimmermannschePage .bigButton40 a {
    font-weight: bold;
    font-size: 1.5rem;
}


/** Download-Beitrag, z.B. PDF **/

.articleListItem.downloadArticle .sectionPicture {
    width: 13rem;
}

.articleListItem.downloadArticle .articlePicture {
    width: 10rem;
}


/** Veranstaltungen **/

.orderTicket {
    margin: 2rem 0;
    padding: 1rem;
    background-color: #eee;
    border-radius: 0.5rem;
    display: block;
    width: 60rem;
    max-width: 100%;
}

.orderTicket .button {
    margin-right: 4rem;
}

.orderTicketPhone {
    display: inline-block;
    min-width: 30rem;
    padding: 0 0 0 2.8rem;
}

.orderTicketPhone::before {
    content: '\e64d';
}

.hideBeforeVVK .beforeVVK {
    display: none;
}


/** enthaltene .listHeader ausblenden [an .main oder umgebenden Kontainer], fest fuer Autorenliste **/

.noListHeader .listHeader,
.articleList.author .listHeader {
    display: none;
}

.noListHeader .listHeader,
.noListHeader .listFooter {
    border: none;
}


/** Listen bei Bedarf mit discs anzeigen [an .main oder CMS-Text] */

.showUl ul {
    list-style-type: inherit;
    margin: 0 0 0 1.5rem;
}

.showUl ul li {
    margin: 0.5rem 0 0.5rem 0;
}


/** reuffelCard **/


/** reuffelCard-Pr�mien **/

.formReuffelCardPraemie .praemie,
.formReuffelCardPraemie .spende {
    margin: 2rem 0;
    display: flex;
    width: 100%;
}

body.step-S.reuffelcardPage .praemie,
body.step-XS.reuffelcardPage .praemie,
body.step-S.reuffelcardPage .spende,
body.step-XS.reuffelcardPage .spende {
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 5px solid #ddd;
}

.reuffelcardPage .praemie img,
.reuffelcardPage .spende img {
    max-width: 20rem;
}

.reuffelcardPage .content .spende h2 {
    width: 100%;
    margin: 1rem 0 0 0;
}

.reuffelcardPage .spendeNumberWrap input[type="number"] {
    width: 4rem;
}

.reuffelcardPage .praemieNumberWrap,
.reuffelcardPage .spendeNumberWrap {
    margin: 0 1rem 0 0;
    display: inline-block;
    margin-top: 3rem;
}

.reuffelcardPage input#Punktestand {
    width: 100%
}

.reuffelcardPage .imageWrap {
    margin: 0 1rem 0 0;
    display: inline-block;
    vertical-align: top;
}

body.step-S.reuffelcardPage .imageWrap,
body.step-XS.reuffelcardPage .imageWrap {
    margin: 0;
    width: calc(100% - 6rem);
}

.reuffelcardPage .punkteWrap,
.reuffelcardPage .spendeInfoWrap {
    margin: 0;
    display: inline-block;
    vertical-align: top;
}

.reuffelcardPage .spendeInfoWrap .Quittung {
    margin-top: 2rem;
    display: inline-block;
}

.reuffelcardPage .spendeInfoWrap .Quittung input[type="checkbox"] {
    display: inline-block;
    vertical-align: bottom;
}

.reuffelcardPage #WrapperQuittungMabira,
.reuffelcardPage #WrapperQuittungDiakonie,
.reuffelcardPage #WrapperQuittungFriedenskinder,
.reuffelcardPage #WrapperQuittungCaritas,
.reuffelcardPage #WrapperQuittungKinderschutzbund,
.reuffelcardPage #WrapperQuittungKoblenzlernt {
    display: none;
}

.reuffelcardPage #ueberbucht {
    display: none;
}

.reuffelcardPage #showErrorAccept,
.reuffelcardPage #showErrorMail,
.reuffelcardPage #showErrorPunkteEingesetzt {
    display: none;
}

.reuffelcardPage .noscript+.onlyWithJavascript,
.reuffelcardPage .noscript br {
    display: none;
}

#popupdiv {
    display: none;
    width: 32rem;
    height: 20rem;
    max-height: 80%;
    min-height: 6rem;
    min-width: 32rem;
    max-width: 40rem;
    overflow: auto;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    right: 1.6rem;
    bottom: 1.6rem;
    vertical-align: bottom;
    position: fixed;
    z-index: 401;
    font-family: "Source Sans Pro Semibold", sans-serif;
    color: #fff;
    border: 1px solid #9fa966;
    background-color: #ff4a5d;
    box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.4);
    animation: alertRollin 1s ease-out 0s 1;
    -webkit-animation: alertRollin 1s ease-out 0s 1;
}

#popupdiv h2 {
    margin: 0 0 1rem 0;
    font-family: "Source Sans Pro Semibold", sans-serif;
    font-size: 1.6rem;
    color: #fff;
}

#popupdiv span {
    width: 6rem;
    display: inline-block;
}

#popupdiv:before {
    content: '\e621';
    float: left;
    font-family: beeIcons;
    font-size: 1.8rem;
    margin: 0.2rem 0 0 -2.5rem;
}


/** NL-Verwaltung **/

.NLform .inputMailaddressALT {
    visibility: hidden;
    height: 1px;
    font-size: 0;
}


/** LESETIPPS Tipps-Seite, evtl. bald obsolet dank bpm-Programmierung fuer Lesetipps **/

main.lesetipps #getMe {
    position: relative;
}

main.lesetipps .defaultItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 2rem 0;
    padding: 1rem;
    border: 1px solid #ccc;
    background: #f6f6f6;
}

main.lesetipps .defaultItem .lesetippTitle {
    margin: 0 0 2rem 0;
    width: 100%;
}

main.lesetipps .defaultItem h6.biblioAuthor {
    margin: 0;
}

main.lesetipps .defaultItem .lesetippTitle .lesetippCounter {
    display: inline-block;
    font-size: 1.5rem;
    color: #999;
    margin: 0 1rem 0 0;
}

main.lesetipps .lesetippCover {
    position: relative;
    width: 19%;
    max-width: 12rem;
    margin-right: 1%;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
}

main.lesetipps .lesetippCover a {
    display: block;
    box-shadow: none;
    transition: box-shadow 0.2s ease-out;
}

main.lesetipps .lesetippCover a:hover {
    display: block;
    box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.2s ease-out;
}

main.lesetipps .lesetippCover .cover {
    width: 100%;
}

main.lesetipps .lesetippPreis {
    font-size: 1.5rem;
}

main.lesetipps .biblioText {
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
}

main.lesetipps .authorTitle {
    width: 60%;
}

body.step-XS main.lesetipps .authorTitle,
body.step-S main.lesetipps .authorTitle {
    width: 55%;
}

main.lesetipps #getMe.TDB .authorTitle {
    width: 80%;
}

main.lesetipps.reuffelsofa .authorTitle {
    width: 86%;
}

main.lesetipps .maImage {
    display: inline-block;
    width: 19%;
    vertical-align: top;
    text-align: right;
}

body.step-XS main.lesetipps .maImage,
body.step-S main.lesetipps .maImage {
    width: 25%;
}

main.lesetipps .showCOT {
    color: #777;
    font-weight: bold;
}

main.lesetipps .showCOT:hover {
    color: #000;
    cursor: pointer;
}

main.lesetipps .defaultItem+.biblioItem.listItem {
    display: none;
}


/** Magnific Popup, Formatierung der eigenen Sliders fuer Fotoalben */

.magnificContainer {
    display: inline-block;
    margin: 0 auto;
}

.magnificGallery {
    float: left;
    padding: 0;
    margin: 0;
}

.magnificGallery a {
    display: block;
    position: relative;
    min-height: 2.8rem;
    outline: 0;
    border-radius: 0.2rem;
    padding: 1px 1rem 0 2.8rem;
    margin: 1rem 0 0 0;
    border-color: #66a99c;
    background-color: #66a99c;
    color: #ffffff;
}

.magnificGallery a::before {
    content: '\e62f';
    position: absolute;
    left: 0.4rem;
    top: 0.2rem;
    pointer-events: none;
    z-index: 2;
    height: 2rem;
    width: 2rem;
    font-family: beeIcons;
    font-size: 1.8rem;
    speak: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.magnificGallery a:hover,
.magnificGallery a:active,
.magnificGallery a:focus {
    border-color: #5b5b5b;
    background-color: #5b5b5b;
}

.magnificGallery div~div {
    display: none;
}

.magnificGallery br {
    display: none;
}


/**  AUTOREN
.articleList.author .positions hat column-count:2 und verursacht, je nach Anzahl der Unterordner, ein "vertical-align-Problem".
Autoren-Links global deaktivieren, Pflege ist zu aufwaendig, Fotos sind nicht lizenzsicher erhaeltlich
**/

.articleList.author .panel a {
    pointer-events: none !important;
    cursor: default !important;
    height: 1.5rem;
}

.articleList.author .sectionPicture {
    display: none;
}

.articleList.author .articleItem.coverItemPlus .sectionDesc {
    margin: 0 0 1rem 0;
    line-height: 1.5rem;
}


/** FS/ZS **/

body.mailFromFSZS {
    width: 50rem !important;
    display: block !important;
    margin: 0 !important;
    padding: 1rem !important;
}

body.mailFromFSZS .body {
    width: 47rem !important;
}

body.mailFromFSZS .body:before {
    display: none;
    content: none;
    position: static;
    height: 0;
    width: 0;
    background-image: none;
}

body.mailFromFSZS .body>.content {
    display: block !important;
    width: 100%;
    padding: 0;
}

body.mailFromFSZS textarea {
    min-height: 8rem !important;
}


/* -------------------- Anzeige der Gutscheine (themen,gutscheine,main,voucherContainer, service,geschenke,gutscheine,main,voucherContainer) */

.voucherContainer .makeBox1 .button {
    min-width: 20rem;
    margin: 0.5rem 2rem 0.5rem 0;
}


/** reuffelSofa **/

.reuffelsofa .matippAusgabe {
    margin: 1rem 0;
    background: #eee;
    padding: 2rem;
    min-height: 10rem;
}

.reuffelsofa .imageWrap {
    display: table-cell;
    width: 13rem;
}

.reuffelsofa .imageWrap img {
    padding-right: 2rem;
}

.reuffelsofa .matippAusgabe .rezension {
    display: table-cell;
    width: auto;
    vertical-align: top;
}

.reuffelsofa .biblioItem.listItem {
    padding-left: 2rem;
}

.reuffelsofa .sectionDesc {
    padding-left: 3rem;
}

.reuffelsofa .biblioText br,
.reuffelsofa .matippAusgabe br {
    line-height: 3rem;
}

.reuffelsofa .sectionPrice {
    margin-bottom: 2rem;
}

.reuffelsofa .mitarbeiter img {
    margin-right: 0.75rem;
    width: 13rem;
}

.reuffelsofa .maName {
    display: block;
    font-size: 1.2rem;
    text-align: center;
    color: #555;
    line-height: 1.2;
    margin-bottom: 1rem;
}

body.step-S main.reuffelsofa .articleHtmlText span.value span img,
body.step-XS main.reuffelsofa .articleHtmlText span.value span img {
    max-width: 10rem;
    margin-right: 0;
}

body.step-XS .reuffelsofa .articlePicture.imageLeft,
body.step-S .reuffelsofa .articlePicture.imageLeft {
    margin-bottom: 2rem;
}

body.step-XS .reuffelsofa .articleDetail .articleHtmlText h5,
body.step-S .reuffelsofa .articleDetail .articleHtmlText h5 {
    text-align: left;
    margin-bottom: 2rem;
}


/** SCHULBUCH, lastYear-Warnung
.education.list > h1 + div:not(:last-child) { //zu unspezifisch, produziert rote Blitzer im Folge-div
**/

.education.list>h1+div:not(:last-child):not([id]) {
    padding: 1rem;
    margin-bottom: 3rem;
    border: 1px solid red;
    background-color: #f0f0f0;
    font-weight: bold;
    color: red;
}

.education.list .listHeader~.flexTable .positions.active:before {
    content: "Schutzh\FCllen gew\FCnscht?\AW\E4hlen Sie gleich im Warenkorb jeweils entsprechend aus.";
    display: block;
    margin: 2rem 0;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background-color: #dddddd;
    color: #5b5b5b;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.1rem;
}

body.step-L .education .educationItemList .cellDesc .education,
body.step-M .education .educationItemList .cellDesc .education {
    width: calc(100vw - 14rem);
}

body.step-S .education .educationItemList .cellDesc .education,
body.step-XS .education .educationItemList .cellDesc .education {
    width: calc(100vw - 7.5rem);
}

.education .educationItemList .cellDesc .education .educationComment,
.education .educationItemList .cellDesc .education .educationDescription {
    font-weight: 600;
    font-size: 1.7rem;
    color: #555;
}

body:not(.step-XL):not(.step-L) .education .educationItemList .cellDesc .education .educationComment,
body:not(.step-XL):not(.step-L) .education .educationItemList .cellDesc .education .educationDescription {
    font-size: 1.5rem;
}

.education .educationItemList .cellDesc .education .educationComment:before,
.education .educationItemList .cellDesc .education .educationDescription:before {
    content: 'Hinweis der Schule: ';
    display: block;
    font-size: 1.5rem;
}

.education .educationItemList .cellDesc .education .educationSubject {
    display: none;
}

.education .sbISBN .key {
    user-select: none;
}

.educationListPrintButton {
    text-align: right;
    position: relative;
    right: 1rem;
    top: 1rem;
    height: 0;
}

.education.list h1 {
    width: calc(100% - 14rem);
}


/* ------------------- 	Relevanz-Sterne in /result unterdruecken, sie werden als Bewertung missverstanden.
						Sie koennen in /detail im CMS ausgeblendet werden, aber leider nicht in /result
*/

.biblioItem.listItem .sectionDesc .ratingStars,
.ratingStars {
    display: none;
}


/* -------------------- ENDE AKR-styles GLOBAL */


/* -------------------- START AKR-Mobile  */

body.step-XS h5,
body.step-XS .h5,
body.step-S h5,
body.step-S .h5 {
    font-size: 2.0rem;
}


/* -------------------- Bilder-"Ueberlauf" in .main verhindern */

body:not(.step-XL):not(.step-L) main span.value,
body:not(.step-XL):not(.step-L) main span.value span,
body:not(.step-XL):not(.step-L) main span.value span img {
    max-width: 100%;
}


/** .left unter mobile verbergen , produktiv mit Z. 1655 abgleichen **/

body:not(.step-XL) .left.mobileHideLeft {
    display: none;
}


/** left nun endgueltig unter mobile nicht mehr anzeigen **/

body:not(.step-XL) .left {
    /**order:2;**/
    display: none;
}


/* -------------------- HEADER  */

.headerSidemenu .icon-menu {
    transition: all 0.1s linear;
}

body:not(.step-XL) .headerSidemenu {
    width: 6rem;
}

body.step-L .headerSidemenu .icon-menu:before,
body.step-M .headerSidemenu .icon-menu:before {
    font-size: 3rem;
}

body.step-M .headerSidemenu .icon-menu:before {
    font-size: 2.5rem;
}

header .sidebar {
    top: 6.9rem;
    background: #333;
    background: rgba(30, 30, 30, 0.9);
}

header .sidebar.on {
    width: 38rem;
    background: #333;
    background: rgba(30, 30, 30, 0.9);
}

body.step-XS header .sidebar.on,
body.step-S header .sidebar.on {
    max-width: 100%;
}

header .sidebar.on nav.navigation>ul a {
    background: #ddd;
    margin: 1rem 0;
    padding: 0.5rem 3rem 0.5rem 2rem;
    font-size: 2rem;
    line-height: 4rem;
}

header .sidebar.on nav.navigation>ul ul a {
    background: #999;
    background: rgba(150, 150, 150, 0.9);
    color: #fff;
}

� header .sidebar.on nav.navigation>ul ul ul {
    xx: yy;
}

header .sidebar.on nav.navigation>ul ul ul a {
    background: #666;
    background: rgba(100, 100, 100, 0.9);
}

header .sidebar.on nav.navigation>ul ul ul ul a {
    background: #555;
    background: rgba(70, 70, 70, 0.9);
}

body:not(.step-XL) nav.navigation li span {
    font-size: 2rem;
    line-height: 3rem;
    width: 4.2rem;
}

body:not(.step-XL) nav.navigation ul ul li span {
    color: #fff;
}


/** focus-Animation fuer seidebar-Untermenues **/

@keyframes sidebarFocus {
    0% {
        background-color: transparent;
    }
    20% {
        background-color: #e6e8e8;
    }
    100% {
        background-color: transparent;
    }
}

@-webkit-keyframes sidebarFocus {
    0% {
        background-color: transparent;
    }
    20% {
        background-color: #e6e8e8;
    }
    100% {
        background-color: transparent;
    }
}

body:not(.step-XL) nav.navigation li span:hover,
body:not(.step-XL) nav.navigation li span:focus {
    background-color: transparent;
    border-radius: 50%;
    -webkit-animation-name: sidebarFocus;
    -webkit-animation-duration: 1s;
    animation-name: sidebarFocus;
    animation-duration: 1s;
}

body:not(.step-XL) .headerLogo {
    width: 12rem;
    max-width: calc(100% - 21rem);
    padding: 1rem 0;
}

body.step-L .headerLogo {
    width: 18rem;
    padding-right: 2rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick form,
body:not(.step-XL):not(.step-L) .headerSearch .quick .field-text input,
body:not(.step-XL):not(.step-L) .headerSearch .quick .reset input,
body:not(.step-XL):not(.step-L) .headerSearch .quick .reset a,
body:not(.step-XL):not(.step-L) .headerSearch .quick .reset.icon-close:before,
body:not(.step-XL):not(.step-L) .headerSearch .quick .confirm,
body:not(.step-XL):not(.step-L) .headerSearch .quick .confirm:before,
body:not(.step-XL) .headerSearch .quick .confirm input[type=submit] {
    height: 5rem;
    font-size: 2rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick form {
    height: 6rem;
    padding: 0.5rem 0;
    line-height: 5.5rem;
}

body.step-XS .headerSearch .quick .field-text,
body.step-S .headerSearch .quick .field-text,
body.step-M .headerSearch .quick .field-text {
    width: calc(100% - 10rem) !important;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick .reset {
    width: 4.4rem;
    height: 5rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick .confirm input[type=submit] {
    left: -1rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick .confirm,
body:not(.step-XL):not(.step-L) .headerSearch .quick .confirm:before {
    width: 5.2rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick .expand {
    margin-top: -6rem;
    height: 6rem;
}

body:not(.step-XL):not(.step-L) .headerSearch .quick .expand a:after {
    height: 6rem;
    line-height: 6rem;
    width: 4rem;
    vertical-align: middle;
}


/** �BERPR�FEN TODO !!! **/

body.step-XS .header .headerSearch .quick .field-select .select2-container .select2-choice .select2-chosen {
    color: transparent;
}

body.step-XS .header .headerSearch .quick .field-select .select2-container .select2-choice .select2-chosen:before {
    content: "Typ";
    color: #000;
    display: inline-block;
}

body.step-XS .headerSearch .quick .field-select {
    width: 8rem;
    font-size: 1.5rem;
}


/* -------------------- DETAIL  */

body.step-S .biblio.detail .columnCover,
body.step-XS .biblio.detail .columnCover {
    width: calc(100% - 22rem);
}

body.step-S .biblio.detail .columnPriceActions,
body.step-XS .biblio.detail .columnPriceActions {
    width: 20rem;
    margin-left: 2rem;
}

body.step-S .cellQuantity,
body.step-XS .cellQuantity {
    width: 3.4rem;
}

body.step-S .biblio.detail .columnPriceActions .containerAvailability .storeAvailability table th.columnQuantity,
body.step-XS .biblio.detail .columnPriceActions .containerAvailability .storeAvailability table th.columnQuantity {
    color: transparent;
}

body.step-S .biblio.detail .columnPriceActions .containerAvailability .storeAvailability table th.columnQuantity:before,
body.step-XS .biblio.detail .columnPriceActions .containerAvailability .storeAvailability table th.columnQuantity:before {
    content: "Anz.";
    color: #333;
}

body.step-S .cellCover,
body.step-S .columnCover,
body.step-XS .cellCover,
body.step-S .columnCover {
    width: 5rem;
}

body.step-XL .storeAvailability tfoot,
body.step-L .storeAvailability tfoot,
body.step-M .storeAvailability tfoot {
    display: none;
}


/* -------------------- BASKET
// searchCard_volle_Breite_M_S_XS {}
**/

body.step-M .basket.verify .giftcard .searchCard,
body.step-S .basket.verify .giftcard .searchCard,
body.step-XS .basket.verify .giftcard .searchCard {
    width: 100%;
}


/** Anpassungen_fuer_XL_L_M **/

body.step-XL .basket.verify .giftcard .searchCard .cardId {
    width: calc(100% - 42rem);
}

body.step-M .basket.verify .giftcard .searchCard .cardId,
body.step-L .basket.verify .giftcard .searchCard .cardId {
    width: calc(100% - 6.4rem);
}

body.step-XL .basket.verify .giftcard .searchCard .icon-search,
body.step-L .basket.verify .giftcard .searchCard .icon-search,
body.step-XL .basket.verify .giftcard .searchCard .icon-add,
body.step-L .basket.verify .giftcard .searchCard .icon-add {
    width: 17.8rem;
}

body.step-L .basket.verify .giftcard .searchCard .icon-search,
body.step-L .basket.verify .giftcard .searchCard .icon-add,
body.step-M .basket.verify .giftcard .searchCard .icon-search,
body.step-M .basket.verify .giftcard .searchCard .icon-add {
    width: 48%;
    margin: 2rem 4% 0 0;
    border: 1px solid #b6bbbc;
    border-radius: 0.2rem;
}

body.step-L .basket.verify .giftcard .searchCard .icon-add,
body.step-M .basket.verify .giftcard .searchCard .icon-add {
    margin-right: 0;
}


/** Anpassungen_Buttontexte_und_Buttonbreite **/

body.step-XL .basket.verify .giftcard .searchCard .icon-search:after,
body.step-L .basket.verify .giftcard .searchCard .icon-search:after,
body.step-M .basket.verify .giftcard .searchCard .icon-search:after {
    content: "Gutscheinwert pr\00FC fen";
    top: 0;
    position: absolute;
    left: 3rem;
    pointer-events: none;
}

body.step-XL .basket.verify .giftcard .searchCard .icon-add:after,
body.step-L .basket.verify .giftcard .searchCard .icon-add:after,
body.step-M .basket.verify .giftcard .searchCard .icon-add:after {
    content: "Zur Zahlung verwenden";
    top: 0;
    position: absolute;
    left: 3rem;
    pointer-events: none;
}

.field-number .value input[type='number']:not(:last-child)~span:not(.tooltip) {
    bottom: 2.9rem;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}

.field-number .value input[type='number']:not(:last-child)~span:not(.tooltip)+span {
    line-height: 3rem;
    border-top: 1px solid #eee;
}

.field-number .value input[type='number']:not(:last-child) {
    height: 6rem;
}

body.step-S .basket .cellQuantity,
.columnQuantity,
body.step-XS .basket .cellQuantity,
.columnQuantity {
    width: 7rem;
}

body.step-M.notepadPage .query .cellActions,
body.step-S.notepadPage .query .cellActions,
body.step-XS.notepadPage .query .cellActions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

body.step-M.notepadPage .query .cellActions span,
body.step-S.notepadPage .query .cellActions span,
body.step-XS.notepadPage .query .cellActions span {
    flex-grow: 1;
    max-width: 7rem;
}


/* -------------------- ENDE AKR-Mobile  */


/* -------------------- AKTUELLE PROBLEME �BERPR�FEN !!! */


/* Notfall-Ausblendung der sidebar f�r mobile-Kunden, bei denen sie nicht verschwinden will und damit das Systen unbenutzbar macht.
Dies betrifft unter Android offenbar den alten "Internet"-Browser (Safari), halbwechs aktuelle Chrome und Firefox sind fehlerfrei
Unter iOS 7 und 8 sind Safari und Chrome betroffen, iOS 8 mit Chrome noch unklar mangels Testgeraet */


/* AKR: ua-android funktioniert noch nicht, daher eigene Einbindung von body.ua-androidREK per web-customer.js ...
... und dann  das Menue zunaechst fuer ALLE Androiden ausblenden ... */

body.ua-androidREK header .sidebar,
body.ua-androidREK .headerSidemenu .icon-menu,
body.noSidebar header .sidebar,
body.noSidebar .headerSidemenu .icon-menu {
    display: none !important;
}


/* ... dann aber fuer Android-Chrome und -Firefox wieder einblenden */

body.ua-androidREK.ua-chrome header .sidebar,
body.ua-androidREK.ua-chrome .headerSidemenu .icon-menu,
body.ua-androidREK.ua-firefox header .sidebar,
body.ua-androidREK.ua-firefox .headerSidemenu .icon-menu {
    display: inline-block !important;
}


/* Mangels sidebar wenigstens die wichtigestens Links anbieten */


/* default ausblenden ... */

.sidebarForOldBrowsers {
    display: none;
}


/* ... aber fuer Androiden und andere alte Browser wieder einblenden ... */

body.ua-androidREK .sidebarForOldBrowsers,
body.noSidebar .sidebarForOldBrowsers {
    display: block;
}


/* ... aber Hilfs-Links fuer Android-Chrome und -Firefox wieder ausblenden */

body.ua-androidREK.ua-chrome .sidebarForOldBrowsers,
body.ua-androidREK.ua-firefox .sidebarForOldBrowsers {
    display: none;
}


/* ------- Browser ohne flex, z.B. alte Desktop-Safari, .noFlex wird per web-customer.js an body gehaengt  */

body.step-XL.noFlex header .sidebar,
body.step-XL.noFlex .headerSidemenu .icon-menu,
body.step-XL.noFlex nav.flyoutNavigation .columns .rack .column.biblio.animation,
body.step-XL.noFlex .detail .author .animation.biblioAnimation,
body.step-XL.noFlex .detail .sales,
body.step-XL.noFlex .services {
    display: none !important;
}

body.step-XL.noFlex main,
body.step-XL.noFlex .main,
body.step-XL.noFlex .left,
body.step-XL.noFlex .right,
body.step-XL.noFlex main .mainThree .column.text,
body.step-XL.noFlex footer .columns .rack .column,
body.step-XL.noFlex header nav.flyoutNavigation>ul>li,
body.step-XL.noFlex nav.flyoutNavigation .columns .rack .column,
body.step-XL.noFlex .biblio.detail .columnCover,
body.step-XL.noFlex .biblio.detail .columnInfo,
body.step-XL.noFlex .biblio.detail .columnPriceActions,
body.step-XL.noFlex .flexTable .item .values div,
body.step-XL.noFlex .flexTable .headings div,
body.step-XL.noFlex .flexTable .item.biblioItem .values>div,
body.step-XL.noFlex .flexSummary>div,
body.step-XL.noFlex .accordion li .tabs li {
    display: inline-block !important;
    vertical-align: top !important;
}

body.step-XL.noFlex header .screen {
    width: 100rem;
}

body.step-XL.noFlex header nav.flyoutNavigation>ul>li>a {
    font-size: 1.7rem;
}

body.step-XL.noFlex main .mainThree .column.text {
    width: 22rem;
}

body.step-XL.noFlex .headerSearch .quick .field-text {
    width: 34.5rem;
}

body.step-XL.noFlex .headerSearch .quick form {
    width: 57.2rem !important;
}

body.step-XL.noFlex .headerSearch .quick .suggestionList.visible {
    width: 57rem;
}

body.step-XL.noFlex .headerSearch .quick .suggestionList.visible .biblioItem.suggestionItem .sectionDesc {
    width: 40rem;
}

body.step-XL.noFlex .pageNavigation {
    top: 48%;
}

body.step-XL.noFlex .biblio.detail .columnInfo {
    width: 52rem;
}

body.step-XL.noFlex .animation .query .heading {
    width: 70rem;
}

body.step-XL.noFlex main .animation.biblioAnimation .biblioItem.coverItem,
body.step-XL.noFlex main .animation.biblioAnimation .biblioItem.coverItem .biblioCover img {
    width: 11rem;
}

body.step-XL.noFlex .biblio.detail .columnPriceActions .containerAvailability {
    text-align: left;
}

body.step-XL.noFlex .flexTable .headings,
body.step-XL.noFlex .flexSummary {
    text-align: right;
}

body.step-XL.noFlex .flexTable .item.biblioItem .values .cellDesc {
    width: 54rem;
}

body.step-XL.noFlex .basket.verify .flexTable .values .cellDesc {
    width: 73.6rem;
}


/* AKR: Doppelten "letzten Teaser" ausblenden, dieses style kann zu Testzwecken von bpm auskommentiert werden.
Ph�nomen:Nach komplettem "Durchklicken" des Startseiten-Teasers wird am Ende der erste Titel verkleinert
doppelt nebeneinander angezeigt.
## OBSOLET, da bpm-Teaser nicht mehr verwendet, statt dessen bxSlider
.teaser .viewport.active .viewport.active {
	display:none !important;
}
*/

.flyoutNavigation .customer.account h1 {
    display: none;
}

.flyoutNavigation .customer .cockpit .tile:before {
    top: 1.4rem;
    right: 1.4rem;
    line-height: 2.5rem;
    font-size: 2.5rem;
    pointer-events: none;
}

.flyoutNavigation .customer .cockpit .tile a {
    min-height: 7.0rem;
    padding: 1.2rem 4.5rem 1.2rem 1.2rem;
}

.flyoutNavigation .customer:before {
    content: "Mein Konto";
    display: inline-block;
    font-size: 2rem;
}

.customer .cockpit .tile.sso::before {
    content: '\e615';
}

.customer.statistics.overview .icon-create a:after {
    content: "Neue Statistik erstellen";
    padding-left: 3rem;
}

.akrtest .teaserBX {
    display: block;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.akrtest .teaserBX .bx-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: inherit;
    background: tomato;
}


/** bxSlider **/

.bxslider {
    margin: 0;
    padding: 0;
    -webkit-perspective: 1000;
}

.bx-wrapper .articleDetail .col.colMain .articlePicture {
    width: 100%!important;
}


/** RESET AND LAYOUT */

.bx-wrapper {
    position: relative;
    /*** margin:0 auto 60px; ***/
    margin: 0 auto 0px;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

.bx-wrapper .bx-viewport .value,
.bx-wrapper .bx-viewport .value span {
    display: inline-block;
    width: 100%;
    height: 100%;
}


/** THEME */

.bx-wrapper .bx-viewport {
    /***
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
	box-shadow:0 0 5px #ccc;
	border: 5px solid #fff;
	left:-5px;
	background:#fff;
	***/
    width: 100%;
    min-width: 100%;
    position: relative;
    left: 0;
    background: transparent;
    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    text-align: center;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}


/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(images/bxslider/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}


/* PAGER */

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #666;
}


/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    top: 80%;
    margin-top: -2rem;
    outline: 0;
    width: 4rem;
    height: 4rem;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.4);
    color: transparent;
}

.bx-wrapper .bx-prev {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.bx-wrapper .bx-next {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

.bx-wrapper .bx-controls-direction a:before {
    position: absolute;
    display: inline-block;
    margin-top: 1rem;
    font-size: 2.4rem;
    font-family: beeIcons;
    font-weight: 400;
    color: #e6e8e8;
}

.bx-wrapper .bx-controls-direction a:before {
    position: absolute;
    display: inline-block;
    margin-top: 1rem;
    font-size: 2.4rem;
    font-family: beeIcons;
    font-weight: 400;
    color: #e6e8e8;
}

body.step-XS .bx-wrapper .bx-controls-direction a:before,
body.step-S .bx-wrapper .bx-controls-direction a:before {
    margin-top: 1.2rem;
}

.bx-wrapper .bx-prev:before {
    content: '\e61c';
    left: 0.7rem;
}

.bx-wrapper .bx-next:before {
    content: '\e61d';
    right: 0.7rem;
}


/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/bxslider/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/bxslider/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}


/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}


/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}


/*** In bx-slider Blitzer der Folgebilder vermeiden ***/

.bxslider .columns~.columns,
.bxslider .articleDetail~.articleDetail,
.bxslider>div~div {
    display: none;
}


/*** Nachbau img-hover
.teaserBX .bx-wrapper:hover {
    box-shadow:0 0 0.4rem 0 rgba(0,0,0,0.8);
    transition:all 0.2s ease-out;
}
***/

.bx-wrapper {
    transition: all 0.2s ease-out;
}

.bx-wrapper .animation .query {
    padding: 0.8rem 0.4rem 3.2rem 0.4rem;
}

body.step-XS .bx-wrapper .bx-controls,
body.step-S .bx-wrapper .bx-controls {}

body.step-XS .bx-wrapper .bx-controls-direction a,
body.step-S .bx-wrapper .bx-controls-direction a {
    top: 50%;
}

.bx-wrapper .bx-pager {
    bottom: -3rem;
}

body:not(.step-XL).start .bx-wrapper .bx-pager {
    bottom: -3.5rem;
}

.geschenkePage .bx-wrapper .bx-pager {
    bottom: 0;
}

.geschenkePage .bx-controls.bx-has-pager {
    position: absolute;
    width: 100%;
    height: 2rem;
    bottom: 5rem;
}


/*---- Ausfallmeldung unterhalb header per CSS einbinden. Startseite erhaelt bei Bedarf eigene, groessere Anzeige per CMS.
- UMLAUTE, new line fuer content, danach ein Blank schreiben !!!:
� \E4
� \C4
� \D6
� \F6
� \DC
� \FC
� \DF
new line \A
--*/


/**
body.akrtest header:after,
body header:after {
	content:"Achtung! Wegen Wartungsarbeiten ist die Homepage von 19.00 - ca. 20.30 Uhr nicht erreichbar. \A Wenn Sie am Webkonto angemeldet sind, bleibt der Inhalt Ihres Warenkorbes gespeichert.";
	display:block;
	background:#BDE0D5;
	padding:1rem;
	font-family:"Source Sans Pro Bold",sans-serif;
	font-weight:700;
	text-align:center;
	border-bottom:1px solid #993333;
	white-space:pre-wrap;
}
body.akrtest:not(.step-XL) header:after,
body:not(.step-XL) header:after {
	text-align:left;
}
**/


/** XMAS
.body .content:before {
	content:"Bestellen Sie lieferbare B\FC cher bis 22.12. um 18:00 Uhr und holen Sie Ihre Lieblingsb\FC cher am 24.12. in unseren Buchhandlungen ab!";
	content:"1.000 Geschenkideen - an Heiligabend in all unseren Buchhandlungen bis 13 Uhr.";
	display:block;
	width:100%;
	max-height:7rem;
	background:#f7e75c;
	padding:1rem;
	margin:0 0 2.4rem 0;
	font-family:"Source Sans Pro Bold",sans-serif;
	font-size:1.6rem;
	font-weight:600;
	text-align:center;
	white-space:pre-wrap;
}
body:not(.step-XL) .body .content:before {
	text-align:left;
	max-height:inherit;
}
@media screen and (min-width: 1350px) {
	.body .content:before {
		font-size:2rem
	}
}
@media screen and (min-width:1230px) and (max-width:1354px) {
	.body .content:before {
		font-size:1.8rem
	}
}
@media screen and (min-width:200px) and (max-width:1229px) {
	.body .content:before {
		font-size:1.6rem
	}
}
**/

.warnmeldung {
    display: block;
    background: lightgreen;
    padding: 1rem;
    font-family: "Source Sans Pro Bold", sans-serif;
    text-align: center;
    border-bottom: 1px solid #993333;
    white-space: pre-wrap;
}


/*---- 	Ausfallmeldung in account, orders, invoices, loyalty, statistics unterhalb header per CSS einbinden.
		Dazu ist die CSS-Klasse "kontobookstore" an die jeweiligen CMS-Knoten vergeben. Spaeter hier wieder auskommentieren.

body.kontobookstore header:after {
	content:"Achtung! Die Anzeige von Bestellungen, Rechnungen und reuffelCard-Punkten ist aktuell gest\F6rt. \AWir arbeiten an der Behebung des Fehlers und bitten um Entschuldigung.";
	display:block;
	background:lightgreen;
	padding:1rem;
	font-family:"Source Sans Pro Bold",sans-serif;
	text-align:center;
	border-bottom:1px solid #993333;
	white-space:pre-wrap;
}
body.kontobookstore:not(.step-XL) header:after {
	text-align:left;
}
--*/


/** Montabaur, Telekom-Ausfall, Bestandsanzeige evtl. fehlerhaft, Hack fuer /detail und /result
.detailPage .detail .storeAvailability a[href*="/about/stores/storeDetail/MT-artcStore"]:after,
.overlay .storeAvailability a[href*="/about/stores/storeDetail/MT-artcStore"]:before {
	content:'Anzahl aufgrund einer Internetst\F6 rung evtl. nicht tagesaktuell. Wir bitten um Ihr Verst\E4 ndnis.';
	display:inline-block;
	border:2px solid red;
	padding:0.2rem;
	font-weight:normal;
	font-size:1.2rem;
	line-height:1.2;
	pointer-events:none !important;
	cursor: text;
}
**/


/** AGB formatieren **/

.oldAGB header {
    height: 8rem;
    background-image: url(images/reuffelde.png);
    background-repeat: no-repeat;
    background-size: 22rem auto;
    background-position: 10% 2rem;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.showsAGB {
    counter-reset: item;
}

.showsAGB ol {
    list-style-type: none;
}

.showsAGB ol li {
    counter-increment: item;
    margin: 2rem 0 0 -2rem;
}

.showsAGB ol li h4 {
    display: inline-block;
    margin: 0;
    width: calc(100% - 3rem);
    font-size: 2rem;
    line-height: 2.5rem;
    vertical-align: top;
}

.showsAGB ol li:before {
    margin-right: 0.5rem;
    content: counter(item)'.';
    display: inline-block;
    font-size: 1.9rem;
    line-height: 2.5rem;
    color: #333;
}

.showsAGB ol li ol li:before {
    content: '';
    display: none;
}

.showsAGB ol li ol li {
    counter-increment: none;
    margin: 0.5rem 0 0 2rem;
}

.showsAGB ol li ol {
    list-style-type: decimal;
}


/** Objekte mit bookstore-Option "Bestandsfuehrung:NEIN" werden im Shop trotzdem mit Filialbestaenden angezeigt, z.B. /schreibwaren **/

.pageSchreibwaren .cellPrice .containerOtherActions {
    display: none;
}


/** Notfall-Ausblendung Bestaende vor EVT evtevt
Scott 2240005268779

.columnPriceActions[data-bee-isbn="2240005268779"] .containerAddToBasket:after,
.result .panel .positions  [data-bee-isbn="2240005268779"].sectionActions:before,

.columnPriceActions[data-bee-isbn="2240005268779"] .containerAddToBasket:after,
.result .panel .positions  [data-bee-isbn="2240005268779"].sectionActions:before  {
	content:'Erstverkaufstag: 20.04.2019';
	display:inline-block;
	padding:0.5rem 0;
	font-weight:bold;
}
[data-bee-isbn="2240005268779"] .sectionAvailability,
[data-bee-isbn="2240005268779"] .containerAvailability,
[data-bee-isbn="2240005268779"] .icon-location,

[data-href^="/detail/ISBN-2240005268779"] .sectionAvailability {
	display:none;
}
*/


/** IBAN kuerzen **/

.showIBAN .value span {
    display: inline-block;
    width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/** Neue Menues AKR/RMD **/

.breadcrumb>nav li a {
    text-decoration: underline;
}

main .mainButtons {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2rem;
}

main .mainButtons .articleDetail .col.colMain .articleHeading.inside {
    display: block;
}

main .mainButtons .articleDetail .col.colMain .articlePicture~.articleHtmlText {
    width: 100%;
}

main .mainButtons .articleDetail .overview .articleText {
    font-size: 1.8rem;
    color: #333;
    text-align: left;
    position: absolute;
    bottom: -1.2rem;
    right: 0;
    left: 0;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    font-size: 1.8rem;
    color: #333;
    text-align: left;
    background: #fff;
    pointer-events: none;
}

body.step-XS main .mainButtons .articleDetail .articleText,
body.step-S main .mainButtons .articleDetail .articleText {
    font-size: 1.4rem;
    padding: 0.2rem 0 0.2rem 0;
}

body.step-M main .mainButtons .articleDetail .articleText {
    font-size: 1.8rem;
    padding: 0.2rem 0 0.2rem 0;
}

main .mainButtons .articlePicture .value:before,
.articlePicture .value a:before {
    content: none;
}

main .mainButtons .articleDetail .col.colMain .articlePicture~.articleText {
    width: 100%;
}

main .mainButtons .articleDetail .col.colMain .articlePicture {
    width: 100%;
}

main .mainButtons .articleDetail .col.colMain .articlePicture~.articleText .value span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main .mainButtons .articleDetail.text,
main .mainButtons nav {
    position: relative;
    flex-grow: 1;
    margin: 0 0 1rem 2rem;
    width: calc(25% - 2rem);
    max-width: calc(25% - 2rem);
}

main .mainButtons.mainButtons20Prozent .articleDetail.text {
    position: relative;
    flex-grow: 1;
    margin: 0 0 1rem 2rem;
    width: calc(20% - 2rem);
    max-width: calc(20% - 2rem);
}

main .mainButtons .articleDetail .col.colMain .articlePicture.imageLeft {
    margin-right: 0;
}

main .mainButtons .articlePicture a {
    padding-bottom: 3rem;
}

body.step-XS main .mainButtons .articleDetail.text,
body.step-S main .mainButtons .articleDetail.text,
body.step-XS main .mainButtons nav,
body.step-S main .mainButtons nav {
    width: calc(50% - 2rem);
    max-width: calc(50% - 2rem);
    font-size: 1.4rem;
    padding: 0.2rem 0 0.2rem 0;
}

body.step-M main .mainButtons .articleDetail.text,
body.step-M main .mainButtons nav {
    width: calc(33% - 2rem);
    max-width: calc(33% - 2rem);
    font-size: 1.8rem;
    padding: 0.2rem 0 0.2rem 0;
}

main .mainButtonsOne .articleDetail.text {
    margin-bottom: 0;
}

main .mainButtonsOne,
main .mainButtonsOne .articleDetail .col.colMain .articlePicture {
    width: 100%;
    position: relative;
}

main .mainNav {
    position: relative;
    min-height: 20rem;
    background: rgb(246, 246, 246);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246, 246, 246, 1) 1%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(246, 246, 246, 1) 1%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(246, 246, 246, 1) 1%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

main .mainNav:after {
    content: "Weitere Themen";
    position: absolute;
    bottom: 1rem;
    left: 0.5rem;
    font-size: 1.8rem;
}

main .mainNav nav li>a {
    padding: 0 0.8rem 0 0.5rem;
    font-weight: 600;
    font-size: 1.6rem;
    text-decoration: underline;
}

main .mainOne .columns .rack,
main .mainFour .columns .rack {
    justify-content: flex-start;
}

main .mainOne .articleItem.coverItem,
main .mainFour .articleItem.coverItem,
main .mainOne .articleItem.coverItemPlus,
main .mainFour .articleItem.coverItemPlus {
    position: relative;
}

main .mainOne .articleItem.coverItem .sectionDesc,
main .mainOne .articleItem.coverItemPlus .sectionDesc,
main .mainFour .articleItem.coverItem .sectionDesc,
main .mainFour .articleItem.coverItemPlus .sectionDesc {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    background: #222;
    background: rgba(30, 30, 30, 0.8);
    background: #fff;
    font-size: 1.8rem;
    color: #fff;
    color: #333;
    text-align: right;
    text-align: left;
    pointer-events: none;
}

main .mainOne .articleItem.coverItemPlus .articlePicture .value:before,
main .mainOne .articleItem.coverItemPlus .articlePicture .value a:before,
main .mainOne .articleItem.coverItem .articlePicture .value:before,
main .mainOne .articleItem.coverItem .articlePicture .value a:before,
main .mainFour .articleItem.coverItemPlus .articlePicture .value:before,
main .mainFour .articleItem.coverItemPlus .articlePicture .value a:before,
main .mainFour .articleItem.coverItem .articlePicture .value:before,
main .mainFour .articleItem.coverItem .articlePicture .value a:before {
    content: none;
}

main .mainOne .articleItem.coverItemPlus>a .articlePicture .value,
main .mainFour .articleItem.coverItemPlus>a .articlePicture .value {
    padding-bottom: 3rem;
}

.mainOne .columns .rack>nav,
.mainFour .columns .rack>nav,
main .mainButtons nav {
    background: rgb(246, 246, 246);
    background: -moz-linear-gradient(top, rgba(246, 246, 246, 1) 0, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(246, 246, 246, 1) 0, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(246, 246, 246, 1) 0, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
    font-size: 1.8rem;
}

.mainOne .columns .rack>nav a,
.mainFour .columns .rack>nav a,
main .mainButtons nav a {
    text-decoration: underline;
    margin-bottom: 0.5rem;
}

body.step-XL main .mainFour .columns .rack>div,
body.step-XL main .mainFour .columns .rack>nav,
body.step-L main .mainFour .columns .rack>div,
body.step-L main .mainFour .columns .rack>nav {
    width: calc(25% - 2rem);
    max-width: calc(25% - 2rem);
}

body.step-M main .mainFour .columns .rack>div,
body.step-M main .mainFour .columns .rack>nav {
    width: calc(50% - 2rem);
}

body.step-XL main .mainFour .columns .rack>nav,
body.step-L main .mainFour .columns .rack>nav,
body.step-M main .mainFour .columns .rack>nav {
    padding-top: 1rem;
    width: 16rem;
    flex-grow: 1;
    margin: 1.1rem 0 0 2rem;
}

body.step-M main .mainFour .columns .rack>nav {
    width: calc(50% - 2rem);
}


/** OVERLAY **/

.overlayHtmlText {
    position: relative;
    padding: 2rem;
}

.overlayHtmlText .articleHtmlText {
    margin-left: 30%;
    font-size: 2rem;
    color: #fff;
    line-height: 1.5;
    background: rgba(50, 50, 50, 0.3);
}

body.step-M .overlayHtmlText .articleHtmlText,
body.step-S .overlayHtmlText .articleHtmlText,
body.step-XS .overlayHtmlText .articleHtmlText {
    margin-left: 0;
    font-size: 2rem;
    color: #111;
    line-height: 1.5;
    background: none;
}

.overlayHtmlText .articleHtmlText h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-left: 1rem;
}

.overlayHtmlText ul {
    list-style-type: square;
    margin: 0 -3rem 3rem 3rem;
    width: calc(100% - 6rem);
}

.overlayHtmlText ul li {
    padding: 0 2rem 0 1rem;
    color: #fff;
}

body.step-M .overlayHtmlText ul li,
body.step-S .overlayHtmlText ul li,
body.step-XS .overlayHtmlText ul li,
body.step-M .overlayHtmlText h2,
body.step-S .overlayHtmlText h2,
body.step-XS .overlayHtmlText h2 {
    color: #111;
    font-size: 1.6rem;
}


/** TOLINO **/

.mainBackgroundShine2HD,
.mainBackgroundShine3,
.mainBackgroundVision4HD,
.mainBackgroundVision5HD,
.mainBackgroundEpos,
.mainBackgroundEpos2,
.mainBackgroundPage,
.mainBackgroundPage2 {
    background-color: #01a5c8;
    background-image: url(images/tolino/mainBackgroundShine3_340.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100% !important;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    min-height: 36rem;
}

body.step-L .mainBackgroundShine2HD,
body.step-L .mainBackgroundShine3,
body.step-L .mainBackgroundVision4HD,
body.step-L .mainBackgroundVision5HD,
body.step-L .mainBackgroundEpos,
body.step-L .mainBackgroundEpos2,
body.step-L .mainBackgroundPage,
body.step-L .mainBackgroundPage2 {
    background-size: auto 30vw !important;
    min-height: inherit;
    padding-bottom: 5rem;
}

body:not(.step-XL):not(.step-L) .overlayHtmlText .articleText {
    margin-left: 0;
}

.mainBackgroundShine2HD {
    background-color: #01a5c8;
    background-image: url(images/tolino/main2HD340.png);
}

.mainBackgroundShine3 {
    background-color: #01a5c8;
    background-image: url(images/tolino/main3_340.png);
}

.mainBackgroundVision4HD {
    background-color: #001f41;
    background-image: url(images/tolino/main4HD340.png);
}

.mainBackgroundVision5HD {
    background-color: #001f41;
    background-image: url(images/tolino/main5HD340.png);
}

.mainBackgroundEpos {
    background-color: #1d5a7d;
    background-image: url(images/tolino/mainEpos340.png);
}

.mainBackgroundEpos2 {
    background-color: #1d5a7d;
    background-image: url(images/tolino/mainEpos2340.png);
}

.mainBackgroundPage {
    background-color: #9fcfae;
    background-image: url(images/tolino/mainPage340.png);
}

.mainBackgroundPage2 {
    background-color: #9fcfae;
    background-image: url(images/tolino/mainPage2340.png);
}

body:not(.step-XL):not(.step-L) .mainBackgroundShine2HD,
body:not(.step-XL):not(.step-L) .mainBackgroundShine3,
body:not(.step-XL):not(.step-L) .mainBackgroundVision4HD,
body:not(.step-XL):not(.step-L) .mainBackgroundVision5HD,
body:not(.step-XL):not(.step-L) .mainBackgroundEpos,
body:not(.step-XL):not(.step-L) .mainBackgroundEpos2,
body:not(.step-XL):not(.step-L) .mainBackgroundPage,
body:not(.step-XL):not(.step-L) .mainBackgroundPage2 {
    background-color: #fff !important;
    background-image: none;
    padding: 0;
}

.tolinoButton {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
}

.tolinoButton.button a {
    background-color: #fff;
    font-weight: 600;
    font-size: 2rem;
}

.tolinoInfos {
    font-size: 1.8rem;
    line-height: 2.6rem;
}

.tolinoInfos .tolinoInfoImage,
.tolinoInfos .tolinoInfoHtmlText {
    display: inline-block;
    width: 35%;
    vertical-align: top;
}

.tolinoInfos .tolinoInfoHtmlText {
    width: 65%;
}

body.step-M .tolinoInfos .tolinoInfoHtmlText,
body.step-S .tolinoInfos .tolinoInfoHtmlText,
body.step-XS .tolinoInfos .tolinoInfoHtmlText {
    width: 100%;
}

.tabelleTolino td {
    text-align: left !important;
}

body.step-M .tabelleTolino td,
body.step-S .tabelleTolino td,
body.step-XS .tabelleTolino td {
    display: block;
    width: 100%;
    border: none;
}

body.step-M .tabelleTolino td:first-of-type,
body.step-S .tabelleTolino td:first-of-type,
body.step-XS .tabelleTolino td:first-of-type {
    font-weight: bold;
    border-top: 1px solid #ccc;
    padding-bottom: 0;
}

.tolinoInfos .column.text {
    margin-bottom: 5rem;
}

.tolinoVorteile {
    font-size: 1.8rem;
    line-height: 2.6rem;
    display: flex;
    flex-wrap: wrap;
}

.tolinoVorteile p {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-bottom: 3rem;
}

body.step-M .tolinoVorteile p,
body.step-S .tolinoVorteile p,
body.step-XS .tolinoVorteile p {
    width: 100%;
    margin-bottom: 3rem;
}

.tolinoVorteile ul {
    margin-bottom: 3rem;
}

.tolinoVorteile li {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

.tolinoVorteile li:first-child {
    margin: 0 2rem 0 0;
}


/** FAQ **/

.showFAQWrap {
    margin-bottom: 2rem;
    position: relative
}

.showFAQWrap h6:before {
    margin-bottom: 0;
    top: 0.5rem;
    left: 1rem;
    content: '\e61f';
    position: absolute;
    height: 2rem;
    width: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: beeIcons;
    font-weight: 400;
    font-size: 1.8rem;
    speak: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.showFAQWrap.activeFaq h6:before {
    content: '\e61e';
}

.showFAQWrap h6 {
    display: block;
    padding: 0.5rem 0 0 4rem;
    font-weight: 600;
    font-size: 1.8rem;
    color: #fff;
    background: #4698cb;
    border: 1px solid #ccc;
    margin: 1rem 0 0 0;
    cursor: pointer;
}

.showFAQWrap h6+div {
    padding: 0;
    background: #f9f9f9;
    padding-left: 0.5rem;
    border: none;
    height: 0;
    color: transparent;
    visibility: hidden;
    transition: all 0.5s ease;
    transform-origin: top left;
    transform: scaleY(0);
}

.showFAQWrap.activeFaq h6+div {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-top: none;
    font-size: 1.8rem;
    line-height: 2.5rem;
    color: #333;
    height: auto;
    visibility: visible;
    transition: all 0.5s ease;
    transform-origin: top left;
    transform: scaleY(1);
}


/** Buchhandlungen und Oeffnungszeiten, font-size kleiner, ein-zeilig; noch anpassen fuer mobile!!! **/

main .mainThree.mainThreeSpecial1 .column.text:first-child .one .articleText {
    font-size: 1.5rem;
}


/** BoxOpen/BoxClose verhindern **/

.noBoxOpen .boxOpen,
.noBoxOpen .boxHeader,
.makeBoxHeaderLink .boxOpen {
    display: none;
}

.noBoxOpen .box {
    border-top: none;
}

body:not(.step-XL) main .noBoxOpen .boxContent .columns .rack .column>div {
    width: auto;
}


/** ANIMATION **/

.biblioAnimation {
    overflow: hidden;
}

.flyoutNavigation .biblioAnimation h5 {
    color: #5b5b5b;
}

.animation .query>.heading a h2 {
    display: inline-block;
}


/** Hinweis zu animationQuadratisch:
Funktioniert,
1. wenn die animation innerhalb eines Kontainers mit CSS-Klasse animationQuadratisch liegt.
Sollte der animation-Baustein zukuenftig eine CSS-Klasse definieren koennen, koennet Variante 2 nach evtl. Anpassung wieder entfallen.
UND NEU
2. wenn die animation im CMS eine Position unterhalb eines leeren Kontainers mit CSS-Klasse animationQuadratisch steht.
Dies vermeidet die unerwuenschte Platzierung einer animation innerhalb eines Kontainers.
**/

body.step-XL .animationQuadratisch .animation.biblioAnimation .query .panel .positions .items-7 .biblioItem.coverItem,
body.step-XL .animationQuadratisch .animation.biblio .query .panel .positions .items-7 .biblioItem.coverItem,
body.step-XL main .animationQuadratisch+.animation.biblioAnimation .query .panel .positions .items-7 .biblioItem.coverItem,
body.step-XL main .animationQuadratisch+.animation.biblio .query .panel .positions .items-7 .biblioItem.coverItem,
body.step-XL .flyoutNavigation .rack .animationQuadratisch+.animation.biblioAnimation .query .panel .positions .items-7 .biblioItem.coverItem,
body.step-XL .flyoutNavigation .rack .animationQuadratisch+.animation.biblio .query .panel .positions .items-7 .biblioItem.coverItem {
    vertical-align: top;
}


/**
sameHeight fuer Animation-Cover
Quelle: // https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
.container 	^= .biblioItem.coverItemPlus
.text 		^= .biblioCover
**/

.animation.biblioAnimation .query .positions .viewport {
    align-items: stretch;
    vertical-align: top;
    /** wegen listView, Auswirkungen auf andere Animations checken **/
}

.biblioItem.coverItem {
    align-self: flex-end;
}


/** pre-Quantum-FF haben Probleme mit display:inline-flex. Fuer diese wird display:inline-block gesetzt.
UPDATE: Auch FF 57 (Quantum) hat das Problem noch, daher kommt der weiter unten nachfolgende Hack mit -moz-windows-theme zum Einsatz.
https://stackoverflow.com/questions/47575563/conditional-css-rule-targeting-firefox-quantum

@-moz-document url-prefix() {
	.animation.biblioAnimation .query .positions .viewport {
		display:inline-block;
		ichBin:PreQuantum;
	}
	@supports (animation: calc(0s)) {
		.animation.biblioAnimation .query .positions .viewport {
			display:inline-flex;
			ichBin:Quantum;
		}
	}
}
**/


/** FF ?-57 haben Probleme mit display:inline-flex. Fuer diese wird display:inline-block gesetzt.
Hack Windows Only (Firefox 4-57), 57 ist zwar schon Quantum, hat aber dennoch Probleme
**/

@media screen and (-moz-windows-theme) {
    .animation.biblioAnimation .query .positions .viewport {
        display: inline-block;
        /**  **/
    }
}


/** Edge <= 16 haben dasselbe Problem mit display:inline-flex
Sollte es mal einen Hack fuer Edge <= 16 geben, diesen verwenden!
https://browserstrangeness.github.io/css_hacks.html

//Hack fuer ALLE Edge-Versionen:
@supports (-ms-ime-align:auto) {
	.animation.biblioAnimation .query .positions .viewport	{
	}
}
// Alternativ body-class verwenden
body.ua-edge main .animation.biblioAnimation .query .positions .viewport {
	Xdisplay:inline-block;
}
**/


/** Microsoft Edge 16- (inkl. 16) **/

@supports (-ms-ime-align:auto) and (not (font-variation-settings:normal)) {
    .animation.biblioAnimation .query .positions .viewport {
        display: inline-block;
        /** ichBin:Edge16Minus; **/
    }
}

main .viewport.items-7 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(21% + 7rem);
    height: 0;
    /** Beispiel-Aufbau fuer 7 Artikel:
	# 7 Artikel portrait (H=B*1.5)
	Breite von biblioItem: 			  	padding-top: calc( 	  (100%/7) - (4rem*6/7) 						);
	Bildhoehe = Breite x 1.5: 			padding-top: calc( 	 ((100%/7) - (4rem*6/7)) * 1.5 					);
	Platz fuer .detailLink (+12.8rem)	padding-top: calc(  (((100%/7) - (4rem*6/7)) * 1.5 ) + 12.8rem 		);
	Ausfuehrliches Ergebnis				padding-top: calc((((100% / 7) - (4rem * 6 / 7)) * 1.5 ) + 12.8rem	);
	Gekuerztes Ergebnis					padding-top: calc(21.43% + 7.66rem);
	'Empirisch' verbessert				padding-top: calc(21% + 7rem);
	**/
}

main .animationQuadratisch .viewport.items-7 .biblioItem.coverItemPlus,
main .animationQuadratisch+.animation.biblioAnimation .viewport.items-7 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(14% + 9rem);
    height: 0;
    /**
	# 7 Artikel quadratisch (H=B*1.0)
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 7) - (4rem * 6 / 7)) * 1.0 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(14.29% + 9.37rem);
	'Empirisch' verbessert	padding-top: calc(14% + 9rem);
	**/
}

main .viewport.items-5 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(30% + 9rem);
    height: 0;
    /**
	# 5 Artikel
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 5) - (3rem * 4 / 5)) * 1.5 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc((((30%) +9.2rem);
	'Empirisch' verbessert	padding-top: calc(30% + 9rem);
	**/
}

main .animationQuadratisch .viewport.items-5 .biblioItem.coverItemPlus,
main .animationQuadratisch+.animation.biblioAnimation .viewport.items-5 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(20% + 10rem);
    height: 0;
    /**
	# 5 Artikel quadratisch
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 5) - (3rem * 4 / 5)) * 1.0 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(20% + 10.4rem);
	'Empirisch' verbessert	padding-top: calc(20% + 10rem);
	**/
}

main .viewport.items-4 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(37% + 8rem);
    height: 0;
    /**
	# 4 Artikel, step-XL, 'SuperBuch'
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 4) - (4rem * 3 / 4)) * 1.5 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(37.5% + 8.3rem);
	'Empirisch' verbessert	padding-top: calc(37% + 8rem);
	**/
}

main .viewport.items-3 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(50% + 10rem);
    height: 0;
    /**
	# 3 Artikel
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 3) - (2rem * 2 / 3)) * 1.5 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(50% + 10.8rem);
	'Empirisch' verbessert	padding-top: calc(50% + 10rem);
	**/
}

main .animationQuadratisch .viewport.items-3 .biblioItem.coverItemPlus,
main .animationQuadratisch+.animation.biblioAnimation .viewport.items-3 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(33% + 11rem);
    height: 0;
    /**
	# 3 Artikel quadratisch
	Ausfuehrliches Ergebnis	padding-top: calc((((100% / 3) - (2rem * 2 / 3)) * 1.0 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(33.33% + 11.46rem);
	'Empirisch' verbessert	padding-top: calc(33% + 11rem);
	**/
}

main .viewport.items-2 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(75% + 11rem);
    height: 0;
    /**
	# 2 Artikel
	Ausfuehrliches Ergebnis	padding-top: calc( (((100% / 2) - (1rem * 1 / 2)) * 1.5 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc(75% + 12.05rem);
	'Empirisch' verbessert	padding-top: calc(75% + 11rem);
	**/
}

.flyoutNavigation .rack .viewport.items-2 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(75% + 8rem);
    height: 0;
}

main .animationQuadratisch .viewport.items-2 .biblioItem.coverItemPlus,
main .animationQuadratisch+.animation.biblioAnimation .viewport.items-2 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(50% + 12rem);
    height: 0;
    /**
	# 2 Artikel quadratisch
	Ausfuehrliches Ergebnis	padding-top: calc( (((100% / 2) - (1rem * 1 / 2)) * 1.0 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc( (50% + 12.3rem);
	'Empirisch' verbessert	padding-top: calc( (50% + 12rem);
	**/
}

.flyoutNavigation .rack .animationQuadratisch+.animation.biblioAnimation .viewport.items-2 .biblioItem.coverItemPlus {
    position: relative;
    padding-top: calc(50% + 10rem);
    height: 0;
    /**
	# 2 Artikel quadratisch
	Ausfuehrliches Ergebnis	padding-top: calc( (((100% / 2) - (1rem * 1 / 2)) * 1.0 ) + 12.8rem);
	Gekuerztes Ergebnis		padding-top: calc( (50% + 12.3rem);
	'Empirisch' verbessert	padding-top: calc( (50% + 12rem);
	**/
}

main .viewport .biblioItem.coverItemPlus .biblioCover,
.flyoutNavigation .rack .viewport .biblioItem.coverItemPlus .biblioCover {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 11.8rem);
    width: 100%;
}


/** 417 **/

main .boxSales .viewport .biblioItem.coverItemPlus .biblioCover,
main .boxAuthor .viewport .biblioItem.coverItemPlus .biblioCover,
main .basket .viewport .biblioItem.coverItemPlus .biblioCover,
main .result .viewport .biblioItem.coverItemPlus .biblioCover,
.flyoutNavigation .rack .viewport .biblioItem.coverItemPlus .biblioCover {
    position: relative !important;
    top: inherit;
    left: inherit;
    right: inherit;
    bottom: inherit;
    height: inherit;
}

main .boxSales .biblioItem.coverItem,
main .basket .biblioItem.coverItem,
main .result .biblioItem.coverItem {
    align-self: flex-end;
}

.flyoutNavigation .rack .animationQuadratisch+.animation.biblioAnimation .viewport .biblioItem.coverItemPlus .biblioCover {
    top: 5.1rem;
}

main .viewport .biblioItem.coverItem:not(.small):before,
.flyoutNavigation .rack .viewport .biblioItem.coverItem:not(.small):before {
    content: '';
    display: inline-block;
    height: 0rem !important;
    width: 0;
}

main .viewport .cover,
main .viewport .biblioCover .cover a,
main .viewport .biblioCover img,
.flyoutNavigation .rack .viewport .cover,
.flyoutNavigation .rack .viewport .biblioCover .cover a,
.flyoutNavigation .rack .viewport .biblioCover img {
    width: 100%;
    height: 100%;
}

main .viewport .biblioItem.coverItemPlus .biblioArticle.detailLink {
    position: absolute;
    max-height: 12rem;
}

.detailPage main .viewport .biblioItem.coverItemPlus .biblioArticle.detailLink {
    position: relative;
    max-height: 12rem;
}


/** Animation Pagination **/

main .animation .query .panel .pagination {
    vertical-align: top;
    margin-top: 8%;
}

.flyoutNavigation .rack .animation .query .panel .pagination {
    vertical-align: top;
    margin-top: 35%;
}

main .superbuchAnimation .animation .query .panel .pagination {
    margin-top: 15%;
}

body.step-L main .animation .query .panel .pagination {
    margin-top: 12%;
}

body.step-L main .superbuchAnimation .animation .query .panel .pagination {
    margin-top: 22%;
}

body.step-M main .animation .query .panel .pagination {
    margin-top: 22%;
}

body.step-S main .animation .query .panel .pagination,
body.step-XS main .animation .query .panel .pagination {
    margin-top: 34%;
}


/** Animation Pagination Quadratisch **/

main .animationQuadratisch .animation .query .panel .pagination,
main .animationQuadratisch+.animation.biblioAnimation .query .panel .pagination {
    margin-top: 5%;
}

body.step-L main .animationQuadratisch .animation .query .panel .pagination,
body.step-L main .animationQuadratisch+.animation.biblioAnimation .query .panel .pagination {
    margin-top: 8%;
}

body.step-M main .animationQuadratisch .animation .query .panel .pagination,
body.step-M main .animationQuadratisch+.animation.biblioAnimation .query .panel .pagination {
    margin-top: 14%;
}

body.step-S main .animationQuadratisch .animation .query .panel .pagination,
body.step-XS main .animationQuadratisch .animation .query .panel .pagination,
body.step-S main .animationQuadratisch+.animation.biblioAnimation .query .panel .pagination,
body.step-XS main .animationQuadratisch+.animation.biblioAnimation .query .panel .pagination {
    margin-top: 23%;
}

main .animation .biblioItem.coverItemPlus .ptcAndPrice,
main .animation .biblioItem.coverItemPlus .positionActions {
    display: inline-block;
}

main .animation .biblioItem.coverItemPlus .ptcAndPrice {
    width: 9rem;
}

main .animation .biblioItem.coverItemPlus .biblioArticle .positionActions {
    text-align: left;
    left: 9.5rem;
    right: inherit;
    top: -3rem;
    width: 5rem;
}

main .animation .biblioItem.coverItemPlus .biblioArticle .positionActions a {
    font-size: 0;
    background-color: transparent;
    border: none;
}

main .animation .biblioItem.coverItemPlus .biblioArticle .positionActions .icon-basket:before {
    color: #111;
}


/** flyout z.B. Musik **/

.flyoutNavigation .rack .animation.biblioAnimation {
    max-height: 26rem;
}

.flyoutNavigation .rack .animation.biblioAnimation+.animation.biblioAnimation {
    margin: 0 2rem 0 10rem;
}

.flyoutNavigation .rack>div.animationQuadratisch {
    width: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 0;
}

.flyoutNavigation .rack .biblioItem.coverItem .biblioArticle.detailLink {
    display: none;
}


/** DEBUG **/

.navigationTEST header nav.flyoutNavigation>ul li>div {
    max-height: 100rem;
    border-width: 1px;
    opacity: 1;
    overflow: visible;
    transform: translateY(0) scaleY(1);
}


/** GESCHENKE **/

.geschenkePage i {
    font-size: 1.6rem;
}

.geschenkePage .bxRekWrap {
    border: 1px solid #ccc;
    padding: 1rem;
    margin-bottom: 2rem;
    background: #f6f6f6;
}

.geschenkePage .bxRekWrap .floatLeftImage img {
    border-radius: 50%;
    max-width: 12rem;
}

body.step-S.geschenkePage .bxRekWrap .value h2~a,
body.step-XS.geschenkePage .bxRekWrap .value h2~a {
    float: left;
    margin-top: 1rem;
}

.geschenkePage .bxRekWrap .animation .query .actions:first-child {
    display: none;
}

body.step-S.geschenkePage .bxRekWrap .floatLeftImage img,
body.step-XS.geschenkePage .bxRekWrap .floatLeftImage img {
    border-radius: 50%;
    max-width: 12rem;
}

.geschenkePage .biblioItem.coverItemPlus .biblioArticle {
    min-height: 2rem;
}

.geschenkePage .animation .query {
    margin-bottom: 0;
}

.step-XL.geschenkePage .bxRekWrap .biblioItem.coverItem {
    margin-bottom: 0;
}


/** MA-Lesetipps **/

body:not(.step-XL) .mainLesetipps {
    overflow-x: hidden;
}

body.step-XL .mainLesetipps #ajaxLesetippsStart #lesetippPanel {
    margin: 0 0 13rem 0;
}


/** mobile-Berechnung der Hoehe von #lesetippPanel aus der Breite eines Einzel-Covers
Bildbreite: ((100vw - 4rem[=.content-padding/margin]) - ((n-1) * 3rem)) / n   // 100%=(100vw - 4rem), /n=Anzahl Bilder,  (n-1) x Bild-Standard-margin-left=((3-1) * 3rem) [bzw. fuer M=2rem, XS_S=1rem]
Bildhoehe: 1.5 * Bildbreite
MA-Name bottom: + 7rem
Abstand unten: + 2rem
**/

body.step-XS .mainLesetipps #ajaxLesetippsStart #lesetippPanel,
body.step-S .mainLesetipps #ajaxLesetippsStart #lesetippPanel {
    height: calc(75vw + 5.25rem);
    /**
	Ausfuehrliches Ergebnis	height:calc( (1.5 * (((100vw - 4rem) - (1 * 1rem)) / 2)) + 7rem + 2rem );
	Gekuerztes Ergebnis		height:calc(75vw + 5.25rem );
	**/
}

body.step-M .mainLesetipps #ajaxLesetippsStart #lesetippPanel {
    height: calc(50vw + 5rem);
    /**
	Ausfuehrliches Ergebnis	height:calc( (1.5 * (((100vw - 4rem) - (2 * 2rem)) / 3)) + 7rem + 2rem );
	Gekuerztes Ergebnis		height:calc(50vw + 5rem);
	**/
}

body.step-L .mainLesetipps #ajaxLesetippsStart #lesetippPanel {
    height: calc(30vw + 4.2rem);
    /**
	Ausfuehrliches Ergebnis	height:calc( (1.5 * (((100vw - 4rem) - (4 * 3rem)) / 5)) + 7rem + 2rem );
	Gekuerztes Ergebnis		height:calc(30vw + 4.2rem);
	**/
}

.mainLesetipps .heading {
    display: inline-block;
    width: calc(100% - 16rem);
}

body.step-XS .mainLesetipps .heading,
body.step-S .mainLesetipps .heading {
    display: block;
    width: 100%;
}

body.step-XS .mainLesetipps .heading h2 {
    font-size: 2.0rem;
}

.mainLesetipps .heading~.actions {
    color: #333;
    font-weight: 700;
    font-size: 1.4rem;
}

.mainLesetipps .heading a,
.mainLesetipps .heading~.actions a {
    color: #333;
}

.mainLesetipps .heading a:hover,
.mainLesetipps .heading~.actions a:hover {
    color: #777;
}

.mainLesetipps .actions {
    display: inline-block;
    width: 15rem;
    text-align: right;
}

body.step-XS .mainLesetipps .actions,
body.step-S .mainLesetipps .actions {
    width: 100%;
    margin-bottom: 2rem;
}

.mainLesetipps #ajaxLesetippsStart #lesetippPanel {
    display: flex;
    position: relative;
}

.mainLesetipps #ajaxLesetippsStart .lesetippsViewport {
    display: flex;
    position: absolute;
    width: 100%;
}

.mainLesetipps #ajaxLesetippsStart .viewport1 {
    left: 0%;
}

.mainLesetipps #ajaxLesetippsStart .viewport2 {
    left: 100%;
}

.mainLesetipps #ajaxLesetippsStart .viewport3 {
    left: 200%;
}

.mainLesetipps #ajaxLesetippsStart .viewport4 {
    left: 300%;
}

.mainLesetipps #ajaxLesetippsStart .biblioListItem {
    position: relative;
    display: inline-block;
    text-align: right;
    width: calc((100% / 7) - (4rem * 6 / 7));
    margin-left: 4rem;
}

body.step-L .mainLesetipps #ajaxLesetippsStart .biblioListItem {
    width: calc((100% / 5) - (3rem * 4 / 5));
    margin-left: 3rem;
}

body.step-M .mainLesetipps #ajaxLesetippsStart .biblioListItem {
    width: calc((100% / 3) - (2rem * 2 / 3));
    margin-left: 2rem;
}

body.step-S .mainLesetipps #ajaxLesetippsStart .biblioListItem,
body.step-XS .mainLesetipps #ajaxLesetippsStart .biblioListItem {
    width: calc((100% / 2) - (1rem * 1 / 2));
    margin-left: 1rem;
}

.mainLesetipps #ajaxLesetippsStart #lesetippPanel .biblioListItem:first-child,
.mainLesetipps #ajaxLesetippsStart #lesetippPanel .pagination+.biblioListItem {
    margin-left: 0;
}

.mainLesetipps #ajaxLesetippsStart .biblioCover {
    border: 1px solid #ccc;
}

.mainLesetipps .biblioListItem .biblioCover .cover:hover {
    box-shadow: 0 0 1rem #666;
}

.mainLesetipps .biblioListItem .imageWrap {
    position: absolute;
    width: 75%;
    bottom: -4rem;
    left: -1rem;
    text-align: left;
}

body.step-XS .mainLesetipps .biblioListItem .imageWrap,
body.step-S .mainLesetipps .biblioListItem .imageWrap,
body.step-M .mainLesetipps .biblioListItem .imageWrap {
    left: 0.2rem;
}

body.step-L .mainLesetipps .biblioListItem .imageWrap {
    left: 0.5rem;
}


/** swipe fuer Lesetipps **/

body .mainLesetipps #ajaxLesetippsStart .pagination {
    position: absolute;
    top: 7rem;
    display: inline-block;
    width: 0;
    vertical-align: middle;
    z-index: 9;
}

body.step-L .mainLesetipps #ajaxLesetippsStart .pagination {
    top: 7rem;
}

body.step-M .mainLesetipps #ajaxLesetippsStart .pagination {
    top: 40%;
}

body.step-S .mainLesetipps #ajaxLesetippsStart .pagination,
body.step-XS .mainLesetipps #ajaxLesetippsStart .pagination {
    top: 38%;
}

.mainLesetipps #ajaxLesetippsStart .pagination.lesetippPaginationLeft {
    left: 0;
}

.mainLesetipps #ajaxLesetippsStart .pagination.lesetippPaginationRight,
.mainLesetipps #ajaxLesetippsStart .pagination.lesetippLastPagination {
    right: 4rem;
}

.mainLesetipps #ajaxLesetippsStart .pagination .up,
.mainLesetipps #ajaxLesetippsStart .pagination .down {
    z-index: 10;
    height: 4rem;
    width: 4rem;
    margin: 0;
    border-radius: 0;
    display: inline-block;
    font-size: 0;
    text-align: center;
    vertical-align: top;
}

.mainLesetipps #ajaxLesetippsStart .pagination .down {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.mainLesetipps #ajaxLesetippsStart .pagination .up {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.mainLesetipps #ajaxLesetippsStart .pagination a {
    background-color: rgba(0, 0, 0, 0.4);
    color: #e6e8e8;
}

.mainLesetipps #ajaxLesetippsStart .pagination .up:before,
.mainLesetipps #ajaxLesetippsStart .pagination .down:before {
    display: inline-block;
    margin-top: 1rem;
    font-size: 2.4rem;
}

.mainLesetipps #ajaxLesetippsStart .pagination .down:before {
    content: '\e61d';
}

.mainLesetipps #ajaxLesetippsStart .pagination .up:before {
    content: '\e61c';
}

.mainLesetipps .biblioListItem .imageWrap a {
    display: inline-block;
}

.mainLesetipps .resultItemLesetippMAimage {
    width: 100%;
    margin: 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.4);
    border: 0.2rem solid #f0f0f0;
}

.mainLesetipps .subName {
    position: absolute;
    bottom: -7rem;
    left: 0;
    text-align: left;
    height: 2.2rem;
    margin-left: 1rem;
    display: inline-block;
    width: auto;
}

.step-XL.noFlex.ua-safari .mainLesetipps {
    display: none;
}


/** LESETIPPS-Seite **/

body.step-XS .lesetipps h1,
body.step-S .lesetipps h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

#ajaxLesetipps .lesetippCOT br {
    line-height: 3rem;
}

#ajaxLesetipps label {
    min-width: 15rem;
    margin: 1rem 1rem 0 0;
    vertical-align: baseline;
    display: inline-block;
}

body.step-XS #ajaxLesetipps label,
body.step-S #ajaxLesetipps label {
    min-width: 15rem;
    margin-bottom: 0.2rem;
}

body:not(.step-XL) #ajaxLesetipps #Kategorie label {
    min-width: auto;
}

#ajaxLesetipps select {
    width: 20rem;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#ajaxLesetipps select::-ms-expand {
    display: none;
}

#ajaxLesetipps option {
    color: #000;
    padding: 0.75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#ajaxLesetipps .select-wrapper {
    position: relative;
}

#ajaxLesetipps .select-wrapper:before {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 1rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 1rem 0 1rem;
    border-color: #666 transparent transparent transparent;
    pointer-events: none;
}

#ajaxLesetipps button {
    border: 1px solid #999;
    padding: 0.5rem;
    background: #eee;
}

#ajaxLesetipps #Genre.Erwachsene .Kinder,
#ajaxLesetipps #Genre.Erwachsene .Teens,
#ajaxLesetipps #Genre.Kinder .Teens,
#ajaxLesetipps #Genre.Kinder .Erwachsene,
#ajaxLesetipps #Genre.Teens .Kinder,
#ajaxLesetipps #Genre.Teens .Erwachsene {
    display: none;
}

#ajaxLesetipps #Genre.Erwachsene .Erwachsene,
#ajaxLesetipps #Genre.Erwachsene .Erwachsene.Teens,
#ajaxLesetipps #Genre.Erwachsene .Erwachsene.Teens.Kinder,
#ajaxLesetipps #Genre.Teens .Teens,
#ajaxLesetipps #Genre.Teens .Erwachsene.Teens,
#ajaxLesetipps #Genre.Kinder .Kinder,
#ajaxLesetipps #Genre.Kinder Erwachsene.Kinder {
    display: inline-block !important;
}

#ajaxLesetipps .maImage img {
    margin: 0.2rem 2rem 0 0;
    width: 17rem;
    max-width: 100%;
    -moz-box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    border: 3px solid #fff;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-radius: 50%;
    transition: all .2s ease-in-out;
}

#ajaxLesetipps .maImage img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 1.0rem #666;
}

#ajaxLesetipps .flexWrap {
    display: flex;
}

body:not(.step-XL) #ajaxLesetipps .flexWrap {
    flex-wrap: wrap;
}

#ajaxLesetipps .lesetippsFilterLeft {
    background: #fff;
    width: 35rem;
    min-width: 35rem;
    padding: 0 1rem 1rem 0;
}

body:not(.step-XL) #ajaxLesetipps .lesetippsFilterLeft {
    width: 100%;
    min-width: 100%;
    padding: 0 0 3rem 0;
}

#swipeFilter,
.swipeFilterClose {
    display: none;
}

#ajaxLesetipps .button.icon-filter:before {
    top: 0.5rem;
}

#ajaxLesetipps .button.icon-filter a {
    padding-top: 0.3rem;
}

body.step-XS #swipeFilter,
body.step-S #swipeFilter,
body.step-XS .swipeFilterClose,
body.step-S .swipeFilterClose,
body.step-XS .swipeFilterReset,
body.step-S .swipeFilterReset {
    display: inline-block;
    margin-bottom: 2rem;
}

.swipeFilterReset {
    margin-left: 3rem;
}

body.step-XS #ajaxLesetipps .flexWrap .lesetippsFilterLeft,
body.step-S #ajaxLesetipps .flexWrap .lesetippsFilterLeft {
    position: absolute;
    top: -9.5rem;
    position: fixed;
    top: 0;
    padding: 1rem;
    background: #fff;
    width: calc(100% + 4.0rem);
    min-width: 100%;
    min-height: 55rem;
    min-height: 100vh;
    transform: translateX(calc(-100% - 2rem));
    transition: all 0.2s ease-out;
    box-shadow: 0 1rem 0.4rem -0.4rem rgba(100, 100, 100, 0.5);
    z-index: 99999999;
}

#ajaxLesetipps .onlyMobile,
#ajaxLesetipps .notMobile {
    display: none;
}

body.step-XS #ajaxLesetipps .onlyMobile,
body.step-S #ajaxLesetipps .onlyMobile,
body.step-M #ajaxLesetipps .onlyMobile {
    display: block;
    margin-top: 2rem;
}

body.step-XL #ajaxLesetipps .notMobile,
body.step-L #ajaxLesetipps .notMobile {
    display: inline-block;
}

body.step-XS #ajaxLesetipps .flexWrap.on .lesetippsFilterLeft,
body.step-S #ajaxLesetipps .flexWrap.on .lesetippsFilterLeft {
    transform: translateX(-2rem);
    transition: all 0.2s ease-out;
}

#ajaxLesetipps .lesetippsMain {
    width: auto;
}

#ajaxLesetipps .lesetippsMain h4 {
    white-space: inherit;
}

body:not(.step-XL) #ajaxLesetipps .lesetippsMain {
    width: 100%;
}


/** Triff deinen Buchhaendler TDB **/

body.tdbPageTEST header {
    background-image: linear-gradient(to top, #5a5099, #6e62bb);
}

.tdbPage .body {
    background: #fff;
    background: -moz-linear-gradient(top, #bdc7bc 0%, #bdc7bc 100px, #bec8bd 200px, #c8d1c8 300px, #d5dcd5 400px, #e5e9e4 500px, #f3f4f2 600px, #fdfdfd 700px, #ffffff 730px, #ffffff 100%);
    background: -webkit-linear-gradient(top, #bdc7bc 0%, #bdc7bc 100px, #bec8bd 200px, #c8d1c8 300px, #d5dcd5 400px, #e5e9e4 500px, #f3f4f2 600px, #fdfdfd 700px, #ffffff 730px, #ffffff 100%);
    background: linear-gradient(to bottom, #bdc7bc 0%, #bdc7bc 100px, #bec8bd 200px, #c8d1c8 300px, #d5dcd5 400px, #e5e9e4 500px, #f3f4f2 600px, #fdfdfd 700px, #ffffff 730px, #ffffff 100%);
    background-repeat: no-repeat;
    background-attachment: local;
    overflow-x: hidden;
}

body.ua-edge.tdbPage .body,
body:not(.step-XL).tdbPage .body,
body.ua-ie10.tdbPage .body,
body.ua-ie11.tdbPage .body {
    background-attachment: fixed;
    background: linear-gradient(to bottom, #bdc7bc 0px, #ffffff 700px);
}

.tdbPage .body .triffDeinenBuchhaendler {
    margin-top: 35rem;
    margin-top: 42rem;
}

body:not(.step-XL).tdbPage .body .triffDeinenBuchhaendler {
    margin-top: 28vw;
}

body.tdbPage .body>.content {
    position: relative;
    background-color: transparent;
}

body.step-XL.tdbPage .body>.content:before {
    content: ' ';
    position: absolute;
    width: 1280px;
    height: 370px;
    width: 1500px;
    height: 434px;
    max-width: 105%;
    max-width: 105vw;
    background-image: url('images/tdb/tdbbg3.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -13.5rem;
    margin-left: -3.5rem;
    margin-top: -2.4rem;
}

body.step-M.tdbPage .body>.content:before,
body.step-L.tdbPage .body>.content:before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 28vw;
    max-width: 100%;
    max-height: 37rem;
    background-image: url('images/tdb/tdbbg3.png');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    margin-top: -2.4rem;
}

body.step-XS.tdbPage .body>.content:before,
body.step-S.tdbPage .body>.content:before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 28vw;
    max-width: 100%;
    background-image: url('images/tdb/tdbbg3.png');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    margin-top: -2.4rem;
}

.tdbPage .body:before {
    content: '';
    display: none;
}

.tdbIntro .tdbIntroCenter {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    font-style: italic;
    color: #333;
    padding: 0 7%;
}

.tdbIntro .tdbIntroFooter {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    font-style: italic;
    margin: 4rem 0 0 -4px;
}

.tdbIntro .tdbIntroFlex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 4rem 0;
}

.tdbIntro .tdbIntroFlex div {
    -ms-flex: 1;
    flex-grow: 1;
    width: auto;
    width: 33%;
    text-align: center;
    font-size: 1.6rem;
    font-style: italic;
    padding: 0 2rem;
    color: #555;
}

body.step-XS.tdbPage .tdbIntro .tdbIntroCenter,
body.step-S.tdbPage .tdbIntro .tdbIntroCenter {
    padding: 0 2%;
    margin-bottom: 4rem;
}

body.step-XS.tdbPage .tdbIntro .tdbIntroFlex,
body.step-S.tdbPage .tdbIntro .tdbIntroFlex {
    margin: 0;
}

body.step-XS.tdbPage .tdbIntro .tdbIntroFlex div,
body.step-S.tdbPage .tdbIntro .tdbIntroFlex div,
body.step-M.tdbPage .tdbIntro .tdbIntroFlex div {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 4rem;
}

body.step-XS.tdbPage .triffDeinenBuchhaendler .tdbStart .maBox,
body.step-S.tdbPage .triffDeinenBuchhaendler .tdbStart .maBox {
    width: 100%;
    min-width: inherit;
    max-width: inherit;
    margin-right: 0;
}

.tdbIntro h4 {
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 700;
    color: #e74b59;
}

.triffDeinenBuchhaendler .flexWrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.triffDeinenBuchhaendler .tdbMitarbeiter .flexWrapper {
    justify-content: flex-start;
    align-items: flex-start;
}

.triffDeinenBuchhaendler .maBox {
    position: relative;
    background: #fff;
    box-shadow: 0 0 4px #aaa;
}

.triffDeinenBuchhaendler .tdbStart .maBox {
    min-width: 21em;
    max-width: 21em;
    margin: 0 1rem 2rem 0;
    padding: 1rem 1rem 8rem 1rem;
    text-align: center;
    background: #fafafa;
}

.triffDeinenBuchhaendler .tdbMitarbeiter .maBox {
    min-width: 12em;
    max-width: 16em;
    padding: 1rem 1rem 2rem 1rem;
    margin-bottom: 0;
    text-align: center;
}

body.step-XS.tdbPage .triffDeinenBuchhaendler .maBox,
body.step-S.tdbPage .triffDeinenBuchhaendler .maBox {
    width: 100%;
    min-width: inherit;
    max-width: inherit;
}

.triffDeinenBuchhaendler .maBox img {
    max-width: 100%;
    height: auto;
}

.triffDeinenBuchhaendler .maBox h4 {
    margin: 1rem 0 2rem 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: #e74b59;
}

.triffDeinenBuchhaendler .maBox.maBoxHidden {
    visibility: hidden;
    padding: 0;
    margin: 0 1rem 0 0;
    padding: 0 1rem 0 1rem;
    height: 0;
}

.triffDeinenBuchhaendler .Motto {
    text-align: center;
    font-size: 1.6rem;
    font-style: italic;
    padding: 0 2rem;
    color: #555;
}

.triffDeinenBuchhaendler .terminBox {
    position: relative;
    width: 98%;
    padding: 1rem;
    margin-bottom: 2rem;
    background: #fff;
    box-shadow: 0 0 4px #aaa;
}

.triffDeinenBuchhaendler .Genres {
    margin: 2rem 0 0 0;
    font-size: 1.6rem;
    color: #555;
}

.triffDeinenBuchhaendler .Genres .genresHelp {
    margin: 0 0 0 1rem;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    position: relative;
}

.triffDeinenBuchhaendler .Genres .genresHelpText {
    display: none;
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: -12rem;
    top: 2.4rem;
    width: 20rem;
    z-index: 9;
    padding: 1rem;
    text-align: center;
    background: #fafafa;
    box-shadow: 0 0 4px #aaa;
}

.triffDeinenBuchhaendler .Standort {
    margin: 1rem 0;
    font-size: 1.6rem;
    color: #555;
}

.triffDeinenBuchhaendler .Genres div,
.triffDeinenBuchhaendler .Standort div {
    font-size: 1.6rem;
    font-style: italic;
    color: #999;
}

.triffDeinenBuchhaendler .Termin {
    position: absolute;
    bottom: 1rem;
    right: 0;
    left: 0;
}

.triffDeinenBuchhaendler .header {
    position: relative;
    margin: 0 0 2rem 0;
}

.triffDeinenBuchhaendler .header h2 {
    display: inline-block;
    margin: 0;
    font-size: 3rem;
    color: #666;
}

.triffDeinenBuchhaendler .intro {
    margin: 2rem 0;
}

.triffDeinenBuchhaendler .button {
    display: inline-block;
}

.triffDeinenBuchhaendler .button a,
.triffDeinenBuchhaendler .button span {
    display: inline-block;
    min-width: 15rem;
    text-decoration: none;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0.5rem 3rem;
    background: #85a797;
    border-radius: 2rem;
}

.triffDeinenBuchhaendler .button>:first-child:hover,
.triffDeinenBuchhaendler .button a:hover,
.triffDeinenBuchhaendler input[type="submit"].button:hover {
    background: #4e7d67;
}

.triffDeinenBuchhaendler .tdbIntroFooter .faqButton.button {
    margin-bottom: 4rem;
}

.triffDeinenBuchhaendler .faqText {
    position: relative;
    font-weight: 600;
    font-size: 1.4rem;
}

.triffDeinenBuchhaendler .faqText dl {
    position: relative;
    padding: 1rem;
    font-style: normal;
    text-align: left;
    background: #fafafa;
    box-shadow: 0 0 4px #aaa;
    margin: 0.4rem 0.4rem 4rem 0.4rem;
}

.triffDeinenBuchhaendler .faqText dt {
    padding-left: 3rem;
}

.triffDeinenBuchhaendler .faqText dd {
    margin-bottom: 2rem;
    padding-left: 3rem;
    font-weight: 700;
}

.triffDeinenBuchhaendler .faqText dt:before {
    content: 'F:';
    display: inline-block;
    width: 3rem;
    color: #85a795;
    font-size: 1.8rem;
    margin-left: -3rem;
    vertical-align: baseline;
}

.triffDeinenBuchhaendler .faqText dd:before {
    content: 'A:';
    display: inline-block;
    width: 3rem;
    color: #e74b59;
    font-size: 1.8rem;
    margin-left: -3rem;
    vertical-align: baseline;
}

.triffDeinenBuchhaendler .faqText .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url("images/tdb/close.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}

.triffDeinenBuchhaendler .calendar {
    position: relative;
    flex-grow: 1;
    width: calc(100% - 36rem);
    max-width: 72rem;
    padding: 1rem 1rem 0 1rem;
    margin: 0 0 4rem 4rem;
    background: #fff;
    box-shadow: 0 0 4px #aaa;
}

body.step-XS.tdbPage .calendar,
body.step-S.tdbPage .calendar {
    width: 100%;
    margin: 4rem 0 0 0;
}

.triffDeinenBuchhaendler .calendarHeading {
    font-size: 2rem;
    color: #e74b59;
    font-weight: 600;
    padding: 1rem;
}

.triffDeinenBuchhaendler .week {
    margin-bottom: 2rem;
}

.triffDeinenBuchhaendler input[type="submit"] {
    display: inline-block;
    max-width: 100%;
    text-decoration: none;
    color: #555;
    padding: 1rem;
    font-size: 1.6rem;
    background: #fff;
    border: 2px solid #ccc;
    -webkit-appearance: none;
    font-weight: 700;
}

.triffDeinenBuchhaendler .submitDiv {
    max-width: 100%;
}

.triffDeinenBuchhaendler .calendarHeader {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.triffDeinenBuchhaendler .calendarRow {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.triffDeinenBuchhaendler .mo,
.triffDeinenBuchhaendler .di,
.triffDeinenBuchhaendler .mi,
.triffDeinenBuchhaendler .do,
.triffDeinenBuchhaendler .fr {
    width: 16%;
    border: 1px solid #ddd;
    text-align: center;
    padding: 1rem 0;
}

.triffDeinenBuchhaendler .slot {
    width: 20%;
    padding: 1.5rem 0;
    border: 1px solid #ddd;
    text-align: center;
}

body.step-XS.tdbPage .triffDeinenBuchhaendler .longVersion,
body.step-S.tdbPage .triffDeinenBuchhaendler .longVersion,
body.step-M.tdbPage .triffDeinenBuchhaendler .longVersion,
body.step-L.tdbPage .triffDeinenBuchhaendler .shortVersion,
body.step-XL.tdbPage .triffDeinenBuchhaendler .shortVersion {
    display: none;
}

.triffDeinenBuchhaendler .notAvailable {
    background: #f0f0f0;
}

.triffDeinenBuchhaendler .notAvailable input {
    display: none;
}

.triffDeinenBuchhaendler .button.initialHidden {
    display: none;
}

.triffDeinenBuchhaendler input[type='text'],
.triffDeinenBuchhaendler input[type='email'],
.triffDeinenBuchhaendler .checkboxBox,
.triffDeinenBuchhaendler .textareaBox {
    border: 2px solid #aaa;
    margin-bottom: 1rem;
    width: 100%;
    padding: 0.5rem;
    height: 4rem;
    min-height: 4rem;
    line-height: 4rem;
    font-size: 1.5rem;
}

.triffDeinenBuchhaendler .checkboxBox,
.triffDeinenBuchhaendler .textareaBox {
    height: auto;
    line-height: 2.5rem;
    font-size: 1.6rem;
    color: #555;
    vertical-align: top;
}

.triffDeinenBuchhaendler .checkboxBox div {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.triffDeinenBuchhaendler .checkboxBox label {
    margin: 0 2rem 0 3rem;
    line-height: 4rem;
    min-width: 30%;
    width: 35%;
}

body.step-XS.tdbPage .triffDeinenBuchhaendler .checkboxBox label,
body.step-S.tdbPage .triffDeinenBuchhaendler .checkboxBox label,
body.step-M.tdbPage .triffDeinenBuchhaendler .checkboxBox label {
    margin: 0 2rem 0 3rem;
    line-height: 4rem;
    min-width: inherit;
    width: 100%;
}

.triffDeinenBuchhaendler .checkboxBox label {
    margin: 0 2rem 0 3rem;
    line-height: 4rem;
    min-width: 30%;
    width: 35%;
}

.triffDeinenBuchhaendler .checkboxBox input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    margin: 0 1rem 0 -3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #bbb;
}

.triffDeinenBuchhaendler .checkboxBox input[type="checkbox"]:checked {
    display: inline-block;
    background-image: url('images/tdb/check.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    background-color: #fff;
}

.triffDeinenBuchhaendler input[type='radio'] {
    width: 2.4rem;
    height: 2.4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #999;
    border-radius: 100%;
    background: #eee;
    outline: none;
}

.triffDeinenBuchhaendler input[type="radio"]:checked {
    display: inline-block;
    background-image: url(images/dash.png);
    background-repeat: no-repeat;
    background-position: 50%;
}

.triffDeinenBuchhaendler select {
    margin-bottom: 1rem;
    width: 100%;
    border: 2px solid #aaa;
    width: 100%;
    padding: 1rem;
    height: 4.5rem;
    min-height: 4.5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #aaa;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.triffDeinenBuchhaendler select::-ms-expand {
    display: none;
}

.triffDeinenBuchhaendler option {
    color: #000;
    padding: 0.75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.triffDeinenBuchhaendler .select-wrapper {
    position: relative;
}

.triffDeinenBuchhaendler .select-wrapper:before {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 1rem 0 1rem;
    border-color: #aaa transparent transparent transparent;
    pointer-events: none;
}

.triffDeinenBuchhaendler textarea {
    width: 100%;
    height: 10rem;
    font-size: 1.5rem;
    padding: 1rem;
    overflow-x: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.triffDeinenBuchhaendler ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #aaa;
    font-size: 1.6rem;
}

.triffDeinenBuchhaendler ::-moz-placeholder {
    /* Firefox 19+ */
    color: #aaa;
    font-size: 1.6rem;
}

.triffDeinenBuchhaendler :-ms-input-placeholder {
    /* IE 10+ */
    color: #aaa;
    font-size: 1.6rem;
}

.triffDeinenBuchhaendler :-moz-placeholder {
    /* Firefox 18- */
    color: #aaa;
    font-size: 1.6rem;
}

.triffDeinenBuchhaendler .confirmContact {
    display: inline-block;
    width: 16rem;
    margin-bottom: 0.5rem;
    vertical-align: top;
}

.triffDeinenBuchhaendler .contactFormHeading {
    display: block;
    width: calc(100% - 10rem);
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
    color: #e74b59;
    line-height: 2.5rem;
}

.triffDeinenBuchhaendler .contactFormHeading span.contactFormHeadingDate {
    color: #85a795;
    font-size: 1.8rem;
}

.triffDeinenBuchhaendler .contactFormHeadingCalendar {
    position: relative;
    display: inline-block;
    width: 25%;
    height: 9rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    vertical-align: top;
    background-image: url("images/tdb/cal.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}

.triffDeinenBuchhaendler .contactFormHeadingCalendar .insertDate {
    position: absolute;
    top: 3rem;
    left: 2rem;
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    vertical-align: top;
}

.triffDeinenBuchhaendler .contactFormHeadingCalendar .insertTimeslot {
    position: absolute;
    top: 5.5rem;
    left: 2rem;
    display: inline-block;
    font-size: 1.9rem;
    font-weight: 700;
    vertical-align: top;
}

.triffDeinenBuchhaendler .validatr-message {
    left: 3rem !important;
}

.triffDeinenBuchhaendler .contactForm {
    display: none;
    margin-bottom: 4rem;
}

.triffDeinenBuchhaendler .requiredError {
    background-image: url("images/tdb/formerror.png");
    background-repeat: no-repeat;
    background-position: 99% 0.6rem;
}

.triffDeinenBuchhaendler .checkboxBoxAccept.requiredError {
    background-position: 99% 98%;
}

.triffDeinenBuchhaendler .requiredError:focus {
    background-image: none;
}


/** Buchhandlungen, Oeffnungszeiten **/


/** bpm-defaults werden per JS redirected. Blitzer vermeiden. **/

.storeDetailPageBpm header,
.storeDetailPageBpm main,
.storeDetailPageBpm footer {
    display: none;
}

.kontainerFiliale .filialnameLink a {
    display: inline-block;
    font-size: 2.6rem;
    font-weight: 400;
    color: #333;
    margin: 0.5rem 0 1.5rem 0;
}

body.step-XS .kontainerFiliale .filialnameLink a,
body.step-S .kontainerFiliale .filialnameLink a,
body.step-M .kontainerFiliale .filialnameLink a {
    font-size: 1.8rem;
}

.oeffnungszeitenWrapper {
    display: inline-block;
    min-width: 20rem;
    width: 100%;
}

.oeffnungszeitenWrapper div {
    margin-bottom: 1rem;
}

.oeffnungszeitenWrapper a,
.oeffnungszeitenWrapper [class*="icon-"] {
    color: #111;
}

.oeffnungszeitenWrapper a:hover {
    color: #555;
    text-decoration: underline;
}

.oeffnungszeitenKey {
    display: inline-block;
    min-width: 9rem;
    /** Ostermonatg **/
    font-weight: normal;
    color: #555;
    vertical-align: top;
}

.oeffnungszeitenValue {
    display: inline-block;
    min-width: 11rem;
    vertical-align: top;
    font-weight: normal;
}

.overlay .oeffnungszeitenValue {
    min-width: inherit;
}

.oeffnungszeitenStandard,
.oeffnungszeitenSonder {
    width: 50%;
}

.oeffnungszeitenSonder .oeffnungszeitenKey {
    min-width: 15rem;
}

.overlay .oeffnungszeitenStandard,
.storeDetailPage .oeffnungszeitenStandard,
.finalPage .oeffnungszeitenStandard {
    width: 26%;
    padding: 0.2rem 0.5rem;
}

.overlay .oeffnungszeitenStandard:nth-child(4),
.storeDetailPage .oeffnungszeitenStandard:nth-child(4),
.finalPage .oeffnungszeitenStandard:nth-child(4) {
    width: 20%;
    padding: 0.2rem 0.5rem;
}

.oeffnungszeitenStandard .icon-telephone span,
.oeffnungszeitenStandard .icon-whatsappREK span,
.oeffnungszeitenStandard .icon-mail a,
.oeffnungszeitenStandard .icon-location a,
.oeffnungszeitenStandard .icon-facebookREK a,
.oeffnungszeitenStandard .icon-book a,
.oeffnungszeitenStandard .icon-home a {
    padding-left: 2.5rem;
    cursor: default !important;
}

.oeffnungszeitenStandard .icon-mail a,
.oeffnungszeitenStandard .icon-location a,
.oeffnungszeitenStandard .icon-facebookREK a,
.oeffnungszeitenStandard .icon-book a,
.oeffnungszeitenStandard .icon-home a {
    cursor: pointer !important;
}

.oeffnungszeitenStandard .icon-telephone,
.oeffnungszeitenStandard .icon-whatsappREK,
.oeffnungszeitenStandard .icon-book,
.oeffnungszeitenStandard .icon-home {
    margin: 0;
}

.overlay .oeffnungszeitenSonder,
.storeDetailPage .oeffnungszeitenSonder,
.finalPage .oeffnungszeitenSonder {
    position: relative;
    width: 40%;
    padding: 0.2rem 0.5rem;
}

body:not(.step-XS):not(.step-S) .overlay .availablity .item:first-child .oeffnungszeitenSonder:before {
    content: "Sonder\F6 ffnungszeiten";
    position: absolute;
    top: -5rem;
    display: inline-block;
    font-size: 1.8rem;
}

.overlay .oeffnungszeitenWrapper {
    min-width: inherit;
}

body:not(.step-XL) .kontainerFiliale .displayFlex {
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

body:not(.step-XL) .kontainerFiliale h2 {
    font-size: 1.8rem;
}

.kontainerFiliale .FilialeBild {
    width: 35rem;
    max-width: 49%;
}

.kontainerFiliale .FilialeMap {
    width: calc(100% - 37rem);
}

body.step-S .kontainerFiliale .FilialeBild,
body.step-S .kontainerFiliale .FilialeMap,
body.step-XS .kontainerFiliale .FilialeBild,
body.step-XS .kontainerFiliale .FilialeMap,
body.step-M .kontainerFiliale .FilialeBild,
body.step-M .kontainerFiliale .FilialeMap,
body.step-S .kontainerFiliale .FilialeBild .value,
body.step-XS .kontainerFiliale .FilialeBild .value,
body.step-M .kontainerFiliale .FilialeBild .value,
body.step-S .kontainerFiliale .FilialeBild a img,
body.step-XS .kontainerFiliale .FilialeBild a img,
body.step-M .kontainerFiliale .FilialeBild a img {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.FilialeBild {
    width: 36rem;
    padding-right: 1rem;
}

.FilialeMap {
    width: calc(100% - 38rem);
}

body.step-XS .FilialeBild,
body.step-S.FilialeBild,
body.step-M .FilialeBild,
body.step-XS .FilialeMap,
body.step-S .FilialeMap,
body.step-M .FilialeMap {
    width: 100%;
    padding-right: 0;
}

#mapOL,
#mapAL,
#mapMY,
#mapMT,
#mapZD,
#mapSALON,
#mapXX {
    width: 100%;
    height: 34.6rem;
    margin-top: 0.2rem;
    box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    border: 3px solid #fff;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    background-position: 50% 0;
}

#mapOL,
#mapSALON,
#mapXX {
    background-image: url(images/bgMapsOL.png);
}

#mapAL {
    background-image: url(images/bgMapsAL.png);
}

#mapMY {
    background-image: url(images/bgMapsMY.png);
}

#mapMT {
    background-image: url(images/bgMapsMT.png);
}

#mapZD {
    background-image: url(images/bgMapsZD.png);
}

.mapsAnfrage {
    height: 100%;
    background: #999;
    background: rgba(100, 100, 100, 0.8);
}

#mapOL span,
#mapAL span,
#mapMY span,
#mapMT span,
#mapZD span,
#mapSALON span,
#mapXX span {
    display: inline-block;
    padding: 2rem;
    color: #fff;
}

body:not(.step-XL) #mapOL span,
body:not(.step-XL) #mapAL span,
body:not(.step-XL) #mapMY span,
body:not(.step-XL) #mapMT span,
body:not(.step-XL) #mapZD span,
body:not(.step-XL) #mapSALON span,
body:not(.step-XL) #mapXX span {
    padding: 1rem 1rem 0.5rem 1rem;
    ;
}

#mapOL button,
#mapAL button,
#mapMY button,
#mapMT button,
#mapZD button,
#mapSALON button,
#mapXX button {
    display: inline-block;
    padding: 0.5rem;
    background: #eee;
    border: 2px solid #999;
    cursor: pointer;
}

.stepMhide {
    padding: 0 !important;
}

body.step-M .stepMhide,
body.step-S .stepMhide,
body.step-XS .stepMhide {
    display: none !important;
}

body.step-S.pageBuchhandlungen .displayFlex,
body.step-XS.pageBuchhandlungen .displayFlex {
    flex-wrap: wrap;
}

body.step-S.pageBuchhandlungen .oeffnungszeitenSonder,
body.step-S.pageBuchhandlungen .oeffnungszeitenStandard,
body.step-XS.pageBuchhandlungen .oeffnungszeitenSonder,
body.step-XS.pageBuchhandlungen .oeffnungszeitenStandard {
    width: 100%;
    margin-right: 0;
}

body.step-M.pageBuchhandlungen .oeffnungszeitenStandard {
    width: 49%;
    margin-right: 0;
}

body.step-M.pageBuchhandlungen .oeffnungszeitenSonder {
    width: 100%;
    margin-right: 0;
}


/** Overlay Filialbestaend verbessern **/

.overlay .availablity .storeAvailability .headings .heading,
.overlay .availablity .storeAvailability .item>div {
    width: calc((100% - 7rem) / 3);
}

.overlay .availablity .storeAvailability .item .columnAmount,
.overlay .availablity .storeAvailability .headings .heading.amount {
    width: 7rem;
}

.overlay .availablity .storeAvailability .item .columnStore,
.overlay .availablity .storeAvailability .headings .heading.store {
    width: 14rem;
}

.overlay .availablity .storeAvailability .item .columnOpeningHours,
.overlay .availablity .storeAvailability .headings .heading.openingHours {
    width: calc(100% - 21rem);
}

.overlay .availablity .storeAvailability .headings .heading.openingHours {
    width: calc(100% - 21rem);
}

.overlay .availablity .storeAvailability .headings .heading.contact,
.overlay .availablity .storeAvailability .item .columnContact,
.overlay .availablity .storeAvailability .item .columnOpeningHours h4 {
    display: none;
}

.overlay .oeffnungszeitenWrapper div {
    margin-bottom: 0;
    border-bottom: 1px dotted #ddd;
}

body.step-S .overlay .availablity .storeAvailability .item .columnOpeningHours,
body.step-XS .overlay .availablity .storeAvailability .item .columnOpeningHours,
body.step-S .overlay .availablity .storeAvailability .item .columnContact,
body.step-XS .overlay .availablity .storeAvailability .item .columnContact {
    display: none;
}

.showGalerie .photoSwipeFigure100 .SALON_info {
    max-width: 38%;
    margin-right: 2%;
}

body.step-L .showGalerie .photoSwipeFigure100 .SALON_info {
    max-width: 60%;
}

.showGalerie .photoSwipeFigure100 .PhotoSwipeKarte_Oeffnungszeiten {
    max-width: 60%;
}


/** bpm-Filialdetail verbessern **/

.storeDetailPage .articleDetail section:first-of-type {
    display: flex;
    flex-wrap: wrap;
}

.storeDetailPage .articleDetail .heading {
    order: 1;
}

.storeDetailPage .articleDetail .col.colAside {
    order: 2;
    width: 100%;
}

.storeDetailPage .articleDetail .col.colMain {
    order: 3;
}

.storeDetailPage .articleDetail .articlePicture {
    order: 4;
    margin-top: 2rem;
}


/** BESTSELLER **/

#ajaxBestseller .cellCover .biblioCover,
.makeBestseller .cellCover .biblioCover {
    width: 100%;
}

.makeBestseller .biblioCover img {
    width: 100%;
}

#ajaxBestseller .page,
.makeBestseller .page,
.makeBestseller .positions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

body.step-XL #ajaxBestseller .page,
body.step-XL .makeBestseller .page {
    justify-content: flex-start;
}

#ajaxBestseller .page .bestsellerWoche,
.makeBestseller .page .bestsellerWoche {
    width: 100%;
}

#ajaxBestseller .biblioItem,
.makeBestseller .biblioItem {
    position: relative;
    min-width: 28rem;
    min-width: 24rem;
    display: inline-block;
    padding: 0.3rem;
    border: 1px solid #ccc;
    background: #f9f9f9;
    max-width: 49%;
    max-width: 24%;
    margin-bottom: 1rem;
}

body.step-XL #ajaxBestseller .biblioItem,
body.step-XL .makeBestseller .biblioItem {
    margin-right: 1rem;
}

body.step-XL #ajaxBestseller .biblioItem:nth-child(4n+1),
body.step-XL .XXXmakeBestseller .biblioItem:nth-child(4n+1) {
    margin-right: 0;
}

body.step-L #ajaxBestseller .biblioItem,
body.step-L .makeBestseller .biblioItem {
    flex-grow: 1;
    min-width: 32%;
    width: 100%;
}

body.step-M #ajaxBestseller .biblioItem,
body.step-M .makeBestseller .biblioItem {
    flex-grow: 1;
    min-width: 31rem;
    min-width: 49%;
    width: 100%;
}

body.step-XS #ajaxBestseller .biblioItem,
body.step-S #ajaxBestseller .biblioItem,
body.step-XS .makeBestseller .biblioItem,
body.step-S .makeBestseller .biblioItem {
    flex-grow: 1;
    min-width: 100%;
    width: 100%;
}

#ajaxBestseller .bestsellerPosition,
.makeBestseller .cellCover:before {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    background: #777;
    background: rgba(100, 100, 100, 0.7);
    padding: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 50%;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 1.4rem;
    color: #fff;
}

.makeBestseller {
    counter-reset: makeBestseller-counter;
}

.makeBestseller .cellCover {
    counter-increment: makeBestseller-counter;
    position: relative;
}

.makeBestseller .cellCover:before {
    content: counter(makeBestseller-counter);
}

body.step-XL.bestsellerTEST .cellPrice:last-child,
body.step-L.bestsellerTEST .cellPrice:last-child,
body.step-M.bestsellerTEST .cellPrice:last-child {
    width: 11rem;
}

.makeBestseller .row {
    display: flex;
    flex-wrap: wrap;
}

.makeBestseller [class^='ranking-'],
.makeBestseller .biblioPublishing {
    display: none;
}

#ajaxBestseller .cell:last-child:not(:only-child),
.makeBestseller .cell:last-child:not(:only-child) {
    text-align: left;
    width: 100%;
    display: block;
}

#ajaxBestseller .biblioItem.listItem .sectionPrice,
#ajaxBestseller .biblioItem.listItem .sectionActions {
    text-align: left;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.makeBestseller .biblioItem.listItem .sectionPrice {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: auto;
}

.makeBestseller .biblioItem.listItem .sectionActions {
    display: inline-block;
    text-align: right;
    vertical-align: top;
    width: inherit;
}

#ajaxBestseller .biblioItem.listItem .sectionDesc .biblioTitle,
#ajaxBestseller .biblioItem.listItem .sectionDesc .biblioAuthor,
.makeBestseller .biblioItem.listItem .sectionDesc .biblioTitle,
.makeBestseller .biblioItem.listItem .sectionDesc .biblioAuthor {
    white-space: inherit;
    text-overflow: initial;
    overflow: initial;
}

#ajaxBestseller .biblioItem.listItem .sectionDesc .biblioTitle,
.makeBestseller .biblioItem.listItem .sectionDesc .biblioTitle {
    font-size: 2.0rem;
}

#ajaxBestseller .biblioItem.listItem .sectionDesc .biblioAuthor,
.makeBestseller .biblioItem.listItem .sectionDesc .biblioAuthor a {
    font-size: 1.8rem;
    font-weight: normal;
    color: #111;
}

#ajaxBestseller .biblioItem.listItem .sectionPrice .biblioPrice,
.makeBestseller .biblioItem.listItem .sectionPrice .biblioPrice {
    width: 100%;
    color: #5b5b5b;
    font-size: 1.4rem;
}

.makeBestseller .biblioItem.listItem .sectionPrice .biblioPrice .key,
.makeBestseller .biblioItem.listItem .sectionPrice .biblioPrice .value {
    color: #5b5b5b;
    font-size: 1.4rem;
    font-weight: 600;
}

.makeBestseller .button.continue>*,
.makeBestseller .button.continue>*:hover {
    font-weight: inherit;
    font-size: 0;
    line-height: 0;
    border-color: transparent;
    padding: 0;
    background-color: transparent;
    color: transparent;
}

.makeBestseller .button.continue[class*=icon-]:before {
    color: #000;
}

#ajaxBestseller .cell,
.makeBestseller .cell {
    padding: 0.5rem;
}

#ajaxBestseller .cell.cellPrice,
.makeBestseller .cell.cellPrice {
    padding: 1rem 0 0 0;
}

.makeBestseller .biblioItem.listItem .containerAddToBasket {
    display: inline-block;
}

.makeBestseller .cellDesc {
    width: calc(100% - 9.6rem);
}

.makeBestseller .cell.cellPrice:last-child:not(:only-child) {
    width: calc(100% - 9.6rem);
    margin-left: 10rem;
}

body.step-XS .makeBestseller .cell.cellPrice:last-child:not(:only-child),
body.step-S .makeBestseller .cell.cellPrice:last-child:not(:only-child) {
    width: auto;
    margin-left: 5.5rem;
}

#ajaxBestseller .biblioPublisher,
.makeBestseller .biblioPublisher {
    display: none;
}

#ajaxBestseller .biblioItem.listItem .containerOtherActions {
    display: inline-block;
    font-size: 1.8rem;
    margin-left: 1rem;
}

#ajaxBestseller .biblioItem.listItem .icon-basket,
.makeBestseller .biblioItem.listItem .icon-basket {
    margin-right: 1rem;
}

#ajaxBestseller .from,
.makeBestseller .by,
.makeBestseller .sectionAvailability,
.makeBestseller .containerOtherActions {
    display: none;
}


/** Leo-Logo unter /buecher/bestseller **/

.makeZeitLeo a[href*="/buecher/bestseller/ZeitLeo"] {
    position: relative;
    max-width: 184px;
    margin-bottom: 3rem !important;
}

.makeZeitLeo a[href*="/buecher/bestseller/ZeitLeo"]:after {
    position: absolute;
    top: 0rem;
    left: 0rem;
    content: '';
    background: url('/csp/shop/rekweb/css/default/images/makeZeitLeo.png') no-repeat 100% 0;
    background-size: contain;
    width: 184px;
    height: 44px;
}

.makeZeitLeo a[href*="/buecher/bestseller/ZeitLeo"]:hover {
    filter: brightness(90%);
}

body.step-S .makeZeitLeo .columns .rack>div {
    width: 100%;
    flex-grow: 0;
}


/** GRUSSKARTEN **/

.pageGrusskarten .sectionAvailability,
.pageGrusskarten .containerOtherActions {
    display: none;
}

.pageGrusskarten .sectionActions {
    margin-top: 2rem;
}


/** REK-EVENTS **/

.eventsPage .articleDetail.text {
    margin-bottom: 1rem;
}

.eventHeadText {
    width: 100%;
    font-weight: 600;
    font-size: 120%;
    color: #555;
    margin: 1rem 0 0 0;
}

.eventText {
    width: 100%;
    margin-top: 2rem;
}

.eventText table td:last-child:not(:only-child) {
    text-align: left;
}

body.step-S .eventText td,
body.step-XS .eventText td {
    display: block;
    border-top: none;
    padding: 0.2rem 0;
}

body.step-S .eventText tr,
body.step-XS .eventText tr {
    border-top: 1px solid #e6e8e8;
}

body.step-S .eventText td:first-child,
body.step-XS .eventText td:first-child {
    font-weight: bold;
}

body.step-S .eventText td strong,
body.step-XS .eventText td strong {
    font-size: 125%;
}

body.step-S .eventText td:last-child strong,
body.step-XS .eventText td:last-child strong {
    display: inline-block;
    padding-bottom: 1rem;
}

body.step-S .eventText td:first-child strong,
body.step-XS .eventText td:first-child strong {
    display: inline-block;
    padding-top: 1rem;
}

.eventText .external {
    display: inline-block;
    margin: 1rem 0;
}

.eventsDetailPage .beforeVVK {
    width: 100%;
}

.eventsDetailPage .sectionAuthor img {
    max-width: 30rem;
}

.eventTextBottomImage {
    display: block;
    margin: 1rem 0;
}

.eventTextBottomImage img {
    float: none;
    max-height: 15rem;
    margin-top: 1rem;
}

.getMeSingle {
    position: relative;
    max-width: 25%;
    min-width: 14rem;
    width: 25%;
    padding-bottom: 5rem;
}

body.step-XS .getMeSingle,
body.step-S .getMeSingle {
    width: 100%;
    max-width: 100%;
    min-width: 15rem;
    word-break: break-all;
}

body.step-XS.eventsPage #getMe,
body.step-S.eventsPage #getMe {
    justify-content: space-between;
}

body.step-XS.eventsDetailPage .backForward,
body.step-S.eventsDetailPage .backForward,
body.step-M.eventsDetailPage .backForward {
    font-size: 0;
}

body.step-XS.eventsDetailPage .backForward .back:before,
body.step-S.eventsDetailPage .backForward .back:before,
body.step-M.eventsDetailPage .backForward .back:before,
body.step-XS.eventsDetailPage .backForward .forward:before,
body.step-S.eventsDetailPage .backForward .forward:before,
body.step-M.eventsDetailPage .backForward .forward:before {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0.5rem 0.8rem;
    background: #eee;
    font-size: 2rem;
    color: #5b5b5b;
}

body.step-XS.eventsDetailPage .backForward .back:before,
body.step-S.eventsDetailPage .backForward .back:before,
body.step-M.eventsDetailPage .backForward .back:before {
    content: '<';
}

body.step-XS.eventsDetailPage .backForward .forward:before,
body.step-S.eventsDetailPage .backForward .forward:before,
body.step-M.eventsDetailPage .backForward .forward:before {
    content: '>';
}

body.step-XS.eventsDetailPage .backForward .forward,
body.step-S.eventsDetailPage .backForward .forward,
body.step-M.eventsDetailPage .backForward .forward {
    margin-left: 3rem;
}

body.step-XS.eventsDetailPage .backForward .backToOverview,
body.step-S.eventsDetailPage .backForward .backToOverview,
body.step-M.eventsDetailPage .backForward .backToOverview {
    display: none;
}

body:not(.step-XL) .getMeSingle h2,
body:not(.step-XL) .getMeSingle h3 {
    word-break: break-word;
}

body.step-L .getMeSingle h2 {
    font-size: 2.0rem;
}

body.step-L .getMeSingle h3 {
    font-size: 1.8rem;
}

body.step-M .getMeSingle h2 {
    font-size: 1.8rem;
}

body.step-M .getMeSingle h3 {
    font-size: 1.6rem;
}

.getMeSingle h2 a:hover,
.getMeSingle h3 a:hover {
    text-decoration: underline;
}

.getMeSingle .locDatePrice {
    position: absolute;
    bottom: 0;
}

.eventsPage h2 {
    font-size: 2rem;
    line-height: 1.25;
}

.eventsPage h3 {
    font-size: 1.6rem;
}

.eventsPage select {
    width: auto;
    vertical-align: baseline;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist;
    -ms-appearance: menulist;
    appearance: menulist;
}

.eventsPage .makeBox1 .animation .query {
    margin: 0.8rem 0 -1.5rem 0;
}

.eventsDetailPage .sectionAuthor {
    margin-right: 2rem;
}

.eventsDetailPage .sectionLocDatePrice {
    flex-grow: 2;
    flex-basis: 0;
    margin: 0 0 0 0;
    max-width: calc(100% - 32rem);
}

.eventsDetailPage .sectionLocDatePrice.hasISBN {
    flex-grow: 2;
    margin: 0 2rem 0 0;
    max-width: inherit;
    min-width: 25rem;
}

.eventsDetailPage .permalink {
    color: #999;
}

body.step-XS.eventsDetailPage .sectionLocDatePrice,
body.step-S.eventsDetailPage .sectionLocDatePrice {
    flex-grow: 2;
    margin: 0;
    max-width: inherit;
}

body.step-XS.eventsDetailPage .sectionCover,
body.step-S.eventsDetailPage .sectionCover {
    order: 3;
}

body.step-XS.eventsDetailPage .moreISBNsWrap,
body.step-S.eventsDetailPage .moreISBNsWrap {
    display: none;
}

.eventsDetailPage .icon-location a {
    padding-left: 2rem;
    color: #111;
    white-space: normal;
}

.eventsDetailPage .icon-location a:hover {
    text-decoration: underline;
}

body.step-XS.eventsDetailPage h1,
body.step-S.eventsDetailPage h1 {
    font-size: 2rem;
    text-decoration: underline;
}

.eventsDetailPage h3 {
    font-size: 2.2rem;
}

.eventsDetailPage h4 {
    font-size: 1.6rem;
}

.eventsDetailPage h2,
.eventsDetailPage h3,
.eventsDetailPage h4,
.eventsDetailPage h3,
.eventsDetailPage .locDatePrice {
    margin-bottom: 0.5rem;
}

.eventsDetailPage .cover {
    max-height: 25rem;
}

.eventsDetailPage .moreISBNs .cover {
    max-width: 10rem;
}

.eventsDetailPage .moreISBNs .makeBox1 {
    margin-right: 1rem;
}

.eventsDetailPage .backForward {
    position: absolute;
    top: 2rem;
    right: 0;
}

body.step-XS.eventsDetailPage .backForward,
body.step-S.eventsDetailPage .backForward {
    top: 0.5rem;
    right: 0.5rem;
}

.eventsDetailPage .back,
.eventsDetailPage .forward,
.eventsDetailPage .backToOverview a {
    display: inline-block;
    cursor: pointer;
    font-weight: 600;
    color: #111;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.eventsDetailPage .back:hover,
.eventsDetailPage .forward:hover,
.eventsDetailPage .backToOverview a:hover {
    text-decoration: underline;
}

.eventsDetailPage .backToOverview {
    margin: 0 1rem;
}

.eventsDetailPage .orderTicketPhone {
    display: inline-block;
    min-width: inherit;
    padding: 0 0 0 2.8rem;
    white-space: normal;
}

.eventsDetailPage .orderTicket2,
.eventsDetailPage .facebookEvent {
    display: inline-block;
    vertical-align: top;
}

.eventsDetailPage .orderTicket2 {
    margin-right: 2rem;
}

body.step-XS.eventsDetailPage .facebookEvent,
body.step-S.eventsDetailPage .facebookEvent,
body.step-M.eventsDetailPage .facebookEvent {
    display: block;
    margin: 1rem 0 0 0;
}

.oddYear+.evenYear,
.evenYear+.oddYear {
    border-left: 5px solid #aaa;
}


/* Eintrag in events.tebEVents.Spezial */

body.noKids .getMeSingle.eventspezial0 {
    display: none;
}


/*
.eventspezial1 .spezial:after {
    content: 'Der Vorverkauf startet am 17. August';
    display: block;
    font-weight: bold;
    font-size: 2.2rem;
    color: #993333;
}

.getMeSingle.eventspezial1 .spezial:after {
    content: 'Vorverkauf startet am 17.08.';
    font-size: 1.4rem;
}

.getMeSingle.eventspezial1 {
    padding-bottom: 8rem;
}
*/


/** REKform, z.B. in NL-Anmeldung/-Verwaltung**/

.REKform {
    display: block;
    width: 100%;
}

.REKform label {
    display: inline-block;
    margin: 0.5rem 1rem;
    vertical-align: top;
}

.REKform input[type="checkbox"]~label {
    width: calc(100% - 5rem);
}

.REKform input[type="checkbox"] {
    display: inline-block;
    margin: 0.5rem 1rem 0.5rem 0;
    width: 2rem;
    height: 2rem;
    vertical-align: top;
}

.REKform input[type='text'],
.REKform input[type='email'],
.REKform .checkboxBox,
.REKform .textareaBox {
    border: 2px solid #aaa;
    margin-bottom: 2rem;
    width: 100%;
    padding: 0.5rem;
    height: 4rem;
    min-height: 4rem;
    line-height: 4rem;
    font-size: 1.5rem;
}

.REKform input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    vertical-align: top;
    margin: 0.5rem 1rem 0 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #bbb;
}

.REKform input[type="checkbox"]:checked {
    display: inline-block;
    background-image: url(images/check.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    background-color: #fff;
}

.REKform input[type='radio'] {
    margin: 0.4rem 0 2rem 0;
    width: 2.2rem;
    height: 2.2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #999;
    border-radius: 100%;
    background: #eee;
    outline: none;
}

.REKform input[type="radio"]:checked {
    display: inline-block;
    background-image: url(images/dash.png);
    background-repeat: no-repeat;
    background-position: 50%;
}

.REKform .inputWrap {
    position: relative;
}

.REKform label.labelTop {
    position: absolute;
    top: -1.7rem;
    font-size: 1.3rem;
    z-index: 2;
    min-height: 1.6rem;
    margin: 0.8rem 0 0 0.8rem;
    border-radius: .2rem;
    padding: 0 0.4rem;
    color: #777;
    line-height: 1.6rem;
    background-color: #ffffff;
}

.customerInfos {
    display: none;
}


/** NL-Archiv **/

.nlArchiv {
    position: absolute;
    top: 5rem;
    right: 0;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.8);
    z-index: 2;
}

#toggleArchiv {
    position: absolute;
    top: 0.5rem;
    right: 0;
    cursor: pointer;
    text-decoration: underline;
    z-index: 2;
}

body.step-XS #toggleArchiv,
body.step-S #toggleArchiv,
body.step-M #toggleArchiv {
    display: none;
}


/** KONTAKTSEITE **/

.kontaktButtons>div>div {
    display: flex;
}

.kontaktButtons>div>div div:first-of-type {
    min-width: 6.5rem;
}

body.step-S .kontaktButtons>div>div div:first-of-type,
body.step-XS .kontaktButtons>div>div div:first-of-type,
body.step-M .kontaktButtons>div>div div:first-of-type {
    margin-right: 2rem;
}

.kontaktButtons h5 {
    padding-left: 6.5rem;
}

body.step-S .kontaktButtons h5,
body.step-XS .kontaktButtons h5,
body.step-M .kontaktButtons h5 {
    padding-left: 8.5rem;
}

.kontaktButtons .makeBox1 {
    max-width: 49%;
    width: 49%;
    max-width: 24%;
    width: 24%;
}

body.step-S .kontaktButtons .makeBox1,
body.step-XS .kontaktButtons .makeBox1,
body.step-M .kontaktButtons .makeBox1 {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}

body.step-L .kontaktButtons .makeBox1 {
    max-width: 49%;
    min-width: 49%;
    width: 49%;
}

.kontaktButtons .button {
    width: auto;
    margin: 2rem 0 1rem 6rem;
}

body.step-S .kontaktButtons .button,
body.step-XS .kontaktButtons .button,
body.step-M .kontaktButtons .button {
    margin: 2rem 0 1rem 8rem;
}

.kontaktButtons .button:last-child {
    margin-bottom: 0;
}

.kontaktButtons .button a {
    white-space: normal;
    text-align: left;
    min-height: 4rem;
    font-size: 1.8rem;
    background: #eee;
    border: none;
    border-radius: 0.5rem;
    padding-top: 0.8rem !important;
}

.kontaktButtons .button.icon-mail:before {
    top: 0.9rem;
}


/** SLICK-thmeme.css **/

.slick-loading .slick-list {
    background: #fff url('/images/ajax-loader.gif') center center no-repeat;
}


/* Icons */

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype');
    src: url('./fonts/slick.woff') format('woff');
    src: url('./fonts/slick.ttf') format('truetype');
    src: url('./fonts/slick.svg#slick') format('svg');
}


/* Arrows */

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '?';
}

[dir='rtl'] .slick-prev:before {
    content: '?';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '?';
}

[dir='rtl'] .slick-next:before {
    content: '?';
}


/* Dots */

.slick-dotted.slick-slider {
    margin-bottom: 10rem;
}

.slick-dots {
    position: absolute;
    bottom: -4rem;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-size: 0;
    line-height: 20px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}


/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}


/** SLICK REK **/

.slider-nav {
    font-size: 1.6rem;
}

.slider-nav .slick-current {
    color: #993333;
    border-bottom: 3px solid #993333;
}

.slider-nav .slick-track,
.slider-nav .draggable {
    display: flex;
}

.slider-nav .slick-slide {
    padding: 0.5rem 1rem;
    border-right: 1px solid #999;
    outline: none;
}

.slider-nav .slick-slide:hover {
    color: #993333;
    text-shadow: 1px 1px 3px rgba(180, 180, 180, 0.7);
}

.simpleSliderNav {
    display: flex;
    border: 1px solid #eee;
}

body.step-S .simpleSliderNav,
body.step-XS .simpleSliderNav {
    flex-wrap: wrap;
    width: 100%;
}

.simpleSliderNav~.simpleSliderNav {
    background: #BDE0D5;
    margin-top: 0.5rem;
}

.simpleSliderNav .simple {
    position: relative;
    border-right: 1px solid #eee;
    outline: none;
    text-align: center;
}

body.step-S .simpleSliderNav .simple,
body.step-XS .simpleSliderNav .simple {
    width: 33.33%;
    border: 1px solid #eee;
}

.simpleSliderNav .simple:last-child {
    border-right: none;
}

.simpleSliderNav .simple.active {
    border-bottom: 3px solid #BDE0D5;
}

.simpleSliderNav .simple.active:before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 45%;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 5px 10px;
    border-color: transparent transparent #bde0d5 transparent;
}

.simpleSliderNav .simple a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5rem 1rem 1rem 1rem;
}

.simpleSliderNav .simple a:hover {
    background-color: #BDE0D5;
}

.mainMultiLinks {
    margin: 4rem 0;
}

.mainMultiLinks.initialWrap {
    max-height: 28rem;
    overflow: hidden;
    margin-bottom: 9.9rem;
}

.mainMultiLinks .slick-dots {
    bottom: inherit;
    top: -3rem;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}


/** SLICK REK **/

.slider-for {}

.slider-nav {
    font-size: 1.6rem;
}

.slider-nav .slick-current {
    color: #993333;
    border-bottom: 3px solid #993333;
}

.slider-nav .slick-track,
.slider-nav .draggable {
    display: flex;
}

.slider-nav .slick-slide {
    padding: 0.5rem 1rem;
    border-right: 1px solid #999;
    outline: none;
}

.slider-nav .slick-slide:hover {
    color: #993333;
    text-shadow: 1px 1px 3px rgba(180, 180, 180, 0.7);
}

.simplesliderX,
.slick-listX {
    max-height: 28rem;
    overflow: hidden;
}

.simpleslider .articleDetail .col.colMain .articlePicture.imageLeft {
    margin-right: 0;
    float: none;
}

.simpleslider .articleDetail .col.colMain .articlePicture {
    width: 100%;
    max-width: 100rem;
}

.simpleslider .articleDetail.text {
    margin-bottom: 0;
}

.simpleslider .articleDetail .overview .value {
    margin-bottom: 0;
}

.simpleSliderNav {
    display: flex;
    border: 1px solid #eee;
    max-width: 100rem;
    margin: 0 auto;
    background: #fff;
    border-bottom: 2px solid #BDE0D5;
}

.slickSliderNavHoerbuch {
    display: none;
}

body.hoerbuecher .slickSliderNavHoerbuch {
    display: block !important;
}

body.step-S .simpleSliderNav,
body.step-XS .simpleSliderNav {
    flex-wrap: wrap;
    width: 100%;
}

.simpleSliderNav~.simpleSliderNav {
    background: #fff;
    margin-top: 0.5rem;
}

.simpleSliderNav .simple {
    position: relative;
    border-right: 1px solid #eee;
    outline: none;
    text-align: center;
}

body.step-S .simpleSliderNav .simple,
body.step-XS .simpleSliderNav .simple {
    width: 33.33%;
    border: 1px solid #eee;
}

.simpleSliderNav .simple:last-child {
    border-right: none;
}

.simpleSliderNav .simple.active {
    border-bottom: 2px solid #BDE0D5;
}

.simpleSliderNav .simple.active:before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 45%;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #bde0d5 transparent;
}

.simpleSliderNav .simple a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5rem 1rem 1rem 1rem;
}

.simpleSliderNav .simple a:hover {
    background-color: #BDE0D5;
}

.mainMultiLinks {
    margin: 4rem 0;
    text-align: center;
    background: #BDE0D5;
}

.mainMultiLinks.initialWrap {
    max-height: 28rem;
    overflow: hidden;
    margin-bottom: 9.9rem;
}

.mainMultiLinks .slick-dots {
    bottom: inherit;
    top: -3rem;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
    text-align: center;
    background: #BDE0D5;
}


/** NONBOOK NEU **/

.mainBigThree .articleDetail.text,
.mainMiddleTwo .articleDetail.text,
.mainSmallThree .articleDetail.text {
    position: relative;
    float: left;
}

.mainBigThree .articleDetail.text {
    position: relative;
    width: 30%;
    margin: 0 0 5% 0;
}

.mainBigThree .articleDetail.text:first-child {
    margin-left: 0;
    width: 65%;
    margin: 0 5% 0 0;
}

.mainMiddleTwo .articleDetail.text {
    width: calc(48%);
    margin-left: 0;
}

.mainMiddleTwo .articleDetail.text:first-child {
    margin: 0 4% 0 0;
}

.mainSmallThree .articleDetail.text {
    width: 31%;
}

.mainSmallThree .articleDetail.text:nth-child(2) {
    margin: 0 3.5%;
}

.mainBigThree .articleDetail .col.colMain .articlePicture,
.mainMiddleTwo .articleDetail .col.colMain .articlePicture,
.mainSmallThree .articleDetail .col.colMain .articlePicture {
    width: 100%;
}

.mainBigThree .articleDetail .overview .value,
.mainMiddleTwo .articleDetail .overview .value,
.mainSmallThree .articleDetail .overview .value {
    margin-bottom: 0 !important;
}

.mainBigThree .articleDetail .col.colAside .key,
.mainMiddleTwo .articleDetail .col.colAside .key,
.mainSmallThree .articleDetail .col.colAside .key {
    display: none;
}

.mainBigThree .articleDetail .col.colMain .articlePicture~.articleText,
.mainMiddleTwo .articleDetail .col.colMain .articlePicture~.articleText,
.mainSmallThree .articleDetail .col.colMain .articlePicture~.articleText {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    text-shadow: 1px 1px 2rem #333;
    font-size: 3rem;
    text-align: center;
}

.mainBigThree .articleDetail:first-child .col.colMain .articlePicture~.articleText {
    top: 40%;
    font-size: 4rem;
}

.mainBigThree .articleDetail .col.colMain .articleHeading.inside+.articlePicture,
.mainMiddleTwo .articleDetail .col.colMain .articleHeading.inside+.articlePicture,
.mainSmallThree .articleDetail .col.colMain .articleHeading.inside+.articlePicture {
    margin-top: 0;
}

.mainBigThree .articleDetail .col.colMain .articleHeading,
.mainMiddleTwo .articleDetail .col.colMain .articleHeading,
.mainSmallThree .articleDetail .col.colMain .articleHeading {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin: 0 auto;
    font-size: 4rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2rem #333;
    z-index: 1;
}

.mainBigThree .articleDetail:first-child .col.colMain .articleHeading,
.mainMiddleTwo .articleDetail .col.colMain .articleHeading {
    font-size: 6rem;
}

.mainBigThree .articleDetail .col.colAside,
.mainMiddleTwo .articleDetail .col.colAside,
.mainSmallThree .articleDetail .col.colAside {
    display: inline;
}

.mainBigThree .articleDetail.text .colAside .articleLink,
.mainMiddleTwo .articleDetail.text .colAside .articleLink,
.mainSmallThree .articleDetail.text .colAside .articleLink {
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.mainBigThree .articleDetail.text .colAside .articleLink a,
.mainMiddleTwo .articleDetail.text .colAside .articleLink a,
.mainSmallThree .articleDetail.text .colAside .articleLink a {
    display: inline-block;
    background: #333;
    background: rgba(50, 50, 50, 0.6);
    padding: 0.5rem 1.5rem;
    color: #f0f0f0;
    font-size: 1.6rem;
    border-radius: 2rem;
}

.mainBigThree .articleDetail.text .colAside .articleLink a:hover,
.mainMiddleTwo .articleDetail.text .colAside .articleLink a:hover,
.mainSmallThree .articleDetail.text .colAside .articleLink a:hover {
    color: #fff;
    box-shadow: 0 1px 2rem #999;
}

body.step-S .mainBigThree .articleDetail.text .colAside .articleLink,
body.step-S .mainMiddleTwo .articleDetail.text .colAside .articleLink,
body.step-S .mainSmallThree .articleDetail.text .colAside .articleLink,
body.step-XS .mainBigThree .articleDetail.text .colAside .articleLink,
body.step-XS .mainMiddleTwo .articleDetail.text .colAside .articleLink,
body.step-XS .mainSmallThree .articleDetail.text .colAside .articleLink {
    display: none;
}

.mainBigThree .articleText,
.mainMiddleTwo .articleText {
    top: 35%;
    font-size: 3rem;
}

.mainBigThree>div:first-child .articleText {
    top: 40%;
    font-size: 4rem;
}

.mainSmallThree .articleText {
    top: 35%;
    font-size: 3rem;
}

body.step-S .mainBigThree .articleText,
body.step-S .mainMiddleTwo .articleText,
body.step-XS .mainBigThree .articleText,
body.step-XS .mainMiddleTwo .articleText {
    top: 25%;
    font-size: 2rem;
}

body.step-S .mainSmallThree div .articleText,
body.step-XS .mainSmallThree div .articleText {
    top: 10%;
    font-size: 1.5rem;
}


/** cafephilo-Menue **/

.cafephiloMenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #ccc;
    padding: 0.5rem 0 0 0.5rem;
}

.cafephiloMenu .makeBox1 {
    width: calc(33.3% - 0.5rem);
    margin: 0 0.5rem 0.5rem 0;
    padding: 0 1rem;
}

.cafePhiloStartseite .cafePhiloStartseite {
    display: none;
}

body.step-XS .cafephiloMenu .makeBox1,
body.step-S .cafephiloMenu .makeBox1 {
    width: calc(100% - 0.5rem);
    margin: 0 0.5rem 0.5rem 0;
    padding: 0 1rem;
}

body.step-M .cafephiloMenu .makeBox1 {
    width: calc(50% - 0.5rem);
    margin: 0 0.5rem 0.5rem 0;
    padding: 0 1rem;
}

.cafephiloMenu a {
    display: inline-block;
    min-width: 32%;
    margin-right: 1rem;
    padding: 0.2rem 0.5rem 0.2rem 0;
}

.cafephiloMenu .makeBox1 h5 {
    margin-bottom: 0;
}

.cafephiloMenu span.pointerEventsNone {
    font-weight: bold;
    display: inline-block;
    min-width: 32%;
    margin-right: 1rem;
    padding: 0.2rem 0.5rem 0.2rem 0;
}

.cafephiloMenu a:hover {
    text-decoration: underline;
    background: #ddd;
    border-radius: 0.3rem;
}


/** DATENSCHUTZ */

.checkboxAccept {
    display: inline-block;
    font-weight: 600;
}

.inputAnrede .value {
    margin-top: 2.5rem !important;
}

.inputAnrede .value .field-radio-item {
    display: inline-block;
    margin-right: 2rem;
}

.inputAnrede .value .field-radio-item label {
    margin-left: 0.5rem;
}

footer {
    padding-bottom: 2rem;
}

body:not(.step-XL) footer {
    padding-bottom: 13rem;
}


/** NEUES MEN� in main, gebaut aus action/button **/

.mainMenu {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ccc;
    padding: 0.5rem 0.2rem;
}

.mainMenu a {
    display: inline-block;
    min-width: 32%;
    margin-right: 1rem;
    padding: 0.2rem 0.5rem;
}

.mainMenu span.pointerEventsNone {
    font-weight: bold;
    display: inline-block;
    min-width: 32%;
    margin-right: 1rem;
    padding: 0.2rem 0.5rem 0.2rem 0;
}

.mainMenu a:hover {
    text-decoration: underline;
    background: #ddd;
    border-radius: 0.3rem;
}


/** OHNE Schulbuch **/

@media only screen and (min-width: 1024px) and (max-width: 1240px) {
    header nav.flyoutNavigation>ul>li {
        margin-right: 1.2rem;
        margin-right: 0;
    }
}


/** MIT Schulbuch **/

@media only screen and (min-width: 1024px) and (max-width: 1240px) {
    header nav.flyoutNavigation>ul>li {
        margin-right: 0.5rem;
        margin-right: 0;
    }
}


/** MIT Schulbuch Merkzettel-Kopf verkleinern **/

@media only screen and (min-width: 1024px) and (max-width: 1340px) {
    .headerNotepad {
        width: 12rem;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1080px) {
    header .rekHeaderNav nav.flyoutNavigation>ul>li>a,
    header .rekHeaderNav [class*="icon-"] a,
    header .rekHeaderNav [class*="icon-"]:before {
        color: #fff;
        /** MIT SB **/
        font-size: 1.4rem;
        /** OHNE SB
		font-size: 1.7rem;
		**/
        padding: 0 0.3rem;
    }
    header .hoverDropdown:hover a,
    header .hoverDropdown:hover [class*="icon-"]:before {
        color: #333333;
    }
    #alertHolder .alert.warning.dialogCookieWarning {
        bottom: 0rem;
    }
    /** coverViewPlus auf kleinen screens **/
    .biblioItem.coverItemPlus .ptcAndPrice {
        width: 8rem;
    }
    .biblioItem.coverItem .biblioArticle .ptcAndPrice .biblioProduct,
    .biblioPrice .priceValid .key,
    .biblioPrice .priceValid .key,
    .biblioItem.coverItemPlus .biblioArticle .positionActions .icon-basket:before {
        font-size: 1.4rem;
    }
    .biblioItem.coverItemPlus .biblioArticle .positionActions {
        left: 8.5rem;
    }
}

@media only screen and (min-width: 1081px) and (max-width: 1140px) {
    header .rekHeaderNav nav.flyoutNavigation>ul>li>a,
    header .rekHeaderNav [class*="icon-"] a,
    header .rekHeaderNav [class*="icon-"]:before {
        color: #fff;
        /** MIT SB **/
        font-size: 1.4rem;
        /** OHNE SB
		font-size: 1.7rem;
		**/
    }
    header .hoverDropdown:hover a,
    header .hoverDropdown:hover [class*="icon-"]:before {
        color: #333333;
    }
    /** coverViewPlus auf kleinen screens **/
    .biblioItem.coverItemPlus .ptcAndPrice {
        width: 8rem;
    }
    .biblioItem.coverItem .biblioArticle .ptcAndPrice .biblioProduct,
    .biblioPrice .priceValid .key,
    .biblioPrice .priceValid .key,
    .biblioItem.coverItemPlus .biblioArticle .positionActions .icon-basket:before {
        font-size: 1.4rem;
    }
    .biblioItem.coverItemPlus .biblioArticle .positionActions {
        left: 8.5rem;
    }
}

@media only screen and (min-width: 1141px) and (max-width: 1200px) {
    header .rekHeaderNav nav.flyoutNavigation>ul>li>a,
    header .rekHeaderNav [class*="icon-"] a,
    header .rekHeaderNav [class*="icon-"]:before {
        color: #fff;
        font-size: 1.5rem;
        /** OHNE SB
		font-size: 1.7rem;
		**/
    }
    header .hoverDropdown:hover a,
    header .hoverDropdown:hover [class*="icon-"]:before {
        color: #333333;
    }
}


/** CUGNASCO **/

body.step-XL.layout-main.layout-right.edPage .content {
    min-width: inherit;
    max-width: 100rem;
}

body.step-M.edPage .displayFlex,
body.step-S.edPage .displayFlex,
body.step-XS.edPage .displayFlex {
    flex-wrap: wrap;
}

body.step-XL.layout-main.layout-right.edPage .right,
body:not(.step-XL).edPage .right {
    width: 22rem;
    max-width: 22rem;
    padding-top: 5rem;
}

body.step-XL.layout-main.layout-right.edPage main {
    width: calc(100% - 26rem);
}

.edPage .wetter {
    position: relative;
    display: inline-block;
    margin-top: 1rem;
}

.edPage .wetter img {
    width: 100%;
}

.edPage .wetterBig {
    display: none;
}

.edPage .wetterBig img {
    width: 334px;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.5);
}

.edPage .wetter:hover .wetterBig {
    display: inline-block;
    position: absolute;
    width: 334px;
    top: 0;
    right: 0;
}

body.step-L.edPage .wetter:hover .wetterBig,
body.step-M.edPage .wetter:hover .wetterBig,
body.step-S.edPage .wetter:hover .wetterBig,
body.step-XS.edPage .wetter:hover .wetterBig {
    left: 0;
    right: inherit;
}

body.step-M.edPage .wetter>img,
body.step-S.edPage .wetter>img,
body.step-XS.edPage .wetter>img {
    display: none;
}

body.step-M.edPage .wetterBig,
body.step-S.edPage .wetterBig,
body.step-XS.edPage .wetterBig {
    display: block;
}

body.step-M.edPage .wetterBig img,
body.step-S.edPage .wetterBig img,
body.step-XS.edPage .wetterBig img {
    box-shadow: none;
    max-width: calc(100vw - 6rem);
}

body.step-M.edPage .wetter:hover .wetterBig,
body.step-S.edPage .wetter:hover .wetterBig,
body.step-XS.edPage .wetter:hover .wetterBig {
    position: inherit;
    width: inherit;
    top: inherit;
    right: inherit;
}

.edPage .cugnasco>div {
    overflow: hidden;
}

.edPage .cugnasco h2:not(:first-child) {
    margin-top: 3rem;
}

.edPage figure {
    position: relative;
    margin: 0 20px 20px 0;
    padding: 10px 10px 0 10px;
    width: 250px;
    max-width: calc(100vw - 5.8rem);
    border: 1px solid gainsboro;
    background: white;
}

.edPage figcaption {
    padding: 10px 10px 0 10px;
    text-align: center;
}

.edPage figure img {
    width: 100%;
    height: auto;
}

.edPage p {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

.edPage #alertHolder .alert.warning.dialogCookieWarning {
    display: none;
}


/** AStArium kurzfristig ausblenden, bis ein neuer Abholort definiert wurde **/

.rekVerify .shippingCode.BOUNI,
.rekVerify option[value="BOUNI"] {
    display: none;
    min-height: 0;
    max-height: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    padding: 0;
    margin: 0;
}

.rekVerify .bpmSeOptionsShippingCode .select2-results .select2-result-label {
    padding: 0;
    margin: 0;
    min-height: 0;
}

.rekVerify .bpmSeOptionsShippingCode .select2-results .select2-result span.Post,
.rekVerify .bpmSeOptionsShippingCode .select2-results .select2-result span.Bote,
.rekVerify .bpmSeOptionsShippingCode .select2-results .select2-result [class*='Pickup'] {
    margin: 3px 7px 4px 7px;
    display: inline-block;
}


/** Ende AStArium **/


/* Magnific Popup CSS */

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1;
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}

.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}


/* Main image in popup */

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}


/* The shadow behind the image */

.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }
    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.theaterTextHtml {
    min-width: 33%;
}

body.step-S .theaterTextHtml,
body.step-XS .theaterTextHtml {
    min-width: 100%;
}


/** SuperBuch Startseite **/

.superbuchMA {
    position: relative;
    display: flex;
    width: 48%;
    vertical-align: top;
    margin: 0 0 0 4rem;
    overflow: hidden;
}

.flexWrapBetween .superbuchMA {
    margin: 4rem 0 0 0;
}

body.step-L .superbuchMA {
    width: calc(50% - 3rem);
    margin: 3rem 0 0 0;
}

body.step-M .superbuchMA,
body.step-S .superbuchMA,
body.step-XS .superbuchMA {
    margin: 0 0 1rem 0rem;
    width: 100%;
    height: calc((100vw - 4rem) * 0.7);
}

.superbuchAnimation {
    width: 55.6%;
}

body.step-L .superbuchAnimation {
    width: 58.6%;
}

.superbuchMA:after {
    position: absolute;
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    content: '';
    background-size: contain;
    display: inline-block;
}

.superbuchMA.superbuchRobertDuchstein:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchRobertDuchstein.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA.superbuchHeleneKremer:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchHeleneKremer.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA.superbuchAnnaScholl:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchAnnaScholl.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA.superbuchRainerMarquardt:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchRainerMarquardt.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA.superbuchJuttaRagnit:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchJuttaRagnit.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA.superbuchKatharinaWiens:after {
    background: url('/csp/shop/rekweb/css/default/images/superbuchKatharinaWiens.png') no-repeat 100% 0;
    background-size: contain;
}

.superbuchMA .biblioList {
    position: absolute;
    top: 30%;
    right: 0;
    width: 30%;
    height: 60%;
    z-index: 2;
}

.superbuchMA .biblioList .positions.flexRows .coverItem.biblioItem {
    width: 100%;
    height: 100%;
    margin: 0;
}

.superbuchMA .biblioList .positions.flexRows .coverItem.biblioItem img {
    opacity: 0;
}

.superbuchMA .listHeader {
    display: none;
}

.superbuchMA .biblioCover .cover a:before,
.superbuchMA .biblioCover>.value:before {
    display: none;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.superbuchMA .biblioItem.coverItemPlus:hover .biblioCover,
.superbuchMA .biblioItem.coverItem:hover .biblioCover {
    box-shadow: none;
    transition: none;
}

.superbuchMA .biblioItem.coverItem .biblioArticle.detailLink,
.superbuchMA .listFooter {
    display: none;
}

.superbuchMA .biblioItem.coverItem:not(.small):before {
    content: '';
    display: inline-block;
    height: 0rem;
    width: 0;
}

.superbuchMA .articleDetail.text {
    width: 80%;
    height: 85%;
    margin: 0;
    z-index: 1;
}

body.step-M .superbuchMA .articleDetail.text,
body.step-S .superbuchMA .articleDetail.text,
body.step-XS .superbuchMA .articleDetail.text {
    height: 100%;
}

.superbuchMA .articleDetail.text * {
    width: 100%;
    height: 100%;
    display: block;
}


/** SuperBuch Startseite Video und VideoExtern Startseite **/

body.step-XL .superbuchVideoStart .superbuchVideoArtikel,
body.step-L .superbuchVideoStart .superbuchVideoArtikel,
body.step-XL .VideoExternStart .VideoExternArtikel,
body.step-L .VideoExternStart .VideoExternArtikel {
    width: 58%;
    border: 1px solid #e6e8e8;
}

body.step-M .superbuchVideoStart .superbuchVideoArtikel,
body.step-S .superbuchVideoStart .superbuchVideoArtikel,
body.step-XS .superbuchVideoStart .superbuchVideoArtikel,
body.step-M .VideoExternStart .VideoExternArtikel,
body.step-S .VideoExternStart .VideoExternArtikel,
body.step-XS .VideoExternStart .VideoExternArtikel {
    order: 2;
    width: 100%;
    border: none;
}

.superbuchVideoStart .superbuchVideo,
.VideoExternStart .VideoExternBild {
    width: 40%;
    margin-top: 0;
    border: 1px solid #e6e8e8;
    text-align: right;
}

.VideoExternStart .VideoExternBild {
    text-align: right;
}

.VideoExternStart .VideoExternBild .articleDetail.text {
    margin-bottom: 0;
}

.VideoExternStart .animation.biblioAnimation .query .biblioItem.presentationItem .content,
.VideoExternStart .animation.biblioAnimation .query .biblioItem.presentationItem .content {
    border: none;
}

.VideoExternStart .animation.biblioAnimation .query .biblioItem.presentationItem .content {
    padding: 1rem 5rem 0 5rem;
}

.VideoExternStart .VideoExternBild .icon-video,
.superbuchVideoStart .icon-video {
    white-space: inherit;
}

.VideoExternStart .animation.biblioAnimation .query .biblioItem.presentationItem .content:hover {
    box-shadow: none;
    transition: none;
}

body.step-XL .VideoExternStart .animation .query>.panel .positions {
    padding-bottom: 0;
}

.ExternVideoPage {
    background: #ddd;
    padding: 0.5rem 1rem 1rem 1rem;
    margin-bottom: 3rem;
}

.ExternVideoPage:before {
    content: "Inhalt von www.tv-mittelrhein.de aus der Sendung 'HeimART'";
    display: block;
    padding: 0.2rem;
    font-weight: bold;
}

.iframeExternVideo {
    position: relative;
}

.iframeExternVideo iframe {
    width: 100%;
    height: 82rem;
    overflow-y: hidden;
}

body.step-L .iframeExternVideo iframe {
    height: 72rem;
}

body.step-M .iframeExternVideo iframe {
    height: 68rem;
}

body.step-S .iframeExternVideo iframe,
body.step-XS .iframeExternVideo iframe {
    height: 55rem;
}

main .VideoExternStart .animation .query .panel .pagination,
body.step-L main .VideoExternStart .animation .query .panel .pagination {
    vertical-align: top;
    margin-top: 25%;
}

body.step-S main .VideoExternStart .animation .query .panel .pagination,
body.step-XS main .VideoExternStart .animation .query .panel .pagination {
    margin-top: 5%;
}

.superbuchVideoStart .superbuchVideoArtikel .biblioAnimation,
.VideoExternStart .VideoExternArtikel .biblioAnimation {
    height: 100%;
}

.superbuchVideoStart .superbuchVideoArtikel .query,
.VideoExternStart .VideoExternArtikel .query {
    height: 100%;
    margin: 0;
}

.superbuchVideoStart .superbuchVideoArtikel .animation.biblioAnimation .query .biblioItem.presentationItem .content {
    padding: 1rem;
    border: none;
}

.superbuchVideoStart .superbuchVideoArtikel .biblioItem.presentationItem .background,
.VideoExternStart .VideoExternArtikel .biblioItem.presentationItem .background {
    display: none;
}

body.step-XL .superbuchVideoStart .superbuchVideoArtikel .animation .query>.panel .positions,
body.step-XL .VideoExternStart .VideoExternArtikel .animation .query>.panel .positions {
    width: 100%;
    margin: 0;
    padding: 1rem;
}

.superbuchVideoStart .superbuchVideoArtikel .animation.biblioAnimation .query .biblioItem.blurbItem,
.superbuchVideoStart .superbuchVideoArtikel .animation.biblioAnimation .query .biblioItem.blurbItem:only-child,
.VideoExternStart .VideoExternArtikel .animation.biblioAnimation .query .biblioItem.blurbItem,
.VideoExternStart .VideoExternArtikel .animation.biblioAnimation .query .biblioItem.blurbItem:only-child {
    padding: 2rem 0 3rem 0;
    border: none;
}

body.step-L .superbuchVideoStart .superbuchVideoArtikel .animation.biblioAnimation .query .biblioItem.blurbItem:only-child {
    padding: 2rem 2rem 3rem 2rem;
}

body.step-L .VideoExternStart .VideoExternArtikel .animation.biblioAnimation .query .biblioItem.blurbItem:only-child {
    padding: 2rem 5rem 3rem 5rem;
}

body.step-L .superbuchVideoStart .biblioItem.blurbItem>div,
body.step-L .VideoExternStart .biblioItem.blurbItem>div {
    padding-bottom: 1rem;
}

body.step-M .superbuchVideoStart .superbuchVideo,
body.step-S .superbuchVideoStart .superbuchVideo,
body.step-XS .superbuchVideoStart .superbuchVideo,
body.step-M .VideoExternStart .VideoExternBild,
body.step-S .VideoExternStart .VideoExternBild,
body.step-XS .VideoExternStart .VideoExternBild {
    margin: 0 0 2rem 0rem;
    width: 100%;
    border: none;
}

.superbuchVideo h6,
.VideoExternBild h6 {
    margin: 1rem 1rem 0.5rem 1rem;
}

body.step-XS .superbuchVideo h6 .icon-video:before,
body.step-S .superbuchVideo h6 .icon-video:before,
body.step-XS .VideoExternBild h6 .icon-video:before,
body.step-S .VideoExternBild h6 .icon-video:before {
    top: -0.4rem;
}

.iframeWrap {
    width: 100%;
    height: 100%;
    text-align: right;
    margin: 0.8rem 0 1rem 0;
    background: #000;
    position: relative;
    padding-bottom: 56.25%;
    /* ratio 16x9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.superbuchVideoStart .iframeWrap {
    margin-top: 0;
}

.iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body.step-M .superbuchVideo iframe,
body.step-S .superbuchVideo iframe,
body.step-XS .superbuchVideo iframe {
    width: 100%;
}


/** SuperBuch-Seite mit allen Videos **/

.superbuchVideosAlle .superbuchVideo {
    background: #f6f6f6;
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 2rem 0;
}

body.step-XL .superbuchVideosAlle .superbuchVideoArtikel {
    width: 58%;
    min-height: 31rem;
}

.superbuchVideosAlle .superbuchVideoVideo {
    width: 38%;
    text-align: right;
    margin: 0.8rem 0 1rem 0;
    background: #000;
}

body:not(.step-XL) .superbuchVideosAlle .superbuchVideoArtikel {
    width: 100%;
    order: 2;
}

body:not(.step-XL) .superbuchVideosAlle .superbuchVideoVideo {
    width: 100%;
    text-align: right;
    margin: 0.8rem 0 1rem 0;
    background: #000;
    position: relative;
    padding-bottom: 56.25%;
    /* ratio 16x9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
}

body:not(.step-XL) .superbuchVideosAlle .superbuchVideoVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.superbuchVideosAlle .animation.biblioAnimation .query .biblioItem.presentationItem .content {
    padding: 1rem;
}

body.step-XL .superbuchVideosAlle .animation .query,
body.step-XL .superbuchVideosAlle .biblioAnimation,
body.step-XL .superbuchVideosAlle .animation .query>.panel,
body.step-XL .superbuchVideosAlle .animation .query>.panel .positions,
body.step-XL .superbuchVideosAlle .animation .query>.panel .positions .viewport.active:only-child,
body.step-XL .superbuchVideosAlle .animation.biblioAnimation .query .biblioItem.presentationItem .content {
    height: 100%;
}

body.step-XL .superbuchVideosAlle .animation .query>.panel .positions {
    padding-bottom: 0;
}

.superbuchVideosAlle .animation .query {
    margin-bottom: 1rem;
}

body.step-M .superbuchVideosAlle .animation.biblioAnimation .query .biblioItem.alternativeItem,
body.step-S .superbuchVideosAlle .animation.biblioAnimation .query .biblioItem.alternativeItem,
body.step-XS .superbuchVideosAlle .animation.biblioAnimation .query .biblioItem.alternativeItem {
    padding: 0 0 0 0.2rem;
    border: none;
}

body.step-S .cellPrice:last-child,
body.step-XS .cellPrice:last-child {
    width: 12rem;
}


/** AKR, zusaetzliche styles fuer PhotoSwipe. Hier belassen und nicht in photoswipe.css unterbringen, sonst Bilblitzer!!! **/

.biblio.detail .my-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.my-gallery figure {
    position: relative;
}

.biblio.detail .my-gallery figure {
    min-width: 9rem;
    max-width: 18rem;
    margin: 0 2% 3% 0;
    width: 17%;
    background: #f6f6f6;
}

.my-gallery figure:first-child:after {
    content: attr(data-titel);
    width: auto;
    background: #66a99c;
    display: inline-block;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    font-size: 1.8rem;
    color: #fff;
    border-radius: 0.3rem;
    border: 1px solid #66a99c;
    cursor: pointer;
}

.my-gallery figure:first-child:before {
    content: '\e62f';
    position: absolute;
    left: 0.5rem;
    top: 0.6rem;
    pointer-events: none;
    z-index: 2;
    height: 2rem;
    width: 2rem;
    color: #fff;
    font-family: beeIcons;
    font-size: 2rem;
    speak: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-gallery figure img {
    display: none;
}

.my-gallery figure~figure,
.biblio.detail .my-gallery figure:first-child:after,
.biblio.detail .my-gallery figure:first-child:before {
    display: none;
}

.biblio.detail .my-gallery figure img,
.biblio.detail .my-gallery figure~figure {
    display: inline-block;
}


/** Falls einige Bilder aus der Galerie angezeigtwerden sollen, wird .showGalerie z.B. an main vergeben **/

.showGalerie .my-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.showGalerie .my-gallery figure {
    display: inline-block;
    max-width: 15%;
    margin-right: 1rem;
}

body:not(.step-XL):not(.step-L) .showGalerie .my-gallery figure {
    max-width: 20%;
}

.showGalerie .photoSwipeFigure100 .my-gallery figure {
    display: inline-block;
    max-width: inherit;
}

body:not(.step-XL):not(.step-L) .showGalerie .my-gallery figure {
    max-width: 10rem;
}

.showGalerie .photoSwipeFigure100>div {
    max-width: 48%;
}

body:not(.step-XL):not(.step-L) .showGalerie .photoSwipeFigure100>div,
body:not(.step-XL):not(.step-L) .showGalerie .photoSwipeFigure100 .my-gallery figure {
    max-width: 100%;
    width: 100%;
}

.showGalerie .my-gallery figure img {
    display: inline-block;
}

.showGalerie .my-gallery figure:first-child:after {
    display: none;
}


/** containerOtherScript mit PhotoSwipe-Code IN (!) CMS-Text unterhalb image ablegen. CMS-Text muss .positionRelative erhalten! **/

.photoSwipeBehindImage {
    position: absolute;
    bottom: 2rem;
    width: 98%;
    height: 38%;
}

.photoSwipeBehindImage .my-gallery,
.photoSwipeBehindImage .my-gallery figure:first-child,
.photoSwipeBehindImage .my-gallery figure:first-child a {
    display: block;
    width: 100%;
    height: 100%;
}

.photoSwipeBehindImage .my-gallery figure:first-child:before,
.photoSwipeBehindImage .my-gallery figure:first-child:after {
    content: none;
}

.detail .employeesList {
    display: none;
}

.detail [class^='ranking-'],
.result [class^='ranking-'] {
    display: none;
}

.cmsText>div {
    display: flex;
}

.overlay .breadcrumb {
    display: none;
}

.overlay .dialogContainment h1 {
    margin-right: 3rem;
}

.overlay .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.overlay .close:before {
    color: #333;
    background: #fff;
    border-radius: 50%;
    line-height: 3.8rem;
}

body.step-XS .overlay .close:before,
body.step-S .overlay .close:before {
    line-height: 3.8rem;
}

.overlay .close:hover:before {
    color: #777;
    background: #ccc;
}

.overlay .content .dialogHeading h3 {
    margin-right: 3.3rem;
}

.resultPage .overlay .content .dialogHeading h3,
.detailPage .overlay .content .dialogHeading h3 {
    color: #fff;
}

.closeInMain {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    background: #000;
    color: #fff;
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.closeInMain:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\e608';
    display: block;
    color: #e6e8e8;
    font-family: beeIcons;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.vat,
.vat a {
    color: #999;
    font-weight: 400;
}

body.step-M .basket .shipping .flexShipping .cellSummary,
body.step-S .basket .shipping .flexShipping .cellSummary,
body.step-XS .basket .shipping .flexShipping .cellSummary {
    display: block;
    width: 100%;
}


/** MY-Umzug, nur temporaer **/

.icon-location a:after {
    display: none !Important;
}

.overlay .breadcrumb {
    display: none;
}

.overlay .dialogContainment h1 {
    margin-right: 3rem;
}

.closeInMain {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    background: #000;
    color: #fff;
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.closeInMain:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\e608';
    display: block;
    color: #e6e8e8;
    font-family: beeIcons;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.umzugMY {
    border: 5px solid #ff4a5d;
}

.firmengeschichte .makeBox1 {
    padding: 0 0 0 0;
    background: #fcfcfc;
}

.firmengeschichte .displayFlex>div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.firmengeschichte .displayFlex>div h2 {
    width: 100%;
}

.firmengeschichte .flexWrapBetween.template4>div {
    max-width: 24%;
}

.firmengeschichte .flexWrapBetween.template3>div {
    max-width: 32%;
}

.firmengeschichte .flexWrapBetween.template2>div {
    max-width: 49%;
}

.firmengeschichte .displayFlex.textLeft>div div {
    width: 67%;
    padding: 0rem;
}

.firmengeschichte .displayFlex.textLeft>div div:first-of-type {
    width: 33%;
    padding: 1rem 3rem 1rem 1rem;
}

.firmengeschichte .displayFlex.textRight>div div {
    width: 33%;
    padding: 1rem 1rem 1rem 3rem;
}

.firmengeschichte .displayFlex.textRight>div div:first-of-type {
    width: 67%;
    padding: 0;
}

.firmengeschichte .displayFlex.textUnder>div div {
    width: 100%;
    padding: 1rem;
}

.firmengeschichte .displayFlex.textUnder>div div:first-of-type {
    width: 100%;
    padding: 0;
}

body:not(.step-XL):not(.step-L) .firmengeschichte .flexWrapBetween.template4>div,
body:not(.step-XL):not(.step-L) .firmengeschichte .flexWrapBetween.template3>div,
body:not(.step-XL):not(.step-L) .firmengeschichte .flexWrapBetween.template2>div {
    width: 100%;
    max-width: 100%;
}

body:not(.step-XL):not(.step-L) .firmengeschichte .displayFlex.textLeft>div>div:first-of-type {
    order: 2;
}

body:not(.step-XL):not(.step-L) .firmengeschichte .displayFlex.textRight>div div,
body:not(.step-XL):not(.step-L) .firmengeschichte .displayFlex.textLeft>div div,
body:not(.step-XL):not(.step-L) .firmengeschichte .displayFlex.textRight>div div:first-of-type,
body:not(.step-XL):not(.step-L) .firmengeschichte .displayFlex.textLeft>div div:first-of-type {
    width: 100%;
    padding: 1rem;
}


/** RELEASE 4.1.6 **/


/** bpm-teaser **/

.bobble,
.animation .query>.panel .bobble~.bobble,
.animation .query>.panel .locator~.bobble {
    display: none;
}

.teaser .articleItem.coverItem:hover,
.teaser .articleItem.coverItem:focus,
.teaser .articleItem.coverItem>a:hover .articlePicture .value {
    box-shadow: none;
    transition: none;
}

body:not(.step-XL) .headerBasketPreview .icon-basket span {
    display: none;
}

body.bodyhandsofgod {
    background: #444749;
}

body.bodyhandsofgod header {
    border-bottom: none;
}

body.bodyhandsofgod main *,
body.bodyhandsofgod .external a:hover:after {
    color: #fffcdf;
}

.handsofgod {
    justify-content: space-between;
    flex-wrap: wrap;
}

body.bodyhandsofgod .rekImage img {
    border: none;
    box-shadow: none;
}

.handsofgod .marginBottom5 {
    width: 18%;
    width: 31%;
    min-width: 20rem;
    position: relative;
    padding-bottom: 4rem;
}

body.bodyhandsofgod main .button {
    position: absolute;
    bottom: 0.5rem;
}

body.bodyhandsofgod main .button>:first-child {
    background-color: #fffcdf !important;
    color: #444749;
    font-weight: 600;
    font-size: 1.7rem;
}

body.step-XS .handsofgod .marginBottom5,
body.step-S .handsofgod .marginBottom5 {
    width: 100%;
    margin-right: 0;
}

.handsofgod h4 {
    text-align: center;
}

.handsofgod strong {
    font-size: 1.8rem;
}