@charset "UTF-8";



@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');







.clear{ clear:both; border:0; opacity:0; height:0; font-size:0; visibility: hidden; }















/* =====================  kalibrierung  ===================== */











:root {



    --color-neutral-00: #ffffff; /* Weiss */



    --color-neutral-90: #000000; /* Schwarz */



    --color-neutral-10: #f6f5f4; /* Hellgrau 1 */



    --color-neutral-20: #edeceb; /* Hellgrau 2 */



    --color-neutral-30: #e0dfdf; /* Hellgrau 3 */



    --color-neutral-40: #cccbca; /* Hellgrau 4 */



    --color-neutral-45: #6B6B6B; /* Dunkelgrau 5 */



    --color-neutral-50: #474747; /* Dunkelgrau 4 */



    --color-neutral-60: #333333; /* Dunkelgrau 3 */



    --color-neutral-70: #262626; /* Dunkelgrau 2 */



    --color-neutral-80: #1A1A1A; /* Dunkelgrau 1 */



    --color-blue-1: #008bcb; /* Blau */



    --color-blue-2: #006A9A; /* Hover-Blau */



    --color-magenta: #E66171; /* Magenta */



    --color-yellow: #FBB921; /* Gelb */



    --color-lila: #C099C7; /* Lila */



    --color-green: #46B27E; /* Grün */







    --size-0: 0px;



    --size-px: 1px;



    --size-0-5: 4px;



    --size-1: 8px;



    --size-1-5: 12px;



    --size-2: 16px;



    --size-2-5: 20px;



    --size-3: 24px;



    --size-4: 32px;



    --size-5: 40px;



    --size-6: 48px;



    --size-7: 56px;



    --size-8: 64px;



    --size-9: 72px;







    --radius-none: 0px;



    --radius-sm: 4px;



    --radius-md: 8px;



    --radius-lg: 12px;



    --radius-xl: 24px;



}



















body{font-family:'Roboto',sans-serif;}







#container{padding: 24px; margin: 62px auto 0 auto;}







.headim{aspect-ratio: 1.2/1; background-size: cover; background-position: center center; border-radius: 12px; overflow: hidden; opacity: 0; position: relative; z-index: -1;







-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.headim video{



  object-fit: cover;



  width: 100%;



  height: 100%;



  position: absolute;



  top: 0;



  left: 0;



}















p{font-size: 18px; line-height: 30px; font-weight: 300;}

p.subtitle{font-size: 28px; line-height: 38px; margin: 0;}

.tit_wrap{padding-bottom: 48px; border-bottom: 1px solid var(--color-neutral-40); margin-bottom: 48px;}





a{}







a:hover{}







h1{font-size: 56px; line-height: 64px; margin-bottom: 12px; overflow-wrap: break-word}







h2{font-size: 28px; line-height: 38px; margin-top: 0;}



h3{font-size: 24px; line-height: 30px; color: var(--color-neutral-40);}







.frame-default {margin: 48px 0;}



.frame-default h3{color: var(--color-neutral-80);}



.frame-type-text.frame, .frame-type-textpic.frame{border-top: 1px solid var(--color-neutral-40); padding-top: 48px;}





.ce-bodytext ul{font-size: 18px; line-height: 30px; font-weight: 300;}



.ce-bodytext ul {padding: 0; list-style: none;}

.ce-bodytext ul li{padding-left: 15px; position: relative;}

.ce-bodytext ul li::before{content: "."; position:absolute; left: 0; top: -5px; font-weight: 700;}



.ce-bodytext ol{font-size: 18px; line-height: 30px; font-weight: 300;}

.ce-bodytext ol {padding: 0; list-style: none;}

.ce-bodytext ol li{padding-left: 36px; position: relative;}

.ce-bodytext ol li::before{content: ""; position:absolute; background: url(../Images/_cur.svg) no-repeat center center; height: 24px; width: 20px; left: 0; top: 0px; background-size: contain;}





#nav{position: fixed; top: 0; left: 0; width: 100vw; z-index: 11;}

#nav .log{background-size: 24px 24px!important; }

#nav .navc.zero .nbar .log{background: url(../Images/cur.svg) no-repeat center center; width: 24px; height: 24px;}

#nav .navc .lang{background: url(../Images/lang.svg) no-repeat center center; }



#nav .navc{position: absolute; width: 100vw; height: 100vh; left: 100%; top:0; background: white; opacity: 0;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



-webkit-transition: opacity 0.3s 0.2s ease-in-out;-moz-transition: opacity 0.3s 0.2s ease-in-out;-ms-transition: opacity 0.3s 0.2s ease-in-out; -o-transition: opacity 0.3s 0.2s ease-in-out; transition: opacity 0.3s 0.2s ease-in-out;



}







#nav .navc .nbar{height: 60px;}



#nav .navc .nbar a.log{padding: 18px 24px; display: inline-block;}







#nav .navc.zero{left: 0; height: auto; z-index: 0; opacity: 1;}



#nav .navc.one{z-index: -1;}



#nav .navc.act{left: 0; opacity: 1;}







.navc ul{list-style: none; padding: 0; margin: 0 24px;}



.navc ul li{cursor: pointer; border-bottom: 1px solid var(--color-neutral-20); padding-bottom: 10px;}



.navc ul li a{text-decoration: none;}



.navc ul li h3{ font-size: 28px; line-height: 32px; color: var(--color-neutral-80); font-weight: bold;  margin: 0; padding: 24px 24px 24px 0;  position: relative;}



