:root {
    

    --header-bg-color:          #FDF5F0;
    --header-menu-text-color:   #035338;
    --header-headline-color:    #F18800;
    --header-subheadline-color: #FFFFFF;

    --header-default-height:    129px;
    --header-small-height:      60px;
    
    --content-h-margin:         6vw;        /* vmin instead? */ 
    --content-bottom-margin:    min(8vw, 5rem);
    --content-top-margin:       max(3rem, 3vmin);
    --content-max-width:        1400px;     /* Not in use yet. */
    --content-narrow:           940px;

    --content-bg-color:         #FDF5F0;
    --content-text-color:       #000000;
    
    --ratio:                    calc( 100vw / 100vh );  

    --themecolor-orange:        #F2993D;
    --themecolor-dark:          #144132;
    --themecolor-light:         #8DBF2F;
    /*--item-bg-golor:            #00000008;*/
    --bar-color:                #8DD254;    /* Not used on the bars, it's an image. */
    
    --product-price-color:      #5B935C;
    --product-addtocart-btn-color: #FFFFFF;

    --footer-bg-color:          #FFFFFF;
    --footer-text-color:        #215B5B;
    --footer-min-height:        100px;    
    --footer-padding:           2rem;


    --border-color-a:           #035338;
    --button-border-radius:     8px;
    --newsBtn-top-distance:     4vw;
    --separator-top-margin:     max(2rem, 4vw);
    --separator-bottom-margin:  max(2rem, 4vmin);


    --font-size-16:             16px;
    --font-size-17:             17px;
    --font-size-18:             18px;
    --font-size-20:             20px;
    --font-size-22:             22px;
    --font-size-24:             24px;
    --font-size-30:             30px;

    
    --font-size-14-16:          clamp(14px, 11px + 0.7vmin, 16px);
    --font-size-18-18:          clamp(18px, 15px + 0.7vmin, 18px); 
    --font-size-16-22:          clamp(16px, 13px + 0.7vmin, 22px);    
    --font-size-18-24:          clamp(18px, 15px + 0.7vmin, 24px);
}



/*************************************************************************************************************************************************************************************************************************************************
    Fonts
*************************************************************************************************************************************************************************************************************************************************/

.fs16 { font-size: var(--font-size-14-16); }
.fs18 { font-size: var(--font-size-18-18); }
.fs22 { font-size: var(--font-size-16-22); }
.fs24 { font-size: var(--font-size-18-24); }


.fontGothicReg {
    font-family:"tablet-gothic";
    font-weight: 600;
    font-style:normal;
}


.cardContainer .card .head,
.product-puffs .inner-product-item,
.product-puffs .addToCartBtn,
.login a,
#shopping-cart .shopping-cart-button-text,
.topmenu ul li a,
.flex-caption h1,
#start-puffs .puffitem .rub, 
#start-puffs .puffitem a .rub,
.newsBtn,
.news-list li,
.separator span,
h1, h2, h3, h4,
.button.add-to-cart .add-to-cart-button,
.fontMuseo700Reg {
    font-family:"museo-slab";
    font-weight:700;
    font-style:normal;       
}

.news-list li .text,
.fontMuseo300Reg {
    font-family:"museo-slab";
    font-weight:300;
    font-style:normal;
}

.imageTop,
.cardContainer .card,
p,
.flex-caption p,
#footer p:last-child,
.shoppingNotice p,
.product-details .description-title,
.product-details .short-description,
.product-details .product-specific-info,
.fontAbrilLight {
    font-family:"abril-text";
    font-style:normal;
    font-weight:300;
}

#footer p,
.fontAbrilReg {
    font-family:"abril-text";
    font-style:normal;
    font-weight:600;
}

.test-text {
    font-size: 40px;
}




