@charset "UTF-8";

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
  url('../fonts/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
  url('../fonts/va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: local(''),
  url('../fonts/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVspcBO5XpjLdSL17o.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.g-4,
.gx-4 {
	--bs-gutter-x: 40px;
}

.joe
{
	font-family: "Fira Sans", sans-serif;
    font-size:20px;
    font-style:normal;
    font-weight:400;
    color:#000000;
}

#scrollposition1
{
    position:fixed;
    top:100px;
    left:10px;
    color:#000000;
    font-size:14px;
    z-index:99999;
    display:none;
}

/*
Hintergrund: 238|230|223 = #eee6df
Beige: 172|153|130 = #ac9982
Dunkles Beige: 123|105|87 = #7b6957
Rot: 172|40|64 = #ac2840
*/

.background-joe-header
{
    background:#eee6df;
    position:relative;
    width:100%;
    height:auto;
}

.background-joe
{
    background:#eee6df;
}

.background-joe-passt, .background-joe-produktinfos, .background-logo, .background-kontaktformular
{
    background:#ffffff;
}

.background-joe-trenner-linie
{
    background:#ac2840;
    width:100%;
    height:2px;
    display:block;
}

.background-joe-produktfeatures
{
     background:#7b6957;
}

.background-joe-test
{
     background:#ac2840;
}

.background-joe-footer
{
     background:#000000;
}

.joe-textrot
{
    color:#ac2840!important;
}

.joe-beige
{
    color:#ac9982;    
}

.joe-beige-dunkel
{
     color:#7b6957;
}

.Bild, .bild
{
    width:100%;
    height:auto;
}

.joe-tasse-header
{
    width:80%;
    height:auto;
    margin-left:15%;
    margin-right:auto;
    position:relative;
}

.joe-bus-header
{
    width:59.5%;
    height:auto;
    position:absolute;
    left:13.6%;
    top:26.9%;
    transform:rotate(-40deg);
    transition: 1.6s ease-in-out;
}

.joe-bus-header-fahrt
{
    transform:rotate(40deg);
}


.joe-bus-header-text
{
    width:87%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    text-align:center;
    top:48%;
    left:0px;
    color:#000000;
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    line-height:1.2;
}

.joe-header-pfeil
{
    width:10%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:7%;
    cursor:pointer;
}

.joe-menu-zeile-pos
{
    width:100%;
    height:90px;
    top:0px;
    display:block;
    position:fixed;
    z-index:88888;
    transition: all 1s;
}

.joe-menu-zeile
{
    width:100%;
    height:90px;
    position:relative;
    display:block;
}

.joe-logo-sw
{
    width:120px;
    height:auto;
    position:absolute;
    left:0px;
    top:10px;
}

.joe-navibutton
{
	display:block;
	position:absolute;
	right:0px;
	top:24px;
	width:52px;
  	height:auto;
	z-index:20000;
    transition: all 1s;
}



#joe-nav-icon1 {
  width: 52px;
  height: 43px;
  position: relative;
  margin: 0px 0px 0px 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#joe-nav-icon1 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #000000;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#joe-nav-icon1 span:nth-child(1) {
  top: 0px;
}

#joe-nav-icon1 span:nth-child(2) {
  top: 19px;
}

#joe-nav-icon1 span:nth-child(3) {
  top: 38px;
}

#joe-nav-icon1.open span:nth-child(1) {
  top:20px;
  left:6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #ffffff;    
}

#joe-nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: 160px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#joe-nav-icon1.open span:nth-child(3) {
  top: 20px;
  left:6px;
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  -o-transform: rotate(-225deg);
  transform: rotate(-225deg);
  background: #ffffff;      
}

.joe-mobilmenufenster
{
	width:50.2%;
	height:100%;
	position:fixed;
	top:0px;
	right:0px;
	background:#ac2840;
	display:none;
    z-index:15000;
}

.joe-h1
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
}

.joe-h1-kontakt
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:36px;
    font-weight:600;
    text-align:center;
    color:#000000;
}



.joe-logo-gross
{
    max-width:500px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:60px;
    
}

.joe-headerbild-mehrwert
{
    max-width:500px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:60px;
    position:relative;
}

.joe-headerbild-mehrwert-becher
{
    position:absolute;
    top:12%;
    right:-8%;
    width:48%;
    height:auto;
}

.joe-linie-rot
{
    max-width:500px;
    height:1px;
    background:#ac2840;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.joe-header-text
{
    width:100%;
    height:auto;
    margin-top:60px;
    margin-bottom:80px;
}

.joe-button
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:24px;
    font-weight:600;
    padding-top:16px;
    border: 1px solid #ac2840;
    color: #ffffff;
    display:block;    
    transition: all .5s;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:280px;
    height:54px;
    background:#ac2840;
    line-height:1;
    border-radius:27px;
}

