/*MAIN RAUS a,b */

body {
    font-size: 1em;
    width: 100%;
    border: 0 none;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-smooth: always;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    background-attachment: fixed;
    background-image: url(../hg_wolke.jpg);
}

#con1140tent {
    width: 100%;
    max-width: 1140px;
    margin: auto;
    padding: 10px 10px 10px 10px;
    padding: 0 0 40px 0;
    background: #fff;
    overflow: hidden;
    background-image: url(../hg_trans1.png);
}

#content {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 10px 10px 10px 10px;
    padding: 0 0 40px 0;
    background: #fff;
    overflow: hidden;
    background-image: url(../hg_trans1.png);
}

#content_tr {
    width: 99%;
    margin: auto;
    padding: 0 0 10px 0;
    background: transparent;
    overflow: hidden;
}

#content_startr {
    width: 98%;
    margin: auto;
    padding: 1px 1px 0 1px;
    background: transparent;
    overflow: hidden;
}

#content_50 {
    width: 50%;
    max-width: 1130px;
    margin: auto;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
}

video {
    position: relative;
    top: 10;
    bottom: 10;
    left: 0;
    width: 100%;
    height: 100%;
}

header {
    background: #fff;
    margin: 0 auto 5px;
    height: 86px;
    padding: 10px 20px 5px 20px;
    border-bottom: 4px solid #b5152b;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.56);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.56);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.56);
    background-image: url(../logo_anra-mode_70.png);
    background-repeat: no-repeat;
    background-position: left 20px bottom 15px;
}

.section {
    margin: 2px auto 10px auto;
    max-width: 1140px;
    padding: 10px 10px 10px 10px;
    background: #fff;
}

#section_100 {
    width: 100%;
    opacity: 1;
    margin: 2px auto 10px auto;
    max-width: 1140px;
    position: relative;
    padding: 10px 10px 10px 10px;
    background: transparent;
}

.section-child {
    opacity: 0.8;
    width: 100%;
    height: 100%;
    background: green;
}

.column {
    float: right;
    margin: 0 auto;
    width: 100%;
}

.blocks {
    float: right;
    display: inline-table;
    width: 24%;
}

.block1 {
    padding: 100px 30px 20px 30px;
    width: 60%;
}

.block2 {
    padding: 100px 30px 20px 30px;
    width: 200px;
}

.block3 {
    padding: 100px 30px 20px 30px;
    width: 200px;
}

.block4 {
    float: right;
    padding: 100px 30px 20px 30px;
    width: 10%;
    padding: 0;
    margin: 0;
}

article {
    padding: 10px 0;
    -webkit-columns: 2 250px;
    -moz-columns: 2 250px;
    columns: 2 250px;
}

#vier {
    padding: 10px 200px;
    -webkit-columns: 4 150px;
    -moz-columns: 4 150px;
    columns: 4 150px;
}

#drei {
    padding: 10px 30px;
    -webkit-columns: 3 250px;
    -moz-columns: 3 250px;
    columns: 3 250px;
}

#zwei {
    margin: 0 auto;
    padding: 10px 0;
    -webkit-columns: 2 250px;
    -moz-columns: 2 250px;
    columns: 2 250px;
}

footer {
    width: 100%;
    height: 60px;
    padding-top: 10px;
    margin: 5px auto 0px auto;
    color: #ff7e00;
    border-top: 4px solid #b5152b;
    background: #fff;
    opacity: 1;
}

.foot-left {
    float: left;
    z-index: 1000;
}

.foot-center {
    margin-left: 40%;
}

.foot-right {
    float: right;
    padding: 1px 10px 40px 10px;
    margin: -50px 30px 0 0;
}

.clearfix:after {
    content: "";
    clear: both;
    display: table;
}

.navi_vor {
    float: right;
    height: 20px;
    width: 20px;
    position: relative;
    right: 5%;
    top: 20px;
    z-index: 999;
    border: none;
    background: url(../zahlen/z30_vor1.png) bottom left no-repeat;
}

.navi_zurueck {
    float: left;
    height: 20px;
    width: 20px;
    position: relative;
    left: 5%;
    top: 20px;
    z-index: 999;
    border: none;
    background: url(../zahlen/z30_zurueck1.png) bottom left no-repeat;
}

#rosenlogo {
    height: 80px;
    width: 240px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    border: none;
    background: url(../rose_80_trans.png) bottom left no-repeat;
}

#footer_rose {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 80px;
    width: 200px;
    padding: 0 20px;
    background-image: url(../rose_80_trans.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    color: #ffffff;
}

#footer_weiss {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    width: 100%;
    padding: 0 20px;
    background: #fff;
    color: #000;
    opacity: 0.9;
}

#logo {
    margin: 0 0 0 20px;
    float: left;
    width: 180px;
    height: 73px;
    background-image: url(../1x1.gif);
    display: block;
}

#logos {
    margin: 0 0 0 20px;
    float: left;
    height: 73px;
    display: block;
}

#menu {
    font-family: 'Raleway', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

#menu-icon {
    display: hidden;
    width: 40px;
    height: 40px;
    background: #b5152b url(../menu-icon.png) center;
    border-radius: 4px;
}

a:hover#menu-icon {
    background-color: #444;
    border-radius: 4px 4px 0 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.bild-text {
    text-align: center;
    font-style: italic;
    color: #b5152b;
}

.weiss {
    color: #fff;
}

.schwarz {
    color: black;
}

.rot {
    color: #b5152b;
}

.blau {
    color: blue;
}

.centerzoom {
    margin: 30px auto;
    width: 100%;
    padding: 15px 15px 10px 15px;
    background-color: #444;
}

figcation {
    text-align: center;
    padding: 15px 15px 10px 20px;
}


.hgrot {
    border: solid 1px #b5152b;
}

.hgblank {
    background-color: #ffffff;
}

.hggrau {
    background-color: #f7f7f7;
}

.hgorange {
    background-color: #FFF0C8;
    border: dotted 3px #f0540e;
    border-radius: 11px;
}

.hgblankorange {
    background-color: #FFFFBB;
    border-radius: 5px;
}

.hggruen {
    background-color: #ACF0BB;
    border-radius: 9px;
}


/* var */
.proddetail {
    font-weight: bold;
    font-size: 1.1em;
    color: #b5152b;
}

.h1 {
    padding: 50px;
    margin: 15em;
    font-weight: normal;
    font-size: 2.7em;
    color: #b5152b;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    letter-spacing: 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    z-index: 100;
}


row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box {
    float: left;
    width: 48%;
    margin-right: 2%;
    margin-bottom: 15px;
    padding: 2px;
    align-items: center;
}

.box:last-child {
    margin-right: 0;
}









/* light_hoverlay */

.light_hover_container {
    padding: 5px;
    float: left;
    position: relative;
}

.light_hover_container600 {
    margin: 30px auto;
    padding: 5px;
    background-color: grey;
}

.light_hover_container_weiss {
    padding: 0px;
    position: relative;
    width: 100%;
    max-width: 450px;
}

