@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

@font-face {
    font-family: OpenSansExtraBold;
    src: url(../fonts/OpenSans-ExtraBold.woff);
}

@font-face {
    font-family: OpenSansBold;
    src: url(../fonts/OpenSans-Bold.woff);
}

@font-face {
    font-family: OpenSans;
    src: url(../fonts/OpenSans-Regular.woff);
}

@font-face {
    font-family: 'BRLNSR';
    src: url(../fonts/BRLNSR.woff);
}

.gjs-cell{
    min-height: 75px;
}


body:not(.gjs-dashed)  {
    font-family: OpenSans, sans-serif;

    /* Full height */
    height: 100%;

    font-size: 14px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding-top: 90px;
}

.h1, h1 {
    font-size: 2.4rem;
}

.heft-icons img{
    max-height: 25px;
}

.heft-icons img:not(:last-child){
    margin-right: 15px;
}

.heft-beschreibung h4, h3 {
    font-family: 'BRLNSR' !important;
    margin-bottom: 0.7rem;
}


.berlin-sans-headline{
    font-style: normal;
    font-weight: 600;
    font-family: 'BRLNSR' !important;
}


.berlin-sans-bold{
    font-style: normal;
    font-weight: bolder;
    font-family: 'BRLNSR' !important;
}





.besonder-widget{
    border-radius: 0 0 50% 50%;
    background: white;
}

.container.content h4, .berlin-sans-headline{
    font-family: 'BRLNSR' !important;
    font-style: normal;
    font-weight: 600;
}

.border-bottom-dark{
    border-bottom: 1px solid gray;
}



.text-hehe-rot{
    color: #fe0002;
}

.index-besonders-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(36%,-50%);
}



.index-content-center{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 20px;

}

.index-presse-center{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 5px;

}

.index-basteln-center{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 20px;

}

.index-sing-center{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 20px;

}

.index-umschlagseite-center, .index-wiffzack-center{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 20px;
}

.index-esquirrel-bottom{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;

}

.top-seller-header{
    border-bottom: 1px solid #f4999c;
    margin: 0 10px 0 10px;
}

.referenz-header{
    border-bottom: 1px solid #77c1b1;
    margin: 0 10px 0 10px;
}


.zoomhover .item-img-hover {
    position: relative;
    overflow: hidden;
}
.zoomhover  .item-img-hover img {
    max-width: 100%;

    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.zoomhover:hover .item-img-hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.circle-border{
    border-radius: 50%;
}

.round-border{
    border-radius: 10px;
    padding: 3px;
}


.open-sans-bold{
    font-family: OpenSansBold;
}

.white-highlight{
    background: white;
}

.white-highlight:hover{
    background: white;
    text-decoration: none;
}

.black-highlight{
    background: black;
}

.wiffzack-highlight{
    background: #73bbad;
}

.text-schief{
    -webkit-transform: rotate(338deg);
    -moz-transform: rotate(338deg);
    -o-transform: rotate(338deg);
    writing-mode: lr-tb;
}

.bg-grey {
    background: #eaeaea;
}

.bg-lightgrey {
    background: #cbcbcb;
}

.text-rosa{
    color: #f4999c;
}

.text-black{
    color: #000;
}

.bg-orange{
    background: #f4964f;
}

.bg-orange:hover{
    background: #fce0cb;
}


.bg-aut{
    background: rgb(255,0,0);
    background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 63%, rgba(255,0,0,1) 100%);
}

.bg-aut:hover {
    background: rgb(255,0,0.77);
    background: linear-gradient(0deg, rgba(255, 0, 0, 0.77) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 63%, rgba(255,0,0,0.77) 100%);
}

.bg-lila{
    background: #977fb9;
}

.bg-lila:hover{
    background: #a793bb;
}

.border-lila{
    border: 4px solid #8057af;
}

.bg-pink{
    background: #e6007e;
}

.bg-pink:hover{
    background: #de4498;
}

.border-pink{
    border: 4px solid #8a044c;
}

.bg-rosa{
    background: #f4999c;
}

.bg-rosa:hover{
    background: #b7323c;
}

.bg-blau{
    background: #5270b6;
}

.bg-blau:hover{
    background: #7484a8;
}

.zoomhover a{
    text-decoration: none;
}

.border-rosa{
    border: 4px solid #f4999c;
}

.border-orange{
    border: 4px solid #dc824c;
}

.border-blau{
    border: 4px solid #5270b6;
}



.bg-rosa2{
    background: #ee6266;
}

.bg-rosa2:hover{
    background: #ffa1a4;
}

.bg-rosa2:hover .bg-rosa2-text-hover{
    background: white;
    color: #000;
}

.bg-tuerkis{
    background: #77c1b1;
}

.bg-tuerkis:hover{
    background: #218969;
}

.bg-tuerkis-hover:hover .bg-tuerkis{
    background: #218969 !important;
}

.border-tuerkis{
    border: 4px solid #77c1b1;
}

.text-tuerkis{
    background: #77c1b1;
}

.bg-tuerkis2{
    background: #218969;
}

.bg-tuerkis2:hover{
    background: #77c1b1;
}

.referenz-widget:hover{
    background: #dcfff8;
}


.f-0-8{
    font-size: 0.8em;
}

.f-0-9{
    font-size: 0.9em;
}

.border-white{
    border: 4px solid #ffffff;
}

.f-1{
    font-size: 1em;
}

.f-1-2{
    font-size: 1.2em;
}

.f-1-3{
    font-size: 1.3em;
}

.f-1-4{
    font-size: 1.4em;
}

.f-1-5{
    font-size: 1.5em;
}

.f-1-6{
    font-size: 1.6em;
}

.f-1-7 {
    font-size: 1.7em;
}

.f-1-8 {
    font-size: 1.8em;
}

.f-1-9 {
    font-size: 1.9em;
}

.f-2 {
    font-size: 2em;
}

.f-2-3 {
    font-size: 2.3em;
}

.f-2-5 {
    font-size: 2.5em;
}

.f-2-8 {
    font-size: 2.8em;
}

.f-3 {
    font-size: 3em;
}

.tmp-bg{
    background: mistyrose;
}

.tmp-bg2{
    background: yellow;
}

.w-80{
    width: 80%;
}

.w-20{
    width: 20%;
}

.btn-default {
    background-color: #e4e3d7;
    border-color: #ccc;
}

.btn-group-xs > .btn, .btn-xs {
    padding  : .25rem .4rem;
    font-size  : .875rem;
    line-height  : .5;
    border-radius : .2rem;
}

.yellow-highlight {
    background: #FFFF66;
}

.green-highlight, .pink-highlight, .yellow-highlight {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 3px;
}

/* Bootstrap */

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}

.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px;
}

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* End Bootstrap */


.ref-sidemenu li.active{
    background: #ececec;
    color: black;
    text-decoration: none;
}


/* Shop */

.bs-wizard {margin-top: 10px;}

.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 14px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 12px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #dce5c9; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #a4c490; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #dce5c9;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }





.bestellung_livesummary2, .bestellung_liveerrors_caption{
    font-size: 14px;
}

.bestellschein-head-2018{
    font-size: 15px;
}


.nav-tabs > li > a, .nav-tabs > li > a:focus {
    background-color: #cecece;
    line-height: 13px;
    margin-top: 7px;
    color: #000;
}

.nav > li > a, .ref-sidemenu li > div {
    position: relative;
    display: block;
    padding-top: 22px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.nav-tabs > li.active > a, .nav-tabs > li > a.active, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .nav-tabs > li > a:hover {
    background-color: #ececec;
    font-weight: bold;
    margin-top: 0;
    height: 100%;
    border: 1px solid #cecece;
    /*line-height: 20px;*/
}



div.produkttable > table, div.produkttable > table > tbody > tr > td {
    padding: 2px;
    border: 1px solid black;
    font-size: 12px;
}


/* eig */
div.produkttable.kategorie-eig > table > thead > tr > td {
    background-color: rgba(174, 36, 48, 1);
}

div.produkttable.kategorie-eig > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(174, 36, 48, 0.2) !important;
}

/* hap */
div.produkttable.kategorie-hap > table > thead > tr > td {
    background-color: rgba(223, 156, 83, 1);
}

div.produkttable.kategorie-hap > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(223, 156, 83, 0.2) !important;
}

/* green */
div.produkttable.kategorie-green > table > thead > tr > td {
    background-color: #aec94b;
    color: black;
}

div.produkttable.kategorie-green > table > tr.subkategorieHeader > td {
    font-weight: bold;
    font-size: 1.3em;
    height: 15px;
}

div.produkttable.kategorie-green > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(174, 201, 75, 0.2) !important;
}

