/*=====================================================================*/
/*==                Bildschirm - CSS   Stephan Bessler               ==*/
/*==-----------------------------------------------------------------==*/
/*==    Copyright:  Janine Iten, CH-5200 Brugg                       ==*/
/*==    Author:     Janine Iten                                      ==*/
/*=====================================================================*/



/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/306355");

  
@font-face {font-family: 'FuturaBT-Medium';src: url('../fonts/306355_0_0.eot');src: url('../fonts/306355_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/306355_0_0.woff2') format('woff2'),url('../fonts/306355_0_0.woff') format('woff'),url('../fonts/306355_0_0.ttf') format('truetype');}
 
 
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/30638c");

  
@font-face {font-family: 'FuturaStd-Medium';src: url('../fonts/30638C_0_0.eot');src: url('../fonts/30638C_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/30638C_0_0.woff2') format('woff2'),url('../fonts/30638C_0_0.woff') format('woff'),url('../fonts/30638C_0_0.ttf') format('truetype');}

@import url("//hello.myfonts.net/count/3063b3");

  
@font-face {font-family: 'FuturaStd-Light';src: url('../fonts/3063B3_0_0.eot');src: url('../fonts/3063B3_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3063B3_0_0.woff2') format('woff2'),url('../fonts/3063B3_0_0.woff') format('woff'),url('../fonts/3063B3_0_0.ttf') format('truetype');}
 
 
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/30814f");

  
@font-face {font-family: 'DidotLTStd-Italic';src: url('../fonts/30814F_0_0.eot');src: url('../fonts/30814F_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/30814F_0_0.woff2') format('woff2'),url('../fonts/30814F_0_0.woff') format('woff'),url('../fonts/30814F_0_0.ttf') format('truetype');}
 
 
 
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/30814d");

  
@font-face {font-family: 'DidotLTStd-Roman';src: url('../fonts/30814D_0_0.eot');src: url('../fonts/30814D_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/30814D_0_0.woff2') format('woff2'),url('../fonts/30814D_0_0.woff') format('woff'),url('../fonts/30814D_0_0.ttf') format('truetype');}
 
 
:root {
	--bodyBackgroundColor::none;
	--contentPaddingLeftRight: 60px;
 }
 
html, 
body {

   font-family: FuturaStd-Light;
   font-style: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
}

.chatbot .top-link {
	display:none;
}


.yPIyC h1, 
.yPIyC h2, 
.yPIyC h3, 
.yPIyC h4, 
.yPIyC h5, 
.yPIyC h6,  
.yPIyC ul, 
.yPIyC ol, 
.yPIyC blockquote { 
	font-size:18px!important;
	line-height:26px!important;
}

.yPIyC ul {
	list-style:disc!important;
}


.eAvVm,
.yPIyC p,
.yPIyC li {
	font-size:16px!important;	
	line-height:24px!important;
}

.eAvVm p {
	font-weight:bold;
}


h1,
h2,
h3,
h4,
strong,
.mainmenu ul li a span,
.subnav a  {
	font-family: FuturaStd-Medium;
}

h1 {
	margin-bottom:30px;
}

h2 {
	margin-bottom:30px;
}

h3 {
	margin-bottom:5px;
}

#main .image_container img,
#main .ce_text .image_container img {
	width:100%;
}

 .mod_article:not(.fullwidth) > .container {
	margin:0px;
	max-width:100%;
}

#container {
  width: 70%;
  margin: 0 auto;
  
}

#slider .ce_image .image_container img {
  width: 100%;
}


.ce_image_text_box .ce_image_text_box_content {
  margin-top: 10px;
}


.ce_image_text_box .ce_image_text_box_content p {
	font-size:16px!important;
	line-height:24px!important;
}

.ce_youtube{
	 padding-bottom:40px;
	 width:100%;
}

#container {
	margin-top:-120px;
}

#container #main .mod_article {
	margin-bottom:40px;
	background:#fffef9;

}

.header.original .mainmenu ul li:first-child a::before {
	display:none;
}

.mod_article:not(.fullwidth) > .container {
	padding-top:70px;
	padding-bottom:70px;
}

.antwort {
	padding-left:20px;
}

.mobile {
	display:none;
}

body.sidebar #container {
	padding-left:0px;
	padding-right:0px;
}