/*---------------------
General
---------------------*/
a						{color:#333; text-decoration:underline;}
a:hover					{text-decoration:none;}



    
    .solidBg {
        background-color: var(--content-bg-color);
        width: auto;
        padding-left: 2rem;
        padding-right: 2rem;
        position: relative;
        
    }
    
    h2 .solidBg {
        top: clamp(-48px, -6vmin, -35px);
        font-size: clamp(25px, 5vmin, 42px); 
        display: inline;
    }

   .heading {
        width: 100%;
        height: auto;
        position: relative;
        line-height: 30px;
        height: 30px;
        margin-top: 3rem;
        margin-left: auto;
        margin-right: auto;
    }

   
    .lineOfBars {
        line-height:30px;
        content: '';
        position: absolute;
        width: 100%;
        left: 0%;
        top: 10px;
        height: 10px;
        display: inline-block;
        vertical-align: middle;
        background-image: url('/gfx/bars.png');

        /* draw behind child elements */
        z-index: 1;
    }

.separator {
    margin-top: var(--separator-top-margin);
    margin-bottom: var(--separator-bottom-margin);
    
    display: flex;
    align-items: center; /*border: 1px solid black; */
    height: auto;
}
.separator .leftPart,
.separator .rightPart { 
    flex: 1 1 auto;  
    background-image: url('/gfx/bars.png');
    background-repeat:repeat;
    /*border: 1px solid red;*/
    height: 100%;
    min-height:15px;
    min-width: 4px;
}
.separator .centerPart {
    flex: 0 1 content;
    text-align: center;
    /*border: 1px solid green;*/
    margin: 0 1rem;
    /* white-space: nowrap; */
}

.separator h1,
.separator h2,
.separator h3,
.separator h4,
.separator span
{ display: inline; font-size: clamp(22px, 5vmin, 42px); margin: 0;}


/* Wierd! Removing "font:14px "museo-slab", Arial, Sans-serif;" from h1 leads to unexpected results!!*/
h1						{font:14px "museo-slab", Arial, Sans-serif; font-size: var(--font-size-30); font-weight:bold; }
h2						{font-size: var(--font-size-22); margin:25px 0 5px 0;}
h3						{font-size: var(--font-size-20); margin:25px 0 5px 0;}
h4						{margin:25px 0 5px 0; font-weight:bold; line-height:1.5;}
p						{margin:0 0 10px 0;}

::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}

table,
table tr,
table tr td				{font:normal 12px/1.5 Arial, Verdana, Sans-serif;}

