/* -------------------------------------------------- generic ---------- */

*{-webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;} ul, li, a, h1, h2, h3, p{position: relative; display: inline-block;} ul, li, a, img, p, h1, h2, h3{vertical-align: middle;} :focus{outline: none;} a{line-height: 0; text-decoration: none;} 



/* -------------------------------------------------- fonts ---------- */

@font-face{font-family: "RobotoFlex"; src: url("Fonts/RobotoFlex-VariableFont_wght.woff2") format("woff2 supports variations"), url("Fonts/RobotoFlex-VariableFont_wght.woff2") format("woff2-variations"), url("Fonts/RobotoFlex-VariableFont_wght.woff") format("woff supports variations"), url("Fonts/RobotoFlex-VariableFont_wght.woff") format("woff-variations"), url("Fonts/RobotoFlex-VariableFont_wght.ttf") format("truetype supports variations"), url("Fonts/RobotoFlex-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900;}

@font-face{font-family: "MinionPro-Bold"; src: url("Fonts/MinionPro-Bold.woff2") format("woff2 supports variations"), url("Fonts/MinionPro-Bold.woff2") format("woff2-variations"), url("Fonts/MinionPro-Bold.woff") format("woff supports variations"), url("Fonts/MinionPro-Bold.woff") format("woff-variations"), url("Fonts/MinionPro-Bold.ttf") format("truetype supports variations"), url("Fonts/MinionPro-Bold.ttf") format("truetype-variations"); font-weight: 100 900;}

*{font-family: 'RobotoFlex', sans-serif;} h1, .h1, h2, .h2, h3, .h3{font-family: 'MinionPro-Bold', sans-serif;}

p{word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;} .h1, .h2{word-break: normal; -webkit-hyphens: manual; -ms-hyphens: manual; -o-hyphens: manual; hyphens: manual;}



/* -------------------------------------------------- color / hover ---------- */

#body-main.toggle, #body-footer.toggle{opacity: .17;} .opacity-low{opacity: .17;} .opacity-middle{opacity: .44;} .opacity-high{opacity: .71;} 

:root{--color-00-whitegrey: #f8fafc; --color-01-lightgrey: #e1e9ef; --color-02-lightblue: #c2d0db; --color-03-pigeongrey: #a6b7c5; --color-04-blue: #536b7f; --color-05-anthrazitblue: #263745; } 

#html-body{background-color: var(--color-05-anthrazitblue);} .js-cursor-outer, .js-cursor-inner{background-color: hsl(207,24%,61%);} h1, h2, p, a{color: var(--color-05-anthrazitblue);}

.back-00-whitegrey{background-color: var(--color-00-whitegrey);} 
.back-01-lightgrey{background-color: var(--color-01-lightgrey);} 
.back-02-lightblue{background-color: var(--color-02-lightblue);} 
.back-03-pigeongrey{background-color: var(--color-03-pigeongrey);} 
.back-04-blue{background-color: var(--color-04-blue);} 
.back-05-anthrazitblue, [class*="symbol-"] [class*="shape-"]{background-color: var(--color-05-anthrazitblue);} 

[class*="link-"]:hover, .js-information-item:hover, .active, .back-dark{background-color: rgba(132,158,179,0.22);} .link-downrange:hover{background-color: rgba(38,55,69,0.44);} [class*="dropdown-"]{-webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);} .link-dropdown .link-symbol:hover{background-color: transparent;} [class*="dropdown-"]{background-color: rgba(132,158,179,0.44);} .link-dropdown .link-default:hover{background-color: rgba(132,158,179,0.63);}

[class*="link-"]:active{background-color: #fff;}

.front-light h1, .front-light h2, .front-light p, .front-light a{color: var(--color-00-whitegrey);} .front-light [class*="symbol-"] [class*="shape-"]{background-color: var(--color-00-whitegrey);}

.back-05-anthrazitblue h1, .back-05-anthrazitblue h2, .back-05-anthrazitblue p, .back-05-anthrazitblue a{color: var(--color-01-lightgrey);} .back-05-anthrazitblue [class*="symbol-"] [class*="shape-"]{background-color: var(--color-01-lightgrey);}

.back-03-pigeongrey [class*="link-"]:hover{background-color: rgba(132,158,179,0.63);}

.symbol-switch .shape-1{background-color: var(--color-02-lightblue);} .back-05-anthrazitblue .symbol-switch .shape-1{background-color: var(--color-05-anthrazitblue);} 

.link-button:hover{background-color: var(--color-04-blue);} .link-button p, .link-header p{color: var(--color-00-whitegrey);} .link-button{background-color: var(--color-05-anthrazitblue);}

.link-light, .prices-close, .happiness-card:hover, .seal-ekomi:hover{background-color: rgba(132,159,179,0.29);} .link-light:hover, .prices-close:hover{background-color: rgba(132,159,179,0.44);} .link-deep{background-color: rgba(38,55,69,1);} .link-deep p{color: var(--color-02-lightblue);} .link-deep:hover{background-color: rgba(38,55,69,0.81);} .front-light .link-deep{background-color: rgba(225,233,239,1);} .front-light .link-deep p{color: var(--color-04-blue);} .front-light .link-deep:hover{background-color: rgba(225,233,239,0.81);} 

.link-header{background-color: rgba(56,81,102,0.63); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);} .link-header:hover{background-color: rgba(59,81,99,0.63);} 

.back-04-blue .link-button:hover{background-color: var(--color-02-lightblue);} .back-04-blue .link-button p{color: var(--color-05-anthrazitblue);} .back-04-blue .link-button{background-color: var(--color-01-lightgrey);}

.gradient-bottom{background-image: linear-gradient(180deg, transparent 0%, var(--color-05-anthrazitblue) 58%); opacity: .84;} 

.symbol-author{background-color: var(--color-01-lightgrey);} .symbol-author p{color: var(--color-04-blue);} 



/* -------------------------------------------------- global ---------- */

#body-header, #body-main, #body-footer{width: 100%;} #body-header{z-index: 7;} #body-main{z-index: 1;} #body-footer{z-index: 4;}

hr{border: none; height: 0;} [class*="space-"]{position: relative; display: block; width: 100%;} [class*="-section"]{position: relative; display: block; width: 100%; margin: 0 auto; text-align: center; overflow: hidden;} [class*="layer-"], [class*="frame-"]{position: relative; display: block; margin: 0 auto;} [class*="grid-"], [class*="split-"]{position: relative; display: inline-block; vertical-align: top;} [class*="grid-"], [class*="split-"], [class*="content-"]{text-align: left;} .vertical-middle{vertical-align: middle;} .vertical-bottom{vertical-align: bottom;} .split-38{width: 38.2%;} .split-62{width: 61.8%;} 

/*.section-layer-horizontal{width: 100%; overflow: inherit;} .layer-horizontal, .horizontal-wrapper, .horizontal-wrapper{position: relative; display: block; width: 100%;} .horizontal-wrapper .content-wrapper{position: relative; display: block; width: 100%; bottom: auto; bottom: auto; transform: translate(0,0);} .js-enable .layer-horizontal{position: sticky; position: -webkit-sticky; top: 0; height: 100vh; width: 100%; vertical-align: top; overflow-x: hidden;} .js-enable .horizontal-wrapper{height: 100%;} .js-enable .horizontal-wrapper .content-wrapper{position: absolute; right: 50%; bottom: 50%; transform: translate(50%,50%);}*/

.image-relative{position: relative; display: block; width: 100%; height: auto;} .frame-background, .image-absolute, .content-absolute{position: absolute; display: block; right: 50%; bottom: 50%; transform: translate(50%,50%);} .frame-background{width: 100%; height: 100%;}

.grid-100{width: 100%;} .content-absolute{width: 100%; height: auto;} .image-cover{width: 100%; height: 100%; object-fit: cover; object-position: center center;} .image-contain{width: 100%; height: 100%; object-fit: contain;}

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

/*#body-main .section-layer-full, #body-footer .section-layer-full{padding-right: 58px;} 
#body-main .section-layer-default, #body-footer .section-layer-default{padding-right: 29px;} */

/* ---------- */

.space-default{height: calc(4.0vw + 4.0vh + 40px);} 
.space-middle{height: calc(2.0vw + 2.0vh + 20px);} 
.space-flat{height: calc(0.7vw + 0.7vh + 7px);} 
.padding-default{padding: calc(0.7vw + 0.7vh + 7px) 1.25%;} 
.padding-half{padding: calc(0.35vw + 0.35vh + 3.5px) 1.25%;} 
.padding-side{padding: 0 1.25%;} 
.padding-wide{padding: calc(1.4vw + 1.4vh + 14px) 2.5%;} 
.list-symbol .list-item{margin-top: calc(0.35vw + 0.35vh + 3.5px);}



/* -------------------------------------------------- table, lists, links ---------- */

[class*="list-"], [class*="link-"]{position: relative; display: inline-block;} [class*="list-"] .list-item{position: relative; display: inline-block; list-style: none; vertical-align: middle;} [class*="link-"]{overflow: hidden;} [class*="link-"] p{text-decoration: none;} .link-text{display: inherit !important; text-decoration: underline; opacity: 1;} 

.list-link{display: block; margin: 0 -8px;} .list-link .list-item{margin: 3px 4px;} .list-link [class*="link-"] p{padding: 4px 4px;} 

.list-symbol{display: block;} .list-symbol .list-item{display: block; padding-left: 29px;} .list-symbol .symbol-dot, .list-symbol .symbol-number{position: absolute; left: 5px; top: 0px;} 

.link-share{width: 42px; height: 42; overflow: visible;} .link-share .image-absolute{width: 38px;}

[class*="link-"]{border-radius: calc(0.5vw + 5px);} 

.link-default{position: relative; padding: 10px 4px;} 
.link-button{display: block; padding: 34px 24px; text-align: center;} 
.link-light, .link-deep{display: inline-block; margin: calc(2.5px + 0.5%); padding: calc(11px + 2.2%) 0; width: calc(120px + 24%); text-align: center;} 
.link-light .image-symbol, .link-deep .image-symbol{position: inherit; display: inherit; width: 27px;}
.link-symbol{position: relative; padding: 17px 10px 17px 29px;}
.link-symbol [class*="symbol-"]{position: absolute; display: block; left: 3px; bottom: 50%; transform: translate(0,50%);}


.link-dropdown{overflow: visible; z-index: 14;} 
[class*="dropdown-"]{position: absolute; display: block; opacity: 0; visibility: hidden; transition: top .57s, bottom .57s, opacity .17s;} [class*="dropdown-"] .link-default{display: block; padding: 14px 17px;} .dropdown-down{top: 120%;} .dropdown-up{bottom: 120%;} 

.link-dropdown:hover [class*="dropdown-"]{visibility: visible; opacity: 1;} .link-dropdown:hover .dropdown-down{top: 100%;} .link-dropdown:hover .dropdown-up{bottom: 100%;} 

[class*="link-icon-"]{position: relative;} [class*="link-icon-"] .image-symbol{position: absolute; display: block; bottom: 50%; transform: translate(0,50%); width: 24px;} .link-icon-left{padding: 7px 4px 7px 34px;} .link-icon-left .image-symbol{left: 8px;} .link-icon-right{padding: 7px 34px 7px 4px;} .link-icon-right .image-symbol{right: 8px;} .link-icon-nav{padding: 17px 10px 17px 38px;} .link-icon-nav .image-symbol{left: 8px; width: 27px;} 

.link-blog{display: block; width: 100%;}



/* -------------------------------------------------- symbols ---------- */

[class*="symbol-"]{position: relative; display: inline-block; vertical-align: middle;}
[class*="symbol-"] [class*="shape-"], [class*="symbol-"] [class*="text-"]{position: absolute; display: block; right: 50%; bottom: 50%; transform: translate(50%,50%); transition-duration: .27s;}

.symbol-navigation{display: block; margin: 0 -6px; width: 54px; height: 54px;} .symbol-navigation [class*="shape-"]{transform: translate(50%,50%)rotate(0deg); width: 42px; height: 5px;} .symbol-navigation .shape-0{bottom: 32px;} .symbol-navigation .shape-1{bottom: 22px;} 

#body-header.toggle .symbol-navigation [class*="shape-"]{bottom: 27px;} #body-header.toggle .symbol-navigation .shape-0{transform: translate(50%,50%)rotate(-45deg);} #body-header.toggle .symbol-navigation .shape-1{transform: translate(50%,50%)rotate(45deg);}

.symbol-dot{position: relative; display: block;} .symbol-dot [class*="shape-"]{width: 7px; height: 7px; border-radius: 50%;}

.symbol-information{display: inline-block; width: calc(18px + 0.9vw); height: calc(18px + 0.9vw);} .symbol-information [class*="shape-"]{width: 15px; height: 2px;} .symbol-information .shape-1{-webkit-transform: translate(50%,50%)rotate(90deg);-ms-transform: translate(50%,50%)rotate(90deg);transform: translate(50%,50%)rotate(90deg);} .js-information-item.on .symbol-information .shape-1, .js-information-item.on:hover .symbol-information  .shape-1{width: 2px;}

.symbol-dropdown{display: absolute; display: block; width: 27px; height: 27px;} 
.symbol-dropdown [class*="shape-"]{width: 9px; height: 2.5px;} 
.symbol-dropdown .shape-0{right: 60%; transform: translate(50%,50%)rotate(35deg);} 
.symbol-dropdown .shape-1{right: 40%; transform: translate(50%,50%)rotate(-35deg);} 

[class*="link-"]:hover .symbol-dropdown .shape-0{right: 58%; transform: translate(50%,50%)rotate(55deg);} 
[class*="link-"]:hover .symbol-dropdown .shape-1{right: 42%; transform: translate(50%,50%)rotate(-55deg);} 

.symbol-switch{position: absolute; display: block; width: 27px; height: 27px;} 
.symbol-switch [class*="shape-"]{border-radius: 7px;} 
.symbol-switch .shape-0{width: 12px; height: 20px;} 
.symbol-switch .shape-1{bottom: 64%; width: 6px; height: 6px;} 

[class*="link-"]:hover .symbol-switch .shape-1{bottom: 36%;}




/*[class*="link-"]:hover .symbol-switch .shape-0{background-color: var(--color-02-lightblue);} 
[class*="link-"]:hover .symbol-switch .shape-1{background-color: var(--color-05-anthrazitblue);} */


/* -------------------------------------------------- pattern ---------- */

/*[class*="pattern-"]{position: absolute; display: block; right: 50%; bottom: 50%; transform: translate(50%,50%); width: 100%; height: 100%;}
.pattern-pixel{background-color: rgba(87,152,152,0.29); background-size: 4px 4px; background-image: linear-gradient(var(--color-00-whitegrey) 0.4px, transparent 0.4px), linear-gradient(to right, var(--color-00-whitegrey) 0.4px, transparent 0.4px); opacity: 0.7;}*/



/* -------------------------------------------------- cursor ---------- */

.js-cursor-outer, .js-cursor-inner{position: fixed; display: block; left: -100px; top: 0; transform: translate(-50%,-50%); border: none; border-radius: 50%; z-index: 999; pointer-events: none;} .js-cursor-outer{transition: left .07s ease-out, top .07s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;} .js-cursor-inner{transition: left .19s ease-out, top .19s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;}

.js-cursor-outer{width: 41px; height: 41px; opacity: 0.17;} .js-cursor-inner{width: 7px; height: 7px; opacity: 1;} .js-cursor-outer.hover{width: 147px; height: 147px; opacity: 0.17;} .js-cursor-inner.hover{width: 147px; height: 147px; opacity: 0;} .js-cursor-hover{cursor: pointer;}



/* -------------------------------------------------- frame ---------- */

.border-radius{border-radius: calc(0.5vw + 5px); overflow: hidden;} .overflow-visible{overflow: visible;}

iframe{display: block; margin: 0; padding: 0; border: none;} .frame-fullscreen{width: 100%; height: 100vh; min-height: 700px;} .frame-auto{width: 100%; height: auto;} .frame-shift{padding-top: 16.67%;} .frame-1to1{padding-top: 100%;} .frame-16to9{padding-top: 56.25%;} .frame-3to4{padding-top: 133.33%;} .frame-4to3{padding-top: 75%;} .frame-8to3{width: 80%; padding-top: calc(0.8 * 37.5%);} .frame-3to8{padding-top: 266.67%;} 

.frame-space{padding-top: 2vw;} .grid-25 .frame-space{padding-top: 4vw;}

.image-cover{opacity: 0.84;}

.symbol-left{position: relative; display: block; padding-left: calc(28px + 1.4vw);} .symbol-left .image-absolute{right: calc(100% - 10px - 0.5vw); bottom: calc(100% - 8px - 0.4vw); width: calc(20px + 1.0vw);} 



/* -------------------------------------------------- header ---------- */

#body-header{position: relative;} .header-navigation{position: relative; display: block;} [class*="grid-nav-"]{vertical-align: middle;} 


.grid-brand{width: calc(2.5% + 200px);} .grid-links{width: calc(97.5% - 200px); min-width: calc(10% + 275px);} [class*="grid-links-"]{position: relative; display: inline-block; vertical-align: middle;} .grid-links-left{width: 45%;} .grid-links-right{width: 55%;} 

.link-brand{width: 200px; height: 80px; z-index: 11;} .link-brand .image-absolute{width: calc(100% - 20px);} 

/*.link-navigation{z-index: 11; cursor: pointer;} .link-navigation{position: relative; display: inline-block; vertical-align: middle;} */

.link-header{position: fixed; display: block; right: 4px; transform: translate(0,50%); width: 54px; height: 54px; z-index: 11; overflow: hidden;} .link-header p{position: absolute; display: block; left: 55px; bottom: 50%; transform: translate(0,50%); width: 140px;} .link-header .image-absolute{right: auto; left: 27px; transform: translate(-50%,50%); width: 27px;} 

#header-contact{bottom: calc(22% + 29px);} #header-scroll{bottom: calc(22% - 29px);}



/* -------------------------------------------------- main ---------- */



/* -------------------------------------------------- review ---------- */

.review-stars{position: relative; display: inline-block; width: calc(12% + 120px); padding-top: calc(1.9% + 19px); background-size: 20% 100%; background-repeat: repeat; background-image: url("../img/Symbol/Symbol-Allgemein_Stern.svg");} 


.symbol-author, .author-name{position: relative; display: inline-block; vertical-align: middle;}
.symbol-author{width: calc(40px + 2%); padding-top: calc(40px + 2%); border-radius: 50%;} .symbol-author .content-absolute{bottom: 45%;} .author-name{width: calc(98% - 40px); padding-left: calc(10px + 0.5%);} 



/* -------------------------------------------------- prices ---------- */

.link-price{width: 100%; padding-top: calc(50px + 12.5%);} .link-price .padding-wide{padding: calc(1.4vw + 1.4vh + 14px) 10%;} .link-price .symbol-left, .tabcontent .symbol-left{padding-left: calc(32px + 1.6vw);} .link-price .symbol-left .image-absolute, .tabcontent .symbol-left .image-absolute{right: calc(100% - 12px - 0.6vw); bottom: 50%; width: auto; max-width: calc(42px + 2.1vw); max-height: calc(38px + 1.9vw);} 

.prices-close{position: absolute; right: 0; top: 0; width: calc(33px + 2.2vw); height: calc(33px + 2.2vw);} .prices-close .content-absolute{transform: translate(50%,55%);} 

.tabcontent{position: relative; display: none; margin-top: calc(0.2vw + 0.2vh + 2px);;}
.tabcontent .symbol-left{padding-right: 200px;} .tabcontent .price-right{position: absolute; display: block; right: 0; top: 0;} 

/*#main-prices li{margin: 0;} #prices-select{width: 100%; text-align: left;} #prices-select li{vertical-align: top; text-align: center; overflow: hidden; line-height: 0;} #prices-select li a{width: 100%; padding: 2vh 0;} #prices-select li a img{margin-bottom: 4px;} #prices-select li a p{height: 24px; overflow: hidden;} #prices-select li div{display: block; height: calc(4vh + 68px); width: 100%;}

.tabcontent, .tabcontent li{width: 100%;} .tabcontent{position: relative; padding: 1vh 14px; display: none;} .tabcontent li{padding: 8px 0;} .tabcontent img{position: absolute; left: 64px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}

.prices-label, .prices-info, .prices-value, .prices-head, .prices-close{display: inline-block;} .prices-label, .prices-info, .prices-value{padding: 0 7px;} .prices-head{padding: 15px 50px 15px 7px; text-align: left;} #prices-sofa img, #prices-corner img, #prices-pillow img, #prices-seat img, #prices-carpet img, #prices-lether img, .prices-label, .prices-info, .prices-head{float: left;} .prices-value, .prices-close{float: right;} .prices-label{padding-left: 100px;} .prices-info{text-align: left; margin-top: 1px;} .prices-close{position: absolute; right: 0; top: 0; width: 50px; line-height: 50px; text-align: center; cursor: pointer;}

#prices-spotty{position: relative;} #spotty-head, #spotty-text, #spotty-separator{position: relative; display: block; vertical-align: middle; margin: 0 auto;} #spotty-head{width: 170px; margin-bottom: 8px;} #spotty-head img{margin-bottom: 4px;} #spotty-text{max-width: 840px;} #spotty-new{position: absolute; display: block; top: 0px; left: -27px; }

#prices-spare div, #prices-discount{position: relative;} #prices-discount{min-height: 40px;} #prices-spare p, #prices-spare span, #prices-discount p, #prices-discount span{position: absolute; display: block; top: 50%;} #prices-spare p, #prices-discount p{left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; padding-left: 49px; padding-right: 17px; text-align: left;} #prices-spare p{max-width: 245px;} #prices-discount p{max-width: 280px;} #prices-spare span, #prices-discount span{font-size: 37px; opacity: 0.84;} #prices-spare span, #prices-discount span{-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 17px;} #spotty-head .prices-value{float: none;}*/



/* -------------------------------------------------- downrange ---------- */

#section-downrange .image-contain{opacity: .11;} .link-downrange{position: absolute; display: block; transform: translate(50%,50%); width: 48px; height: 48px; overflow: visible;} .link-downrange .image-absolute{width: auto; height: 14px;} .link-downrange [class*="text-"]{position: absolute; display: block; bottom: 50%; transform: translate(0,50%); width: calc(60px + 3vw); padding: 4px 0 20px 0;} .link-downrange .text-left{left: 80%;} .link-downrange .text-right{right: 80%;} 

#downrange-munich{right: 46%; bottom: 24%;} #downrange-rosenheim{right: 34%; bottom: 14%;} #downrange-augsburg{right: 64%; bottom: 31%;} #downrange-ingolstadt{right: 53%; bottom: 43%;} #downrange-garmisch{right: 57%; bottom: 4%;} #downrange-regensburg{right: 37%; bottom: 48%;} #downrange-kempten{right: 75%; bottom: 11%;} #downrange-passau{right: 9%; bottom: 38%;} #downrange-nuernberg{right: 59%; bottom: 64%;} #downrange-munich .image-absolute{transform: translate(50%,10%); height: 48px;} #downrange-munich .text-left{left: 100%; bottom: 80%;} #downrange-garmisch .text-left{width: calc(135px + 4.5vw);} 



/* -------------------------------------------------- footer ---------- */

[class*="grid-footer-"]{vertical-align: middle;}

#backlink .image-relative{display: inline-block; margin-left: 7px; width: 25px;}



/* -------------------------------------------------- legal ---------- */

.main-section-legal p{padding: 5px 0;} .main-section-legal [class*="list-"] p{padding: 0 0;} .main-section-legal .link-default{padding: 0 7px;}

#matomo-opt-out{padding: calc(0.9vw + 0.9vh + 9px) 1.25%;} #matomo-opt-out input{margin-right: calc(0.45vw + 0.45vh + 4.5px); margin-top: calc(0.45vw + 0.45vh + 4.5px);} #matomo-opt-out label{margin: calc(0.9vw + 0.9vh + 9px) 0;} 



/* -------------------------------------------------- informations ---------- */

.js-information-item{position: relative; display: block; padding: calc(0.35vw + 0.35vh + 3.5px) 7px calc(0.35vw + 0.35vh + 3.5px) calc(16px + 0.6vw + 17px);} 

.symbol-information{position: absolute; left: 7px; top: calc(0.35vw + 0.35vh + 4.5px);}
.information-title{position: relative; display: inline-block; width: 100%; height: auto; padding: calc(0.15vw + 0.15vh + 1.5px) 0;}
.information-description{max-height: 0; padding: 0 0; overflow: hidden; opacity: 0;} .information-description p{display: block;} 

.js-information-item.on .information-description{max-height: 350px; padding: calc(0.15vw + 0.15vh + 1.5px) 0; opacity: 1;}

.js-information-item, .information-description{-webkit-transition-duration: .47s;-o-transition-duration: .47s;transition-duration: .47s;}

/*.js-information-item, .symbol-information{background-color: rgba(255,0,0,0.2);}*/



/* -------------------------------------------------- slide sector ---------- */

.sector-slide, .sector-slide .slide-wrapper{position: relative; display: block; margin: 0 auto; height: auto;} .sector-slide{overflow: hidden;} .sector-slide .slide-wrapper{width: 800%; /*transition: transform .29s;*/} .sector-slide .slide-wrapper .list-item{position: relative; display: inline-block; width: 12.5%;}

.sector-item{position: relative; display: block; height: 400px;} .sector-title, .sector-value{position: relative; display: inline-block; vertical-align: top;} .sector-title{width: 60%;} .sector-value{width: 40%;}

#main-sector .list-link .list-item{margin: 8px 8px;} #main-sector .list-link .list-item{width: calc(100% - 16px);} 
.list-link .link-slide-sector{display: block; padding: 21px 4px; text-align: center;} 
.link-slide-sector{background-color: rgba(38, 55, 69,0.1); border: solid 1px rgba(38, 55, 69,0.1);}
.link-slide-sector.toggle, .link-slide-sector:hover{background-color: rgba(38, 55, 69,0.29);}



/* -------------------------------------------------- slide price ---------- */

.price-slide, .price-slide .slide-wrapper{position: relative; display: block; margin: 0 auto; height: auto;} .price-slide{overflow: hidden;} .price-slide .slide-wrapper{width: 800%; /*transition: transform .29s;*/} .price-slide .slide-wrapper .list-item{position: relative; display: inline-block; width: 12.5%;}

.price-item{position: relative; display: block; height: 400px;} .price-title, .price-value{position: relative; display: inline-block; vertical-align: top;} .price-title{width: 60%;} .price-value{width: 40%;}

#main-price .list-link .list-item{margin: 8px 8px;} #main-price .list-link .list-item{width: calc(33.33% - 16px);} 
.list-link .link-slide-price{display: block; padding: 21px 4px; text-align: center;} 
.link-slide-price{background-color: rgba(255,255,255,0.1); border: solid 1px rgba(255,255,255,0.1);}
.link-slide-price.toggle, .link-slide-price:hover{background-color: rgba(255,255,255,0.29);}



/* -------------------------------------------------- seals ---------- */

#happiness-content{margin: 0 auto; max-width: 730px;} #happiness-image{width: 97px; height: 97px;}

.seal-ekomi, .happiness-card{position: relative; display: inline-block; width: 390px; height: 110px; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); text-align: center; overflow: hidden; vertical-align: middle;} .seal-ekomi, .happiness-card{display: inline-block; margin: -11px -39px -18px -39px;} /*#section-intro .seal-ekomi, #section-intro .happiness-card{display: block; margin: -18px -39px;}*/

.card-image, .card-content{position: absolute; display: block; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .card-image{left: 9px; width: 102px; height: 102px;} .card-content{right: 11px; width: 259px; height: auto; text-align: center;} .card-head{margin-bottom: 5px;}

.card-head, .card-text, .card-text span{font-family: Arial, Helvetica, sans-serif;} .card-head{line-height: 23px; font-size: 16.3px; font-weight: 600;} .card-text, .card-text span{line-height: 17px; font-size: 13.7px; font-weight: 600;} .card-head, .card-text span{color: #4e5768;} .card-text{color: #7f8995;}



/* -------------------------------------------------- marquee ---------- */

/*[class*="marquee-"]{--gap: 0px; position: relative; display: flex; width: 100%; height: auto; overflow: hidden; user-select: none;} [class*="marquee-"] p{flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%;} [class*="marquee-"], [class*="marquee-"] p{gap: var(--gap);} [class*="marquee-"] p span{position: relative; display: inline-block; width: 24px; vertical-align: middle; text-align: center;}

.marquee-left p{animation: animation-marguee-left 24s linear infinite;} .marquee-right p{animation: animation-marguee-right 24s linear infinite;} @keyframes animation-marguee-left{from{transform: translateX(calc(0% - var(--gap)));}to{transform: translateX(-100%);}} @keyframes animation-marguee-right{from{transform: translateX(calc(-100% - var(--gap)));}to{transform: translateX(0);}}*/



/* -------------------------------------------------- fade in on scroll ---------- */

[class*="js-fadein-"]{overflow-y: visible;} [class*="js-fadein-fast-"]{transition: transform 870ms ease-in-out 87ms, opacity 590ms ease-in-out 59ms;} [class*="js-fadein-slow-"]{transition: transform 1910ms ease-in-out 191ms, opacity 1440ms ease-in-out 144ms;}



/* -------------------------------------------------- transition ---------- */

.js-approach-item{transition: opacity .17s;}
/*#html-body, */[class*="link-"], .happiness-card, .seal-ekomi{transition-duration: .41s;}
/*#body-main, #body-footer, .frame-navigation{transition-duration: .54s;}*/



/* -------------------------------------------------- media query ---------- */

h1, .h1, h2, .h2{ opacity: 1;} h1, .h1{font-weight: 700; letter-spacing: -1px;} h2, .h2, .h3{font-weight: 600; letter-spacing: 0px;} .h3{letter-spacing: 1px;} p{font-weight: 450; letter-spacing: calc(0.36px + 0.012vw);} [class*="link-"] p, .written-bold{font-weight: 650; letter-spacing: calc(0.51px + 0.017vw);} 

/*h1, .h1, h2, .h2{ opacity: 1;} h1, .h1{font-weight: 700; letter-spacing: -1px;} h2, .h2, .h3{font-weight: 600; letter-spacing: 0px;} .h3{letter-spacing: 1px;} p{font-weight: 400; letter-spacing: 0.7px;} .written-bold{font-weight: 600;}*/ 

@media(max-width: 1039px){
    .link-navigation{display: inline-block;} .navigation-card{position: fixed; display: block; right: -100%; bottom: 0; width: 100%; height: 100%; background-color: var(--color-lightgrey);} #body-header.toggle .navigation-card{right: 0;} .navigation-card .list-link{position: absolute; display: block; right: 50%; bottom: 42%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); text-align: left;} .navigation-card .list-link .list-item{display: block; width: 270px;} 
    
    .section-layer-full{width: 100%; max-width: 800px;} .section-layer-default{width: 92%; max-width: 736px;} .section-layer-thin{width: 84%; max-width: 672px;} 
    
    .grid-75, .grid-67, .grid-60, .grid-50, .grid-40, .grid-33, .grid-25, .grid-fix, .grid-flex{width: 100%;} #body-main .grid-40{width: 84%;} #prices-select .grid-25, .grid-20, .split-33{width: 50%;} .grid-12{width: 25%;} .desktop-right{float: none;} .desktop-absolute{position: relative; bottom: auto; right: auto; transform: translate(0,0); width: 100%;} .only-desktop{display: none;} .only-mobile{display: block;} .link-dropdown .only-mobile{display: inherit;} .mobile-100{width: 100%;} .mobile-33{width: 33.33%;} 
    
    p, .link-text{line-height: calc(16.5px + 0.55vw); font-size: calc(10.8px + 0.36vw);} 
    [class*="link-"] p{line-height: calc(15.9px + 0.53vw); font-size: calc(9.9px + 0.33vw);} 
    h3, .h3, [class*="link-"] .h3{line-height: calc(16px + 0.8vw); font-size: calc(13px + 0.65vw);} 
    h2, .h2{line-height: calc(27px + 1.8vw); font-size: calc(21px + 1.4vw);} 
    h1, .h1{line-height: calc(30px + 3.0vw); font-size: calc(27px + 2.7vw);}
	
    .list-symbol [class*="symbol-"]{width: 21px; height: 21px;} [class*="dropdown-"]{width: calc(111px + 3.7vw);} #section-downrange .grid-40{max-width: 440px;}
    }
@media(min-width: 1040px){
    .link-navigation{display: none;} .navigation-card{position: relative; display: inline-block; right: auto; width: auto; height: auto; background-color: transparent;} .navigation-card .list-link{position: relative; display: block; right: auto; bottom: auto; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); text-align: right;} .navigation-card .list-link .list-item{display: inline-block;} 
    
    .section-layer-full{width: 100%; max-width: 1920px;} .section-layer-default{width: 85%; max-width: 1632px;} .section-layer-thin{width: 70%; max-width: 1344px;} 
    
    .grid-75{width: 75%;} .grid-67{width: 66.67%;} .grid-60{width: 60%;} .grid-50{width: 50%;} .grid-40{width: 40%;} .grid-33, .split-33{width: 33.33%;} .grid-25{width: 25%;} .grid-20{width: 20%;} .grid-12{width: 12.5%;} .grid-fix{width: calc(5% + 350px);} .grid-flex{width: calc(95% - 350px);} .desktop-right{float: right;} .desktop-absolute{position: absolute; bottom: 50%; right: 50%; transform: translate(50%,50%); width: 100%;} .only-desktop{display: block;} .link-dropdown .only-desktop{display: inherit;} .only-mobile{display: none;} .desktop-bottom{bottom: 0; transform: translate(50%,0);} .desktop-bottom .padding-default{padding-bottom: calc(0.3vw + 0.3vh + 3px);} 
    
	p, .link-text{line-height: calc(16.5px + 0.55vw); font-size: calc(10.8px + 0.36vw);} 
    [class*="link-"] p{line-height: calc(15.9px + 0.53vw); font-size: calc(9.9px + 0.33vw);} 
    h3, .h3, [class*="link-"] .h3{line-height: calc(16px + 0.8vw); font-size: calc(13px + 0.65vw);} 
    h2, .h2{line-height: calc(30px + 2.0vw); font-size: calc(27px + 1.8vw);} 
    h1, .h1{line-height: calc(37px + 3.7vw); font-size: calc(37px + 3.7vw);} 
    
    .list-symbol [class*="symbol-"]{width: 23px; height: 23px;} [class*="dropdown-"]{width: calc(165px + 5.5vw);}
    }



@media(pointer: coarse){
    .js-cursor-outer, .js-cursor-inner{display: none;}
}@media(pointer: fine){
    .link-header:hover{width: 184px;} 
}



@media screen {
    .js-enable [class*="js-fadein-"]{opacity: 0;} .js-enable .js-fadein-slow-left, .js-enable .js-fadein-fast-left{transform: translate(58px,0);} .js-enable .js-fadein-slow-right, .js-enable .js-fadein-fast-right{transform: translate(-58px,0);} .js-enable .js-fadein-slow-up, .js-enable .js-fadein-fast-up{transform: translate(0,29px);} /*.js-enable .js-fadein-down{transform: translate(0,-41px);}*/ .js-enable [class*="js-fadein-"].on{opacity: 1; transform: translate(0,0);} 
    }
@media print {
    .js-enable [class*="js-fadein-"]{opacity: 1;} .js-enable .js-fadein-slow-left, .js-enable .js-fadein-fast-left{transform: translate(0,0);} .js-enable .js-fadein-slow-right, .js-enable .js-fadein-fast-right{transform: translate(0,0);} .js-enable .js-fadein-slow-up, .js-enable .js-fadein-fast-up{transform: translate(0,0);} /*.js-enable .js-fadein-down{transform: translate(0,0);}*/ .js-enable [class*="js-fadein-"].on{opacity: 1; transform: translate(0,0);} 
    }


/* Swiper */
@media(max-width: 1023px) {
    .hide-mobile {
        display: none !important;
    }
}

@media(min-width: 1024px) {
    .show-mobile {
        display: none !important; 
    }
}


.custom-swiper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-width: 1920px;
}

.custom-swiper-mobile {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 4px !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.custom-swiper .swiper-slide img, .custom-swiper-mobile .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.custom-swiper .swiper-button-prev, .custom-swiper-mobile .swiper-button-prev,
.custom-swiper .swiper-button-next, .custom-swiper-mobile .swiper-button-next {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    top: calc(50% + (44px / 2));
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-swiper .swiper-button-prev svg, .custom-swiper-mobile .swiper-button-prev svg,
.custom-swiper .swiper-button-next svg, .custom-swiper-mobile .swiper-button-next svg {
    width: 20px;
    height: 20px;
    fill: var(--color-05-anthrazitblue);
}

.custom-swiper-mobile .swiper-button-prev {
    left: calc(0.7vw + 0.7vh + 7px);
}

.custom-swiper-mobile .swiper-button-next {
    right: calc(0.7vw + 0.7vh + 7px);
}

.custom-swiper .swiper-button-prev {
    left: calc(1.8*(0.7vw + 0.7vh + 7px));
}

.custom-swiper .swiper-button-next {
    right: calc(1.8*(0.7vw + 0.7vh + 7px));
}

.custom-swiper .dots-wrapper, .custom-swiper-mobile .dots-wrapper {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 6px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 100;
  }

  .custom-swiper .swiper-pagination, .custom-swiper-mobile .swiper-pagination {
    position: static;
    display: flex;
  }

  .custom-swiper .swiper-pagination-bullet, .custom-swiper-mobile .swiper-pagination-bullet {
    background: #ccc;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 1;
    transition: background 0.3s;
  }

  .custom-swiper .swiper-pagination-bullet-active, .custom-swiper-mobile .swiper-pagination-bullet-active {
    background: var(--color-04-blue);
  }

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}


/* Vertrauensreihe 09.08.2026 (Freigabe Louis): vier Kacheln je 312px brauchen 1248px.
   Zwischen 1040 und 1379px wird die Reihe auf zwei Kacheln je Zeile begrenzt (2+2 statt 3+1). */
@media(min-width: 1040px) and (max-width: 1379px){ .vertrauensreihe{max-width: 700px;} }

/* vertrauensreihe-umbau-20260809 ------------------------------------------
   Freigabe Louis 09.08.2026. Kalender-Kachel ist raus, ihr Text steht als
   Zeile ueber der Siegelreihe; darunter der Telefon-Button.
   ------------------------------------------------------------------------ */
.vertrauens-claim{max-width:640px;margin:0 auto 8px;padding:0 18px;text-wrap:balance}
.claim-head{display:block;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:18px;line-height:25px;color:#4e5768}
.claim-text{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:13.7px;line-height:19px;color:#7f8995}
.vertrauens-tel{margin-top:10px;padding:0 12px}
.tel-cta{width:auto;max-width:calc(100% - 24px)}
.tel-cta p{font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:30px;font-weight:600;color:#2a3647;white-space:nowrap}
.tel-cta .image-symbol{width:30px;vertical-align:-6px}
@media(min-width:1040px){
  .tel-cta{min-width:0;margin-top:6px;padding:13px 30px}
  .tel-cta p{font-size:21px;line-height:28px}
}
@media(max-width:1039px){
  .vertrauens-claim{max-width:32em;padding:0 16px}
  .claim-head{font-size:17px;line-height:24px}
  .tel-cta{min-width:0;width:calc(100% - 24px);max-width:330px;padding-top:15px;padding-bottom:15px}
  .tel-cta p{font-size:21px;line-height:28px}
  .tel-cta .image-symbol{width:27px;vertical-align:-5px}
}
/* Die Regel fuer VIER Kacheln neutralisieren - es sind jetzt drei. */
@media(min-width:1040px) and (max-width:1379px){.vertrauensreihe{max-width:none}}

/* vertrauensreihe-mobilabstand-20260809 */
@media(max-width:1039px){
  .happiness-card,.seal-ekomi{margin-top:-11px;margin-bottom:-1px}
  .geo-google-seal{margin-top:-11px!important;margin-bottom:-1px!important}
  .vertrauens-tel{margin-top:2px}
}