.navc ul li h3::after{content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 100%; background: url(../Images/arrow.svg) no-repeat center right;



-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}







.navc.two ul li ul{margin: 0 0 0 9px; displaY: none; margin-bottom: 20px;}



.navc.two ul li.act ul{display: block;}



.navc.two ul li ul li{border-bottom: none;}



.navc.two ul li a{font-size: 20px; line-height: 28px; font-weight: bold; text-decoration: none; padding: 5px 0; color: var(--color-neutral-45);}



.navc.two ul li ul li.acti a{color: var(--color-neutral-80);}



.navc.two ul li{padding: 0;}



.navc.two ul li a{display: block;}



.navc.two ul li.act h3::after{-moz-transform: rotate(90deg);



-webkit-transform: rotate(90deg);



-o-transform: rotate(90deg);



-ms-transform: rotate(90deg);



transform: rotate(90deg);}











/*************** NAV- Animationen *******/



.navc.one li{opacity: 0; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



-moz-transform: translateX(50px);-webkit-transform: translateX(50px);-o-transform: translateX(50px);-ms-transform: translateX(50px);transform: translateX(1050px0px);}



.navc.one.act li{opacity: 1.0;



-moz-transform: translateX(0px);-webkit-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);}







.navc.two li.up{opacity: 0; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



-moz-transform: translateX(50px);-webkit-transform: translateX(50px);-o-transform: translateX(50px);-ms-transform: translateX(50px);transform: translateX(50px);}



.navc.two.act li.up{opacity: 1.0;



-moz-transform: translateX(0px);-webkit-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);}







.navc.two ul li.up ul.sub li{opacity: 0; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;



-moz-transform: translateX(-8px);-webkit-transform: translateX(-8px);-o-transform: translateX(-8px);-ms-transform: translateX(-8px);transform: translateX(-8px);}



.navc.two ul li.up.act ul.sub li{opacity: 1.0;



-moz-transform: translateX(0px);-webkit-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);}







.navc.two .nbar{opacity: 0;-webkit-transition: all 0.5s ease-in;-moz-transition: all 0.5s ease-in;-ms-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}



.navc.two.act .nbar{opacity: 1.0;}







/*************** Mobile Nav-BTN**********/



.nbt{width: 24px; height: 24px; padding: 18px 18px; position: fixed; z-index: 101; right: 0px; top: 0px; background: white; cursor: pointer;}







 .con, .special-con {   cursor: pointer;   display: inline-block; }



 .bar {   display: block;   height: 3px;   width: 24px;   background: var(--color-neutral-80);   margin: 5px auto;}



 .con {   width: auto;   margin: 0 auto;   -webkit-transition: all .7s ease;   -moz-transition: all .7s ease;   -ms-transition: all .7s ease;   -o-transition: all .7s ease;    transition: all .7s ease;}



 .x.open .con .bar {  background-color: white;}



 .col {   display: inline-block;text-align: center;   height: auto;   position: relative; }



 .bar {  -webkit-transition: all .7s ease; -moz-transition: all .7s ease;   -ms-transition: all .7s ease;   -o-transition: all .7s ease;   transition: all .7s ease; }



 .nbt.open .con .top {  -webkit-transform: translateY(5px) rotateZ(45deg);  -moz-transform: translateY(5px) rotateZ(45deg); -ms-transform: translateY(5px) rotateZ(45deg);   -o-transform: translateY(5px) rotateZ(45deg); transform: translateY(5px) rotateZ(45deg); }



.nbt.open .con .bottom {  -webkit-transform: translateY(-3px) rotateZ(-45deg);   -moz-transform: translateY(-3px) rotateZ(-45deg);   -ms-transform: translateY(-3px) rotateZ(-45deg);   -o-transform: translateY(-3px) rotateZ(-45deg); transform: translateY(-3px) rotateZ(-45deg);}



 .nbt.open .con .middle { width: 0; }



/******************************/







.nbar{display: flex; border-bottom: 1px solid var(--color-neutral-20);}



.nbar .btn{width: 60px; cursor: pointer; height: 60px; background: url(../Images/back_top.svg) no-repeat center center;}



.nbar .ntit{font-size: 20px; font-weight: 500; display: flex; align-items: center;}











.topi, .sec_nav, .sub_nav{display: none;}















   .frame {



        opacity: 0; 



        transform: translateY(20px);



        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;



    }







    .frame.vis {



        opacity: 1;



        transform: translateY(0);



    }







.navc .lang{position: absolute; right: 60px; top: 0; padding: 20px 22px; cursor:pointer; height: 16px; width: 16px;}



.navc .lang .langmen{position: absolute; right: 24px; top: 45px; display: none; margin: 0; list-style: none; padding: 0; z-index: 4; font-size: 14px; font-weight: bold; color: white; border-radius: 6px; overflow: hidden; }



.navc .lang .langmen li{text-align: center; margin: 0; border: 0; padding: 0;}