.light_hoverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: grey;
}

.light_hoverlay_weiss {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .3s ease;
}

.light_hover_container:hover .light_hoverlay {
    opacity: 0.5;
}

.light_hover_container_weiss:hover .light_hoverlay_weiss {
    opacity: 0.7;
}

.light_hover_text {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 49%;
    left: 49%;
    transform: translate(-49%, -49%);
    -ms-transform: translate(-49%, -49%);
}

.light_hover_300 {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 49%;
    left: 33%;
}

.light_hover_700 {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 49%;
    left: 57%;
    transform: translate(-49%, -57%);
    -ms-transform: translate(-49%, -57%);
}

.light_hover_pic {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 49%;
    left: 35%;
    transform: translate(-49%, -49%);
    -ms-transform: translate(-49%, -49%);
}

.light_hover_stoff {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 47%;
    left: 45%;
    transform: translate(-47%, -45%);
    -ms-transform: translate(-47%, -45%);
}

.slider-text {
    text-align: center;
    font-size: 0.85em;
}






/*NAVIGATION-mobile*/

#navfoot {
    float: right;
    padding: 5px 45px 0 0;
}

#navfoot ul {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

#navfoot ul a {
    display: inline;
    font-size: 0.9em;
    color: #b5152b;
    text-decoration: none;
    line-height: 1.2em;
    padding: 0 5px;
}

#navfoot ul a:hover {
    color: #fff;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#navfoot ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 1px;
}

#navfoot ul li.active {
    background: #b5152b;
    color: #fff;
    text-decoration: none;
}

#navfoot ul li:hover {
    background: #D66273;
    margin: 0;
    color: #fff;
    text-decoration: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}




/*NAVIGATION*/

#nav {
    float: right;
    padding: 45px 35px 0 0;
}

#nav ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#nav ul a {
    display: block;
    color: #000;
    text-decoration: none;
    line-height: 32px;
    padding: 0 10px;
}

#nav ul a:hover {
    color: #fff;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#nav ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 1px;
}

#nav ul li.active {
    background: #b5152b;
    color: #fff;
    text-decoration: none;
}

#nav ul li:hover {
    background: #D66273;
    margin: 0;
    color: #fff;
    text-decoration: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
    z-index: 5000;
    border-style: solid;
    border-color: #000;
    border-width: 1px;
}

#nav ul ul li {
    float: none;
    wisdth: 150px;
}

#nav ul ul a {
    line-height: 120%;
    padding: 8px 15px
}

#n0av ul ul ul {
    top: 0;
    left: 40%
}

#nav ul li:hover>ul {
    display: block;
    z-index: 5000;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.linkaktiv {
    font-weight: bold;
    text-decoration: underline;
}

.linkaktivdoppel {
    font-weight: bold;
    text-decoration: underline;
}

.linkaktivcolor {
    font-weight: bold;
    text-decoration: underline;
    background-color: #D66273;
}

.linkhand {
    font-size: 1.8em;
}




/*BK*/