img, table				{border:0;}
html 					{margin:0; padding:0;}
body { margin: 0; padding: 0; COLOR: #000; font-size: 12px; font-family: Arial, Verdana, "Lucida Sans", "Lucida Grande", Sans-serif; line-height: 1.5; background-color: #353535;}

.enableImgScaling       { display: inline-block; font-size:0; margin-left: auto; margin-right:auto;}  /* Lets you can scale an image by setting its percentage. Add a surrounding div with this class to the img. */

.centerText             { text-align: center; }

.flex                   { display:flex; }
.centerContent          { justify-content: center; align-items: center; }
.hCenter                { justify-content: center; }
.vCenter                { justify-content: center; align-items: center; }
.flex-25                { flex: 0 1 25%; }

.w-100                  { width: 100%; }

.inputError             { background-color: lightpink; }

.clickable              { cursor: pointer; }
.clickable:hover        { background-color: var(--themecolor-light); }
.btnBorder              { border: 1px solid #000; border-radius: 7px; }

.notClickableBtn        { pointer-events: none; }
.disableBtn             { background-color: #777 !important; pointer-events: none; }
/************************************************************************************************
    :Buttons
************************************************************************************************/

.newsBtn {
    
    font-size: var(--font-size-18);
    border-bottom: 2px dotted var(--themecolor-light);
    text-decoration: none;
}

    .newsBtn::after {
        /*position: relative;*/
        content: '';
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        color: var(--themecolor-light);
        font-family: "FontAwesome"; 
        
        font-weight: 900; 
        content: "\f105";
        /*left: 1vw;*/
    }




/*---------------------
Body layout
---------------------*/
body                        { background-color: var(--content-bg-color); }
#wrapper 					{ display: flex; flex-direction: column; min-height: 100vh; margin:0 auto; }
.inner                      { margin:0 auto; }




/*---------------------
Header layout
---------------------*/

.header {
            /*flex: 0 1 var(--header-default-height);*/ 
            flex: 0 1 clamp(var(--header-small-height), 40px + 5vw, var(--header-default-height));
            background-color: var(--header-bg-color); 
            padding: 0 var(--content-h-margin);
            position: fixed;
            z-index: 10;
            left: 0;
            right: 0;
            /*flex: 0 1 clamp(80px, 40px + 7vw, 200px);*/
            /*border: 1px solid red;*/
}

    .header .inner {
        /*max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;*/
        /*border: 1px solid red;*/
        /*display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;*/

        border-bottom: 2px dotted var(--themecolor-light);
        box-sizing: border-box;

        height: clamp(var(--header-small-height), 40px + 5vw, var(--header-default-height));
        
        display: flex;
        align-items: center;
        justify-content: space-between;          
    }

.header #contact			{position:absolute; right:20px; top:10px;}

/*#logo                       { display: flex; align-items: center; min-height:0; min-width:0; }*/
#logo {  
    flex: 0 1 auto;
    height: 100%;
    max-height: 85px;
    padding: 10px 0;
    box-sizing: border-box;

}
    #logo img { 
        object-fit: cover;
        object-position: center;
            
        height:100%;
        width: auto;
    }

.topmenu { /*overflow: hidden;*/
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: 60px;
}

.topmenu ul                  {margin:0; padding:0;}
.topmenu ul li               {display:inline-block; }
.topmenu ul li a             {font-weight: 700; font-size: var(--font-size-18); color: var(--header-menu-text-color); text-decoration: none; padding: 10px 20px; display: block;}
.topmenu ul li.on a          {/*color: #2980b9; */}
.topmenu ul li a:hover       {text-decoration:none;}
.topmenu ul li a.haschild    {/*display:none;*/}
.topmenu ul li.li-childs > a::after    { 
                                content: "\f107";
                                font-family: FontAwesome;
                                width: 20px;
                                height: 20px;
                                color: var(--header-headline-color);
                                /*background-image: url("/gfx/arrow-down-16.png");*/
                                background-repeat: no-repeat;
                                display: inline-block;
                                top: 1px;
                                left: 6px;
                                position: relative;
}
.topmenu ul li.li-childs > a.on:after    { content: "\f106";  font-family: FontAwesome; right:-10px; position:relative; top:3px; font-size:15px; }

    .topmenu ul li ul {
        border: 1px solid grey;
        border-radius: 10px;
        position: absolute;
        top: 2px;
        left: 0;
        z-index: 99999 !important;
        margin: 0;
        padding: 10px 20px;
        list-style-type: none;
        margin-top: 34px;
        background-color: rgba(253,245,240,0.9);
        box-sizing: border-box;
        text-align: left;
        display: none;
        min-width: 10rem;

    }
.topmenu ul li ul.show      {left:0; z-index:99; display:block;}
.topmenu ul li ul.show li   {float:none; margin-left:0; display:block; }
.topmenu ul li ul.show li a {/*color:#ffffff; */text-decoration:none; border-bottom:0; font-size:14px;}
.topmenu ul li ul.show li:hover {border:0; }
.topmenu ul li ul.show li:hover a    {color:#DBBB99;}

.topmenu ul li               {display:inline-block; margin:0 2px; position:relative; }
/*.topmenu ul li:first-child   {margin-left:0;}
.topmenu ul li:last-child    {margin-right:0;}
*/
    .topmenu ul li a {
        text-decoration: none;
        display: block;
        padding-bottom: 5px;
        padding-right: 2px;
        position: relative;
        font-size: 16px;
        white-space: nowrap;
    }

    .topmenu ul li ul li a {
        padding-left: 0px;
    }

/*.topmenu ul li:first-child a {padding-left: 0px;}*/
.topmenu ul li.on a          {/*border-bottom:2px solid #DBBB99;*/}
.topmenu ul li a:hover       {text-decoration:none;}
.topmenu ul li a.haschild    {display:none;}
.topmenu ul li ul            {display:none;}



.login {
    margin-left: auto;
    display: inline-block;
    display: none;
    font-size: 0;
    width: max-content;
    flex: 0 0 64px;
    margin-right: 3px;
    padding: 6px 0px 5px 0px;
    /*background: green;*/
}

.login img,
.login a { display: block; margin-left: auto; margin-right: auto; color: var(--header-menu-text-color); text-align: center; }

.login a { font-size: 12px; text-decoration: none; padding-top: 2px;  margin-left: 3px; margin-right: 3px;}
.login a:hover { background-color: rgba(255, 255, 255, 0.0); border-radius: 7px; /*border: 1px solid dotted;*/}

.vCenterChildren {
    display:        flex;
    align-items:    center;
    flex:           0 1 auto;
    /* width: 140px; */
    text-align:     right;
    min-width:      fit-content;
    vertical-align: top;
    position:       relative;
    justify-content: end;
}

.header #responsive-menu-btn {
    height: 29px;
    padding: 0 0 0 3px;
    margin: 10px 0 10px 8px;
    z-index: 999;
    font-size: 0px;
    font-weight: bold;
    text-transform: uppercase;
    /* line-height: 60px; */
    text-decoration: none;
    cursor: pointer;
    display: none;
    color: var(--header-menu-text-color);
    line-height: 0px;
    /*border: 1px solid red;*/
    position: relative;
    /*top: -8px;*/
}

.header #responsive-menu-btn i {
    font-size: 30px;
  
}