#main .ce_text p a {
	text-decoration:underline;
	color:var(--customColor1)!important;
	font-family:FuturaBT-Medium;
}

#main .ce_image figure, 
#main .ce_text figure {
	margin-bottom:30px;
}

#main .ce_text p {
	margin-bottom:30px;
}


/*---------------------------------------------------------------*/
/*--                      Teeaser			            	   --*/
/*---------------------------------------------------------------*/


.serif {
	font-size:24px;	
	line-height:34px;
	font-family: DidotLTStd-Italic;
	font-weight: normal;
	font-style: normal;
}



/*---------------------------------------------------------------*/
/*--                      Teeaser			            	   --*/
/*---------------------------------------------------------------*/

.ce_image_text_box_image {
  overflow: hidden;
}

.ce_image_text_box_image img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.ce_image_text_box:hover .ce_image_text_box_image img {
  transform: scale(1.06);
}

/*---------------------------------------------------------------*/
/*--                      Hauptnavigation	            	   --*/
/*---------------------------------------------------------------*/

.header {
	background:none;
}

.header .logo {
	margin-right:20px;
}

.header .inside {
	background:black;
	margin:0px;
	max-width:100%;
}

.mainmenu ul li.active > ul li a span,
.mainmenu ul li:hover > ul li a span{
 color:white;
}

.mainmenu ul.level_1 > li.active > a{
  position: relative;
}


.mainmenu ul.level_1 > li.trail > a::after,
.mainmenu ul.level_1 > li.active > a::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;               
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--secondColor);
}



/*---------------------------------------------------------------*/
/*--                      Subnavitaion	            		   --*/
/*---------------------------------------------------------------*/


.inside_subnav {
	background:var(--secondColor);
	height:auto;
	margin:0px;
	max-width:100%;  
	padding-left: var(--contentPaddingLeftRight);
    padding-right: var(--contentPaddingLeftRight);
}



.subnav {
	margin-top:0px;
}


.subnav a:hover, 
.subnav a.active {
	background:none;

}

.inside_subnav > nav.submenu_v1{
  display: block;
  width: 100%;
}

.inside_subnav ul li {
	margin-left:15px;
	margin-right:15px;
}

.inside_subnav ul li:first-child {
	padding-left:70px;
}

.inside_subnav > nav.submenu_v1 > ul{
  display: flex;             
  justify-content: flex-start;
}

.inside_subnav ul li a::before {
  content: '';
  width: 1px;
  background: #ffffff !important;
  height: 20px;
  position: absolute;
  left: -15px;
  top: 50%;
  margin-top: -10px;
}

.inside_subnav ul li:first-child a::before {
	display:none;
}

.inside_subnav ul li a {
  display: block;
  text-decoration: none;
  position: relative;
  line-height: 70px;
  min-height: inherit;
  text-align: center;
  font-size: 1rem;
  float: none;
  color: white;
  transition: color 0.3s ease, opacity 0.3s ease;
  -webkit-transition: color 0.3s ease, opacity 0.3s ease;
   padding:0px;
   border-radius:0px;
   margin:0px;
}

.inside_subnav ul li a.active {
	 text-decoration: underline;
     text-underline-offset: 6px;
}


/*----------------------------------------------------------------*/
/*--                      Zitat			              		    --*/
/*----------------------------------------------------------------*/


.zitat.media {
  display: flex;
  align-items: center; /* vertikale Zentrierung */
  gap: 60px;           /* Abstand Bild ↔ Zitat */
}

.zitat.media figure {
  width: 400px;
}


.zitat.ce_text figure img  {
	border-radius:100px!important;
}

.zitat figure p {
	color:#5a4848;	
}

.zitat img {
	width:172px!important;
}

.zitat figure + p,
.zitat p:first-child {
	font-family: DidotLTStd-Italic;
	font-size:20px;
}


/*----------------------------------------------------------------*/
/*--                      Srachwechsler	              		    --*/
/*----------------------------------------------------------------*/


.header .ce_hyperlink {
  padding-right: 20px;
  float: right;
}

#mmenu_middle .ce_hyperlink a,
.header .ce_hyperlink a {
  background:white;
  color:black;	
  padding:4px 16px;
}

#mmenu_middle .ce_hyperlink a {
	margin-top:40px;
	font-size:1rem;
	width:100%;
	padding:10px 16px;
}