.center {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainbox {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.boxkurs {
    width: 100%;
    mar0gin: 0 auto;
    padding: 5px 5px 115px 5px;
}

.main90 {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
}

.main100_rot {
    background-color: #b5152b;
    width: 100%;
    margin: 0 auto;
    padding: 15px 15px 10px 20px;
}

.main100 {
    background-color: #fff;
    padding: 15px 15px 10px 20px;
}

.main100_textbox {
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0 10px 40px;
    font-size: 1.2em;
}

.main100_textbox_gross {
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    font-size: 1.4em;
}

.main100_textbox_gross_cent {
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    font-size: 1.4em;
    text-align: center;
}

.main60 {
    background-color: #fff;
    float: left;
    width: 55%;
    margin: 0 auto;
    padding: 20px 15px 0 15px;
    font-size: 1em;
}

.main40 {
    background-color: #fff;
    float: right;
    width: 37%;
    margin: 0 auto;
    padding: 20px 10px 0 10px;
    font-size: 1em;
}

.main66 {
    background-color: #fff;
    float: left;
    width: 60%;
    margin: 0 auto;
    padding: 20px 15px 0 15px;
    font-size: 1em;
}

.main33 {
    background-color: #fff;
    float: right;
    width: 30%;
    margin: 0 auto;
    padding: 20px 10px 0 10px;
    font-size: 1em;
}

.main33img {
    background-color: #fff;
    float: right;
    width: 30%;
    margin: 0 auto;
    padding: 20px 10px 0 10px;
    font-size: 1em;
}

.banner100 {
    width: 100%;
    margin: 0 auto 5px auto;
    padding: 0;
}

.main50a {
    width: 42%;
    float: left;
    margin: 0 5px 5px 25px;
    padding: 0 10px 20px 10px;
    z-index: 20;
}

.mainwinter19 {
    width: 42%;
    float: left;
    margin: 0 5px 5px 25px;
    padding: 0 10px 20px 10px;
    z-index: 20;
}

.mainwinter19 img {
    margin: 0 auto;
}

.main50aslider {
    width: 42%;
    float: left;
    margin: 0 5px 5px 25px;
    padding: 0 10px 20px 10px;
    z-index: 20;
}

.main50_center {
    width: 80%;
    float: center;
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    font-size: 1.2em;
}

.main50b {
    width: 42%;
    height: 100%;
    float: right;
    margin: 0 25px 5px 5px;
    padding: 20px;
    background-color: #f3f3f3;
    z-index: 30;
}

.main50b_w {
    width: 42%;
    height: 100%;
    float: right;
    padding: 0 35px;
    background-color: #fff;
}

.main50astart {
    width: 51%;
    float: left;
    margin: 0;
    padding: 0;
}

.main50bstart {
    width: 40%;
    float: right;
    margin: 0;
    padding: 0;
}

.main50eins {
    width: 42%;
    float: left;
    margin: 0 5px 5px 25px;
    padding: 0 10px 20px 10px;
}

.main50zwei {
    width: 42%;
    height: 100%;
    float: right;
    margin: 0 25px 5px 5px;
    padding: 0 10px 20px 10px;
}

.stoffbox {
    width: 510px;
    margin: 5px 0 15px 0;
}

.zoom50a {
    width: 42%;
    height: 100%;
    float: left;
    margin: 0 0 0 15px;
    padding: 0;
}

.zoom50b {
    width: 42%;
    height: 100%;
    float: right;
    margin: 0 15px 0 0;
    padding: 0;
}

.kurs66 {
    float: left;
    margin: 0 auto;
    padding: 0 0 0 10px;
    font-size: 1em;
}

.kurs33 {
    float: left;
    width: 120px;
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

.img-inline {
    display: inline-block;
    width: 100%;
}

a:hover.img-inline {
    background-color: #444;
    border-radius: 4px 4px 0 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

img.center {
    display: block;
    margin: 0 auto;
}

img.will {
    float: center;
    margin: 0 0 10px 10px;
}

img.textbox {
    float: center;
    width-max: 800px;
    margin: 0 40px 10px 100px;
}

.produkt {
    max-width: 600px;
    display: block;
    width: auto;
    height: auto;
}

img.produktstart {
    height: 90%;
}

img.p100st {
    width: 100%;
    height: auto;
}

img.p90st {
    width: 90%;
    height: auto;
}

img.p100 {
    width: auto;
    height: auto;
}

img.max {
    width: auto;
    height: auto;
    max-height: 240px;
}

img.logopura {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}

img.p90 {
    width: 90%;
    height: auto;
}

img.plan {
    width: 100%;
    max-width: 600px;
}

img.vorschau {
    width: 100%;
    max-width: 200px;
}

img.vorschauwinter18 {
    width: 100%;
    max-width: 300px;
}

img.vorschauwinterB {
    max-height: 300px;
    max-width: 600px;
}

img.patzelt {
    max-width: 320px;
}

img.maxweit {
    max-width: 100%;
}

img.stadtmos {
    width: 200px;
    height: 200px;
}

img.hutparis {
    width: 300px;
    height: 300px;
}

img.stoff {
    width: 480px;
    height: auto;
}

.picfloat {
    margin: 5px;
    float: left;
    width: 210px;
}

.picfloatparis {
    margin: 5px;
    float: left;
    width: 310px;
}

.picfloatbreit {
    margin: 5px;
    float: left;
    max-width: 410px;
}

.galerie {
    margin: 0px auto;
    width: 95%;
}

.galeriB {
    margin: 0px auto;
    width: 95%;
}

.nachricht {
    max-width: 900px;
    color: #333;
    padding: 0.125em;
    width: 80%;
    margin: 10px auto;
    text-align: left;
}

.texteinzug {
    padding-left: 1em;
}

.texthaeng {
    padding-left: 1.5em;
    text-indent: -1.5em;
    line-height: 1.6em;
    margin: 5px auto 5px 0;
}

.datalist {
    padding: 0;
    margin: 0;
}

.datalist li {
    padding-left: 1.5em;
    text-indent: -1.5em;
    list-style-type: none;
    line-height: 1.6em;
}

.datalist li>* {
    text-indent: 0;
}

.prodlist li {
    padding-left: 1.5em;
    text-indent: -1.5em;
    list-style-type: none;
    line-height: 1.3em;
}

.prodlist li>* {
    text-indent: 0;
}

hr.png {
    background: url(../hr-11.png) repeat-x top left;
    height: 6px;
    width: 80%;
    border: none !important;
}

hr.style-zwo {
    border: 0;
    height: 1px;
    margin: 1.5em;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-drei {
    border: 0;
    height: 1px;
    margin: 1.5em 1.5em 0 1.5em;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-seven {
    width: 90%;
    height: 30px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

hr.style-seven:before {
    width: 100%;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

.farbe_rot {
    background: url(../hg_wolke.jpg);
}

a {
    color: #b5152b;
    text-decoration: none;
    outline: 0;
}

a:hover {
    color: #444;
    text-decoration: underline;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

h1,
h1 *,
h1>a,
h1>a:hover {
    margin: 0.8em 0 0.2em 0;
    font-weight: normal;
    font-size: 2.7em;
    color: #b5152b;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    letter-spacing: 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

h1.nachricht {
    font-size: 1.1em;
}

h2 {
    margin: 0.6em 0 1em 0;
    padding: 0;
    font-size: 2em;
    color: #b5152b;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0;
    font-weight: normal;
    font-family: 'Raleway', sans-serif;
}

h2>a,
h2>a:hover {
    font-size: 1em;
}

h3 {
    margin: 0.9em 0 0.3em 0;
    font-size: 1.3em;
    color: #b5152b;
    text-align: left;
    font-family: 'Sansita', sans-serif;
}

h3.erste {
    margin: 0 0 0.3em 0;
    font-size: 1.3em;
    color: #b5152b;
    text-align: left;
    font-family: 'Sansita', sans-serif;
}

h3>a,
h3>a:hover {
    font-size: 1em;
    text-align: left;
    font-family: 'Sansita', sans-serif;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

h3.centertext {
    align: center;
    font-size: 2.1em;
    margin: 15px 15px 10px 20px;
}

h3.kurs {
    font-size: 1.1em;
    margin: 0;
}

h4 {
    margin: 0 auto 10px 0;
    line-height: 1.6em;
    font-size: 1em;
    text-align: left;
}

p {
    margin: 0 auto 10px 0;
    line-height: 1.6em;
    font-size: 0.95em;
}

.gross {
    font-size: 1.1em;
}

.klein {
    font-size: 0.8em;
    color: grey;
}

.kleinh {
    font-size: 0.9em;
    color: #000;
    font-family: 'Raleway', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.umschlag {
    margin: -4px auto;
}

.rechts {
    text-align: right;
}

.mailto {
    text-align: right;
    margin: 10px auto;
    line-height: 1.2em;
    font-size: 0.85em;
}

a:hover#top-icon2 {
    background-color: #444;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.artikelkennung {
    margin: 1em 0 0.5em 0;
    text-align: center;
    color: #b5152b;
}

.pcenter {
    text-align: center;
}

.logo-gif {
    width: 210px;
    height: 90px;
}

.invisible {
    display: none;
    visibility: hidden;
}

a.unterstrichen {
    text-decoration: underline;
}

.nummern_mob {
    line-height: 1.7em;
}

.preis {
    font-weight: bold;
}









/* -------------------------------------------------------------
======  MEDIA QUERIES
------------------------------------------------------------- */


/* -- slider
------------------------------------------------------------- */

@media only screen and (min-width: 821px) {

    .slider_tab,
    .slider_mob {
        display: none;
        visibility: hidden;
    }
}

@media only screen and (min-width: 481px) and (max-width: 820px) {

    .slider_desk,
    .slider_mob {
        display: none;
        visibility: hidden;
    }
}

@media only screen and (max-width: 480px) {

    .slider_desk,
    .slider_tab {
        display: none;
        visibility: hidden;
    }
}

.slider-text {
    text-align: center;
}














/* -- zahlen-lang
------------------------------------------------------------- */

@media only screen and (min-width: 481px) {
    .nummern_mob {
        display: none;
        visibility: hidden;
    }
}

@media only screen and (max-width: 480px) {
    .nummern_desk {
        display: none;
        visibility: hidden;
    }
}













/* -- DESKTOP
------------------------------------------------------------- */


/* TABLET LAYOUT @media only screen and (max-width: 1080px)
----------------------------------------------- */

@media only screen and (min-width: 806px) and (max-width: 1080px) {
    .main50astart {
        display: none;
        visibility: hidden;
    }

    .main50bstart {
        width: 90%;
        float: left;
        margin: 5px 5px 5px 5px;
        padding: 0 20px 10px 20px;
    }

    p,
    .datalist {
        line-height: 1.4em;
        font-size: 0.85em;
    }

    img.produkt {
        max-width: 370px;
    }

    .img90 {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    iframe {
        margin: 5px 20px;
    }

    .box {
        float: left;
        width: 48%;
        margin-right: 2%;
        padding: 2px;
    }

    .box:last-child {
        margin-right: 0;
    }

    #vier {
        padding: 10px 10px 10px 60px;
        -webkit-columns: 4 130px;
        -moz-columns: 4 130px;
        columns: 4 130px;
        font-size: 0.9em;
    }
}












/* TABLET LAYOUT2 max-width: 805px
----------------------------------------------- */

@media only screen and (min-width: 721px) and (max-width: 805px) {
    .main100_textbox {
        padding: 10px 0 10px 10px;
        font-size: 1.2em;
    }

    .main60 {
        float: left;
        width: 51%;
        margin: 0 auto;
        padding: 15px 10px 0 10px;
        font-size: 1em;
    }

    .main50 {
        float: right;
        width: 41%;
        margin: 0 auto;
        padding: 15px 10px 0 10px;
        font-size: 1em;
    }

    .main66 {
        float: left;
        width: 50%;
        margin: 0 auto;
        padding: 15px 10px 0 10px;
        font-size: 1em;
    }

    .main33 {
        float: right;
        width: 37%;
        margin: 0 auto;
        padding: 15px 10px 0 10px;
        font-size: 1em;
    }

    .main33img {
        float: right;
        width: 37%;
        margin: 0 auto;
        padding: 15px 10px 0 10px;
        font-size: 1em;
    }

    div.main50a {
        width: 44%;
        float: left;
        margin: 5px 5px 5px 5px;
        padding: 0 10px 10px 10px;
    }

    div.main50b {
        max-width: 350px;
        width: 44%;
        float: right;
        margin: 5px 15px 5px 5px;
        padding: 0 10px 10px 10px;
    }

    h3,
    h3 *,
    h3>a,
    h3>a:hover {
        font-size: 1.1em;
    }

    p,
    .datalist {
        line-height: 1.3em;
        font-size: 0.8em;
    }

    img.produkt {
        max-width: 320px;
    }

    .img90 {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    #vier {
        padding: 10px 10px 10px 50px;
        -webkit-columns: 4 130px;
        -moz-columns: 4 130px;
        columns: 4 130px;
        font-size: 0.9em;
    }
}








/* TABLET LAYOUT2 max-width: 720px
----------------------------------------------- */

@media only screen and (min-width: 481px) and (max-width: 720px) {
    header {
        margin: 0 auto 5px;
        height: 66px;
        padding: 10px 20px 5px 20px;
        background-image: url(../logo_anra-mode_50.png);
        background-repeat: no-repeat, repeat;
        background-position: left 20px bottom 15px;
    }

    .main100_textbox {
        padding: 10px 0 10px 10px;
        font-size: 1.15em;
    }

    #nav {
        float: right;
        padding: 15px 0 0 0;
    }

    .main60,
    .main40,
    .main66,
    .main33,
    .main33img,
    .main50a,
    .main50b,
    .main50b_w,
    .mainwinter19 {
        width: 88%;
        float: left;
        margin: 5px 15px 5px 15px;
        padding: 5px 20px 10px 20px;
    }

    .main50eins,
    .main50zwei {
        width: 90%;
        float: left;
        margin: 0px 5px 5px 10px;
        padding: 0 20px 10px 20px;
    }

    .video-container_hoch {
        padding-bottom: 80%;
    }

    h3,
    h3 *,
    h3>a,
    h3>a:hover {
        font-size: 1em;
    }

    p,
    .datalist {
        line-height: 1.3em;
        font-size: 0.8em;
    }

    img {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    img.produkt {
        max-width: 380px;
    }

    .img90 {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    #rosenlogo {
        height: 60px;
        width: 200px;
        background: url(../rose_60_trans.png) bottom left no-repeat;
    }

    #footer_rose {
        height: 60px;
        width: 160px;
        background-image: url(../rose_60_trans.png);
        background-repeat: no-repeat;
        background-position: bottom left;
    }

    #footer3 {
        height: 40px;
    }

    #vier {
        padding: 10px 10px 10px 30px;
        -webkit-columns: 4 130px;
        -moz-columns: 4 130px;
        columns: 4 130px;
        font-size: 0.9em;
    }

    .umbruch_mobil {
        display: inline;
    }

    . .light_hover_container_weiss {
        padding: 0px;
        position: relative;
        width: 100%;
        max-width: 160px;
    }

    img.stadtmos {
        width: 140px;
        height: 140px;
    }

    img.hutparis {
        width: 140px;
        height: 140px;
    }

    .kurs33 {
        display: none;
        visibility: hidden;
    }

    .box {
        width: 47%;
        margin-right: 2%;
        padding: 2px;
    }

    .box:last-child {
        margin-right: 0;
    }
}










/* MOBILE 
----------------------------------------------- */

@media only screen and (max-width: 480px) {
    header {
        margin: 0 auto 5px;
        height: 66px;
        padding: 10px 20px 5px 20px;
        background-image: url(../logo_anra-mode_50.png);
        background-repeat: no-repeat, repeat;
        background-position: left 20px bottom 15px;
    }

    .main100_textbox {
        padding: 10px 0 10px 10px;
        font-size: 1.1em;
    }

    .main100box {
        width: 100%;
        margin: 0 auto;
        border: solid red;
        padding: 5px;
    }

    .mainbox {
        padding: 3px;
    }

    #nav {
        float: right;
        padding: 15px 0 0 0;
    }

    #navfoot {
        font-size: 0.9em;
        float: right;
        padding: 5px 15px 0 15px;
    }

    .main60,
    .main40,
    .main66,
    .main33,
    .main33img,
    .main50a,
    .main50b,
    .main50b_w,
    .mainwinter19 {
        width: 90%;
        float: center;
        margin: 0px 5px 5px 10px;
        padding: 0 20px 10px 20px;
    }

    .main50eins,
    .main50zwei {
        width: 90%;
        float: left;
        margin: 0px 5px 5px 10px;
        padding: 0 20px 10px 20px;
    }

    .main50astart {
        display: none;
        visibility: hidden;
    }

    .zoom50a,
    .zoom50b {
        width: 90%;
        float: center;
        margin: 0px 5px 5px 10px;
    }

    .video-container_hoch {
        padding-bottom: 100%;
    }

    h3,
    h3 *,
    h3>a,
    h3>a:hover {
        font-size: 0.8em;
    }

    p,
    .datalist,
    .prodlist {
        line-height: 1.3em;
        font-size: 0.8em;
    }

    img.produkt {
        max-width: 340px;
    }

    img {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }

    img.p100 {
        max-width: 100%;
    }

    iframe {
        margin: 5px 0px;
    }

    .box {
        width: 98%;
        margin-right: 2%;
        padding: 2px;
    }

    .box:last-child {
        margin-right: 0;
    }

    .logo-gif {
        width: 130px;
        height: 90px;
    }

    footer {
        height: 80px;
        padding-top: 10px;
        padding-bottom: 5px;
        margin: 5px auto 0px auto;
        border-top: 8px solid #b5152b;
    }

    #rosenlogo {
        height: 60px;
        width: 200px;
        background: url(../rose_60_trans.png) bottom left no-repeat;
    }

    #footer_rose {
        height: 60px;
        width: 160px;
        background-image: url(../rose_60_trans.png);
        background-repeat: no-repeat;
        background-position: bottom left;
    }

    #footer_weiss {
        height: 40px;
    }

    #vier {
        padding: 10px 10px;
        -webkit-columns: 4 100px;
        -moz-columns: 4 100px;
        columns: 4 100px;
        font-size: 0.8em;
    }

    .umbruch_mobil {
        display: inline;
    }

    .light_hover_container_weiss {
        padding: 0px;
        position: relative;
        width: 100%;
    }

    img.stadtmos {
        width: 140px;
        height: 140px;
    }

    img.hutparis {
        width: 140px;
        height: 140px;
    }

    .kurs33 {
        display: none;
        visibility: hidden;
    }

    .stoff {
        width: 100%;
        margin: 5px 0 5px 0;
    }

    .stoffbox {
        width: 95%;
        margin: 5px 0 5px 0;
    }
}








/* back to top */

#backtop {
    display: none;
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 10px;
    right: 20px;
    z-index: 99;
    border: none;
    background: #b5152b url(../oben.png) center no-repeat;
    cursor: pointer;
    border-radius: 5px;
}

#backtop:hover {
    background-color: #555;
}