.joe-button:hover
{
    background:#ffffff;
    border: 1px solid #ac2840;
    color:#ac2840;
}

.joe-button-weiss
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:24px;
    font-weight:600;
    padding-top:16px;
    border: 1px solid #ffffff;
    color: #ac2840;
    display:block;    
    transition: all .5s;
    text-align:center;
    width:280px;
    height:54px;
    background:#ffffff;
    line-height:1;
    border-radius:27px;
}

.joe-button-weiss:hover
{
    background:#ac2840;
    border: 1px solid #ffffff;
    color:#ffffff;
}

.joe-tasse-passt-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
    color:#ac2840;
}

.joe-tasse-halterung
{
    width:100%;
    height:auto;
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
}

.joe-passt-text
{
    padding-top:60px;
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
}

.joe-passt-textfeld
{
    text-align:center;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

.joe-passt-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
    color:#000000;
}



.joe-klapptischvarianten
{
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
}

.joe-produktfeatures-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
    color:#ffffff;
}

.joe-features-bild-rund
{
    width:100%;
    height:auto;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px #ffffff;
    border-radius:50%;
    overflow:hidden;
}

.joe-features-textfeld-bold
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:600;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#ffffff;
}

.joe-features-textfeld
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#ffffff;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}

.joe-produktinfos-header, .joe-produktangebot-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
    color:#000000;
}

.joe-produktinfos-bild-rund
{
    width:100%;
    height:auto;
    max-width:160px;
    margin-left:auto;
    margin-right:auto;
}

.joe-produktinfos-textfeld-bold
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:600;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#000000;
}

.joe-produktinfos-textfeld
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#000000;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}

.joe-produktangebot-subheader
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#000000;
    max-width:1220px;
    margin-left:auto;
    margin-right:auto;
}

.joe-produktangebot-tassen
{
    width:100%;
    height:auto;
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

.joe-produktangebot-bild-rund
{
    width:100%;
    height:auto;
    max-width:160px;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    left:0px;
    top:0px;
}

.joe-produktangebot-tassen-subheader
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:36px;
    font-weight:600;
    text-align:left;
    color:#ac2840;
    position:absolute;
    left:0px;
    bottom:0px;
}

.joe-produktangebot-block-rot
{
    width:100%;
    height:auto;
    background:#ac2840;
    display:block;
    padding:40px;
    color:#ffffff;
}

.joe-produktangebot-block-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:left;
}

.joe-produktangebot-block-bold, .joe-produktangebot-block-preis-bold
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:600;
    font-size:24px;
    transition: .5s ease-in-out;
    text-align:left;
}

.joe-produktangebot-block-text, .joe-produktangebot-block-preis-text
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:24px;
    transition: .5s ease-in-out;
    text-align:left;
}

.joe-produktangebot-preiszeile
{
    width:100%;
    height:auto;
    position:relative;
    
}

.joe-produktangebot-preiszeile-preis
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:right;
    position:absolute;
    bottom:-5px;
    right:0px;
    line-height:1;
}

.joe-produktangebot-block-preis-bold, .joe-produktangebot-block-preis-text
{
     line-height:1;
}

.joe-produktangebot-block-rahmen-rot
{
    width:100%;
    height:auto;
    background:#ffffff;
    display:block;
    padding:40px;
    color:#000000;
    border:solid 1px #ac2840;
}

.joe-produktangebot-preisinfo-text
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:left;
    color:#000000;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    padding-left:15px;
}

.joe-produktangebot-preisinfo-stern
{
    position:absolute;
    top:0px;
    left:0px;
    width:15px;
}

.joe-clou-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:center;
    color:#000000;
}

.joe-clou-subheader
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#000000;
    max-width:1220px;
    margin-left:auto;
    margin-right:auto;
}


.joe-clou-bild
{
    width:100%;
    height:auto;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}


.joe-clou-textfeld-pos
{
    width:100%;
    height:auto;
    position:absolute;
    top:8%;
    left:0px;
}


.joe-clou-textfeld-bold
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:600;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
}

.joe-mit-logo-schwarz, .joe-mit-logo-schwarz-transparent
{
    width:100%;
    height:auto;
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

.joe-mit-logo-schwarz-preis-icon
{
    width:20%;
    height:auto;
    position:absolute;
    right:12%;
    top:14%;
}

.joe-mit-logo-schwarz-preis-joe-weiss
{
    width:25%;
    height:auto;
    position:absolute;
    right:12%;
    bottom:12%;
}

.joe-bild-transparent
{
    opacity:0;
    width:100%;
    height:auto;
}

.joe-mit-logo-hintergrund-beige-out
{
    display:flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0px;
    left:0px;
    background:#eee6df;
    width:100%;
    height:100%;
    transition: .5s ease-in-out;
}

.joe-mit-logo-hintergrund-beige
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    max-width:550px;
    height:460px;
}