/*----------------------------------------------------------------*/
/*--                      Srachwechsler	              		    --*/
/*----------------------------------------------------------------*/


.mod_changelanguage {
	padding-right:20px;
	float:right;
}
.mod_changelanguage span {
	color:white;
}

.mod_changelanguage a {
	border-bottom:0px!important;
	color:#5a4848!important;
}

.mod_changelanguage .level_1 {
  display: flex;
   gap: 10px;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
   align-items: center;
}

.mod_changelanguage .level_1 li:last-child {
  margin-left: auto;
}


.mod_changelanguage .level_1 li + li::before {
  content: "|";
  margin-right: 10px;
  color: white; /* übernimmt Textfarbe */
}



/*----------------------------------------------------------------*/
/*--                      Footer	                		    --*/
/*----------------------------------------------------------------*/


#footer a.primary {
	background:var(--secondColor);
	color:white;
	padding:5px!important;
	margin-bottom:0px;
	padding-left:10px;
	display:block;
	border-radius:0px;
	text-align:left;
	font-weight:bold;
	line-height:22px;
	text-decoration:none;
}

footer .label h5{
    background: #423D3D;
    font-size: 15px;
	padding:5px;
	padding-left:10px;
	padding-bottom:0px;
	padding-top:2px;
    margin-top: 0px;
    line-height:22px;
}

#footer li {
	padding-left:0px;
}

#footer li::before {
	display:none;
}

#footer .ce_text figure.image_container.float_left {
	padding-right:10px;
	padding-bottom:0px;
}

#footer .ce_text figure.image_container img {
	width:auto!important;
}

#footer .copyright p {
	padding-top:5px;
}

#footer .copyright {
	margin-top:0px;
	color:#cccccc;
}

#footer .copyright a {
color:#cccccc;	
}

#footer a:hover {
	color:#f6f6f6;
}

#footer a.primary:hover {
	background:#423d3d;
	color:white;
}

#footer p {
	margin-bottom:5px;	
}

#footer a {
	color:white;
	border-color:white;
	border:none;
}

#footer ul {
	padding:0px;
	margin:0px;
	list-style-type:none;
}


footer .label {
    width: 132px;
    float: left;	
    text-align:left;
}

#footer li {
	margin-bottom:0px;
	padding-bottom:0px;
}
#footer li::after {
	display:none;
}


/*----------------------------------------------------------------*/
/*--                       STICKY BOX		                    --*/
/*----------------------------------------------------------------*/


.stickybox {
	position:fixed;
	right:20px;
	bottom:20px;
	bottom:110px;
	z-index:1000;
}

.stickybox a {
	background-color:#000000;
	display:block;	
	color:#ffffff;
	padding:15px 10px 15px 10px!important;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-bottom:0px;
}

.stickybox a:hover {
	background:#5a4848;
	color:white;
}


.stickybox p {
	margin-bottom:0px;
	padding-bottom:0px;
}

.stickybox h4 {
	font-size:18px!important;
	margin-bottom:0px;
	font-weight:bold;
	color:#5a4848;
}

.stickybox h4 i{
	font-size:24px;
	padding-right:3px;
	position:relative;
	top:2px;
}




/*----------------------------------------------------------------*/
/*--                       Interactive 		                    --*/
/*----------------------------------------------------------------*/


#interaktivegrafik,
#interaktivegrafik2,
#interaktivegrafik3,
#interaktivegrafik4 {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	width:100%;
	background-size:100% auto!important;
	background-repeat:no-repeat!important;
}


.interaktivegrafik {
	margin-bottom:20px;
}

.interaktivegrafik img {
	opacity: 0.85;
}

#interaktivegrafik1-bg {
	background: url(../../bessler/interaktivegrafik1/background.png) top -1px left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}


#interaktivegrafik2-bg {
	background: url(../../bessler/interaktivegrafik2/background.jpg) top left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}



#interaktivegrafik3-bg {
	background: url(../../bessler/interaktivegrafik3/background.jpg) top  left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}


#interaktivegrafik4-bg {
	background: url(../../bessler/interaktivegrafik4/background.jpg) top  left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}


/*----------------------------------------------------------------*/
/*--                       Interactive 		                    --*/
/*----------------------------------------------------------------*/


/* grafik gesicht*/
#interaktivegrafik1-bg {
	background: url(../../bessler/interaktivegrafik1/background.png) top -1px left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}