/* captcha */

.capbox {
    display: inline-block;
    zoom: 1;
}

.capbox-inner {
    font-size: 0.75em;
    color: #000000;
    margin: 5px auto 0px auto;
    padding: 3px;
}

#CaptchaDiv {
    font: bold 17px verdana, arial, sans-serif;
    width: 80px;
    color: #000000;
    border: #000 1px solid;
    background-color: #E5CB00;
    padding: 4px;
}

#CaptchaInput {
    margin: 1px 0px 1px 0px;
    width: 65px;
}











/* tooltip */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 80px;
    font-weight: bold;
    background-color: #d99380;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    z-index: 10;
    bottom: 160%;
    left: 50%;
    margin-left: -50px;
    border-width: 2px;
    border-style: solid;
    border-color: #d99380;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #d99380 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}











/* tooltip mobile */

.tooltip .tooltiptext {
    width: 50px;
    font-size: 0.75em;
    border-radius: 5px;
    padding: 5px;
    bottom: 180%;
    left: 50%;
    margin-left: -36px;
}













/* zahl_hover */

.zahl {
    width: 30px;
    height: 30px;
}

.z_1aktiv {
    background: url(../zahlen/z30_1w.png) no-repeat;
}

.z_2aktiv {
    background: url(../zahlen/z30_2w.png) no-repeat;
}