div.produkttable.kategorie-green > table > tbody > tr:nth-child(odd) > td {
    background-color: transparent;
}

div.produkttable > table > tbody > tr > td > img.format_logo {
    vertical-align: middle;
    text-align: center;
}

div.produkttable .umschlag_logo {
    vertical-align: bottom;
    text-align: center;
    padding: 0;
}

.smallHead {
    font-size: .8em;
    font-weight: bold;
}

.table-bestellschein .isbn {
    font-size: .7em;
}

table.table-nolines {
    border:none;
}

.produkttable .table-sonderedition table.table-nolines tr:nth-of-type(odd) td,
.produkttable .table-sonderedition table.table-nolines tr:nth-of-type(even) td {
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;

}


table > tbody > tr > td.center {
    text-align: center;
}
.stattPreis {
    color: darkgreen;
    font-size: .75em;
    text-decoration: none;
}
.stattPreis:before {
    content:'statt ';
}


div.produkttable.kategorie-hap > table > tbody > tr.st:nth-child(even) > td {
    background-color: rgba(223, 156, 83, 0.2);
}

div.produkttable.kategorie-hap > table > tbody > tr.st:nth-child(odd) > td {
    background-color: transparent;
}


div.produkttable.kategorie-hap > table > tbody > tr.so:nth-child(even) > td,
div.produkttable.kategorie-hap> table > tbody > tr > td > table > tbody > tr:nth-child(even) > td
{
    background-color: rgba(223, 156, 83, 0.2);
}

div.produkttable.kategorie-hap > table > tbody > tr > td > table > tbody > tr > td{
    padding: 2px;
    border: 1px solid black;
    font-size: 12px;
}

div.produkttable.kategorie-hap > table > tbody > tr > td > table > tbody > tr > td:last-child{
    border-right: none;
}

div.produkttable.kategorie-hap > table > tbody > tr.so:nth-child(odd) > td {
    background-color: transparent;
}

div.produkttable.kategorie-hap > table > tbody > tr > td.lineaturtyp_header {
    color: rgba(223, 156, 83, 1);
}






div.produkttable.kategorie-green.kategorie-at > table > tbody > tr.st:nth-child(even) > td {
    background-color: rgba(174, 201, 75, 0.2)
}

div.produkttable.kategorie-green > table > tbody > tr.st:nth-child(odd) > td {
    background-color: transparent;
}


div.produkttable.kategorie-green.kategorie-at > table > tbody > tr.so:nth-child(even) > td,
div.produkttable.kategorie-green.kategorie-at> table > tbody > tr > td > table > tbody > tr:nth-child(even) > td
{
    background-color: rgba(174, 201, 75, 0.2)
}

div.produkttable.kategorie-green.kategorie-at > table > tbody > tr > td > table > tbody > tr > td{
    padding: 2px;
    border: 1px solid black;
    font-size: 12px;
}

div.produkttable.kategorie-green.kategorie-at > table > tbody > tr > td > table > tbody > tr > td:last-child{
    border-right: none;
}

div.produkttable.kategorie-green > table > tbody > tr.so:nth-child(odd) > td {
    background-color: transparent;
}

div.produkttable.kategorie-green > table > tbody > tr > td.lineaturtyp_header {
    color: rgb(132, 159, 73);
}





div.produkttable.kategorie-eig > table > tbody > tr.st:nth-child(even) > td {
    background-color: rgba(174, 36, 48, 0.2);
}

div.produkttable.kategorie-eig > table > tbody > tr.st:nth-child(odd) > td {
    background-color: transparent;
}

div.produkttable.kategorie-eig > table > tbody > tr.so:nth-child(even) > td,
div.produkttable.kategorie-eig > table > tbody > tr > td > table > tbody > tr:nth-child(even) > td
{
    background-color: rgba(174, 36, 48, 0.2);
}

div.produkttable.kategorie-eig > table > tbody > tr > td > table > tbody > tr > td{
    padding: 2px;
    border: 1px solid black;
    font-size: 12px;
}

div.produkttable.kategorie-eig > table > tbody > tr > td > table > tbody > tr > td:last-child{
    border-right: none;
}

div.produkttable.kategorie-eig > table > tbody > tr.so:nth-child(odd) > td
{
    background-color: transparent;
}

div.produkttable.kategorie-eig > table > tbody > tr > td.lineaturtyp_header {
    color: rgb(174, 36, 48);
}




div.produkttable > table > tbody > tr > td.format_logo {
    border-right: none;
    background-color: transparent !important;
}

div.produkttable > table > tbody > tr > td.lineaturtyp_header {
    font-size: 1.2em;
    background-color: transparent !important;
    font-weight: bold;
    border-left: none;
    border-right: none;
    padding-left: 0;
    text-align: left;
}

div.produkttable > table {
    background-color: #F9F9F9;
}

.produkttable .table-sonderedition tr:nth-child(odd):not(.subkategorieHeader) td {
    background-color: #e3e3e3 /*rgba(128, 178, 225, 0.20)*/;
}

.table-zusatzprodukte .subkategorieHeader td {
    background-color: #a381b6;
    color:white;
    font-weight: bold;
    font-size: 2em;
}

.table-zusatzprodukte .subkategorieHeader.normaltext td {
    font-weight: normal;
    font-size: 1em;
}

.produkttable .table-zusatzprodukte tr:nth-child(odd):not(.subkategorieHeader) td {
    background-color: rgba(163, 129, 182, 0.2);
}



.produkttable .table-sonderedition tr td {
    padding: 5px;
}

.produkttable .table-sonderedition tr.subkategorieHeader td {
    font-weight: bold;
    font-size: 1.3em;

}

.produkttable .table-zusatzprodukte tr td {
    padding: 5px;
}

.produkttable .table-zusatzprodukte tr.subkategorieHeader td {
    font-weight: bold;
    font-size: 1.3em;

}

div.produkttable > table > thead > tr > td {
    background-color: #9B363B;
    color: white;
    padding: 2px;
    font-size: 14px;
}

div.produkttable > table, div.produkttable > table > tbody > tr > td {
    padding: 2px;
    border: 1px solid black;
    font-size: 12px;
}

/* eig */
div.produkttable.kategorie-eig > table > thead > tr > td {
    background-color: rgba(174, 36, 48, 1);
}

div.produkttable.kategorie-eig > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(174, 36, 48, 0.2) !important;
}

/* hap */
div.produkttable.kategorie-hap > table > thead > tr > td {
    background-color: rgba(223, 156, 83, 1);
}

div.produkttable.kategorie-hap > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(223, 156, 83, 0.2) !important;
}

/* green */
div.produkttable.kategorie-green > table > thead > tr > td {
    background-color: #aec94b;
    color: black;
}

div.produkttable.kategorie-green > table > tr.subkategorieHeader > td {
    font-weight: bold;
    font-size: 1.3em;
    height: 15px;
}

div.produkttable.kategorie-green > table > tbody > tr > td.umschlag_logo {
    background-color: rgba(174, 201, 75, 0.2) !important;
}

div.produkttable.kategorie-green > table > tbody > tr:nth-child(odd) > td {
    background-color: transparent;
}

div.produkttable > table > tbody > tr > td > img.format_logo {
    vertical-align: middle;
    text-align: center;
}

div.produkttable .umschlag_logo {
    vertical-align: bottom;
    text-align: center;
    padding: 0;
}

.table-sonderedition .subkategorieHeader td {
    background-color: #80b2e1;
    font-weight: bold;
    font-size: 2em;
    color: black;
}

span.name {
    font-size: 1.3em;
    font-weight: bold;
}

.mengeinput {
    width: 50px;
    text-align: right;
    border: 1px solid grey;
}


.bestellscheinbox.active {
    background-color: #218969;
    color: white;
}

.btn.btn-success, .btn.btn-primary{
    background-color: #218969;
    border-color-color: #217757;
}

.btn.btn-success:hover,  .btn.btn-primary:hover{
    background-color: rgba(33, 137, 105, 0.90);
    border-color-color: rgba(33, 119, 87, 0.90);
}


.produkttable .table-sonderedition tr:nth-of-type(2n+1) > td.ohne_ke.anz-hefte-bg, .produkttable .table-sonderedition tr:nth-of-type(2n) > td.mit_ke_klasse.anz-kl-bg{
    background-color: #d8ebe6;
}


.table-sonderedition .subkategorieHeader.KIGA td {
    background-color: #e5cbf1;
}

.table-sonderedition .subkategorieHeader.Schreiben  td {
    background-color: #ffdff7 ;
}

.table-sonderedition .subkategorieHeader.Lesen  td {
    background-color: #e0ffe4 ;
}

.table-sonderedition .subkategorieHeader.Englisch  td {
    background-color: #ffdfdf ;
}