/* grafik nase*/
#interaktivegrafik2-bg {
	background: url(../../bessler/interaktivegrafik2/background.jpg) top left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}


/* grafik nase*/
#interaktivegrafik3-bg {
	background: url(../../bessler/interaktivegrafik3/background.jpg) top  left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}

/* grafik nase*/
#interaktivegrafik4-bg {
	background: url(../../bessler/interaktivegrafik4/background.jpg) top  left no-repeat;
	background-size:100%;
	background-repeat:no-repeat;
	height:auto;
	position:relative;
}


.desktop.interaktivegrafik ul {
	background-color:white;
	width:160px;
	position:absolute;
	top:10px;
	left:10px;
	padding-bottom:10px;
}

.desktop.interaktivegrafik li {
	padding-left:10px;
	padding-top:10px;
	cursor: pointer;
	line-height:24px;
}

.desktop.interaktivegrafik li:hover {
	color:#baac9a;
}


/*----------------------------------------------------------------*/
/*--                      Right Side                 		    --*/
/*----------------------------------------------------------------*/


body.sidebar.right #main > .inside {
	padding-right:20px;
}

body.sidebar .inside .container {
	padding-left: var(--contentPaddingLeftRight);
  padding-right: var(--contentPaddingLeftRight);
}

 body.sidebar #slider .inside .container {
	   padding:0px;
 }

#right .container {
	padding:0px!important;
	margin:0px!important;
}

body.sidebar.right #main {
	border-right:0px;
}



#right .inside.fixed {
	position:fixed;
	top:136px;
	width:270px;
}

body.sidebar.right #right > .inside {
  margin-left: 0px;
}

#right .mod_article {
	margin-bottom:0px;
}

#ankernavigation .mod_login {
	background-color:#FFFEF9;
	padding:20px;
}

#ankernavigation > ul li {
	width:100%;
	margin-bottom:10px;
}

#ankernavigation > ul {
	padding-bottom:0px;
}

#ankernavigation > ul li a {
	background-color:#fffef9;
	color:black!important;
	padding:13px 20px 13px 20px;
	display:block;
	border-bottom:0px;
	font-size:16px;
	font-family: FuturaStd-Medium;
	margin:0px!important;
}

#ankernavigation li a.active,
#ankernavigation li a:hover {
	/*background:#4d3d3d!important;*/
	background:#393535!important;
	color:white!important;
}

/*----------------------------------------------------------------*/
/*--                      Nasenkonfigurator            		    --*/
/*----------------------------------------------------------------*/


.content-left {
	float:left;
	width:30%;
}

.content-right {
	float:right;
	width:70%;
}

.nasenkonfigurator .mod_article {
	margin-top:200px;
}


.nasenkonfigurator .custom  {
	height:200px;
}

.nasenkonfigurator .custom #headerbild {
	display:none;
}

.nasenkonfigurator .menu-left {
	margin-right:30px;
}

.nasenkonfigurator .menu-left ul {
	padding-bottom:40px;
}

.nasenkonfigurator .menu-left ul li {
	border-bottom:1px solid #eeeeee;
	margin-bottom:0px;
}

.nasenkonfigurator .content-right {
	position:relative;
}

.nasenkonfigurator .toggle ul.level_1 li.active a,
.nasenkonfigurator .toggle ul.level_1 li.active span,
.nasenkonfigurator .toggle ul.level_1 li a:hover,
.nasenkonfigurator .menu-left ul.level_1 li.active a,
.nasenkonfigurator .menu-left ul.level_1 li.active span,
.nasenkonfigurator .menu-left ul.level_1 li a:hover {
	background:#393535!important;
	color:white!important;
}

.nasenkonfigurator .toggle ul.level_1 li.active a,
.nasenkonfigurator .toggle ul.level_1 li.active span,
.nasenkonfigurator .toggle ul.level_1 li a:hover {
	border:1px solid #393535;
}

.nasenkonfigurator .toggle ul li a,
.nasenkonfigurator .toggle ul li span {
	border:1px solid #eeeeee;
	border-right:0px;
}

.nasenkonfigurator .toggle ul li:last-child a {
	border-right:1px solid #eeeeee;
}