.header .contactPuffs {
    position: absolute;
    right: 0;
}



/*---------------------
Page layout
---------------------*/
.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix 			{height: 1%;}

.content {
    flex: 1 1 auto;
    background-color: var(--content-bg-color);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: clamp(var(--header-small-height), 40px + 5vw, var(--header-default-height));
}
.content .inner             {height: 100%;}
.contentright {
    
    /*width: 75%;*/
    margin: 0;
    padding: var(--content-top-margin) var(--content-h-margin) var(--content-bottom-margin) var(--content-h-margin);
    
    overflow: hidden;
    font-size: 16px;
}

.contentright, 
.contentright p { font-size: var(--font-size-14-16); }

#ctl00_divContentRight      {height: 100%;
                             
}




/*---------------------
Start page
---------------------*/
#start-slideshow {
    /*width: 100%;*/
    margin: 0 calc( var(--content-h-margin) * -1);
}
.flexslider                 {overflow:hidden; width:100%; margin:0 auto !important;}
.flexslider .slides li      {background-size:cover; background-position:center;}
.flexslider .slides li a    {display:block; height:100%; width:100%;position:relative; z-index: 2;}


:root {
    --puff-spacing:     30px;
}


#start-puffs {
    /*box-sizing: border-box;
    border: 1px solid red;
    */
    /*margin: 0px calc(0px - var(--puff-spacing));*/
    margin: 0px -30px;
    margin-top: 30px;
    /*padding-right: var(--puff-spacing);*/
    padding-right: 30px;
    /*padding-left: calc(2 * var(--puff-spacing));*/
    padding-left: 60px;
    overflow: hidden;
}
    #start-puffs .puffitem				{/*box-sizing: border-box;border:1px solid green; background:yellow;*/width:33.33%;  height:100%; float:left; text-align:left; overflow:hidden; position:relative;}
    #start-puffs .puffitem.last			{/*margin-right:0; padding-right:0;*/}
    #start-puffs .puffitem .puffcontent {
        /*box-sizing: border-box;
        border: 1px solid black;
        */
        /*padding: var(--puff-spacing);*/
        padding: 30px;
        padding-top: 0px;
        padding-left: 0px;
        margin: 0 0 30px 0;
        
    }


    #start-puffs .puffitem a                                                {/*box-sizing: border-box;border:1px solid grey;*/display:block; width:100%; height:100%; text-decoration:none;}
    
    #start-puffs .puffitem .rub, 
    #start-puffs .puffitem a .rub {
        transition-duration: 0.2s;
        -webkit-transition-duration: 0.2s;
        width: 100%;
        display: block;
        padding: 0;
        font-size: clamp(18px, 3vmin, 24px);
        font-weight: bold;
        color: #333;
        text-align: left;
        
        /*position: absolute;*/
        /*top: calc(50% - var(--puff-spacing));*/
        /*top: calc(50% - 30px);*/
        /*transform: translateY(calc( var(--puff-spacing) / 2 - 50%));*/
        /*transform: translateY(calc( 15px - 50%));*/
    }

    #start-puffs .puffitem .image, #start-puffs .puffitem a .image          {
        width:100%; 
        height:100%; 
        display:block; 
        text-align:center; 
        background-color:#000; 
        overflow:hidden;
    }

    #start-puffs .puffitem .image img, #start-puffs .puffitem a .image img {
        height: 19vw;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        object-position: center;
        object-fit: cover;
        transition-duration: 0.2s;
        -webkit-transition-duration: 0.2s;
        display: block;
        opacity: 0.88;        
    }

            

/*#start-puffs .puffitem .puffcontent h2.rub { margin-left: calc(0px - var(--puff-spacing) / 2);}*/
        #start-puffs .puffitem .puffcontent h2.rub {
            margin-left: -15px;
            /*color: #000;*/
            text-shadow: 0px 0px 10px rgba(0,0,0,1);
            pointer-events: none;
            opacity:1;
        }


        #start-puffs .puffitem .content,
        #start-puffs .puffitem a .content {
            transition-duration: 0.2s;
            -webkit-transition-duration: 0.2s;
            width: 100%; 
            /*background:rgba(0,0,0,.6); color:#000; text-shadow:0 -1px 0 rgba(0,0,0,.3);*/
        }
            
            #start-puffs .puffitem .content p,
            #start-puffs .puffitem a .content p {
                transition-duration: 0.2s;
                -webkit-transition-duration: 0.2s; /*padding:0; margin:0;*/
                line-height: 16px;
                font-size: 12px;
                color: #444;
            }