.navc .lang .langmen li a{text-decoration: none; background: var(--color-neutral-30); display; block; padding: 8px 10px; display: block; color: var(--color-neutral-80);



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.navc .lang .langmen li.act{margin: 0; border: none;}



.navc .lang .langmen li.act a{background: var(--color-neutral-80); color: var( --color-neutral-00); }



.navc .lang .langmen li a:hover{background: var(--color-blue-1); color: var( --color-neutral-00);}







.tx-ttaddress{overflow: hidden; margin-bottom: 64px;}



.tt_address_list{/*display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;*/  width: calc(100% + 32px)!important; margin-left: -16px;}



.tt_address_list .empwrap{overflow: hidden;}



.tt_address_list .vcard{ box-sizing: border-box; padding: 24px 16px; width: 25%;}



.tt_address_list .vcard .aimg{ position: relative; OVERFLOW: HIDDEN; border-radius: 12px; line-height: 0;}



.tt_address_list .vcard .aimg .ort{position: absolute; left: 15px; top: 12px; color: white; font-size: 14px; font-weight: bold; line-height: 18px;}



.tt_address_list .vcard .aimg img{width: 100%; height: auto; border-radius: 12px;



                                 -webkit-transition: all 0.3s ease-in-out;



-moz-transition: all 0.3s ease-in-out;



-ms-transition: all 0.3s ease-in-out;



-o-transition: all 0.3s ease-in-out;



transition: all 0.3s ease-in-out;}



.tt_address_list .vcard:hover .aimg img{-moz-transform: scale(1.03);



-webkit-transform: scale(1.03);



-o-transform: scale(1.03);



-ms-transform: scale(1.03);



transform: scale(1.03);}



.tt_address_list .vcard .aimg a.vcard{position: absolute; width: auto!important; left: 8px; overflow: hidden; bottom: 12px; background: white; color: var(--color-blue-1); padding: 3px 12px; height: 24px; border-radius: 12px; text-decoration: none; font-size: 14px; line-height: 18px; padding-left: 24px; background: url(../Images/vcard.svg) no-repeat 8px center white; background-size: 18px;}



.tt_address_list .vcard .aimg a.vcard span{padding-left: 8px; opacity: 0; margin-left: -160px;



    -webkit-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out 0.1s;-moz-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out 0.1s;-ms-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out 0.1s;-o-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out 0.1s; transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out 0.1s;}



.tt_address_list .vcard .aimg a.vcard:hover span{margin-left: 0; opacity: 1;}







.tt_address_list .vcard .cap{margin-top: 10px; min-height: 124px;}



.tt_address_list .vcard .cap .pos{font-size: 14px; font-weight: 300;}



.tt_address_list .vcard .cap h3{font-size: 20px; line-height: 28px; color: var( --color-neutral-80); font-weight: bold; margin: 12px 0;}



.tt_address_list .vcard .cap .link{display: block; color: var(--color-neutral-80); font-size: 14px; font-weight: 300; text-decoration: none; position: relative; padding-left: 30px; margin: 4px 0; 



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}







.tt_address_list .vcard .cap .link::before{content: ""; width: 14px; height: 18px; background: url(../Images/mail.svg) no-repeat center center; background-size: contain; margin-right: 15px; display: inline-block; position: absolute; left: 0;



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.tt_address_list .vcard .cap .link.tel::before{background-image: url(../Images/tel.svg);}



.tt_address_list .vcard .cap .link:hover{font-weight: 500; color: var(--color-blue-1);}



.tt_address_list .vcard .cap .link:hover::before{-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}







.tx-ttaddress .filtr {display: flex; gap: 32px; margin-bottom: 16px; position: relative;}



.tx-ttaddress .filtr ul{list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-grow: 1;}



.tx-ttaddress .filtr ul li{font-size: 16px; font-weight: 300; padding: 12px; border: 1px solid var(--color-blue-1); border-radius: 6px; color: var(--color-blue-1); cursor: pointer;



        -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.tx-ttaddress .filtr ul li.is-checked, .tx-ttaddress .filtr ul li:hover{background: var(--color-blue-1); color: white;}



.se{position: relative; margin-bottom: 32px; width: calc(50% - 16px);}

.se .quicksearch{    font-size: 16px; box-sizing: border-box;   font-weight: 300;    padding: 12px;    border: 1px solid var(--color-neutral-40);    border-radius: 6px;    color: var(--color-neutral-40);    cursor: pointer; width: 100%; padding-right: 40px;}

.se span{display: flex; justify-content: center; position: absolute; right: 0; top: 0; height: 100%;     width: 50px; align-items: center; font-size: 28px; color: var(--color-neutral-40); cursor: pointer;}



.fsearch{font-size: 16px; width: 45px; position: relative; background: url(../Images/lupe.svg) no-repeat center center var(--color-blue-1); background-size: 32px; height: 45px;  box-sizing: border-box; font-weight: 300; padding: 12px; border: 1px solid var(--color-blue-1); border-radius: 6px; color: var(--color-blue-1); cursor: pointer; left: auto; top: auto;



        -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.fsearch.open{position: absolute; width: 100%; background: white; left: 0; top: 0;}



.fsearch.open::after{content:"close"; width: 50px; height: 50px; background: yellow;}







.tx-ttaddress .filtr ul.ort{justify-content: flex-end;}



.tx-ttaddress .filtr ul.ort li{color: var(--color-green); border-color: var(--color-green);}



.tx-ttaddress .filtr ul.ort li.is-checked, .tx-ttaddress .filtr ul.ort li:hover{background: var(--color-green); color: white;}







.filter-container{}











footer{border-top: 1px solid var( --color-neutral-30);}



footer .foot{margin: 45px auto; max-width: 1600px;}



footer p{ font-size: 14px; line-height: 18px;}



ul.footnav{padding: 0; margin: 0; list-style: none; display: flex; width: 100%;}



ul.footnav li{flex-grow: 1;}



ul.footnav li a.don{font-size: 16px; display: inline-block; line-height: 16px; font-weight: bold; color: white; padding: 16px 20px;background: var(--color-blue-1); border-radius: 6px; text-decoration: none; margin-bottom: 40px;



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



ul.footnav li a.don:hover{background: var(--color-neutral-80);}



ul.footnav li a.logo{display: inline-block;}







ul.footnav li a.link{display: inline-block; color: var(--color-neutral-80); font-size: 14px; font-weight: 300; text-decoration: none; position: relative; padding-left: 30px; margin: 2px 0; 



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



ul.footnav li a.link::before{content: ""; width: 14px; height: 18px; background: url(../Images/mail.svg) no-repeat center center; background-size: contain; margin-right: 15px; display: inline-block; position: absolute; left: 0;



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



ul.footnav li a.link.tel::before{background-image: url(../Images/tel.svg);}



ul.footnav li a.link:hover{color: var(--color-blue-1);}



ul.footnav li a.link:hover::before{-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}







ul.footnav li.pat:nth-child(2){display: flex; justify-content: flex-end;}



ul.footnav li.pat:nth-child(2) ul {display: flex; list-style: none; padding: 0; gap: 60px;}



ul.footnav li.pat:nth-child(2) ul li a{font-size: 18px; line-height: 30px; color: var(--color-neutral-80); text-decoration: none; margin-bottom: 12px; display: inline-block;}



ul.footnav li.pat:nth-child(2) ul li ul li a{font-size: 14px; line-height: 18px; font-weight: 300; color: var(--color-neutral-80); text-decoration: none;  margin: 6px 0;}



ul.footnav li.pat:nth-child(2) ul li ul{display: block;}



ul.footnav li h3{margin: 0; color: var(--color-neutral-80);}







div.servnav{margin-top: 60px; display: flex; width: 100%; font-size: 14px; line-height: 18px; color: var(--color-neutral-80);}



div.servnav div{flex-grow: 1;}



div.servnav div.snav{display: flex; align-items: flex-end; justify-content: flex-end;}



div.servnav div.snav ul{display: flex; margin: 0; padding: 0; list-style: none;}



div.servnav div.snav ul li a{text-decoration: none; color: var(--color-blue-1); display: inline-block; padding: 5px 15px; margin-right: -15px;}















div.gallery{aspect-ratio: 2/1; gap: 15px; margin: 48px 0; width:100%; height: 600px; padding-bottom: 50px;}



div.gallery .swiper-wrapper{margin-bottom: 40px;}



div.gallery a{background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: 12px;}





 .swiper-pagination .swiper-pagination-bullet{background: none; border: 1px solid var(--color-neutral-40); opacity: 1;

webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: var( --color-neutral-80); border-color: var( --color-neutral-80);}







ul.bi_main{list-style: none; padding: 0; display: flex; gap: 24px; padding: 48px 0; margin: 0; border-bottom: 1px solid var(--color-neutral-40);}

ul.bi_main li{flex-grow: 1; width: 50%;}

ul.bi_main li a{padding: 48px; background: #F6F5F4; width: 100%; border-radius: 12px; background-image: url(../Images/zuw.svg); background-repeat: no-repeat; background-position: calc(100% - 24px)  calc(0% + 16px); background-size: 40px 40px; text-align: center; display: block; text-decoration: none; box-sizing: border-box;font-size: 30px; color: var(--color-neutral-80);}

ul.bi_main li a::before{content: "Unsere";}

ul.bi_main li a span{display: block; font-weight: bold;}

ul.bi_main li:nth-child(2) a{background-image: url(../Images/prog.svg);}



ul.bi_sub{list-style: none; padding: 0;border-top: 1px solid var(--color-neutral-40);}

ul.bi_sub li{border-bottom: 1px solid var(--color-neutral-40); display: flex;}

ul.bi_sub li a{ color: var(--color-neutral-80); flex-grow: 1; font-weight: bold; text-decoration: none; align-items: start; display: flex; justify-content: left; gap: 24px; padding: 24px;}

ul.bi_sub li .zuw{padding: 24px; justify-content: center;}

ul.bi_sub li .zuw{flex-grow: 1; justify-content: center; max-width: 30%; display: flex; gap: 8px;}

ul.bi_sub li .zuw span{font-size: 14px; line-height: 27px; padding: 2px 16px; border-radius: 32px; border: 1px solid var(--color-neutral-40); color: var(--color-neutral-40);}

ul.bi_sub li a.ha{font-size: 20px; line-height: 24px;}

ul.bi_sub li a.zu, ul.bi_sub li a.la{flex-grow: 0; font-size: 14px;justify-content: center; line-height: 16px; color: var(--color-blue-1);}

ul.bi_sub li a.zu span, ul.bi_sub li a.la span{border-bottom: 1px solid var(--color-blue-1); padding: 8px;}



ul.bi_sub li .fp{display: flex; align-items: center; font-size: 12px; line-height: 16px; color: var(--color-neutral-40);}

ul.bi_sub li .fp span{font-size: 18px; line-height: 24px; font-weight: 600;  color: var(--color-neutral-80); margin-right: 8px;}



ul.bi_sub li.ca14 .zuw .ca14, ul.bi_sub_q li.ca14 .zuw .ca14{background: var(--color-blue-1); border-color: var(--color-blue-1); color: white;}

ul.bi_sub li.ca15 .zuw .ca15, ul.bi_sub_q li.ca15 .zuw .ca15{background: var(--color-green); border-color: var(--color-green); color: white;}

ul.bi_sub li.ca16 .zuw .ca16, ul.bi_sub_q li.ca16 .zuw .ca16{background: var(--color-lila); border-color: var(--color-lila); color: white;}





ul.bi_sub_q{list-style: none; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr 1fr 1fr;}



ul.bi_sub_q li{border-radius: 12px; overflow: hidden; background: var(--color-neutral-10);}

ul.bi_sub_q li .img{width: 100%; aspect-ratio: 2/1; overflow: hidden;}

ul.bi_sub_q li .img .imin{object-fit: cover; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100%;}

ul.bi_sub_q li .img .imin video{object-fit: cover; width: 100%; height: 100%;}

ul.bi_sub_q li .cap{padding: 16px;}

ul.bi_sub_q li a{text-decoration: none;}

ul.bi_sub_q li a.ha{font-size: 20px; line-height: 24px; color: var(--color-neutral-80); font-weight: bold;}



ul.bi_sub_q li .zuw, ul.bi_sub_q li .link{flex-grow: 1; display: flex; gap: 8px; margin: 16px 0;}

ul.bi_sub_q li .zuw span{font-size: 14px; line-height: 27px; padding: 2px 16px; border-radius: 32px; border: 1px solid var(--color-neutral-40); color: var(--color-neutral-40);}



ul.bi_sub_q li .link{margin: 24px 0 0 0;}

ul.bi_sub_q li .link span.ico{flex-grow: 1; justify-content: flex-end; display: flex;}

ul.bi_sub_q li a.zu, ul.bi_sub_q li a.la{flex-grow: 0; font-size: 14px; line-height: 16px; font-weight: bold; color: var(--color-blue-1);}

ul.bi_sub_q li a.zu span, ul.bi_sub_q li a.la span{border-bottom: 1px solid var(--color-blue-1); padding: 8px;}



.switch{display: flex; justify-content: flex-end; gap: 8px;}

.switch span{ cursor: pointer; padding: 6px; display: grid; gap: 2px; grid-template-columns: 1fr 1fr; justify-content: center; align-items: center;}



.switch span span{padding: 0; background: var(--color-neutral-40); width: 10px; height: 10px; 

webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

.switch span.act span, .switch span:hover span{background: var(--color-neutral-80);}



.switch span.list{grid-template-columns: 1fr;}

.switch span.list span{height: 4px; width: 22px}



.switch .zuw{display: flex; align-items: center; justify-content: flex-start;  gap: 8px;}

.switch .zuw span{flex-grow: 0; display: flex;}

.switch .zuw span{font-size: 14px; line-height: 27px; padding: 2px 16px; border-radius: 32px; border: 1px solid var(--color-neutral-40); color: var(--color-neutral-40);

    webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

.switch .zuw .ca14.act, .switch .zuw .ca14:hover{background: var(--color-blue-1); border-color: var(--color-blue-1); color: white;}

.switch .zuw .ca15.act, .switch .zuw .ca15:hover{background: var(--color-green); border-color: var(--color-green); color: white;}

.switch .zuw .ca16.act, .switch .zuw .ca16:hover{background: var(--color-lila); border-color: var(--color-lila); color: white;}



.switch div{display: flex; flex-grow: 1;}

.switch div.sw{justify-content: flex-end; width: 12%;}


.tesimo_wrap{overflow: hidden; position:relative; max-width: 1600px;}
.tesimo{ aspect-ratio: 2/1; overflow:hidden; position: relative;    padding: 48px 0; margin-bottom: 48px;}

.tesimo .swiper-slide{background-position: center center; width: auto; background-size:cover; border-radius: 12px; display: flex; align-items: flex-end; position: relative; overflow: hidden;}

.tesimo .swiper-slide::after{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 70%;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+100 */

background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

.tesimo .swiper-slide .capi{padding: 16px 48px;  color: white; z-index: 3;}

.tesimo .swiper-slide .capi p.testi{font-size: 20px; font-weight: bold; line-height: 24px; margin: 16px 0;}

.tesimo .swiper-slide .capi p.testi:before{content:"«";}

.tesimo .swiper-slide .capi p.testi:after{content:"»";}

.tesimo .swiper-slide .capi .adi{text-align: right; margin-right: 8px;}

.tesimo .swiper-slide .capi .adi span{display:block; font-weight: bold;}

.tesimo .swiper-slide .capi .adi span.func{font-weight: 300;}





.faq{padding: 48px 0; padding-right: 30%; border-top: 1px solid var(--color-neutral-40); border-bottom: 1px solid var(--color-neutral-40);}

.faq ul{list-style: none; padding: 0; cursor: pointer;}

.faq ul li{padding: 16px; background: var(--color-neutral-10); margin: 16px 0; border-radius: 8px;}

.faq ul li .head{font-size: 18px; line-height: 30px; font-weight: bold; padding-right: 48px; position: relative;}

.faq ul li .head::after{content: ""; position: absolute; right: 0; top: 4px; width: 24px; height: 24px; background: url(../Images/faq.svg) no-repeat center center; background-size: contain;

-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);

webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

.faq ul li.open .head::after{-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}



.faq ul li .text{display: none;}

.faq ul li .text p{font-size: 18px; line-height: 30px;}

.faq ul li .text p:last-child{margin-bottom: 0;}





.partner{padding:48px 0; width: 100%; overflow: hidden; max-width: 1600px; border-top: 1px solid var(--color-neutral-40);}

.partner h2{font-size: 28px; margin-top: 0;}

.partner .customMarquee{overflow: hidden; height: 29px;}

.partner ul {list-style: none; margin:0; display: inline-flex; white-space: nowrap; padding: 5px 0; border-top: 1px solid var(--color-neutral-40);border-bottom: 1px solid var(--color-neutral-40);}

.partner ul.two{border-top: 0;}

.partner ul li{width: auto; font-size: 14px; font-weight: 300; margin-right: 36px; display: inline-flex;}





.history{display: flex; padding: 48px 0; border-top: 1px solid var(--color-neutral-40); gap: 36px;}

.history .bilder{ flex-grow: 1; width: 60%;  overflow: hidden;  border-radius: 12px;}

.history .img{list-style: none; padding: 0; aspect-ratio: 16/7;}

.history .img a{background-repeat: no-repeat; background-position: center center; background-size: cover;  flex-grow: 0; width: auto !important;

  display: inline-block;}

.history .img a img{height: 100%; width: auto; border-radius: 12px;}

.history .tx{font-size: 18px; line-height: 30px; font-weight: 300; width: 40%;}

.history .tx h2{margin-top: 0;}

.history .tx ul {padding: 0; list-style: none;}

.history .tx ul li{padding-left: 15px; position: relative;}

.history .tx ul li::before{content: "."; position:absolute; left: 0; top: -5px;}





.fetchurl .container{display: block;}

.fetchurl .container table.lunch{font-size: 18px; line-height: 30px; font-weight: 300;}

.fetchurl .container table.lunch tr{background: transparent; display: flex;}

.fetchurl .container table.lunch th, .fetchurl .container table.lunch tr:nth-child(even){background: var(--color-neutral-10);}



.fetchurl .container table.lunch tr td{border: 1px solid var(--color-neutral-30)!important; width: 27%;}

.fetchurl .container table.lunch tr th{width: 27%;}

.fetchurl .container table.lunch tr td, .fetchurl .container table.lunch tr th{flex-grow: 1; display: flex; text-align: left;}

.fetchurl .container table.lunch tr td:first-child, .fetchurl .container table.lunch tr th:first-child{width: 19%; justify-content: flex-start;}

.fetchurl .container table.lunch tr td:first-child a{display: block;}



.fetchurl .container table.lunch tr a{width: 100%; height: 100%; display: flex; flex-wrap: wrap; box-sizing: border-box;}

.fetchurl .container table.lunch tr td ul{align-items: flex-end; display: flex;}





.fetchurl .container table.lunch tr td span.da{font-weight: bold; font-size: 18px; line-height: 30px;}

.fetchurl .container table.lunch tr td:hover{background: transparent;}

.fetchurl .container table.lunch tr td a,

.fetchurl .container table.lunch tr td:hover a {color: var(--color-neutral-80);}











.fetchurl .container ul.ix{text-align: left; position: inherit; margin: 20px 0 -10px 0; padding-right: 40%; position: relative; min-height: 30px;}



.fetchurl .container ul::after{content: "Bestellen"; position: absolute; right: 0; bottom: 0; padding: 0 3px 5px 3px; border-bottom: 1px solid var(--color-blue-1); font-size: 14px; line-height: 18px; font-weight: bold; color: var(--color-blue-1)}





.fetchurl .container ul.bt li::before{top: 7px;}

.fetchurl .container ul.bt li::before,

.fetchurl .container table.lunch tr td ul.ix li{background: url(../Images/sui.svg) no-repeat center;}

.fetchurl .container ul.bt li.veg::before,

.fetchurl .container table.lunch tr td ul.ix li.veg{background: url(../Images/veg.svg) no-repeat center;}

.fetchurl .container ul.bt li.vea::before,

.fetchurl .container table.lunch tr td ul.ix li.vea{background: url(../Images/vea.svg) no-repeat center;}

.fetchurl .container ul.bt li.por::before,

.fetchurl .container table.lunch tr td ul.ix li.por{background: url(../Images/por.svg) no-repeat center;}







.tx-powermail{margin-top: -48px;}

.tx-powermail h3{display: none;}

.tx-powermail fieldset{border: none; padding: 0; padding: 48px 0; border-bottom: 1px solid var(--color-neutral-40);}

.tx-powermail fieldset legend{displaY: flex; gap: 32px; font-size: 28px; line-height: 38px; font-weight: bold; padding-top: 48px;}



.tx-powermail fieldset.powermail_fieldset:last-of-type{border-bottom: 0;}



.tx-powermail fieldset .powermail_fieldwrap_type_radio label.powermail_label{display: none;}

.tx-powermail fieldset .powermail_fieldwrap_type_check label.powermail_label{display: none;}







.tx-powermail fieldset .powermail_fieldwrap_type_radio .powermail_field{displaY: flex; flex-wrap: wrap; gap: 8px;}

.tx-powermail fieldset .powermail_fieldwrap_type_radio .powermail_radiowrap label{padding: 12px 16px; position: relative; border: 1px solid var(--color-green); display: block; border-radius: 8px; cursor: pointer;

    webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

.tx-powermail fieldset .powermail_fieldwrap_type_radio .powermail_radiowrap input{display: none;}



.tx-powermail fieldset .powermail_fieldwrap_type_radio .powermail_radiowrap input.powermail_radio:checked + label,

.tx-powermail fieldset .powermail_fieldwrap_type_radio .powermail_radiowrap label:hover{background: rgb(70 178 126 / 20%);}



.tx-powermail fieldset .powermail_fieldwrap_type_check .powermail_field{displaY: flex; flex-wrap: wrap; gap: 8px;}

.tx-powermail fieldset .powermail_fieldwrap_type_check .powermail_checkwrap label{padding: 12px 16px; border: 1px solid var(--color-magenta); display: block; border-radius: 8px; cursor: pointer;

    webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

.tx-powermail fieldset .powermail_fieldwrap_type_check .powermail_checkwrap input{display: none;}





.tx-powermail fieldset .powermail_fieldwrap_type_check .powermail_checkwrap input.powermail_checkbox:checked + label,

.tx-powermail fieldset .powermail_fieldwrap_type_check .powermail_checkwrap label:hover{background: rgb(230 97 113 / 20%);}





.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap label{border: 1px solid var(--color-yellow);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap input.powermail_radio:checked + label,

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap label:hover{background: rgb(254 208 99 / 20%);}





.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap label{ padding-left: 48px;}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap label::before{content:""; width: 32px; margin-bottom: -2px; height: 100%; position: absolute; left: 8px; top: 0; display: inline-block; background: url(../Images/all.svg) no-repeat center center;}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(3) label::before{background-image: url(../Images/gar.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(4) label::before{background-image: url(../Images/inn.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(5) label::before{background-image: url(../Images/kon.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(6) label::before{background-image: url(../Images/fer.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(7) label::before{background-image: url(../Images/bro.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(8) label::before{background-image: url(../Images/mal.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(9) label::before{background-image: url(../Images/tra.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(10) label::before{background-image: url(../Images/lie.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(11) label::before{background-image: url(../Images/umz.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(12) label::before{background-image: url(../Images/rei.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(13) label::before{background-image: url(../Images/adm.svg);}

.tx-powermail fieldset.powermail_fieldset_2 .powermail_fieldwrap_type_radio .powermail_radiowrap:nth-child(14) label::before{background-image: url(../Images/gas.svg);}



.tx-powermail fieldset .powermail_fieldwrap_type_textarea label,.tx-powermail fieldset .powermail_fieldwrap_type_input label{font-size: 14px; line-height: 18px; font-weight: 300; display: block;}

.tx-powermail fieldset .powermail_fieldwrap_type_textarea textarea, .tx-powermail fieldset .powermail_fieldwrap_type_input input{font-size: 16px; line-height: 18px; font-weight: 300; padding: 10px 16px; margin-bottom: 24px; border: 1px solid var(--color-neutral-40); border-radius: 6px;  width: 100%; box-sizing: border-box;}

.tx-powermail fieldset .powermail_fieldwrap_type_text{font-size: 14px; line-height: 18px; font-weight: 300; margin-bottom: 32px;}



.tx-powermail fieldset .powermail_fieldwrap_type_submit input{        font-size: 16px;

        display: inline-block;

        line-height: 16px;

        font-weight: bold;

        color: white;

        padding: 14px 20px;

        background: var(--color-blue-1);

        border-radius: 6px;

        border: none;

        text-decoration: none;

        -webkit-transition: all 0.3s 

ease-in-out;

        -moz-transition: all 0.3s ease-in-out;

        -ms-transition: all 0.3s ease-in-out;

        -o-transition: all 0.3s ease-in-out;

        transition: all 0.3s 

ease-in-out;

    }

.tx-powermail fieldset .powermail_fieldwrap_type_submit input:hover{background: black; }



.tx-powermail fieldset .row{max-width: 600px;}



ul.pswitch{list-style: none; padding: 0; margin: 0; font-size: 16px; line-height: 30px; color: var(--color-neutral-45); display: flex; font-weight: 300; gap: 8px;}

ul.pswitch li{border: 1px solid var(--color-neutral-45); padding: 4px 16px; border-radius: 8px; cursor: pointer;

        webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

ul.pswitch li.act, ul.pswitch li:hover{background: rgb(230 97 113 / 20%); color: var(--color-neutral-80);}





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



    .faq{padding-right: 0;}

    .switch{display: none;}

    ul.bi_sub {display: none!important;;}

    ul.bi_sub_q {display: block!important;}



    ul.footnav li.pat:last-child{display: none;}

    div.servnav, div.servnav div.snav{display: block;}



    .history{display: block;}

    .history .tx, .history .bilder{width: auto;}



 }





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





ul.bi_main{flex-wrap: wrap;}



 }


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



.tesimo{width: 100%; aspect-ratio: 2/3;}

   .tesimo .swiper-slide .capi{padding: 16px;}

ul.bi_main{flex-wrap: wrap;}



 }


/********************** DESKTOP *******************/



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



.headim{aspect-ratio: 16/7;}



.tt_address_list .vcard{}







 .lang{position: absolute; right: 45px; top: 0; padding: 20px 22px;}



.lang .langmen{position: absolute; right: 24px; top: 45px; display: none; margin: 0; list-style: none; padding: 0; z-index: 4; font-size: 14px; font-weight: bold; color: white; border-radius: 6px; overflow: hidden; }



.lang .langmen li{text-align: center; margin: 0; border: 0; padding: 0;}



 .lang .langmen li a{text-decoration: none; background: var(--color-neutral-30); display; block; padding: 8px 10px; display: block; color: var(--color-neutral-80);



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



 .lang .langmen li.act{margin: 0; border: none;}



 .lang .langmen li.act a{background: var(--color-neutral-80); color: var( --color-neutral-00); }



 .lang .langmen li a:hover{background: var(--color-blue-1); color: <f:link.typolink class="link tel" parameter="tel:">{address.phone}</f:link.typolink>}















.navbar{display: none;}







#container{max-width: 1600px; margin: 147px auto 0 auto; padding: 0;}



  .tops, #nav{display: none;}



        



.topi, .sec_nav, .sub_nav{display: flex; z-index: 3;}







.topi{height: 60px; border-bottom: 1px solid var(--color-neutral-20); display: flex;}



.topi{position: fixed; top:0; background: white; width: 100%; max-width: 1600px; z-index: 4;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.topi.out{top: -61px;}







.topi .im{opacity: 1; justify-content: flex-start; display: flex; align-items: center;



  -webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}







.topi.out .im{opacity: 0;}







.sec_nav{position: fixed; top: 61px; background: white;  width: 100%; max-width: 1600px;}







.tin{flex-grow: 1;}



.tin.sm{flex-grow: 0; display: flex;}



.topi .tin .lang{padding: 21px 0px 21px 24px; cursor: pointer;}



.im{ box-sizing: border-box; displaY: inline-block; width: 72px;}





.navi_two{display: flex; width: 100%;}

.navi_two .speciallink{flex-grow: 1; justify-content: flex-end; display: flex; align-items: center; }



.navi_two .speciallink a{font-size: 16px; display: inline-block; line-height: 16px; font-weight: bold; color: white; padding: 14px 20px;background: var(--color-blue-1); border-radius: 6px; text-decoration: none;



    -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.navi_two .speciallink a:hover{background: var(--color-neutral-80);}





.main_nav{display: flex; justify-content: flex-end; box-sizing: border-box;}



.main_nav ul{list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end;}



.main_nav ul li{display: inline-block; opacity: 1;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



/*-moz-transform: translateX(-20px);-webkit-transform: translateX(-20px);-o-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);*/}



.topi.on .main_nav ul li{opacity: 1; -moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);}



.main_nav ul li a{text-decoration: none;}



.main_nav ul li a h3{margin: 0; font-size: 18px; padding: 16px; line-height: 30px; color: var(--color-neutral-40);



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.main_nav ul li.act a h3,.main_nav ul li:hover a h3{color: var(--color-neutral-80);}







.sec_nav{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.sec_nav ul{list-style: none; margin: 0; padding: 0; }



.sec_nav ul li{displaY: inline-block; opacity: 1;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



/*-moz-transform: translateX(30px);-webkit-transform: translateX(30px);-o-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px);*/}



.sec_nav.on ul li{opacity: 1; -moz-transform: translateX(0px);-webkit-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);}



.sec_nav ul li a{ text-decoration: none; }



.sec_nav ul li h3{font-size: 28px; line-height: 38px; color: var(--color-neutral-40); margin: 0; padding: 24px;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.sec_nav ul li:first-child h3{padding-left: 0;}



.sec_nav ul li.act h3, .sec_nav ul li:hover h3{color: var(--color-neutral-80);}



.sec_nav.out{position: fixed; top: 0; background: white; border-bottom: 1px solid var(--color-neutral-20); width: 100vw;}



.sec_nav.out ul li h3{margin: 0; font-size: 18px; padding: 16px; line-height: 30px;}







.sec_nav .im{width: 0; padding: 0; opacity: 0;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.sec_nav.out .im{box-sizing: border-box; displaY: inline-block; width: 72px; opacity: 1; padding: 18px 24px;}











.container{display: flex; gap: 24px;}



.container .left{min-width: 280px;}



.container .right{flex-grow: 1; width: 70%;}

.container .center{flex-grow: 1;}





.sub_nav{margin: 16px 0; position: fixed; top: 147px; max-width: 280px;



 -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.sub_nav ul{list-style: none; padding: 0; margin: 0;}



.sub_nav ul li{opacity: 1;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;



/*-moz-transform: translateY(20px);-webkit-transform: translateY(20px);-o-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);*/}



.sub_nav.on ul li{opacity: 1; -moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);}



.sub_nav ul li a{text-decoration: none; font-size: 20px; line-height: 28px; color: var(--color-neutral-40); margin: 0; padding: 6px 24px 6px 0px; font-weight: bold; display: block;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



.sub_nav ul li.act a, .sub_nav ul li:hover a{color: var(--color-neutral-80);}



.sub_nav ul li:hover a{margin-left: 4px;}



.sub_nav.out{position: fixed; top: 66px;}







.lang{position: relative; right: auto; left: auto; padding: 0;}







}





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

    #container{padding: 24px;}

        .topi{left:0; }

footer{margin: 0 24px;}

.sec_nav{left: 0px; width: calc(100% - 24px);}

.sec_nav.out{left: 0px; width: calc(100% - 24px);}



.tx-ttaddress .filtr{flex-wrap: wrap; gap: 16px;}

.tx-ttaddress .filtr ul.ort{justify-content: flex-start;}

.tx-ttaddress .filtr ul{flex-wrap: wrap;}

.tx-ttaddress .filtr ul li{flex-grow: 1; text-align: center; }

}



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

.se{width: calc(66.666% - 16px);}



.tt_address_list .vcard{width: 33.33%;}

}



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

    .se{width: calc(100%);}

.tt_address_list .vcard{width: 50%;}

}



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

.tt_address_list .vcard{width: 100%;}

}