.nasenkonfigurator .toggle ul li a,
.nasenkonfigurator .toggle ul li span,
.nasenkonfigurator .menu-left ul li a,
.nasenkonfigurator .menu-left ul li span {
	background-color:#fffef9;
	color:black!important;
	padding:13px 20px 13px 20px;
	display:block;
	font-size:16px;
	font-family: FuturaStd-Medium;
	margin:0px!important;	
}

.nasenkonfigurator .menu-left ul li a,
.nasenkonfigurator .menu-left ul li span {
	border-bottom:0px;
}

.nasenkonfigurator .toggle {
	width:350px;
	position:absolute;
	top:20px;
	right:20px;
	z-index:1;
}

.nasenkonfigurator .toggle ul {
	margin:0px;
}

.content-right .toggle ul.level_1 {
  display: flex;
  gap: 0px;         
  padding: 0;
  margin: 0;
  list-style: none;
}

.content-right .toggle ul.level_1 > li {
  flex: 1 1 0;          /* ← DAS ist der entscheidende Teil */
  text-align: center;  /* optional, meist sinnvoll */
}


.nasenkonfigurator .rotator {
	position:relative;
	top:0px;
	z-index:0;
	padding-bottom:30px;
}


/*----------------------------------------------------------------*/
/*--                      Kommentar			          		    --*/
/*----------------------------------------------------------------*/


.mod_comments p.info {
	padding-bottom:0px;

}

.comment_default > p.info {
	padding-top:22px;	
}

.mod_comments .form {
	padding-top:22px;
	padding-bottom:22px;
}

.comment_default {
	  border-bottom:1px solid #BAAC9A;
}


.mod_comments .checkbox_container label {
	display:inline;
}


/*----------------------------------------------------------------*/
/*--                      Downloads			          		    --*/
/*----------------------------------------------------------------*/

.ce_downloads a {
	position:relative;
	top:-18px;
	padding-left:5px;
}

.ce_downloads li {
	padding-bottom:10px;
}


/*----------------------------------------------------------------*/
/*--                      FORM			            		    --*/
/*----------------------------------------------------------------*/

span.mandatory {
	display:inline-block!important;
}


form fieldset {
	padding:0px;
	margin:0px;
	padding-bottom:20px;
	border:0px;
	border-bottom:1px solid #e1d6d2;
	margin-bottom:20px;
}

form fieldset fieldset {
	border:0px;
	margin-bottom:0px;
	padding-bottom:0px;
}

.no-border fieldset {
	border-bottom:0px;
}

form fieldset legend {
	background:none;
	color:black;
	padding:0px;
	margin-bottom:20px;
	font-family:FuturaBT-Medium;
}

 form .widget-radio span {
	 margin-bottom:0px;
 }
 
 input.upload {
	 border:1px solid #e1d6d2!important;
 }


input.text,
input.captcha,
textarea {
	border:0px solid #cccccc;
	background:#e1d6d2;
	padding:8px;
	width:540px;
	font-weight:300;
    font-size:16px;
    font-family: 'Lato', Arial, Verdana, sans-serif;
    box-shadow:none;
    margin-bottom:10px;
    margin-left:-5px;
	-webkit-appearance: none;
    border-radius: 0;
}

form select {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    line-height: 32px;
    padding: 10px;
}

.chrome form select, .safari form select, select {
    height: 40px;
}

button {
	font-size:18px;
}


.widget-textarea label {
	padding-bottom:10px;
}

input.submit,
button.submit,
input[type="submit"], 
.button {
	background:#5b4949!important;
	color:white;
	border:0px;
	padding:8px 24px 8px 24px;
	margin-top:10px;
    -webkit-appearance: none;
    border-radius: 0;
    cursor:pointer;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input:focus:not([type]), textarea:focus {
	background:#E6E3DC!important;
}

label.textfeld {
	width:auto;
	padding-bottom:7px;
}

input.upload {
	border:0px;
	font-size:14px;
	font-weight:300;
    font-family: 'Lato', Arial, Verdana, sans-serif;
}

input.upload {
	width:100%;
	text-transform:none;
}

.widget-checkbox span {
	display:block;
}


.explanation p{
	margin:0px;
	padding:0px;
}

form .widget-radio input {
	margin-right:0px;
}

.horizontal label {
	display:inline-block;
	width:140px;
	vertical-align:top!important;
}


.horizontal input.text,
.horizontal textarea {
	width:395px;
}

.horizontal input.submit {
    margin-left:140px;
    cursor: pointer;
}


.vertical .radio_container span {
	display:block;
}


p.error {
	padding-bottom:0px;
    display:inline-block;
    width:auto;
        color:red!important;
}

p.error + input,
p.error + textarea {
	margin-left:140px;
}

.captcha input {
	margin-left:140px;
}
.captcha img {
	left:-5px;
	position:relative;
}


/* Alle Radio-Fieldsets als Flex */
fieldset.radio_container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

/* Legend immer volle Breite */
fieldset.radio_container > legend {
  flex: 0 0 100%;
  margin-bottom: 0.5rem;
}

/* Einzelne Radio-Option */
fieldset.radio_container > span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}