.z_3aktiv {
    background: url(../zahlen/z30_3w.png) no-repeat;
}

.z_4aktiv {
    background: url(../zahlen/z30_4w.png) no-repeat;
}

.z_5aktiv {
    background: url(../zahlen/z30_5w.png) no-repeat;
}

.z_6aktiv {
    background: url(../zahlen/z30_6w.png) no-repeat;
}

.z_7aktiv {
    background: url(../zahlen/z30_7w.png) no-repeat;
}

.z_8aktiv {
    background: url(../zahlen/z30_8w.png) no-repeat;
}

.z_9aktiv {
    background: url(../zahlen/z30_9w.png) no-repeat;
}

.z_10aktiv {
    background: url(../zahlen/z30_10w.png) no-repeat;
}

.z_11aktiv {
    background: url(../zahlen/z30_11w.png) no-repeat;
}

.z_12aktiv {
    background: url(../zahlen/z30_12w.png) no-repeat;
}

.z_13aktiv {
    background: url(../zahlen/z30_13w.png) no-repeat;
}

.z_14aktiv {
    background: url(../zahlen/z30_14w.png) no-repeat;
}

.z_15aktiv {
    background: url(../zahlen/z30_15w.png) no-repeat;
}

.z_16aktiv {
    background: url(../zahlen/z30_16w.png) no-repeat;
}

.z_17aktiv {
    background: url(../zahlen/z30_17w.png) no-repeat;
}

.z_18aktiv {
    background: url(../zahlen/z30_18w.png) no-repeat;
}

.z_19aktiv {
    background: url(../zahlen/z30_19w.png) no-repeat;
}

.z_20aktiv {
    background: url(../zahlen/z30_20w.png) no-repeat;
}

.z_21aktiv {
    background: url(../zahlen/z30_21w.png) no-repeat;
}

.z_22aktiv {
    background: url(../zahlen/z30_22w.png) no-repeat;
}

.z_23aktiv {
    background: url(../zahlen/z30_23w.png) no-repeat;
}

.z_24aktiv {
    background: url(../zahlen/z30_24w.png) no-repeat;
}

.z_25aktiv {
    background: url(../zahlen/z30_25w.png) no-repeat;
}

.z_26aktiv {
    background: url(../zahlen/z30_26w.png) no-repeat;
}

.z_27aktiv {
    background: url(../zahlen/z30_27w.png) no-repeat;
}

.z_28aktiv {
    background: url(../zahlen/z30_28w.png) no-repeat;
}

.z_29aktiv {
    background: url(../zahlen/z30_29w.png) no-repeat;
}

.z_30aktiv {
    background: url(../zahlen/z30_30w.png) no-repeat;
}

.z_31aktiv {
    background: url(../zahlen/z30_31w.png) no-repeat;
}

.z_32aktiv {
    background: url(../zahlen/z30_32w.png) no-repeat;
}

.z_33aktiv {
    background: url(../zahlen/z30_33w.png) no-repeat;
}

.z_34aktiv {
    background: url(../zahlen/z30_34w.png) no-repeat;
}

.z_35aktiv {
    background: url(../zahlen/z30_35w.png) no-repeat;
}

.z_36aktiv {
    background: url(../zahlen/z30_36w.png) no-repeat;
}

.z_37aktiv {
    background: url(../zahlen/z30_37w.png) no-repeat;
}

.z_38aktiv {
    background: url(../zahlen/z30_38w.png) no-repeat;
}

.z_39aktiv {
    background: url(../zahlen/z30_39w.png) no-repeat;
}

.z_40aktiv {
    background: url(../zahlen/z30_40w.png) no-repeat;
}

.z_41aktiv {
    background: url(../zahlen/z30_41w.png) no-repeat;
}

.z_42aktiv {
    background: url(../zahlen/z30_42w.png) no-repeat;
}

.z_43aktiv {
    background: url(../zahlen/z30_43w.png) no-repeat;
}

.z_1 {
    background: url(../zahlen/z30_1r.png) no-repeat;
}

.z_1:hover {
    background: url(../zahlen/z30_1h.png) no-repeat;
}

.z_2 {
    background: url(../zahlen/z30_2r.png) no-repeat;
}

.z_2:hover {
    background: url(../zahlen/z30_2h.png) no-repeat;
}

.z_3 {
    background: url(../zahlen/z30_3r.png) no-repeat;
}