.joe-farben
{
    width:100%;
    max-width:600px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.joe-farben-text
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:center;
    color:#000000;
    padding-top:40px;
    padding-bottom:40px;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
}

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

.joe-farben-text-bold-beige
{
    font-weight:600;
    color:#ac9982;
}























.joe-footertext, .joe-footertext-center, .joe-footertext-links
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:16px;
    color:#ffffff;
    position:relative;
    line-height:1;
}

.joe-footertext-links
{
    text-align:left;
}

.joe-footertext-bold
{
    font-weight:600;
}

.joe-footertext-center
{
    text-align:center;
}

.joe-footertext-center a
{
    color:#ffffff!important;
}

.joe-footertext-center a:hover
{
    color:#ac2840!important;
}

.joe-footerlogo-rechts
{
    width:180px;
    height:auto;
    margin-right:0px;
    margin-left:auto;
}


.joe-test-header
{
    font-family: "Roboto Condensed", sans-serif;
    font-size:48px;
    font-weight:600;
    text-align:left;
    color:#ffffff;
}

.joe-test-text, .joe-test-text-bold
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:left;
    max-width:420px;
    color:#ffffff;
}

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

.joe-test-block
{
    width:100%;
    height:auto;
    position:relative;
}

.joe-test-tasse
{
    width:250px;
    height:auto;
    position:absolute;
    top:0px;
    right:0px;
}

.joe-test-text-block
{
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    font-size:20px;
    transition: .5s ease-in-out;
    text-align:left;
    color:#ffffff;
    padding-top:100px;
}

.joe-menu-link-texte
{
    font-size:18px;
    font-weight:300;
    color:#ffffff;
    text-align:center;
    line-height:1;
    padding:12px 5px;
    transition: all 0.5s;
    cursor:pointer;
}

.joe-menu-link-texte:hover
{
    color:#000000;
}



.joe-kontaktblock
{
    width:750px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    position:relative;
    height:60px;
    font-family: 'Fira Sans', sans-serif;
    font-weight:400;
    
}

.joe-kontaktblock-1
{
    width:240px;
    height:60px;
    
    position:absolute;
    left:0px;
    top:0px;
}

.joe-kontaktblock-2
{
    width:196px;
    height:60px;
    
    position:absolute;
    left:254px;
    top:0px;
}

.joe-kontaktblock-3
{
    width:245px;
    height:60px;
    position:absolute;
    left:514px;
    top:0px;
}

.joe-telefon-icon
{
    width:40px;
    height:auto;
    position:absolute;
    top:10px;
    left:0px;
}

.joe-mail-icon
{
    width:40px;
    height:auto;
    position:absolute;
    top:17px;
    left:0px;
}

.joe-standort-icon
{
    width:34px;
    height:auto;
    position:absolute;
    top:7px;
    left:5px;
}

.joe-kontakt-block-text
{
    width:230px;
    height:60px;
    border-left:solid 2px #ac2840;
    position:absolute;
    top:0px;
    left:50px;
    padding-left:10px;
    padding-top:10px;
}



.joe-kontakt-block-text-oben, .joe-kontakt-block-text-unten
{
    font-size:15px;
    color:#000000;
    line-height:1;
    text-align:left;
    
}

.joe-ontakt-block-text-oben
{
    font-weight:700;
}

.joe-kontakt-block-text-unten
{
    font-weight:500;
    padding-top:6px;
}

.joe-logooben-menu
{
    width:100px;
    height:auto;
    position:absolute;
    top:15px;
    left:40px;
    transition: all .5s;
    display:none;
}














@media (max-width: 1699px)
{
    .joe-passt-text
    {
        padding-top:0px;
    }
    
    .joe-produktangebot-tassen-subheader
    {
        font-family: "Roboto Condensed", sans-serif;
        font-size:36px;
        font-weight:600;
        text-align:center;
        color:#ac2840;
        position:relative;
        left:auto;
        bottom:auto;
    }
    
}

@media (max-width: 1619px)
{
    .joe-mobilmenufenster
    {
        width:100%;
        max-width:810px;
    }
   
    
}

@media (max-width: 1400px)
{
    .joe-bus-header-text
    {
        font-size: calc(18px + (48 - 18) * ((100vw - 576px) / (1400 - 576)));
    }
}

@media (max-width: 1279px)
{
    .joe-produktangebot-block-preis-text
    {
         display: block;
    }
}