/*----------------------------------------------------------------*/
/*--                      zum Löschen	              		    --*/
/*----------------------------------------------------------------*/


.image_container .caption {
	background:none;
	padding:0px;
	color:black;
}

figure.image_container a {
	background:none!important;
	padding:0px;
	border:0px;
}


@media only screen and (max-width: 1340px)  { 
	
	.header .inside_subnav {
		display:none;
	}
	
	.header .ce_hyperlink {
		float:left;
	}
	
	 .mod_changelanguage {
	    padding-right:50px;
	    float:left;
    }
    
    #mmenu_bottom .mod_changelanguage {
	    display:none;
    }
    
    .autogrid_row.gutter_m > div {
	    padding-left:16px;
	    padding-right:16px;
    }
}


@media only screen and (max-width: 768px) { 
	
	
	:root {
	--contentPaddingLeftRight: 20px;
   }
   

   
   .serif { 
	   font-size:18px;
	   line-height:24px;
   }
   
   .ce_text.h-align-right {
  text-align: left;
   }
   
   .mmenu_trigger {
	   right:20px;
   }


	.mobile {
	  display:block;
    }
    .pb-xxl {
	    padding-top:40px!important;
	    padding-bottom:40px!important;
    }
    
    #container {
	    width:90%;
	    margin-top:-20px;
    }
    
    .mod_article:not(.fullwidth) > .container {
	    padding:20px;
	    padding-top:40px;
    }
    
    .image_container .caption {
	    font-size:1rem;
    }
    
    .image_container .caption {
	    font-size:14px;
    }
    
    .desktop.interaktivegrafik {
	    display:none;
    }
    
    .nasenkonfigurator .mod_article {
	    margin-top:40px;
    }
    
     .nasenkonfigurator .menu-left {
	     padding-right:0px;
	     margin-right:0px;
     }
    
    .nasenkonfigurator .toggle {
		  width: 100%;
		  position: static;
		  margin-top:10px;
		  margin-bottom:20px;
	}
    
     .nasenkonfigurator .toggle ul li a, 
	 .nasenkonfigurator .toggle ul li span, 
	 .nasenkonfigurator .menu-left ul li a, 
	 .nasenkonfigurator .menu-left ul li span  {
		  padding-left:0px;
		  padding-right:0px;
	      text-align:center;
	 }
	 
	 .nasenkonfigurator .content-left,
	 .nasenkonfigurator .content-right {
		 width:100%;
		 float:none;
	 }
	 
	 .nasenkonfigurator .desktop {
		 display:none;
	 }
	    
    .interaktivegrafik1,
	.interaktivegrafik2,
	.interaktivegrafik4 {
		overflow:hidden;
		position:relative;
		margin-bottom:20px;
		height:auto;	
    }
    
    
	
	.interaktivegrafik1 form,
	.interaktivegrafik2 form,
	.interaktivegrafik4 form {
    	left: 0;
		margin-bottom: 10px;
		position: relative;
		top: 0;
		z-index: 1;
    }
    
    .interaktivegrafik1 #background {
		background: url(../../bessler/interaktivegrafik1/background.png) top left no-repeat;
		background-size:100%;
		height:auto;
	}
    .interaktivegrafik2 #background {
		background: url(../../bessler/interaktivegrafik2/background.jpg) top left no-repeat;
		background-size:100%;
		height:auto;
	}
    .interaktivegrafik4 #background {
		background: url(../../bessler/interaktivegrafik4/background.jpg) top left no-repeat;
		background-size:100%;
		height:auto;
	}
	
	.header .ce_hyperlink { 
		display:none;
	}
	
}