.table-sonderedition .subkategorieHeader.Deutsch  td {
    background-color: #fffadf ;
}

.table-sonderedition .subkategorieHeader.Lernbuch  td {
    background: #cbd4fe;
    background: -moz-linear-gradient(left, #cbd4fe 0%, #ffe9ab 100%);
    background: -webkit-linear-gradient(left, #cbd4fe 0%,#ffe9ab 100%);
    background: linear-gradient(to right, #cbd4fe 0%,#ffe9ab 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd4fe', endColorstr='#ffe9ab',GradientType=1 );
}



.bestellscheinbox {
    padding-top: 0px;
    padding-bottom: 10px;
    border: 1px solid #dce5c9;
    text-align: center;
    height: 90px;
    display: block;
    cursor: pointer;
    float: left;
    width: 140px;
}

.bestellscheinbox:not(.active):hover {
    background-color: rgba(0,0,0,.1);
}

.bestellscheinbox.add > i.fa {
    color: #218969;
    margin-top: 20px;
    margin-bottom: 10px;
}



.bestellscheinbox.add {
    border-style: dashed;
}



.bestellscheinbox-container {
    margin: 10px;
    text-align: center;
    /*height: 175px;*/
    display: block;
    float: left;
    position: relative;
}

.bestellscheinbox-container .bestellungRenameBestellschein {
    position: absolute;
    bottom: 0;
    left: 2px;
    display: block;
}

.bestellscheinbox-container .bestellungRemoveBestellschein {
    position: absolute;
    bottom: 0;
    right: 2px;
    display: inline-block;
}



/* Shop End */





.bs-callout {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #eee;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 20px;
}
.bs-callout h4 {
    margin-bottom: 5px;
    margin-top: 0;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout + .bs-callout {
    margin-top: -5px;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}






label.required::after {
    content: ' *';
    color: red;
}

.fixed-bottom-right {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1030;
}

.fixed-top-right {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
}

.red{
    color: red;
}

.top-bottom-orage-border{
    border-top: 2px solid #f4964f;
    border-bottom: 2px solid #f4964f;
    padding-top: 5px;
    padding-bottom: 5px;
}

.max-h-200{
    max-height: 200px;
}

.min-h-200{
    min-height: 200px;
}


.no-obj{
    background: #ececec;
}

.text-bold{
    font-weight: bold;
}

.text-extra-bold{
    font-weight: bolder;
}

.text-bold-600{
    font-weight: 600;
}

.text-bold-900{
    font-weight: 900;
}

.text-normal{
    font-weight: normal;
}

.no-text-decoration-link, .no-text-decoration-link:hover, .no-text-decoration-link:visited{
    text-decoration: none;
}

.l-black, .l-black:hover, .l-black:visited{
    color: black;
}

.l-white, .l-white:hover, .l-white:visited{
    color: white;
}

.hh-main-container{
    margin-top: 10px;
}


.spacer{
    height: 30px;
}

.spacer-15{
    height: 15px;
}

.spacer-10{
    height: 10px;
}

.spacer-8{
    height: 8px;
}

.spacer-6{
    height: 6px;
}
.spacer-3{
    height: 3px;
}

.stattPreis {
    color: #ff5351;
    text-decoration: line-through;
    font-size: 0.8em;
}
.stattPreis-ts {
    color: #ff5351;
    text-decoration: line-through;
    font-size: 0.8em;
}

.stattPreis::before {
    content: 'statt ';
}

.hh-grey-box{
    background: #dfdfdf;
    border-radius: 5px;
}


.input-2019 {
    background: #E6E6E6;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    height: 25px;
    padding: 0 15px;
}


.btn-2019-green{
    background: #218969;
    border: 1px solid #1c755a;
    border-radius: 10px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1.5em;
}

.btn-2019-green:hover {
    background: rgba(33, 137, 105, 0.91);
    border: 1px solid rgba(28, 117, 90, 0.91);
}


.btn-2019-bestellen{
    background: #f4964f;
    border: 1px solid #f4964f;
    border-radius: 10px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1.5em;
}

.btn-2019-bestellen:hover {
    background: rgba(244, 150, 79, 0.9);
    border: 1px solid rgba(244, 150, 79, 0.9);
}

.btn-2021-kat{
    background: #ff8080;
    border: 1px solid #ff0000;
    border-radius: 10px;
    padding: 0 15px;
    cursor: pointer;
}

.btn-2021-kat.active-kat{
    background: #f43c3b;
    border: 1px solid #ff1100;
    cursor: none;
}


.btn-2021-kat:hover{
    background: #f45b5b;
    border: 1px solid #ff0000;
}


.btn-2019-download{
    background: #ff8080;
    border: 1px solid #ff0000;
    border-radius: 10px;
    height: 25px;
    padding: 0 15px;
    cursor: pointer;
}

.btn-2019-download:hover{
    background: #f45b5b;
    border: 1px solid #ff0000;
}

.btn-2019-orage{
    background: #f4964f;
    border: 1px solid #dc824c;
    border-radius: 20px;
    height: 25px;
    padding: 0 15px;
    color: #000;
    cursor: pointer;
}

.btn-2019-orage:hover{
    background: rgba(244, 150, 79, 0.91);
    border: 1px solid rgba(220, 130, 76, 0.91);
}

.btn-2023-pink{
    background: #e6007e;
    border: 1px solid #ab025e;
    border-radius: 20px;
    height: 25px;
    padding: 0 15px;
    color: #000;
    cursor: pointer;
}

.btn-2023-pink:hover{
    background: rgba(230, 0, 126, 0.85);
    border: 1px solid rgba(171, 2, 94, 0.91);
}



.btn-2019-green-suchen{
    background: #a1a8a7;
    border: 1px solid #7d8483;
    border-radius: 20px;
    height: 25px;
    padding: 0 2px;
    color: #fff;
    cursor: pointer;
}

.btn-2019-green-suchen:hover {
    background: #b9c0bf;
    border: 1px solid #979e9d;
}



.btn-2019-mehr {
    background: #f7f7f7;
    border: 1px solid #b7b7b7;
    border-radius: 20px;

    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2019-mehr:hover {
    background: #e7e7e7;
    border: 1px solid #9c9c9c;
    color: #000;

}

.btn-2019-mehr:visited{
    color: #000;
    text-decoration: none;
}

.btn-2019.disabled {
    cursor: not-allowed;
}


.btn-2019 {
    background: #f7f7f7;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    height: 25px;
    padding: 0 15px;
    color: #000;
    cursor: pointer;
}

.btn-2019:disabled {
    cursor: not-allowed;
}

.btn-2019:disabled:hover{
    background: #f7f7f7;
    text-decoration: none;
}


.btn-2019:visited{
    color: #000;
    text-decoration: none;
}

.btn-2019:hover{
    background: #E6E6E6;
    text-decoration: none;
}

/* FAQ */
.faq-nav {
    flex-direction: column;
    margin: 0 0 32px;
    border-radius: 2px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}
.faq-nav .nav-link {
    position: relative;
    display: block;
    margin: 0;
    padding: 13px 16px;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    color: #616161;
    transition: background-color 0.2s ease;
}
.faq-nav .nav-link:hover {
    background-color: #f6f6f6;
}
.faq-nav .nav-link.active {
    background-color: #f6f6f6;
    font-weight: 700;
    color: rgba(0, 0, 0, .87);
}
.faq-nav .nav-link:last-of-type {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom: 0;
}
.faq-nav .nav-link i.mdi {
    margin-right: 5px;
    font-size: 18px;
    position: relative;
}
.tab-content {
    box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
    padding: 5px;
}
.tab-content .card {
    border-radius: 0;
}
.tab-content .card-header {
    padding: 15px 16px;
    border-radius: 0;
    background-color: #f6f6f6;
}
.tab-content .card-header h5 {
    margin: 0;
}
.tab-content .card-header h5 button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    font-weight: 700;
    color: rgba(0, 0, 0, .87);
    text-align: left;
    white-space: normal;
}
.tab-content .card-header h5 button:hover, .tab-content .card-header h5 button:focus, .tab-content .card-header h5 button:active, .tab-content .card-header h5 button:hover:active {
    text-decoration: none;
}
.tab-content .card-body p {
    color: #616161;
}
.tab-content .card-body p:last-of-type {
    margin: 0;
}
.accordion > .card:not(:first-child) {
    border-top: 0;
}
.collapse.show .card-body {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

/* breadcrumb */

.breadcrumb {
    padding: .5rem .75rem;
}

.breadcrumb > .breadcrumb-item {
    font-size: 13px;
}

/* Main navigation */

.hh-nav .navbar-toggler{
    background: #464646;
}



.hh-nav .nav > li > a {
    position: relative;
    display: block;
    padding-top: 0 !important;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}


.hh-nav {
    min-height: 82px;
    border-bottom: 1px solid #EFEFEF;
    background: #FCFCFC;
    padding-bottom: 0;
}

.hh-nav-items > .nav-item{
    border-bottom: 2px solid;
}

.hh-nav-items > .color1{
    border-color: #fee64d;
}


.hh-nav-items > .color2{
    border-color: #f9c94d;
}

.hh-nav-items > .color3{
    border-color: #f4964f;
}

.hh-nav-items > .color4{
    border-color: #ee6266;
}


.bestellung_bestellschein .bestellschein .nav.nav-tabs .color1:hover{
    background-color: rgba(253, 247, 209, 0.99);
}

.bestellung_bestellschein .bestellschein .nav.nav-tabs .color2:hover{
    background-color: rgba(252, 240, 209, 0.99);
}

.bestellung_bestellschein .bestellschein .nav.nav-tabs .color3:hover{
    background-color: rgba(251, 227, 209, 0.99);
}

.bestellung_bestellschein .bestellschein .nav.nav-tabs .color4:hover{
    background-color: rgba(249, 214, 215, 0.99);
}


.navbar .navbar-nav > .nav-item:hover, .navbar .navbar-nav > .active{
    cursor: pointer;
    border-radius: 15px 15px 0 0;
}

.navbar .navbar-nav > .color1:hover, .navbar .navbar-nav > .color1.active {
    background: #fdf7d1;
}

.navbar .navbar-nav > .color2:hover, .navbar .navbar-nav > .color2.active {
    background: #fcf0d1;
}

.navbar .navbar-nav > .color3:hover, .navbar .navbar-nav > .color3.active {
    background: #fbe3d1;
}

.navbar .navbar-nav > .color4:hover, .navbar .navbar-nav > .color4.active {
    background: #f9d6d7;
}

.navbar-dark .navbar-nav > .nav-item.active {
    margin-bottom: -2px;
    border-bottom: 2px solid white;

}


/* side navigation */
.hefte-container .h-sidebar .h-sidebar-item > a, .hefte-container .h-sidebar .h-sidebar-item > a:hover, .hefte-container .h-sidebar .h-sidebar-item > a:visited{
    text-decoration: none;
    color: black;
}

.hefte-container .h-sidebar .h-sidebar-item{
    border-bottom: 2px solid;
    margin-bottom: 2px;
    padding: 10px 0 10px 0;
    text-align: center;
    cursor: pointer;
}


.hefte-container .h-sidebar .h-sidebar-item.back{
    background-color: #facba6;
    border-color: #facba6;
    padding: 0;
    margin-bottom: 30px;
}
.hefte-container .h-sidebar .h-sidebar-item.back > a{
    width: 100%;
    display: block;
    height: 100%;
    padding: 5px;
    margin: 0;
}




/* 2020 */


.growl.growl-small{
    padding: 10px;
}

.round-border-p-0 {
    border-radius: 10px;
    padding: 0px;
}

.kasten-font{
    font-size: 1.2em;
    font-family: OpenSansBold, sans-serif;
}

.kasten-font-start{
    font-size: 1.25em;
    font-family: OpenSansBold, sans-serif;
}

.info-icon-color{
    color: lightskyblue;
}



.einkaufswagen-trennlinie{
    border-top: 1px solid black;
}

.max-h-60{
    max-height: 60px;
}

.max-3-rows-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* number of lines to show */
}

.btn-2020-download{
    background: #ff8080;
    border: 1px solid #ff0000;
    padding: 5px 15px;
    cursor: pointer;
}

.btn-2020-download:hover{
    background: #f45b5b;
    border: 1px solid #ff0000;
}


.hh-nav .nav-item-2020-de {

    width: 32.6%;
}


.btn-2020-suchen{
    background: #a1a8a7;
    border: 1px solid #7d8483;
    border-radius: 0px;
    height: 25px;
    padding: 0 2px;
    color: #fff;
    cursor: pointer;
}

.btn-2020-suchen:hover {
    background: #b9c0bf;
    border: 1px solid #979e9d;
}


.input-2020 {
    background: #fff;
    border: 1px solid #000;
    border-radius: 0px;
    height: 25px;
    padding: 0 15px;
}

.w_add_menge{
    width: 75px;
}


.btn-2020-white{
    background: #fff;
    border: 1px solid #000;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}


.btn-2020-holdir-white{
    background: #fff;
    /*border: 1px solid #000;*/
    border-radius: 20px;
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
    min-width: 230px;
}

.btn-2020-holdir-violett{
    background: #973eb4;
    /*border: 1px solid #000;*/
    border-radius: 5px;
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
    width: 70%;
}

.btn-2020-white:hover{
    /*background: #ececec;*/
    border: 1px solid rgba(0, 0, 0, 0.59);
    text-decoration: none;
}


.btn-2020-grey{
    background: #e4e3d7;
    border: 1px solid #ccc;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2020-grey:hover{
    background: rgba(228, 227, 215, 0.91);
    border: 1px solid rgba(204, 204, 204, 0.91);
    text-decoration: none;
}


.btn-2020-green{
    background: #aaf452;
    border: 1px solid #569e28;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2020-green:hover{
    background: rgba(170, 244, 82, 0.91);
    border: 1px solid rgba(86, 158, 40, 0.91);
    text-decoration: none;
}

.btn-2020-orange{
    background: #f4964f;
    border: 1px solid #dc824c;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}


    .btn-2020-blue{
        background: #8391b6;
        border: 1px solid #687295;
        border-radius: 25px;
        padding: 5px 15px;
        color: #000;
        cursor: pointer;

    }

.btn-2020-blue:hover{
    background: #93a4cb;
    border: 1px solid #687295;
    text-decoration: none;
    color: black;
}

.btn-2020-orange-2{
    background: #f4964f;
    border: 1px solid #dc824c;
    border-radius: 25px;
    padding: 5px 15px;
    color: #000;
    cursor: pointer;

}

.btn-2020-orange:hover{
    background: rgba(244, 150, 79, 0.91);
    border: 1px solid rgba(220, 130, 76, 0.91);
    text-decoration: none;
    color: black;
}


.btn-2020-red{
    background: #dc3545;
    border: 1px solid #dc3545;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2020-red:hover{
    background: rgba(220, 53, 69, 0.91);
    border: 1px solid rgba(220, 53, 69, 0.91);
    text-decoration: none;
    color: black;
}


.btn-2020-orange-hell{
    background: #f4b583;
    border: 1px solid #d3966a;
    /*border-radius: 20px;*/
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2020-orange-hell:hover{
    background: rgba(244, 181, 131, 0.91);
    border: 1px solid rgba(244, 181, 131, 0.91);
    text-decoration: none;
    color: black;
}



.btn-2020-zum-wagen{
    background: #f4964f;
    border: 1px solid #dc824c;
    padding: 5px 15px;
    color: #000;
    cursor: pointer;
}

.btn-2019-zum-wagen:hover{
    background: rgba(244, 150, 79, 0.91);
    border: 1px solid rgba(220, 130, 76, 0.91);
}

.uppercase {
    text-transform: uppercase !important
}

.container .border-hover {
    border: 4px solid rgba(255, 255, 255, 0);
}

.container .border-hover:hover {
    border: 4px solid #ffffff;
    transition:all 0.15s ease;
}

.container .border-hover > div{
    background: linear-gradient(to left, transparent 50%, white 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    padding-left: 5px;
    padding-right: 5px;
    transition:all 0.15s ease;
}

.container .border-hover > div.text-center{
   background: white;
}


.container .border-hover:hover > div {
    background-position:left bottom;
}

.container .kasten-item {
    background-image: url('../../2020/img/doodle_background.png');
    background-size: 400px;
}


.container .kasten-item-lernbuch{
    background: #cbd4fe; /* Old browsers */
    background: -moz-linear-gradient(left,  #cbd4fe 0%, #ffe9ab 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #cbd4fe 0%,#ffe9ab 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: url('../../2020/img/doodle_background.png'), linear-gradient(to right,  #cbd4fe 0%,#ffe9ab 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-size: 400px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd4fe', endColorstr='#ffe9ab',GradientType=1 ); /* IE6-9 */
    background-position-y: 10%;

}
.container .kasten-item-lernbuch:hover{
    background: rgba(203, 212, 254, 0.8); /* Old browsers */
    background-image: url('../../2020/img/doodle_background.png'), linear-gradient(to right, #d4dcfe 0%, #ffedbb 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    background-size: 500px;
    background-position-y: 25%;
    transition: all 0.3s ease;

}

.container .kasten-wide .kasten-item-lernbuch {
    background-size: 700px;
}
.container .kasten-wide .kasten-item-lernbuch:hover{
    background-size: 750px;
    background-position-y: 7%;
    transition: all 0.3s ease;
}

.container .kasten-item-kiga{
    background-color: #d4a8cf;
    background-position-y: 17%;
}


.container .kasten-item-kiga:hover{
    background-color: rgba(212, 168, 207, 0.8);
    background-size: 450px;
    background-position-y: 29%;
    transition: all 0.3s ease;
}

.container .kasten-item-schreiben{
    background-color: #f8c6dd;
    background-position-y: 55%;
}

.container .kasten-item-schreiben:hover{
    background-color: rgba(248, 198, 221, 0.8);
    background-size: 450px;
    background-position-y: 67%;
    transition: all 0.3s ease;
}

.container .kasten-item-lesen{
    background-color: #e8ed9d;
    background-position-y: 40%;
}
.container .kasten-item-lesen:hover{
    background-color: rgba(232, 237, 157, 0.8);
    background-size: 450px;
    background-position-y: 52%;
    transition: all 0.3s ease;
}

.container .kasten-item-rechnen{
    background-color: #9dc3e1;
    background-position-y: 41%;
}
.container .kasten-item-rechnen:hover{
    background-color: rgba(157, 195, 225, 0.8);
    background-size: 450px;
    background-position-y: 50%;
    transition: all 0.3s ease;
}

.container .kasten-item-englisch{
    background-color: #f49ea4;
    background-position-y: 18%;
}
.container .kasten-item-englisch:hover{
    background-color: rgba(244, 158, 164, 0.8);
    background-size: 450px;
    background-position-y: 30%;
    transition: all 0.3s ease;
}


.container .kasten-item-deutsch{
    background-color: #fad49d;
}
.container .kasten-item-deutsch:hover{
    background-color: rgba(250, 212, 157, 0.8);
    background-size: 450px;
    background-position-y: 12%;
    transition: all 0.3s ease;
}

.container .kasten-item-minkt{
    background-color: #95dfaf
}
.container .kasten-item-minkt:hover {
    background-color: #9feab9;
    background-size: 440px;
    background-position-y: 9%;
    transition: all 0.3s ease;
}

.container .kasten-item-kompakt{
    background-color: #0071ba;
}
.container .kasten-item-kompakt:hover {
    background-color: #0071bc;
    background-size: 440px;
    background-position-y: 9%;
    transition: all 0.3s ease;
}

.container .kasten-item-mindmanagement{
    background-color: #99ffff
}
.container .kasten-item-mindmanagement:hover {
    background-color: #99ffff;
    background-size: 440px;
    background-position-y: 9%;
    transition: all 0.3s ease;
}




/* / 2020 */

.hefte-container .h-sidebar .h-sidebar-item.Mindmanagement{
    border-color: #72df8e;
}

.hefte-container .h-sidebar .h-sidebar-item.Lernbuch{
    border-color: #cbd4fe;
}

.hefte-container .h-sidebar .h-sidebar-item.KIGA{
    border-color: #d4a8cf;
}
.hefte-container .h-sidebar .h-sidebar-item.Schreiben{
    border-color: #f8c6dd;
}
.hefte-container .h-sidebar .h-sidebar-item.Lesen{
    border-color: #e8ed9d;
}
.hefte-container .h-sidebar .h-sidebar-item.Rechnen{
    border-color: #9dc3e1;
}
.hefte-container .h-sidebar .h-sidebar-item.Englisch{
    border-color: #f49ea4;
}
.hefte-container .h-sidebar .h-sidebar-item.Deutsch{
    border-color: #9dfaab;
}
.hefte-container .h-sidebar .h-sidebar-item.Minkt{
    border-color: rgb(107, 190, 159);;
}

.hefte-container .h-sidebar .h-sidebar-item.Kompakt{
    border-color: #0071ba;
}
.hefte-container .h-sidebar .h-sidebar-item.weitereprodukte{
    border-color: #9ff;
}

.hefte-container .h-sidebar .h-sidebar-item.Mitteilungsheft{
    border-color: #d27038;
}



.hefte-container .h-sidebar .h-sidebar-item.back:hover {
    background-color: rgba(250, 203, 166, 0.90);
    border-color: rgba(250, 203, 166, 0.90);
}

.hefte-container .h-sidebar .h-sidebar-item.Lernbuch:hover, .hefte-container .h-sidebar .h-sidebar-item.Lernbuch.active {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cbd4fe+0,ffe9ab+100 */
    background: #cbd4fe; /* Old browsers */
    background: -moz-linear-gradient(left,  #cbd4fe 0%, #ffe9ab 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #cbd4fe 0%,#ffe9ab 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #cbd4fe 0%,#ffe9ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd4fe', endColorstr='#ffe9ab',GradientType=1 ); /* IE6-9 */

}

.hefte-container .h-sidebar .h-sidebar-item.Mindmanagement:hover, .hefte-container .h-sidebar .h-sidebar-item.Mindmanagement.active {
    background-color: #72df8e;
}

.hefte-container .h-sidebar .h-sidebar-item.Mitteilungsheft:hover, .hefte-container .h-sidebar .h-sidebar-item.Mitteilungsheft.active {
    background-color: #d27038;
}

.hefte-container .h-sidebar .h-sidebar-item.KIGA:hover, .hefte-container .h-sidebar .h-sidebar-item.KIGA.active {
    background-color: #d4a8cf;
}
.hefte-container .h-sidebar .h-sidebar-item.Schreiben:hover, .hefte-container .h-sidebar .h-sidebar-item.Schreiben.active {
    background-color: #f8c6dd;
}
.hefte-container .h-sidebar .h-sidebar-item.Lesen:hover, .hefte-container .h-sidebar .h-sidebar-item.Lesen.active {
    background-color: #e8ed9d;
}
.hefte-container .h-sidebar .h-sidebar-item.Rechnen:hover, .hefte-container .h-sidebar .h-sidebar-item.Rechnen.active {
    background-color: #9dc3e1;
}
.hefte-container .h-sidebar .h-sidebar-item.Englisch:hover, .hefte-container .h-sidebar .h-sidebar-item.Englisch.active {
    background-color: #f49ea4;
}
.hefte-container .h-sidebar .h-sidebar-item.Deutsch:hover, .hefte-container .h-sidebar .h-sidebar-item.Deutsch.active {
    background-color: #9dfaab;
}

.hefte-container .h-sidebar .h-sidebar-item.Minkt:hover, .hefte-container .h-sidebar .h-sidebar-item.Minkt.active {
    background-color: rgb(107, 190, 159);
}

.hefte-container .h-sidebar .h-sidebar-item.Kompakt:hover, .hefte-container .h-sidebar .h-sidebar-item.Kompakt.active {
    background-color: #0071ba;
}

.hefte-container .h-sidebar .h-sidebar-item.weitereprodukte:hover, .hefte-container .h-sidebar .h-sidebar-item.weitereprodukte.active {
    background-color: #9ff;
}

/* PREMIUM Hefte */

.hefte-container .h-sidebar .h-sidebar-item.gelb{
    border-color: #fee64d;
}
.hefte-container .h-sidebar .h-sidebar-item.blau{
    border-color: #008fff;
}
.hefte-container .h-sidebar .h-sidebar-item.green{
    border-color: #5fd765;
}
.hefte-container .h-sidebar .h-sidebar-item.eu{
    border-color: #41b77b;
}

.hefte-container .h-sidebar .h-sidebar-item.kubu{
    border-color: #8000802b;
}



.hefte-container .h-sidebar .h-sidebar-item.gelb:hover, .hefte-container .h-sidebar .h-sidebar-item.KIGA.active {
    background-color: #fff3a5;
}
.hefte-container .h-sidebar .h-sidebar-item.blau:hover, .hefte-container .h-sidebar .h-sidebar-item.Schreiben.active {
    background-color: #80c7ff;
}
.hefte-container .h-sidebar .h-sidebar-item.green:hover, .hefte-container .h-sidebar .h-sidebar-item.Lesen.active {
    background-color: #aeebb1;
}
.hefte-container .h-sidebar .h-sidebar-item.eu:hover, .hefte-container .h-sidebar .h-sidebar-item.Rechnen.active {
    background-color: #9fdbbc;
}

.hefte-container .h-sidebar .h-sidebar-item.kubu:hover {
    /*background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,255,1) 17%, rgba(0,128,0,1) 36%, rgba(255,255,0,1) 58%, rgba(128,0,128,1) 78%, rgba(255,165,0,1) 100%);*/
    /*background: linear-gradient(164deg, rgba(255,0,0,0.5) 0%, rgba(0,0,255,0.5) 17%, rgba(0,128,0,0.5) 36%, rgba(255,255,0,0.5) 58%, rgba(128,0,128,0.5) 78%, rgba(255,165,0,0.5) 100%);*/
    background: linear-gradient(135deg, rgba(255,0,0,0.5) 0%, rgba(0,0,255,0.5) 17%, rgba(0,128,0,0.5) 36%, rgba(255,255,0,0.5) 58%, rgba(128,0,128,0.5) 78%, rgba(255,165,0,0.5) 100%);
}


.btn-kubu{
    background: linear-gradient(135deg, rgba(255,0,0,0.5) 0%, rgba(0,0,255,0.5) 17%, rgba(0,128,0,0.5) 36%, rgba(255,255,0,0.5) 58%, rgba(128,0,128,0.5) 78%, rgba(255,165,0,0.5) 100%);
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1.5em;
    color: #000;
}

.btn-kubu:hover {
    background: linear-gradient(135deg, rgba(255,0,0,0.4) 0%, rgba(0,0,255,0.4) 17%, rgba(0,128,0,0.4) 36%, rgba(255,255,0,0.4) 58%, rgba(128,0,128,0.4) 78%, rgba(255,165,0,0.4) 100%);

    border: 1px solid #fff;
    color: #000;
}


/* affix */
@media (min-width: 567px) {
    .affix {
        position: fixed;
        top: 0;
        margin-top: 10px;
    }
}

.affix-top {
    position: static;
}

.affix-bottom {
    position: relative;
}




















@media (min-width: 768px) {

    body {
        /*padding-top: 175px;*/
    }

    .hh-nav {

    }
}




.hh-nav {
    font-family: 'Open Sans', sans-serif;
}

.hh-nav .container {

}

.hh-nav .nav-item {
    vertical-align: middle;
}

.nav.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #212e2c;
}



.navbar-dark .navbar-brand {
    color: #364442;
    font-size: 24px;
    font-weight: normal;
}

.navbar-dark .navbar-brand img {
    width: 80px;
}

.hh-nav .nav-item {
    padding-left: 7px;
    padding-right: 7px;
}


.navbar-dark .navbar-nav > .nav-link, .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
    color: #000;
    font-size: 1.2em;
    font-weight: normal;
    vertical-align: middle;
}

.nav-item a {
    margin-top: 5px;
}

.nav-tel {
    font-size: 12px;
    margin-top: 5px;
}


#loginButton {
    margin-top: 0px;
}



@media (min-width: 576px) {

    .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,
    .navbar-dark .navbar-nav > .nav-link, .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
        font-size: 16px;
        font-weight: normal;
    }
}

@media (min-width: 768px) {
    .hh-nav {
        /*height: 90px;*/
    }

    .hh-nav .nav-item {
        vertical-align: middle;
    }

}

@media (max-width: 768px) {

    .hh-nav .nav-item-2020-de {

        width: 100%;
    }

    .hh-nav {
        /*height: 90px;*/
    }

    .hh-nav .hh-nav-items .nav-item {
        min-height: 70px;
        vertical-align: middle;
    }
    .hh-nav .hh-nav-items .nav-item a {
        vertical-align: middle;
    }

    .navbar .navbar-nav > .nav-item:hover, .navbar .navbar-nav > .active {
        border-radius: 0;
    }

}


@media (min-width: 992px) {

    #loginButton {

    }

    .navbar-dark .navbar-brand img {
        width: 80px;
    }

    .nav-item a {
        margin-top: 0;
    }

    .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,
    .navbar-dark .navbar-nav > .nav-link, .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
        font-size: 1.2em;
        font-weight: normal;
    }

    .hh-nav .nav-item {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hh-nav .nav-item-de {

        width: 24.6%;
    }
    .hh-nav .nav-item-at {
        width: 33.3%;
    }

    ul.hh-nav-items > .nav-item {
        position: relative;
    }

    .hh-nav-items > li.nav-item > a {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 10px;
    }


    ul.hh-nav-items {
        height: 73px;
    }

    ul.hh-nav .nav-item {
        padding-left: 15px;
        padding-right: 15px;
        width: 25%;


    }



    .nav-tel {
        font-size: 14px;
        margin-top: 14px;
    }

    .hh-nav .nav-item {
        vertical-align: middle;
    }
}

@media (min-width: 1200px) {

}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5
{
    font-family: 'Open Sans', sans-serif;
}


footer {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    margin-top: 25px;
    padding-top: 25px;
    background: #F1F1F1; /* For browsers that do not support gradients */

}

footer img {
    height: 60px;
}

footer a.sitemap-item {
    display:block;
    padding: 1px 0;
}

footer .container a {
    color: #364442;

}

.hh-nav, footer .container-fluid {
    color: #000;
    font-weight: normal;
}



.container-nobold {
    font-family: 'Open Sans', sans-serif;
}

.container-shadow {
    -webkit-box-shadow: 0px 2px 4px 0px rgba(143,143,143,1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(143,143,143,1);
    box-shadow: 0px 2px 3px 0px rgba(143,143,143,1);
    background-color: #f9fdff;
}

.container-no-padding {
    padding: 0;
}


.slick-slider .prev, .slick-slider .next{
    cursor: pointer;
}

.slider-buttons {
    position: absolute;
    right: 15px;
    width: 270px;
    top: 10px;
}

.slider-buttons-lg-container {
    position: relative;
}

.slider-buttons .button-container {
    display: flex;
    width: 280px;
    height: 69px;
    margin-top: 5px;
    margin-bottom: 17px;

    position: relative;

    clear: both;

    background-size: 100%;
}

.slider-buttons .button-container a img {
    margin-right: 10px;
    margin-top: 11px;
    margin-left: 13px;
}
.slider-buttons .button-container a div.text {
    padding-top: 5px;
    line-height: 24px;
    margin-top: 7px;
    margin-left: 5px;
    width: 144px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #1D57F9;
    height: 65px;
}

.slider-buttons .button-container a div.rightImg {
    width: 50px;
    margin-top: 5px;
    height: 65px;

    padding: 0;
}

.button-container a div.rightImg img {
    height: 62px;
    margin: 0;
    border: none;
}



.slider-buttons .button-container:hover a div.text {
    color: black;
}

.slider-buttons .button-container a img, .slider-buttons ul li a div.text {
    height: 50px;
}

.slider-buttons .button-container a img, .slider-buttons .button-container a div.text, .slider-buttons .button-container a div.rightImg {
    float:left;
}

.fbox-row {
    padding-left: 0;
    padding-right: 0;
}

.fbox {

    border-radius: 12px;
    position: relative;
    width: 100%;
    padding: 7px;
}


.fbox .fbox-innen {
    background: white;
    border-radius: 7px;
    height:100%;
}

.fbox.fbox-grey {
    background: linear-gradient(to top, #c9cad2 0%, #54555c 100%);;
}

.fbox.fbox-purple {
    background: linear-gradient(to top, #ff59d5 0%, #bc59ff 100%);;
    color: #310052;
}

.fbox.fbox-blue {
    background: linear-gradient(to top, #0033ff 0%, #00d8ff 100%);
    color: #003fbd;
}

.fbox.fbox-yellow {
    background: linear-gradient(to top, #b1ff00 0%, #ffa600 100%);
    color: #644101;
}

.fbox.fbox-mint {
    background: linear-gradient(to top, #00cfff 0%, #00ff87 100%);
    color: #05512f;
}

.fbox .fbox-body {
    margin: 10px 10px 20px 10px;
    font-family: OpenSansExtraBold, sans-serif;
    font-size: 18px;
    font-weight: normal;

}


.fbox.fbox-purple .fbox-body, .fbox.fbox-purple a {
    color: #bc59ff;
}

.fbox.fbox-blue, .fbox.fbox-blue a {
    color: #003fbd;
}

.fbox.fbox-yellow, .fbox.fbox-yellow a {
    color: #ffa600;
}

.fbox.fbox-mint, .fbox.fbox-mint a {
    color: #00b35a;
}

.fbox a:hover {
    text-decoration: none;
}

.fbox.fbox-purple a:hover {
    color: #5b337c;
}

.fbox.fbox-blue a:hover {
    color: #00274f;
}

.fbox.fbox-yellow a:hover {
    color: #ce6700;
}

.fbox.fbox-mint a:hover {
    color: #006231;
}

.fbox .fbox-head {
    font-family: OpenSansExtraBold, sans-serif;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 22px;
    text-align: center;

    padding-top: 5px;
    padding-bottom: 5px;
}

.fbox.fbox-purple .fbox-head {
    border-bottom: 2px solid #c551ff;
}

.fbox.fbox-blue .fbox-head {
    color: #00187a;
    border-bottom: 2px solid #00bcf3;
}

.fbox.fbox-yellow .fbox-head {
    color: #644101;
    border-bottom: 2px solid #f2ae00;
}

.fbox.fbox-mint .fbox-head {
    color: #05512f;
    border-bottom: 2px solid #00f392;
}


.fbox-col-container {
    margin-bottom: 70px;
}

.top-container {
    padding:0;
}

.fbox .fbox-img {
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
    position: absolute;
    right: -25px;
    bottom: -50px;
    cursor: pointer;
}

@media (max-width: 575px) {
    td.mail {
        display: none !important;
    }

    .top-slider, .top-slider div, .top-slider div img {
        width: 100%;
    }

    .top-container {
        padding:5px;
    }

    .fbox .fbox-img {
        -ms-transform: rotate(-15deg); /* IE 9 */
        -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
        transform: rotate(-15deg);
        position: absolute;
        right: 7px;
        bottom: -50px;
        z-index: 3;
    }

}

@media (min-width: 576px) {
    .top-slider, .top-slider div, .top-slider div img {
        width: 520px;
    }

    .top-container {
        padding:10px;
    }
}

@media (min-width: 768px) {
    .top-slider, .top-slider div, .top-slider div img {
        width: 700px;
    }

    .top-container {
        padding: 10px;
        min-height: 360px;
    }
}

@media (min-width: 992px) {
    .top-slider, .top-slider div, .top-slider div img {
        width: 650px;
    }
    .top-slider-container {
        margin-top: 36px;
    }

    .top-container {
        padding: 15px;
        min-height: 360px;
    }
}

@media (min-width: 1200px) {
    .fbox-col-container {
        margin-bottom: 15px;
    }

    .top-slider-container {
        margin-top: 0;
    }

    .top-slider, .top-slider div, .top-slider div img {
        width: 830px;
    }

}

.fbox-bb-container {
    border: 2px solid black;
    border-radius: 14px;
    background-color: #f9fdff;
    margin-bottom: 15px;
    display: flex;
    height: 100%;
    width: 100%;

}


.fbox .fbox-img img {
    height: 100px;
    border: 2px solid black;

}

.fbox .fbox-shop-button {

    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;

    border-radius: 20px;
    background-color: #ff004e;
    border-width: 5px;
    border-style: solid;

    position: absolute;
    bottom: -26px;
    left: 20%;
    width: 60%;
    align-self: center;
    text-align: center;
    color: #eafcff;
    padding-left: 5px;
    padding-right: 5px;

    line-height: 19px;

    padding-top: 2px;
    padding-bottom: 2px;
}

.fbox .fbox-shop-button::after {
    z-index: 2;
    content:'';
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    display:block;
    position: absolute;
    bottom: -6px;
    left:-6px;
    right:-6px;
    height: 62%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.fbox.fbox-purple .fbox-shop-button {
    border-color: #ff59d5;
}

.fbox.fbox-blue .fbox-shop-button {
    border-color: #0033ff;
}

.fbox.fbox-yellow .fbox-shop-button {
    border-color: #b1ff00;
}

.fbox.fbox-mint .fbox-shop-button {
    border-color: #00cfff;
}

.fbox.fbox-purple .fbox-shop-button:hover {
    color:black;
    text-shadow:
            -1px -1px 0 #ff59d5,
            1px -1px 0 #ff59d5,
            -1px 1px 0 #ff59d5,
            1px 1px 0 #ff59d5;
}

.fbox.fbox-blue .fbox-shop-button:hover {
    color: black;
    text-shadow:
            -1px -1px 0 #5375ff,
            1px -1px 0 #5375ff,
            -1px 1px 0 #5375ff,
            1px 1px 0 #5375ff;
}

.fbox.fbox-yellow .fbox-shop-button:hover {
    color: #1d1d1d;
    text-shadow:
            -1px -1px 0 #b1ff00,
            1px -1px 0 #b1ff00,
            -1px 1px 0 #b1ff00,
            1px 1px 0 #b1ff00;
}

.fbox.fbox-mint .fbox-shop-button:hover {
    color: #141414;
    text-shadow:
            -1px -1px 0 #00cfff,
            1px -1px 0 #00cfff,
            -1px 1px 0 #00cfff,
            1px 1px 0 #00cfff;
}


.fbox .fbox-body {
    font-size: 16px;
}

.fbox .fbox-body .fbox-link-text {
    font-size: 18px;
}

.fbox .fbox-body a .fbox-link-chevron {
    width: 20px;
    display:table-cell;
    vertical-align: top;
    padding-top: 1px;
}
.fbox .fbox-body a .fbox-link-text {
    display:table-cell;
}

.fbox .fbox-body a {
    display:block;
    clear: both;
}


.container.container-block {
    border-top: 5px solid #7fbb82;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

h2 {
    font-size: 18px;
    font-weight: bold;
}

ul.antworten {
    list-style: none;
}

ul.antworten b {
    color: #7A9F59;
}

ul.antworten li {
    line-height: 30px;
}

.kundenmeinung {
    border: 3px solid #ececec;
    padding: 10px;
    margin: 10px 10px 50px 0px;
    border-radius: 10px;
}

.kundenmeinung .mail {
    font-size: 48px;
    color: #ececec;
    padding-top: 0;
}

.kundenmeinung table tr td {
    vertical-align: top;
    padding: 20px;
    /*font-family: "Bree Serif", "Times New Roman", cursive;*/
}

.topsellers .item img {
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}

.slick-next, .slick-prev {
    width: 30px;
    height: 30px;
}

.slick-prev::before, .slick-next::before {
    color: #335566;
    font-size: 26px;
}

.topsellers {
    margin-left: 30px;
    margin-right: 30px;
}

.slick-prev {
    left: -35px;
}



.slick-dots {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    margin: 0;
    list-style: none;

    padding: 0 7px 0 0;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 15px;
    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: 3px;
    cursor: pointer;
    color: #00152f;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button::before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: -5px;
    left: 0;
    width: 20px;
    height: 24px;
    content: '◼';
    text-align: center;
    opacity: .15;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button::before {
    opacity: .65;
    color: #00152f;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}




.btn-transparent {
    background-color: rgba(0,0,0,0.01);
    color: black;
    border-color: #364442;
}

.btn-transparent:hover {
    background-color: rgba(0,0,0,0.2);
    border-color: #364442;
}

.btn-hover-black:hover {
    color: black !important;
}

.btn-h-25{
    height: 25px;
}



.btn-transparent.active, .btn-transparent:active, .show > .btn-transparent.dropdown-toggle {
    background-color: rgba(0,0,0,0.2);
    background-image: none;
    border-color: #364442;
}

.btn-rounded {
    border-radius: 15px;
}

footer h5 {
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 20px;

    text-transform: uppercase;

}

.tellink {
    color: rgb(54, 68, 66);
}

.tellink .hovericon {
    display:none;
}

.tellink:hover .hovericon {
    display:inherit;
}


.topsellers {
    margin-left: 30px;
    margin-right: 30px;
}

.topsellers .item {
    padding: 20px;
    cursor: pointer;
}

.topsellers .item img {
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}


.topsellers .item .name {
    color: #446766;
    font-weight: bold;
}

.topsellers .item .preis {
    color: #446766;
}

.topsellers .slick-dots li {
    display:none;
}

.slick-prev:before, .slick-next:before {
    color: #335566;
    font-size: 26px;

}

.slick-prev {
    left: -35px;
}
.slick-next {
    right: -35px;
}



.slick-next, .slick-prev {
    width: 30px;
    height: 30px;
}

#topsellerModal {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.header-box{
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 0 25px 0px 25px;
    border-left: 1px;
    border-right: 1px;
    border-bottom: 1px;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
    font-family: 'OpenSansExtraBold';
    font-size: 1.6em;
    margin-bottom: 20px;
    display: inline-block;


}



.container.container-noh-padding{
    padding-top: 5px;
}

.header-box-container{
    padding-top: 5px;
}

.header-box.top-seller{
    background: -webkit-linear-gradient(top, #9700fd, #ff00e7);
    background: linear-gradient(top, #9700fd, #ff00e7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-box.warum-hefte{
    background: -webkit-linear-gradient(top, #ff4b01, #ffc502);
    background: linear-gradient(top, #ff4b01, #ffc502);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-box.zufriedene-kunden{
    background: -webkit-linear-gradient(top, #468057, #467f56);
    background: linear-gradient(top, #468057, #467f56);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bullte-point{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: red;
    display: inline-block;
    margin-bottom: -3px;
    margin-right: 10px;
}



table.antworten tr  td  b{
    color: #7A9F59;
}

/* index - slider */



.top-seller-v-slider {
    width: auto;
    margin-top: 15px;
    margin-bottom: 15px;

}
.top-seller-v-slider .slick-slide {
    padding: 5px 0;
    text-align: center;
}
.top-seller-v-slider .slick-prev:before, .top-seller-v-slider .slick-next:before {
    color: black;
}
.top-seller-v-slider .slick-dots {
    bottom: -30px;
}
.top-seller-v-slider .slick-slider {
    margin-top: 60px;
}
.top-seller-v-slider .slick-slide:nth-child(odd) {
}
.top-seller-v-slider .slick-prev, .top-seller-v-slider .slick-next {
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
}
.top-seller-v-slider .slick-next {
    top: unset;
    bottom: -30px;
}
.top-seller-v-slider .slick-prev {
    top: -30px;
}

.top-sellers-container .prev{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #ee6266 transparent;
    margin-bottom: 15px;
}

.top-sellers-container .next{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #ee6266 transparent transparent transparent;
    margin-top: 15px;
}

.top-sellers-container .prev:hover{

    border-color: transparent transparent #ffa1a4 transparent;

}

.top-sellers-container .next:hover{

    border-color: #ffa1a4 transparent transparent transparent;

}


/* */
/* styles for '...' */
.block-with-text {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative;
    /* use this value to count block height */
    line-height: 1.23em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 10.9em;
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;
    /* place for '...' */
    margin-right: -1em;
    padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
   /*  background: white; */
}

img.produkt-img-q {
    max-width: 100%;
}

img.produkt-img-a4,
img.produkt-img-a5
{
    max-width: 89%;

}



@media (max-width: 768px) {
    img.produkt-img-a4,
    img.produkt-img-a5,
    img.produkt-img-q
    {
        height: auto;
        max-width: 100%;
        max-height: 400px;
        margin-left: auto;
        margin-right: auto;
        /*-webkit-box-shadow: 5px 5px 10px -4px rgba(105,105,105,1);
        -moz-box-shadow: 5px 5px 10px -4px rgba(105,105,105,1);
        box-shadow: 5px 5px 10px -4px rgba(105,105,105,1);*/
        margin-bottom: 10px;
    }

}

.produkt-img-container {
    width: 100%;
    text-align: center;
}

.produkt-img-container.produkt-img-container-KIGA{
    background-color: white;
}
.produkt-img-container.produkt-img-container-Schreiben{
    background-color: white;
}
.produkt-img-container.produkt-img-container-Lesen{
    background-color: white;
}
.produkt-img-container.produkt-img-container-Rechnen{
    background-color: white;
}
.produkt-img-container.produkt-img-container-Englisch{
    background-color: white;
}
.produkt-img-container.produkt-img-container-Deutsch{
    background-color: white;
}



@media (max-width: 768px) {
    /* fk */
    /*.produkt-img-container.produkt-img-container-KIGA{
        background-color: transparent;
    }
    .produkt-img-container.produkt-img-container-Schreiben{
        background-color: transparent;
    }
    .produkt-img-container.produkt-img-container-Lesen{
        background-color: transparent;
    }
    .produkt-img-container.produkt-img-container-Rechnen{
        background-color: transparent;
    }
    .produkt-img-container.produkt-img-container-Englisch{
        background-color: transparent;
    }
    .produkt-img-container.produkt-img-container-Deutsch{
        background-color: transparent;
    }*/


}

.filter-highlighted {
    background-color: yellow;
    border-radius: 5px;
}

.btn-2019-filter {
    color: #333;
    background-color: #f0f0f0;
    border-color: #d3d3d3;
    border-radius: 0;
}


.stern-after:after {
    color: red;
    content: " *";
}

.heft-kopierlizenz {
    font-size: .9em;
}


.heft-kopierlizenz > .lizenz-preis {
    font-weight: bold;

}

.filter-collapsed {
    opacity: .3;
}

.filter-collapsed h3 {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1.4em;
}

.filter-collapsed .trennsubkat hr {
    margin-top: 0;
}

.fixed-top {
    z-index: 1031;
}

.englisch-sing{
    font-size: 2.8em;
}

.englisch-sing-0{
    font-size: 1.4em;
}

@media (max-width: 768px) {
    .index-basteln-center {
        font-size: 1.3em;
        margin: 10px;
    }
}

@media (max-width: 500px) {
    .index-basteln-center {
        font-size: 1.2em;
        margin: 5px;
    }
}

@media (max-width: 400px) {
    .index-basteln-center {
        font-size: 1.4em;
        margin: 0;
    }
}


.index-bulls-text{
    font-size: 1.5em;
}

.index-presse-img{
    max-width: 220px;
}

.index-presse-text{
    font-size: 1.8em;
}


/* mobile */
/* Extra large devices */
@media (min-width: 1200px) {
    .index-besonders-center {
        left: 50%;
    }
}

/* Large devices */
@media (max-width: 1199.99px) {
    .index-besonders-center {
        left: 42%;
    }

    .index-presse-img{
        max-width: 160px;
    }

    .englisch-sing{
        font-size: 2.1em;
    }

    .englisch-sing-0{
        font-size: 1.2em;
    }
}


/* Medium devices */
@media (max-width: 992px) {
    .index-besonders-center {
        text-align: center;
        width: 222px;
    }

    .index-spenden-text{
        font-size: 1.3em;
     }

    #loginButton > a > div{
        max-width: 110px;
    }

    .top-seller-header{
        font-size: 0.7em;
    }

    .index-bulls-text{
        font-size: 1.1em;
    }


    .index-presse-img{
        max-width: 100px;
    }

    .index-presse-text{
        font-size: 1.5em;
    }

    .englisch-sing{
        font-size: 1.5em;
    }

    .englisch-sing-0{
        font-size: 1.0em;
    }

    .kasten-font{
        font-size: 0.9em;
    }

    .kasten-font-start{
        font-size: 0.8em;
    }


}

/* Small devices */
@media (max-width: 768px) {

    .heft-icons img{
        max-height: 30px;
    }

    .mobile-text-bigger, .breadcrumb > .breadcrumb-item {
        font-size:  1.2em;
    }

    .mobile-text-bigger-2, .breadcrumb > .breadcrumb-item {
        font-size:  1.3em;
    }

    .mobile-text-kats-boxes-bigger{
        font-size:  1.1em;
    }

    .mobile-text-kats-boxes-bigger div[class^="col-"]{
        padding-left: 4px;
        padding-right: 4px;
    }

    .mobile-text-kats-boxes-bigger div[class^="row"]{
        margin-left: -4px;
        margin-right: -4px;
    }

    .p_name_text_size{
        font-size: 1.4em;
    }

    .produkt-text-groesse{

        /* font-size: 1.3em; */

    }

    .mobile-font-kasten{
        font-size: 0.7em;
    }

    .index-besonders-center {

    }

    .index-muster-seite{
        font-size: 2em;
    }

    .index-presse-text{
        font-size: 2em;
    }

    .index-presse-img{
        max-width: 150px;
    }

    #loginButton > a, #loginButton > a > div {
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }

    .hh-nav{
        padding-bottom: 10px;
        border-bottom: 2px solid gray;
    }

    .index-bulls-text{
        font-size: 1.8em;
    }

    .englisch-sing{
        font-size: 2.5em;
    }

    .englisch-sing-0{
        font-size: 2.0em;
    }


}

@media (max-width: 547px) {
    .index-besonders-center {
        font-size: 1.8em !important;
        width: 200px;
        left: 45%;
    }


    .index-presse-text{
        font-size: 1.5em;
    }

    .englisch-sing{
        font-size: 2.0em;
    }

    .englisch-sing-0{
        font-size: 1.5em;
    }

}

@media (max-width: 500px) {
    .index-besonders-center {
        font-size: 1.4em !important;
        left: unset !important;
        right: 60px;
        width: 120px;
    }

    .index-bulls-text{
        font-size: 1.2em;
    }

    .englisch-sing{
        font-size: 1.8em;
    }

    .englisch-sing-0{
        font-size: 1.2em;
    }


}

@media (max-width: 400px) {
    .index-umschlagseite-center{
        font-size: 1.5em;
    }

    .index-wiffzack-center{
        font-size: 1.5em;
    }

    .heft-beschreibung{
        font-size: 13px;
    }

}

.popover-body {
    z-index: 1032;
}




/* Gray Scale */
.hover-grey figure img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover-grey figure:hover img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

}

.consentDiv .text {
    line-height: 1.5em;
}

.verfuegbar {
    color: red;
    background-color: yellow;
    padding-left: 10px;
    padding-right: 10px;
}

table.table > tbody > tr > td.right,
table.table > thead > tr > td.right,
table > tbody > tr > td.right,
table > thead > tr > td.right {
    text-align: right;
}


.error-icon,
.form-status.is-invalid {
    color: #dc3545;
}