.z_3:hover {
    background: url(../zahlen/z30_3h.png) no-repeat;
}

.z_4 {
    background: url(../zahlen/z30_4r.png) no-repeat;
}

.z_4:hover {
    background: url(../zahlen/z30_4h.png) no-repeat;
}

.z_5 {
    background: url(../zahlen/z30_5r.png) no-repeat;
}

.z_5:hover {
    background: url(../zahlen/z30_5h.png) no-repeat;
}

.z_6 {
    background: url(../zahlen/z30_6r.png) no-repeat;
}

.z_6:hover {
    background: url(../zahlen/z30_6h.png) no-repeat;
}

.z_7 {
    background: url(../zahlen/z30_7r.png) no-repeat;
}

.z_7:hover {
    background: url(../zahlen/z30_7h.png) no-repeat;
}

.z_8 {
    background: url(../zahlen/z30_8r.png) no-repeat;
}

.z_8:hover {
    background: url(../zahlen/z30_8h.png) no-repeat;
}

.z_9 {
    background: url(../zahlen/z30_9r.png) no-repeat;
}

.z_9:hover {
    background: url(../zahlen/z30_9h.png) no-repeat;
}

.z_10 {
    background: url(../zahlen/z30_10r.png) no-repeat;
}

.z_10:hover {
    background: url(../zahlen/z30_10h.png) no-repeat;
}

.z_11 {
    background: url(../zahlen/z30_11r.png) no-repeat;
}

.z_11:hover {
    background: url(../zahlen/z30_11h.png) no-repeat;
}

.z_12 {
    background: url(../zahlen/z30_12r.png) no-repeat;
}

.z_12:hover {
    background: url(../zahlen/z30_12h.png) no-repeat;
}

.z_13 {
    background: url(../zahlen/z30_13r.png) no-repeat;
}

.z_13:hover {
    background: url(../zahlen/z30_13h.png) no-repeat;
}

.z_14 {
    background: url(../zahlen/z30_14r.png) no-repeat;
}

.z_14:hover {
    background: url(../zahlen/z30_14h.png) no-repeat;
}

.z_15 {
    background: url(../zahlen/z30_15r.png) no-repeat;
}

.z_15:hover {
    background: url(../zahlen/z30_15h.png) no-repeat;
}

.z_16 {
    background: url(../zahlen/z30_16r.png) no-repeat;
}

.z_16:hover {
    background: url(../zahlen/z30_16h.png) no-repeat;
}

.z_17 {
    background: url(../zahlen/z30_17r.png) no-repeat;
}

.z_18 {
    background: url(../zahlen/z30_18r.png) no-repeat;
}

.z_19 {
    background: url(../zahlen/z30_19r.png) no-repeat;
}

.z_20 {
    background: url(../zahlen/z30_20r.png) no-repeat;
}

.z_21 {
    background: url(../zahlen/z30_21r.png) no-repeat;
}

.z_22 {
    background: url(../zahlen/z30_22r.png) no-repeat;
}

.z_23 {
    background: url(../zahlen/z30_23r.png) no-repeat;
}

.z_24 {
    background: url(../zahlen/z30_24r.png) no-repeat;
}

.z_25 {
    background: url(../zahlen/z30_25r.png) no-repeat;
}

.z_26 {
    background: url(../zahlen/z30_26r.png) no-repeat;
}

.z_27 {
    background: url(../zahlen/z30_27r.png) no-repeat;
}

.z_28 {
    background: url(../zahlen/z30_28r.png) no-repeat;
}

.z_29 {
    background: url(../zahlen/z30_29r.png) no-repeat;
}

.z_30 {
    background: url(../zahlen/z30_30r.png) no-repeat;
}

.z_31 {
    background: url(../zahlen/z30_31r.png) no-repeat;
}

.z_32 {
    background: url(../zahlen/z30_32r.png) no-repeat;
}

.z_33 {
    background: url(../zahlen/z30_33r.png) no-repeat;
}

.z_34 {
    background: url(../zahlen/z30_34r.png) no-repeat;
}

.z_35 {
    background: url(../zahlen/z30_35r.png) no-repeat;
}

.z_36 {
    background: url(../zahlen/z30_36r.png) no-repeat;
}

.z_37 {
    background: url(../zahlen/z30_37r.png) no-repeat;
}

.z_38 {
    background: url(../zahlen/z30_38r.png) no-repeat;
}

.z_39 {
    background: url(../zahlen/z30_39r.png) no-repeat;
}

.z_40 {
    background: url(../zahlen/z30_40r.png) no-repeat;
}

.z_41 {
    background: url(../zahlen/z30_41r.png) no-repeat;
}

.z_42 {
    background: url(../zahlen/z30_42r.png) no-repeat;
}

.z_43 {
    background: url(../zahlen/z30_43r.png) no-repeat;
}

.z_17:hover {
    background: url(../zahlen/z30_17h.png) no-repeat;
}

.z_18:hover {
    background: url(../zahlen/z30_18h.png) no-repeat;
}

.z_19:hover {
    background: url(../zahlen/z30_19h.png) no-repeat;
}

.z_20:hover {
    background: url(../zahlen/z30_20h.png) no-repeat;
}

.z_21:hover {
    background: url(../zahlen/z30_21h.png) no-repeat;
}

.z_22:hover {
    background: url(../zahlen/z30_22h.png) no-repeat;
}

.z_23:hover {
    background: url(../zahlen/z30_23h.png) no-repeat;
}

.z_24:hover {
    background: url(../zahlen/z30_24h.png) no-repeat;
}

.z_25:hover {
    background: url(../zahlen/z30_25h.png) no-repeat;
}

.z_26:hover {
    background: url(../zahlen/z30_26h.png) no-repeat;
}

.z_27:hover {
    background: url(../zahlen/z30_27h.png) no-repeat;
}

.z_28:hover {
    background: url(../zahlen/z30_28h.png) no-repeat;
}

.z_29:hover {
    background: url(../zahlen/z30_29h.png) no-repeat;
}

.z_30:hover {
    background: url(../zahlen/z30_30h.png) no-repeat;
}

.z_31:hover {
    background: url(../zahlen/z30_31h.png) no-repeat;
}

.z_32:hover {
    background: url(../zahlen/z30_32h.png) no-repeat;
}

.z_33:hover {
    background: url(../zahlen/z30_33h.png) no-repeat;
}

.z_34:hover {
    background: url(../zahlen/z30_34h.png) no-repeat;
}

.z_35:hover {
    background: url(../zahlen/z30_35h.png) no-repeat;
}

.z_36:hover {
    background: url(../zahlen/z30_36h.png) no-repeat;
}

.z_37:hover {
    background: url(../zahlen/z30_37h.png) no-repeat;
}

.z_38:hover {
    background: url(../zahlen/z30_38h.png) no-repeat;
}

.z_39:hover {
    background: url(../zahlen/z30_39h.png) no-repeat;
}

.z_40:hover {
    background: url(../zahlen/z30_40h.png) no-repeat;
}

.z_41:hover {
    background: url(../zahlen/z30_41h.png) no-repeat;
}