@media (max-width: 1199px)
{
    .joe-logo-gross
    {
        margin-bottom:40px;

    }

    .joe-headerbild-mehrwert
    {
        margin-bottom:40px;
    }
    .joe-header-text
    {
        width:100%;
        height:auto;
        margin-top:40px;
        margin-bottom:40px;
    }
    
    .joe-container-2
    {
        max-width:740px!important;
    }
    
    .joe-footertext-links
    {
        text-align:center;
    }
    
    .joe-footerlogo-rechts
    {
        margin-right:auto;
        margin-top:8px;
    }
    
    .joe-test-header
    {
        text-align:center;
    }

    .joe-test-text, .joe-test-text-bold
    {
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .joe-test-block
    {
        width:100%;
        height:auto;
        position:relative;
    }

    .joe-test-tasse
    {
        width:250px;
        height:auto;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        margin-top:40px;
    }

    .joe-test-text-block
    {
        text-align:center;
        padding-top:40px;
    }

    .joe-button-weiss
    {
        margin-left:auto;
        margin-right:auto;
    }
    
}

@media (max-width: 927px)
{
    .joe-kontaktblock
    {
        width:245px;
        height:210px;
    }
    
    .joe-kontaktblock-1
    {
        left:0px;
        top:0px;
    }
    
    .joe-kontaktblock-2
    {
        left:0px;
        top:75px;
    }
    
    .joe-kontaktblock-3
    {
        left:0px;
        top:150px;
    }

    
}


@media (max-width: 767px)
{

    .joe-mobilmenufenster
    {
        width:100%;
        height:100%;
    }
    
    .joe-mit-logo-hintergrund-beige-out
    {
        display:block;
        position:relative;
        top:0px;
        left:0px;
        background:#eee6df;
        width:100%;
        height:auto;
        padding-top:40px;
        padding-bottom:40px;
    }
    
    .joe-mit-logo-hintergrund-beige
    {
        font-family: 'Fira Sans', sans-serif;
        font-weight:400;
        font-size:20px;
        transition: .5s ease-in-out;
        max-width:550px;
        height:auto;
        padding-left:15px;
        padding-right:15px;
    }
    
    .joe-bild-transparent
    {
        display:none;
    }
    
     .joe-logooben-menu
    {
        display:block;
    }
}

@media (max-width: 600px)
{

    .joe-headerbild-mehrwert-becher
    {
        position:absolute;
        top:28%;
        right:-3%;
        width:40%;
        height:auto;
    }
    
    .joe-h1, .joe-produktangebot-block-header, .joe-test-header
    {
        font-size: calc(28px + (48 - 28) * ((100vw - 320px) / (600 - 320)));
    }
    
    
}


@media (max-width: 575px)
{
    .joe-tasse-header
    {
        width:90%;
        height:auto;
        margin-left:10%;
        margin-right:auto;
        position:relative;
    }
    .joe-bus-header-text
    {
        font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (575 - 320)));
    }
    
    .joe-menu-zeile-pos
    {
        height:70px;
    }

    .joe-menu-zeile
    {
        height:70px;
    }
    
    .joe-logo-sw
    {
        width:80px;
        height:auto;
        position:absolute;
        left:0px;
        top:10px;
    }

    .joe-navibutton
    {
        top:20px;
        width:42px;
    }
    
    #joe-nav-icon1
    {
        width:42px;
        height:33px;
    }
    
    #joe-nav-icon1 span:nth-child(1) 
    {
      top: 0px;
    }

    #joe-nav-icon1 span:nth-child(2) 
    {
      top: 14px;
    }

    #joe-nav-icon1 span:nth-child(3) 
    {
      top: 28px;
    }
    
    #joe-nav-icon1.open span:nth-child(1) 
    {
      top:14px; 
    }

    #joe-nav-icon1.open span:nth-child(3)
    {
      top: 14px;
    }
    
    .joe-produktangebot-block-rahmen-rot, .joe-produktangebot-block-rot
    {
        padding:15px 15px;
    }
    
    .joe-footertext-center
    {
        padding-left:10px;
        padding-right:10px;
    }
    
    
}

@media (max-width: 490px)
{
    .joe-produktangebot-block-text, .joe-produktangebot-block-bold, .joe-produktangebot-block-preis-bold, .joe-produktangebot-block-preis-text
    {
        font-size: calc(15px + (24 - 15) * ((100vw - 320px) / (490 - 320)));
    }

}


@media (max-width: 414px)
{
    .joe-produktfeatures-header, .joe-passt-header, .joe-tasse-passt-header, .joe-produktinfos-header, .joe-produktangebot-header, .joe-clou-header
    {
        font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (414 - 320)));
    }
    
    .joe-produktangebot-preisinfo-stern, .joe-produktangebot-preisinfo-text
    {
        font-size:18px;
    }
    
    .joe-produktangebot-tassen-subheader
    {
        font-size: calc(30px + (36 - 30) * ((100vw - 320px) / (414 - 320)));
    }

}

@media (max-width: 391px)
{
    .joe-produktangebot-preiszeile-preis
    {
        font-size:36px;
        bottom:-3px;
    }
}