#start-puffs .puffitem:hover .content, 
#start-puffs .puffitem:hover .content p  {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#222;}

#start-puffs .puffitem .puffText:hover,
#start-puffs .puffitem a .image:hover,
#start-puffs .puffitem:hover img, 
#start-puffs .puffitem a:hover img            {
    transition-duration:0.2s; 
    -webkit-transition-duration:0.2s; 
    opacity:0.95; 
    
    /*background-color:white;         */
    cursor: pointer;

}

#start-puffs .puffitem .puffText {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dotted var(--header-menu-text-color);
    height: 64px;
}

#start-puffs .puffitem .puffText div:first-child {
    display: flex;
    align-items: center;
}

#start-puffs .puffitem .puffText div:last-child {
    color: var(--header-headline-color);
    /*position:relative;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    */
    
    flex: 0 0 20px;
    display: flex;
    align-items: center;
}

#start-puffs .puffitem .puffcontent h3.rub {
    margin: 0;
}

#start-puffs .puffitem .puffText div img {
    height:     auto;
    font-size:  0;
    display:    inline-block;
   
    height:     auto;
}





#start-news                         {width:32.5%; height:225px; margin:0; padding:0; float:right; overflow:hidden;}
#start-news h3                      {padding:0 0 2.6% 0; margin:0; display:block; font-size:16px; line-height:18px;}
#start-news ul                      {list-style:none; margin:0; padding:0; width:100%; overflow:hidden;}
#start-news ul li                   {width:100%; padding:0; margin:0 0 3% 0;}
#start-news ul li a                 {transition-duration:0.2s; -webkit-transition-duration:0.2s; display:block; text-decoration:none; padding:1.5% 1.5% 1.5% 3%; margin:0; border-left:2px solid #ccc;}
#start-news ul li a .date           {display:block; font-size:10px; color:#888;}
#start-news ul li a .title          {display:block; color:#444; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#start-news ul li a:hover           {transition-duration:0.2s; -webkit-transition-duration:0.2s; border-left:2px solid #2980b9; background-color:#f5f5f5;}
#start-news ul li a:hover .date     {color:#666;}
#start-news ul li a:hover .title    {color:#000;}