.z_42:hover {
    background: url(../zahlen/z30_42h.png) no-repeat;
}

.z_43:hover {
    background: url(../zahlen/z30_43h.png) no-repeat;
}

.z_vor {
    width: 20px;
    height: 20px;
    background: url(../zahlen/z30_vor1.png) no-repeat;
}

.z_vor:hover {
    width: 20px;
    height: 20px;
    background: url(../zahlen/z30_vor2.png) no-repeat;
}

.z_zurueck {
    width: 20px;
    height: 20px;
    background: url(../zahlen/z30_zurueck1.png) no-repeat;
}

.z_zurueck:hover {
    width: 20px;
    height: 20px;
    background: url(../zahlen/z30_zurueck2.png) no-repeat;
}








/* MOBILE 
----------------------------------------------- */

@media only screen and (max-width: 640px) {
    .zahl {
        width: 25px;
        height: 25px;
    }

    .z_1aktiv {
        background: url(../zahlen/z20_1w.png) no-repeat;
    }

    .z_2aktiv {
        background: url(../zahlen/z20_2w.png) no-repeat;
    }

    .z_3aktiv {
        background: url(../zahlen/z20_3w.png) no-repeat;
    }

    .z_4aktiv {
        background: url(../zahlen/z20_4w.png) no-repeat;
    }

    .z_5aktiv {
        background: url(../zahlen/z20_5w.png) no-repeat;
    }

    .z_6aktiv {
        background: url(../zahlen/z20_6w.png) no-repeat;
    }

    .z_7aktiv {
        background: url(../zahlen/z20_7w.png) no-repeat;
    }

    .z_8aktiv {
        background: url(../zahlen/z20_8w.png) no-repeat;
    }

    .z_9aktiv {
        background: url(../zahlen/z20_9w.png) no-repeat;
    }

    .z_10aktiv {
        background: url(../zahlen/z20_10w.png) no-repeat;
    }

    .z_11aktiv {
        background: url(../zahlen/z20_11w.png) no-repeat;
    }

    .z_12aktiv {
        background: url(../zahlen/z20_12w.png) no-repeat;
    }

    .z_13aktiv {
        background: url(../zahlen/z20_13w.png) no-repeat;
    }

    .z_14aktiv {
        background: url(../zahlen/z20_14w.png) no-repeat;
    }

    .z_15aktiv {
        background: url(../zahlen/z20_15w.png) no-repeat;
    }

    .z_16aktiv {
        background: url(../zahlen/z20_16w.png) no-repeat;
    }

    .z_17aktiv {
        background: url(../zahlen/z20_17w.png) no-repeat;
    }

    .z_18aktiv {
        background: url(../zahlen/z20_18w.png) no-repeat;
    }

    .z_19aktiv {
        background: url(../zahlen/z20_19w.png) no-repeat;
    }

    .z_20aktiv {
        background: url(../zahlen/z20_20w.png) no-repeat;
    }

    .z_21aktiv {
        background: url(../zahlen/z20_21w.png) no-repeat;
    }

    .z_22aktiv {
        background: url(../zahlen/z20_22w.png) no-repeat;
    }

    .z_23aktiv {
        background: url(../zahlen/z20_23w.png) no-repeat;
    }

    .z_24aktiv {
        background: url(../zahlen/z20_24w.png) no-repeat;
    }

    .z_25aktiv {
        background: url(../zahlen/z20_25w.png) no-repeat;
    }

    .z_26aktiv {
        background: url(../zahlen/z20_26w.png) no-repeat;
    }

    .z_27aktiv {
        background: url(../zahlen/z20_27w.png) no-repeat;
    }

    .z_28aktiv {
        background: url(../zahlen/z20_28w.png) no-repeat;
    }

    .z_29aktiv {
        background: url(../zahlen/z20_29w.png) no-repeat;
    }

    .z_30aktiv {
        background: url(../zahlen/z20_30w.png) no-repeat;
    }

    .z_31aktiv {
        background: url(../zahlen/z20_31w.png) no-repeat;
    }

    .z_32aktiv {
        background: url(../zahlen/z20_32w.png) no-repeat;
    }

    .z_33aktiv {
        background: url(../zahlen/z20_33w.png) no-repeat;
    }

    .z_34aktiv {
        background: url(../zahlen/z20_34w.png) no-repeat;
    }

    .z_35aktiv {
        background: url(../zahlen/z20_35w.png) no-repeat;
    }

    .z_36aktiv {
        background: url(../zahlen/z20_36w.png) no-repeat;
    }

    .z_37aktiv {
        background: url(../zahlen/z20_37w.png) no-repeat;
    }

    .z_38aktiv {
        background: url(../zahlen/z20_38w.png) no-repeat;
    }

    .z_39aktiv {
        background: url(../zahlen/z20_39w.png) no-repeat;
    }

    .z_40aktiv {
        background: url(../zahlen/z20_40w.png) no-repeat;
    }

    .z_41aktiv {
        background: url(../zahlen/z20_41w.png) no-repeat;
    }

    .z_42aktiv {
        background: url(../zahlen/z20_42w.png) no-repeat;
    }

    .z_43aktiv {
        background: url(../zahlen/z20_43w.png) no-repeat;
    }

    .z_1 {
        background: url(../zahlen/z20_1r.png) no-repeat;
    }

    .z_1:hover {
        background: url(../zahlen/z20_1h.png) no-repeat;
    }

    .z_2 {
        background: url(../zahlen/z20_2r.png) no-repeat;
    }

    .z_2:hover {
        background: url(../zahlen/z20_2h.png) no-repeat;
    }

    .z_3 {
        background: url(../zahlen/z20_3r.png) no-repeat;
    }

    .z_3:hover {
        background: url(../zahlen/z20_3h.png) no-repeat;
    }

    .z_4 {
        background: url(../zahlen/z20_4r.png) no-repeat;
    }

    .z_4:hover {
        background: url(../zahlen/z20_4h.png) no-repeat;
    }

    .z_5 {
        background: url(../zahlen/z20_5r.png) no-repeat;
    }

    .z_5:hover {
        background: url(../zahlen/z20_5h.png) no-repeat;
    }

    .z_6 {
        background: url(../zahlen/z20_6r.png) no-repeat;
    }

    .z_6:hover {
        background: url(../zahlen/z20_6h.png) no-repeat;
    }

    .z_7 {
        background: url(../zahlen/z20_7r.png) no-repeat;
    }

    .z_7:hover {
        background: url(../zahlen/z20_7h.png) no-repeat;
    }

    .z_8 {
        background: url(../zahlen/z20_8r.png) no-repeat;
    }

    .z_8:hover {
        background: url(../zahlen/z20_8h.png) no-repeat;
    }

    .z_9 {
        background: url(../zahlen/z20_9r.png) no-repeat;
    }

    .z_9:hover {
        background: url(../zahlen/z20_9h.png) no-repeat;
    }

    .z_10 {
        background: url(../zahlen/z20_10r.png) no-repeat;
    }

    .z_10:hover {
        background: url(../zahlen/z20_10h.png) no-repeat;
    }

    .z_11 {
        background: url(../zahlen/z20_11r.png) no-repeat;
    }

    .z_11:hover {
        background: url(../zahlen/z20_11h.png) no-repeat;
    }

    .z_12 {
        background: url(../zahlen/z20_12r.png) no-repeat;
    }

    .z_12:hover {
        background: url(../zahlen/z20_12h.png) no-repeat;
    }

    .z_13 {
        background: url(../zahlen/z20_13r.png) no-repeat;
    }

    .z_13:hover {
        background: url(../zahlen/z20_13h.png) no-repeat;
    }

    .z_14 {
        background: url(../zahlen/z20_14r.png) no-repeat;
    }

    .z_14:hover {
        background: url(../zahlen/z20_14h.png) no-repeat;
    }

    .z_15 {
        background: url(../zahlen/z20_15r.png) no-repeat;
    }

    .z_15:hover {
        background: url(../zahlen/z20_15h.png) no-repeat;
    }

    .z_16 {
        background: url(../zahlen/z20_16r.png) no-repeat;
    }

    .z_16:hover {
        background: url(../zahlen/z20_16h.png) no-repeat;
    }

    .z_17 {
        background: url(../zahlen/z20_17r.png) no-repeat;
    }

    .z_18 {
        background: url(../zahlen/z20_18r.png) no-repeat;
    }

    .z_19 {
        background: url(../zahlen/z20_19r.png) no-repeat;
    }

    .z_20 {
        background: url(../zahlen/z20_20r.png) no-repeat;
    }

    .z_21 {
        background: url(../zahlen/z20_21r.png) no-repeat;
    }

    .z_22 {
        background: url(../zahlen/z20_22r.png) no-repeat;
    }

    .z_23 {
        background: url(../zahlen/z20_23r.png) no-repeat;
    }

    .z_24 {
        background: url(../zahlen/z20_24r.png) no-repeat;
    }

    .z_25 {
        background: url(../zahlen/z20_25r.png) no-repeat;
    }

    .z_26 {
        background: url(../zahlen/z20_26r.png) no-repeat;
    }

    .z_27 {
        background: url(../zahlen/z20_27r.png) no-repeat;
    }

    .z_28 {
        background: url(../zahlen/z20_28r.png) no-repeat;
    }

    .z_29 {
        background: url(../zahlen/z20_29r.png) no-repeat;
    }

    .z_30 {
        background: url(../zahlen/z20_30r.png) no-repeat;
    }

    .z_31 {
        background: url(../zahlen/z20_31r.png) no-repeat;
    }

    .z_32 {
        background: url(../zahlen/z20_32r.png) no-repeat;
    }

    .z_33 {
        background: url(../zahlen/z20_33r.png) no-repeat;
    }

    .z_34 {
        background: url(../zahlen/z20_34r.png) no-repeat;
    }

    .z_35 {
        background: url(../zahlen/z20_35r.png) no-repeat;
    }

    .z_36 {
        background: url(../zahlen/z20_36r.png) no-repeat;
    }

    .z_37 {
        background: url(../zahlen/z20_37r.png) no-repeat;
    }

    .z_37 {
        background: url(../zahlen/z20_37r.png) no-repeat;
    }

    .z_38 {
        background: url(../zahlen/z20_38r.png) no-repeat;
    }

    .z_39 {
        background: url(../zahlen/z20_39r.png) no-repeat;
    }

    .z_40 {
        background: url(../zahlen/z20_40r.png) no-repeat;
    }

    .z_41 {
        background: url(../zahlen/z20_41r.png) no-repeat;
    }

    .z_42 {
        background: url(../zahlen/z20_42r.png) no-repeat;
    }

    .z_43 {
        background: url(../zahlen/z20_43r.png) no-repeat;
    }

    .z_17:hover {
        background: url(../zahlen/z20_17h.png) no-repeat;
    }

    .z_18:hover {
        background: url(../zahlen/z20_18h.png) no-repeat;
    }

    .z_19:hover {
        background: url(../zahlen/z20_19h.png) no-repeat;
    }

    .z_20:hover {
        background: url(../zahlen/z20_20h.png) no-repeat;
    }

    .z_21:hover {
        background: url(../zahlen/z20_21h.png) no-repeat;
    }

    .z_22:hover {
        background: url(../zahlen/z20_22h.png) no-repeat;
    }

    .z_23:hover {
        background: url(../zahlen/z20_23h.png) no-repeat;
    }

    .z_24:hover {
        background: url(../zahlen/z20_24h.png) no-repeat;
    }

    .z_25:hover {
        background: url(../zahlen/z20_25h.png) no-repeat;
    }

    .z_26:hover {
        background: url(../zahlen/z20_26h.png) no-repeat;
    }

    .z_27:hover {
        background: url(../zahlen/z20_27h.png) no-repeat;
    }

    .z_28:hover {
        background: url(../zahlen/z20_28h.png) no-repeat;
    }

    .z_29:hover {
        background: url(../zahlen/z20_29h.png) no-repeat;
    }

    .z_30:hover {
        background: url(../zahlen/z20_30h.png) no-repeat;
    }

    .z_31:hover {
        background: url(../zahlen/z20_31h.png) no-repeat;
    }

    .z_32:hover {
        background: url(../zahlen/z20_32h.png) no-repeat;
    }

    .z_33:hover {
        background: url(../zahlen/z20_33h.png) no-repeat;
    }

    .z_34:hover {
        background: url(../zahlen/z20_34h.png) no-repeat;
    }

    .z_35:hover {
        background: url(../zahlen/z20_35h.png) no-repeat;
    }

    .z_36:hover {
        background: url(../zahlen/z20_36h.png) no-repeat;
    }

    .z_37:hover {
        background: url(../zahlen/z20_37h.png) no-repeat;
    }

    .z_38:hover {
        background: url(../zahlen/z20_38h.png) no-repeat;
    }

    .z_39:hover {
        background: url(../zahlen/z20_39h.png) no-repeat;
    }

    .z_40:hover {
        background: url(../zahlen/z20_40h.png) no-repeat;
    }

    .z_41:hover {
        background: url(../zahlen/z20_41h.png) no-repeat;
    }

    .z_42:hover {
        background: url(../zahlen/z20_42h.png) no-repeat;
    }

    .z_43:hover {
        background: url(../zahlen/z20_43h.png) no-repeat;
    }

    .z_vor {
        width: 15px;
        height: 15px;
        background: url(../zahlen/z20_vor1.png) no-repeat;
    }

    .z_vor:hover {
        width: 15px;
        height: 15px;
        background: url(../zahlen/z20_vor2.png) no-repeat;
    }

    .z_zurueck {
        width: 15px;
        height: 15px;
        background: url(../zahlen/z20_zurueck1.png) no-repeat;
    }

    .z_zurueck:hover {
        width: 15px;
        height: 15px;
        background: url(../zahlen/z20_zurueck2.png) no-repeat;
    }
}