/*---------------------
Submenu vertical
---------------------*/ 
.leftmenu                           {float:left; width:25%;}
.leftmenu ul					    {width:90%; margin:0; padding:0 0 10px 0; list-style:none; overflow:hidden;}
.leftmenu ul li				        {width:100%; margin:0; padding:0; border-bottom:1px dotted #999;}
.leftmenu ul li:last-child          {background:none; border:0;}
.leftmenu ul li a				    {width:100%; margin:0; padding:0; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.leftmenu ul li a:hover             {color:#333;}
.leftmenu ul li.on a			    {color:#333; font-weight:bold;}
.leftmenu ul li.on-childs           {background:none; border:0;}
.leftmenu ul li.on-childs a	        {color:#555; font-weight:bold; line-height:30px;}

.leftmenu ul li.on-childs ul            {margin:0 0 0 15px !important;}
.leftmenu ul li.on-childs ul li         {background:none; border:0;}
.leftmenu ul li.on-childs ul li a       {font-weight:normal !important; line-height:24px !important; font-size:11px; color:#555;}
.leftmenu ul li.on-childs ul li a:hover {color:#333;}
.leftmenu ul li.on-childs ul li.on a    {color:#333; font-weight:bold !important;}

/*---------------------
Submenu horizontal
---------------------*/ 
.fullmenu                           {background-color:#cccccc;}
.fullmenu ul					    {width:auto; text-align:center; margin:0; padding:0; list-style:none; overflow:hidden;}
.fullmenu ul li				        {display:inline-block; margin:0 10px; padding:0; }
.fullmenu ul li:last-child          {background:none; border:0;}
.fullmenu ul li a				    {margin:0; padding:5px 10px; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.fullmenu ul li a:hover             {color:#333;}
.fullmenu ul li.on a, .fullmenu ul li.on-childs a			    {color:#333; font-weight:bold;}


/*---------------------
Popup
---------------------*/
.popup-frame {
    position: fixed;
    top: calc(10px + clamp(var(--header-small-height), 40px + 5vw, var(--header-default-height)));   
    z-index:100;   
    right: 20px;
    max-width: 80%;
    width: min(500px, 80%);
    text-align: right;
}
    .popup-frame .item { 
        padding: 16px 39px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0%25' y='0%25' width='100%25' height='100%25' fill='transparent' stroke='%238DBF2F' stroke-width='30px' rx='45' stroke-dasharray='2 2' /%3E%3C/svg%3E");
        box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
        display:inline-block;
        background-color: var(--content-bg-color);
        margin-bottom:20px;
        transform: translateX(90%) scale(0.5);
        /*visibility: hidden;*/
        transition: transform 0.4s; 
        
        border-radius: 20px;
    }
        .popup-frame .item.visible {
            visibility: visible;
            transform: scale(1);
            width: min(450px, 67%);
            max-width:67%;
        }
        
        .popup-frame .item.remove {
            display:none;            
        }

        .popup-frame .item .close-btn {
            font-size: 0.7em;
            font-weight: 700;
            cursor: pointer;
            border: 2px solid red;
            color: white;
            background-color: red;
            display: inline-block;
            padding: 0px 5px 0 5px;
            border-radius: 7px;
            position: absolute;
            right: 8px;
            top: 8px;
        }

/*---------------------
Footer layout
---------------------*/
#footer					{   
                            flex: 0 1 content; 
                            box-sizing: border-box;
                            margin-top: auto;
                            background-color: var(--footer-bg-color); 
                            color: var(--footer-text-color); 
                            min-height: var(--footer-min-height); 
                            padding-top: var(--footer-padding); 
}
    #footer .inner {
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-left: var(--content-h-margin);
        margin-right: var(--content-h-margin);

    }


.logo-footer {
    width: 100%;
    height: 100%;
}

#footer p {
    font-size: var(--font-size-16);
    line-height: normal;
    color: var(--footer-text-color);
}

/* production: webbpartner */
#footer p:last-child, 
#footer p .webbpartner          { font-size: clamp( 13px, 12px + 1vw, 15px ); }
#footer p:last-child            { opacity: 0.6; }
#footer p .webbpartner          { color: var(--footer-text-color); text-decoration: none; }
#footer p .webbpartner:hover    { color:black; }



/***************************************************************************************************************************************************************************************************************************************
    Decoration
***************************************************************************************************************************************************************************************************************************************/

.decorationLines { width: 100%; margin-top: var(--footer-padding); box-sizing: border-box;}
    .decorationLines > div          { margin-top: 6px; }
    .decorationLines .firstLine     { height: 12px; background-color: var(--themecolor-light); }
    .decorationLines .secondLine    { height: 21px; background-color: var(--themecolor-dark); }
    .decorationLines .thirdLine     { height: 30px; background-color: var(--themecolor-orange); }
                

/***************************************************************************************************************************************************************************************************************************************
    ProductPuffs
***************************************************************************************************************************************************************************************************************************************/

.product-puffs { display:flex; /*flex-wrap:wrap;*/ }

.product-puffs .product-item {
    text-align: center;
    flex: 0 1 25%;
    border: 1px dotted var(--themecolor-dark);
    padding: 1rem;
    box-sizing: border-box;
    margin: 10px;

    align-self: stretch;
}

    .product-puffs .product-item:first-child { margin-left: 0; }
    .product-puffs .product-item:last-child { margin-right: 0; }

.product-puffs .product-item-frame {
    width:auto;
    height: 100%;
    position: relative;
    padding-bottom: 1vmin;   /* Because of the button height in .addToCartButton.*/

    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.product-puffs .inner-product-item {
    text-decoration: none;
    
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height:100%;
}


.product-puffs .addToCartBtn {
    background-color: var(--themecolor-light);
    width: 100%;
    display: inline-block;
    border-radius: var(--button-border-radius);
    font-size: clamp(12px, 5vmin, 16px);
    color: var(--product-addtocart-btn-color);    
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    margin-bottom: 0.4rem;
    /*position: absolute;*/
    bottom:   35px;     /* Relative to padding-bottom of product-item-frame.*/
    right: 0;
}

.product-puffs .product-price {
    color: var(--product-price-color);
    margin-bottom: 1vmin;
}

.product-puffs .product-title {
    color: var(--content-text-color);
    margin-top: 1vmin;
    margin-bottom: 1vmin;
}

    .product-list.product-puffs .product-item .image {
        display: inline-block;
        height: 100%;
        max-height: 19vw;
    }
    
    
        .product-list.product-puffs .product-item .image img {
            max-width: 100%;
            max-height: 100%;
            height: 100%;
            object-fit: cover;
        }



/******************************************************************************
    :PuffList
******************************************************************************/


.puffListBrands {
    /*margin-left: 0px;
    margin-right: -20px;*/
}
    .puffListBrands ul {
        list-style: none;
        padding: 0;
        
        margin-right: -1.4%;
    }
    .puffListBrands ul li {
        width: 33.0%;
        display: inline-block;
        box-sizing: border-box;
        padding: 0 1.1% 1.1% 0;
        vertical-align: text-top;
    }    

.puffListBrands ul li img { width: 100%; height: 100%; object-fit: cover; }    
.puffListBrands ul li h3 {}    
.puffListBrands ul li p {
    margin:0 0 32px 0;
    max-width: 100%;
    word-break: break-word;
}    



/******************************************************************************
    :Card
******************************************************************************/

.cardContainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
}

.cardContainer .card {
    font-size: var(--font-size-14-16);
    
    
    border: 1px dashed #707070;
    box-sizing: border-box;
    grid-column: span 2;
}

.cardContainer .card .content {
    margin: 2vw 2vw;
    width: auto;
   
}

.cardContainer .card .content p {
    margin: 0;
    padding: 0;
    
}

.cardContainer .card .content .text .headline {
    font-size: var(--font-size-16-22);
    
    text-align: left;
    margin: 0 0 0.3vw 0;
    padding: 0;
    /*overflow:hidden; white-space:nowrap; text-overflow:ellipsis;*/
}

.cardContainer .card .content .text p {
    /*overflow:hidden; white-space:nowrap; text-overflow:ellipsis;*/
    word-break:break-word;    
}
.cardContainer .card .content .text p a { text-decoration:none; }
        

/************************************************************************************************************
    Cookies
************************************************************************************************************/

.cookies {
    text-align: center;
    margin: 4vw auto;
    max-width: 1400px;
}


.cookies .frame {
    
    margin: 2vw;
}

.cookies .content {
    
    border-radius: 5vw;
    border: max(4px,0.5vmax) solid #555;  
    padding: 4vw;
    padding: 4vw;
}

.cookies legend {
    font-size: max(18px, 2vw);
}

.cookies p, .cookies a {
    font-family:'Times New Roman', Times, serif;
    font-size: max(16px, 1vw);
}




/***************************************************************************************************************************************************************************************************************************************
    Mediaqueries
***************************************************************************************************************************************************************************************************************************************/
@media screen and (max-width: 1300px)
{
    #footer .inner,
    .content .inner,
    .header .inner {
        
    }

     .topmenu ul li               {margin:0 0; }
    .topmenu ul li a             {padding: 10px 4px; font-size: 15px;}
    
    #logo {
        
        width: 15%;        
        padding: 10px 0;
        max-width: 15%;
        height: auto;
    }
    #logo img {
        height: auto;
        width: 100%;
    }


    #start-puffs .puffitem {
        width: 50%;
    }

    #start-puffs .puffitem .image img, 
    #start-puffs .puffitem a .image img {
        height: 38vmin;
    }


    .flex { flex-wrap:wrap; justify-content:space-between; }
    .product-puffs .product-item {flex: 0 1 49%; }
    .product-puffs .product-item:nth-child(2n+1) { margin-left: 0; margin-right: 0px; }
    .product-puffs .product-item:nth-child(2n) { margin-left: 0px; margin-right: 0; }

    .product-list.product-puffs .product-item .image { max-height: 32vw; }

    .puffListBrands ul li { width: 49.5%; }
    .cardContainer .card { grid-column: span 3; }


}

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

}

@media screen and (max-width: 1050px)
{
    .header .topmenu                {display:none;}
    .header #responsive-menu-btn    { display: inline-block;}

    #shopping-cart .topDiv      { width: 60px;}
    #shopping-cart .shopping-cart-button-text  {display:none;}
    #shopping-cart .basketImage { height: 38px !important; background-size: 22px !important; }
    
    #shopping-cart .productcount { top: 9px !important; right: 5px !important; }
}

@media screen and (max-width:900px)
{
    h1  {font-size:24px;}
    h2  {font-size:18px;}
    /*h3  {font-size:14px;}*/

    .solidBg                    { top: -9px; }
        
    .header #nav				{position:static; top:0; left:0; height:auto; min-height:50px; width:100%; padding:0; margin:0; z-index:9; display:none;}
    
    .submenu				    {display:none;}
    
    .content .inner	            {width: auto; height:auto; }
    .contentright               {float:none; /*width:100%;*/}
    .loginText                  {display: none;}

    #footer					    {width:auto; margin:0; padding:2% 0 0 0; clear:left; position:relative; font-size:11px; line-height:16px;}
    #footer .links              {display:none;}
    
    /*.flexslider .slides  li     {height:400px !important;}*/   
    
    #start-content              {}
    #start-puffs .puffitem {
        width: 100%;
    }
    #start-puffs .puffitem .image img, 
    #start-puffs .puffitem a .image img {
        height: 60vmin;
    }
    #start-news                 {width:32%; height:auto; margin:0 0 2% 0;}
    
   
	table.responsive-table, 
	table.responsive-table thead, 
	table.responsive-table tbody, 
	table.responsive-table th, 
	table.responsive-table td, 
	table.responsive-table tr           {display:block; border:0;}
	table.responsive-table thead tr     {position:absolute; top:-9999px; left:-9999px;}
	table.responsive-table tr           {border:1px solid #ccc;}
	table.responsive-table td           {padding:4px 6px;}
	table.responsive-table td           {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;}
 	table.responsive-table td:before    {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;}
	table.responsive-table td:before    {content:attr(data-title);}
}

@media screen and (max-width: 800px) {
    #logo {
        width: auto;
        
        flex: 0 1 auto;
        height: 100%;
        max-height: 85px;
        padding: 10px 0;
        
        max-width: max-content;
    }
    #logo img {
        width: auto;
        height: 100%;
        max-height: var(--header-small-height);
    }

}
@media screen and (max-width: 600px) {
    .puffListBrands ul li { width: 100%; }
    .cardContainer .card { grid-column: span 6; }
}

@media screen and (max-width: 600px)
{
    
    h1  {font-size:20px;}
    /*.solidBg                            { top: -7px; }*/
    .heading { width: 100%; }
    #logo { padding: 5px 0; }


    #start-puffs {
        /*width: 100%;*/
        margin-left: -10px;
        margin-right: -10px;
        
        padding-right: 0px;
        padding-left: 10px;
    }

    #start-puffs .puffitem .rub, 
    #start-puffs .puffitem a .rub       {}
    #start-puffs .puffitem .content p, 
    #start-puffs .puffitem a .content p {line-height:14px; font-size:11px;}
    #start-puffs .puffitem .puffcontent {
        padding: 10px;
        padding-top: 0px;
        padding-left: 0px;
        margin: 0px 0 30px 0;
    }
    
    #start-puffs .puffitem .image img, 
    #start-puffs .puffitem a .image img {
        height: 74vmin;
    }


    #start-news         {width:100%; margin-top:2%;}
    #start-news h3      {padding:0 0 1.5% 0;}
    #start-news ul li   {margin:0 0 1.5% 0;}
    #start-news ul li a {background-color:#f7f7f7; padding:1.2% 1.2% 1.2% 2%;}
    
    .product-puffs .product-item {flex: 0 1 100%; }
    .product-list.product-puffs .product-item .image { max-height: 50vw; }
}

@media screen and (max-width: 480px)
{
    h1  { font-size:20px; }
    h2  { font-size:18px; }
    
    .solidBg                            { top: -5px; }
    .extraMargin { width: 100%; }
    .solidBg {
        padding-left: 1rem;
        padding-right: 1rem;
    }
        
}

@media screen and (max-width: 350px) {
    p { font-size: 14px; }
    .separator h2 { display: table-caption; font-size: clamp(20px, 5vmin, 42px); margin: 0;}
    .solidBg {
        padding-left: 0rem;
        padding-right: 0rem;
    }
}

@media screen and (max-width: 300px) {
 
    .header { 
        --header-default-height: 300px;
        flex: 0 1 calc(2 * var(--header-small-height));
    } 
    .header .inner { 
        flex-wrap: wrap; 
        height: calc(2 * var(--header-small-height));
        justify-content: center;
    } 
    #logo,
    .header .vCenterChildren { flex: 1 1 100%; text-align: center; justify-content:center;}
    .content { margin-top: calc(2 * var(--header-small-height));}


    #logo { height: auto; padding-bottom: 0; padding-top: 0;
    }
}