body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important}
/********************************************************************************/
/*
Description: CSS File for Reset
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/
/* Contao */
header,footer,nav,section,aside,main,article,figure,figcaption {display:block;}

body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea,hr {margin:0;padding:0;}

blockquote,q {quotes:none;}

fieldset,img,iframe {border:0;}

ul,ol {list-style-type:none;}

sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}

input,button,textarea,select {font-family:inherit;font-size:99%;font-weight:inherit;}

/* body {font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000;} */

pre,code {font-family:Monaco,monospace;}

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

*, *::before, *::after {box-sizing: border-box;}

html {
   -webkit-font-smoothing: antialiased;
   overflow-y: scroll;
   height: 100%;
}

figure {line-height:0;}

:link,:visited {text-decoration: none;}

a img,:link img,:visited img {border: none;}

img {width: 100%;}

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

header,
main,
footer { 
  padding:  
   env(safe-area-inset-top)  
   env(safe-area-inset-right)  
   0  
   env(safe-area-inset-left);
}

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

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
   body {-webkit-text-size-adjust: 100%;}
}

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

/********************************************************************************/
/*
Description: CSS File for variables
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

:root {
   /* Schrift [#000] */
   --color1: rgba(0, 0, 0, 1);

   /* Farbe 2 [#00A7A7] - (*Links*) */
   --color2: rgba(0, 167, 167, 1);
   
   /* Farbe 3 [#838689] - (*Grau*) */
   --color3: rgba(131, 134, 137, 1);
   
   /* Farbe 4 [#C0645C] - (*Rot*) */
   --color4: rgba(192, 100, 92, 1);
   
   /* Farbe 5 [#B14864] - (*Berry*) */
   --color5: rgba(177, 72, 100, 1);
   
   /* Farbe 6 [#288BB0] - (*Türkis-Blau*) */
   --color6: rgba(40, 139, 176, 1);
   
   /* Farbe 7 [#EC981F] - (*Orange*) */
   --color7: rgba(236, 152, 31, 1);
   
   /* Farbe 8 [#885C8F] - (*Lila*) */
   --color8: rgba(136, 92, 143, 1);
   
   /* Farbe 9 [#4F81B3] - (*Blau*) */
   --color9: rgba(79, 129, 179, 1);
   
   /* Farbe 10 [#44AA8E] - (*Grün*) */
   --color10: rgba(68, 170, 142, 1);
   
   /*****/
   
   /* Banner: Standard [#333] */
   --banner1: var(--color1);
   
   /* Banner: Hinweis [#1EB100] */
   --banner2: rgba(30, 177, 0, 1);
   
   /* Banner: Wichtig [#cd1719] */
   --banner3: var(--color2);
   
   /*****/
   
   /* Error [#D2232A] - (*Error & Warning*) */
   --error: rgba(210, 35, 42, 1);

   /* Weiß [#fff] */
   --colorW: rgba(255, 255, 255, 1);
   
   /* Schwarz [#000] */
   --colorB: rgba(0, 0, 0, 1);
   
   /*****/
   
   --font1: 'PT Sans', arial, sans-serif;
   --font2: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
   
   --text: 1.313rem;
   --linehT: 1.867rem;
   
   --textS: 1.000rem;
   --linehTS: 1.250rem;
   
   
   --head1: 2.188rem;
   --linehH1: 2.500rem;
   
   --head2: 2.188rem;
   --linehH2: 2.500rem;
   
   --head3: 1.563rem;
   --linehH3: 1.800rem;
   
   --head4: 1.375rem;
   --linehH4: 1.375rem;
   
   --head5: 1.375rem;
   --linehH5: 1.867rem;
   
   --head6: 1.375rem;
   --linehH6: 1.867rem;
   
   /*****/
   
   /* Navigation Header */
   --naviH: 1.188rem;
   --linehNH: 2.625rem;
   
   /* Navigation Footer */
   --naviF: 0.938rem;
   --linehNF: 1.375rem;
   
   /* Navigation Mobil */
   --naviM: 2.000rem;
   --linehNM: 3.000rem;
   
   /*****/

   /* Content-Breite */
   /* --contentWidth: 1150px; */
   --contentWidth: calc(1150px + 2 * var(--contentPaddingW));
   --contentPaddingW: 50px;
   --contentPaddingH: 0;
   --contentPaddingV: 40px;
   --headerHeight: 250px;

   /* Border */
   --border: 1px;

   /* Border-Radius */
   --br1: 5px;
   --br2: 10px;
   --br3: 20px;

   /* Boxes */
   --padding-boxes: var(--contentPaddingH);
   --br-boxes: var(--br2);
   --bg-boxes: var(--color6);
   --bl-boxes: var(--color2);
}

@media only screen and (max-width : 1024px) {
   :root {
   --contentPaddingW: 25px;
   --contentPaddingV: 50px;
   }
}

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

@media only screen and (max-width : 767px) {
   :root {
   --headerHeight: 115px;
   }
}

@media only screen and (max-width : 599px) {
   :root {
   --headerHeight: 95px;
   --contentPaddingW: 15px;
   --contentPaddingV: 20px;
   }
}

@media only screen and (max-width : 400px) {
   :root {
   --contentPaddingW: 10px;
   --contentPaddingV: 20px;
   }
}

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

.bg-grau {background: var(--color3); margin: var(--contentPaddingH) 0;}
.bg-tuerkis {background: var(--color2); margin: var(--contentPaddingH) 0;}

.center {text-align: center !important;}
.right {text-align: right !important;}
.left {text-align: left !important;}

/********************************************************************************/
/* Auswahltext-Farbe ändern */
::selection {background: var(--color2); color: var(--colorW);}

/* Highlight Searchword */
.highlight {background: var(--color2); color: var(--colorW); padding: 0 2px;}

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

.margin-top-bottom-100 {margin-top: 100px !important; margin-bottom: 100px !important;}
.margin-top-bottom-90 {margin-top: 90px !important; margin-bottom: 90px !important;}
.margin-top-bottom-80 {margin-top: 80px !important; margin-bottom: 80px !important;}
.margin-top-bottom-70 {margin-top: 70px !important; margin-bottom: 70px !important;}
.margin-top-bottom-60 {margin-top: 60px !important; margin-bottom: 60px !important;}
.margin-top-bottom-50 {margin-top: 50px !important; margin-bottom: 50px !important;}
.margin-top-bottom-40 {margin-top: 40px !important; margin-bottom: 40px !important;}
.margin-top-bottom-30 {margin-top: 30px !important; margin-bottom: 30px !important;}
.margin-top-bottom-20 {margin-top: 20px !important; margin-bottom: 20px !important;}
.margin-top-bottom-10 {margin-top: 10px !important; margin-bottom: 10px !important;}
.margin-top-bottom-0 {margin-top: 0 !important; margin-bottom: 0 !important;}

.margin-top-100 {margin-top: 100px !important;}
.margin-top-90 {margin-top: 90px !important;}
.margin-top-80 {margin-top: 80px !important;}
.margin-top-70 {margin-top: 70px !important;}
.margin-top-60 {margin-top: 60px !important;}
.margin-top-50 {margin-top: 50px !important;}
.margin-top-40 {margin-top: 40px !important;}
.margin-top-30 {margin-top: 30px !important;}
.margin-top-20 {margin-top: 20px !important;}
.margin-top-10 {margin-top: 10px !important;}
.margin-top-0 {margin-top: 0 !important;}

.margin-bottom-100 {margin-bottom: 100px !important;}
.margin-bottom-90 {margin-bottom: 90px !important;}
.margin-bottom-80 {margin-bottom: 80px !important;}
.margin-bottom-70 {margin-bottom: 70px !important;}
.margin-bottom-60 {margin-bottom: 60px !important;}
.margin-bottom-50 {margin-bottom: 50px !important;}
.margin-bottom-40 {margin-bottom: 40px !important;}
.margin-bottom-30 {margin-bottom: 30px !important;}
.margin-bottom-20 {margin-bottom: 20px !important;}
.margin-bottom-10 {margin-bottom: 10px !important;}
.margin-bottom-0 {margin-bottom: 0 !important;}

.padding-top-bottom-100 {padding-top: 100px !important; padding-bottom: 100px !important;}
.padding-top-bottom-90 {padding-top: 90px !important; padding-bottom: 90px !important;}
.padding-top-bottom-80 {padding-top: 80px !important; padding-bottom: 80px !important;}
.padding-top-bottom-70 {padding-top: 70px !important; padding-bottom: 70px !important;}
.padding-top-bottom-60 {padding-top: 60px !important; padding-bottom: 60px !important;}
.padding-top-bottom-50 {padding-top: 50px !important; padding-bottom: 50px !important;}
.padding-top-bottom-40 {padding-top: 40px !important; padding-bottom: 40px !important;}
.padding-top-bottom-30 {padding-top: 30px !important; padding-bottom: 30px !important;}
.padding-top-bottom-20 {padding-top: 20px !important; padding-bottom: 20px !important;}
.padding-top-bottom-10 {padding-top: 10px !important; padding-bottom: 10px !important;}
.padding-top-bottom-0 {padding-top: 0 !important; padding-bottom: 0 !important;}

.padding-top-100 {padding-top: 100px !important;}
.padding-top-90 {padding-top: 90px !important;}
.padding-top-80 {padding-top: 80px !important;}
.padding-top-70 {padding-top: 70px !important;}
.padding-top-60 {padding-top: 60px !important;}
.padding-top-50 {padding-top: 50px !important;}
.padding-top-40 {padding-top: 40px !important;}
.padding-top-30 {padding-top: 30px !important;}
.padding-top-20 {padding-top: 20px !important;}
.padding-top-10 {padding-top: 10px !important;}
.padding-top-0 {padding-top: 0 !important;}

.padding-bottom-100 {padding-bottom: 100px !important;}
.padding-bottom-90 {padding-bottom: 90px !important;}
.padding-bottom-80 {padding-bottom: 80px !important;}
.padding-bottom-70 {padding-bottom: 70px !important;}
.padding-bottom-60 {padding-bottom: 60px !important;}
.padding-bottom-50 {padding-bottom: 50px !important;}
.padding-bottom-40 {padding-bottom: 40px !important;}
.padding-bottom-30 {padding-bottom: 30px !important;}
.padding-bottom-20 {padding-bottom: 20px !important;}
.padding-bottom-10 {padding-bottom: 10px !important;}
.padding-bottom-0 {padding-bottom: 0 !important;}

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

@media screen and (prefers-reduced-motion: reduce) {
   .animate { animation: none !important; }
}

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

/********************************************************************************/
/*
Description: CSS File for fonts
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'),
       url('../../files/data/fonts/pt-sans-v9-latin-regular.woff2') format('woff2'),
       url('../../files/data/fonts/pt-sans-v9-latin-regular.woff') format('woff');
}

/* pt-sans-700 - latin */
@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'),
       url('../../files/data/fonts/pt-sans-v9-latin-700.woff2') format('woff2'),
       url('../../files/data/fonts/pt-sans-v9-latin-700.woff') format('woff');
}

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

/********************************************************************************/
/*
Description: CSS File for Layout
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

body {
	font-family: var(--font1);
	color: var(--color1);
	margin: 0 auto;
	padding: 0;
	background: var(--colorW);
}

/********************************************************************************/
/*	Aufbau	*/

#wrapper {

}

#header {
	z-index: 110;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--headerHeight);
	box-shadow: 0 0 10px rgba(0,0,0,0.9);
	transition: 0.3s;
	background: rgba(255, 255, 255, 0.95);
}

.scrolled #header {
	height: 140px;
}

#header .inside {
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	align-items: center;
	width: 100%;
	max-width: calc(var(--contentWidth) + 2 * var(--contentPaddingW));
	margin: 0 auto;
	padding: var(--contentPaddingH) var(--contentPaddingW);
}

.logo img {
	width: auto;
	height: 75px;
	margin: 60px 0;
	transition: 0.3s;
}

.scrolled #header .logo img {
	height: 50px;
	margin: 20px 0;
}

#teaser {
	margin: 0 auto;
	margin-top: var(--headerHeight);
}

#container {
	max-width: calc(var(--contentWidth) + 2 * var(--contentPaddingW));
	margin: 0 auto;
}

#footer {
	background: var(--color3);
}

#footer .inside {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	max-width: calc(var(--contentWidth) + 2 * var(--contentPaddingW));
	margin: 0 auto;
	padding: 25px var(--contentPaddingW);
}

/********************************************************************************/
/*	Artikel & Inhalte	*/

.mod_article {
	padding: var(--contentPaddingV) var(--contentPaddingW);
}

.mod_article.ohne-abstand {
	padding: 0;
}

.mod_article.boxen,
.mod_article > .content-headline,
.mod_article > .content-text,
/* .mod_article > .content-image, */
.mod_article > .ce_form,
.mod_article > .mod_newslist,
.mod_article > .mod_newsreader,
.mod_article > .content-accordion,
.mod_article > .content-table,
.mod_article > .rs-columns,
.mod_article > .content-swiper,
.mod_article > .content-youtube {
	max-width: var(--contentWidth);
	margin: 0 auto;
}

.mod_article > .content-text {
	margin-bottom: 2em;
}

/********************************************************************************/
/*	Linke Spalte	*/

#left {
	padding: 0 0 0 var(--contentPaddingW);
}

#left .inside {
	padding: var(--contentPaddingV) 0;
}

#left .content-element-group {
	padding: var(--contentPaddingV) !important;
}

#left .content-element-group {
	color: var(--colorW);
	padding: 5px 10px;
	border-radius: var(--br2);
	background: var(--color2);
}

/*
.rot #left .content-element-group {background: var(--color4);}
.berry #left .content-element-group {background: var(--color5);}
.tuerkis-blau #left .content-element-group {background: var(--color6);}
.orange #left .content-element-group {background: var(--color7);}
.lila #left .content-element-group {background: var(--color8);}
.blau #left .content-element-group {background: var(--color9);}
.gruen #left .content-element-group {background: var(--color10);}
*/

.rot #left .content-element-group,
.berry #left .content-element-group,
.tuerkis-blau #left .content-element-group,
.orange #left .content-element-group,
.lila #left .content-element-group,
.blau #left .content-element-group,
.gruen #left .content-element-group {
	display: none;
}

/********************************************************************************/
/*	Mobile Anpassungen	*/

@media only screen and (max-width : 1200px) {
	html {font-size: 14px;}
}

@media only screen and (max-width : 899px) {
	#container {
	padding: 0;
	}
	
	#main,
	#left {
	float: none;
	width: auto;
	}
	
	#left {
	right: 0;
	margin-left: 0;
	}
}

@media only screen and (max-width : 767px) {
	html {font-size: 12px;}
	
	.scrolled #header {
	height: 90px;
	}
	
	#header .nav_main {
	display: none !important;
	}
	
	#header .logo {
	display: flex;
	width: 100%;
	margin-top: 20px;
	}
	
	#header .logo figure {
	width: calc(100% - 80px);
	}
	
	#header .logo img {
	width: 100%;
	max-width: 450px;
	height: auto;
	margin-top: 0;
	}
	
	.start #main .mod_article:nth-child(1) {
	padding-bottom: 0;
	}
	
	.start #main .mod_article:nth-child(1) .content-text {
	margin-bottom: 0;
	}
}

@media only screen and (max-width : 599px) {
	.scrolled #header {
	height: 70px;
	}
	
	#header .logo {
	margin-top: 10px;
	}
}

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

/********************************************************************************/
/*
Description: CSS File for Navigation
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

#header .nav_main {
	font-size: var(--naviH);
	line-height: var(--linehNH);
	color: var(--color2);
}

#header .nav_main ul {
	display: flex;
	flex-direction: row;
}

#header .nav_main li {
	display: flex;
	padding: 1px 0;
}

#header .nav_main li::before {
	content: '|';
}

#header .nav_main li:nth-child(1) {
	margin-left: 0;
}

#header .nav_main li:nth-child(1)::before,
#header .nav_main .level_2 li::before {
	content: '';
}

#header .nav_main li:nth-last-child(1) {
	margin-right: 0;
}

#header .nav_main .level_1 a:link,
#header .nav_main .level_1 a:visited {
	display: block;
	color: var(--colorB);
	margin: 0 20px;
	border-bottom: none;
	transition: 0.1s;
}

#header .nav_main .level_1 a:hover,
#header .nav_main .level_1 a:focus,
#header .nav_main .level_1 strong {
	display: block;
	font-weight: normal;
	color: var(--color2);
	margin: 0 20px;
	border-bottom: none;
}

#header .nav_main li.trail a {
	color: var(--color2) !important;
}

@media only screen and (max-width : 799px) {
   #header .nav_main .level_1 a {
   margin: 0 15px !important;
   }
}

/********************************************************************************/
/*	Sub-Navigation ein- und ausblenden	*/

#header .nav_main li.submenu ul {
	position: absolute;
	display: none;
	overflow: hidden;
	margin-left: -9999px;
	opacity: 0;
	transition: opacity .4s ease-in-out;
}

#header .nav_main li.submenu:hover ul {
	z-index: 100;
	display: block;
	margin: 0;
	opacity: 1;
	text-align: left;
	margin-top: 40px;
	/* margin-left: -10px !important; */
	padding: 5px;
	background: var(--colorW);
	background: rgba(255, 255, 255, 0.95);
}

#header .nav_main .level_2 li {
	display: block;
	margin-left: 0;
	/* padding: 5px 0; */
	/* border-top: 1px solid var(--color2); */
}

#header .nav_main .level_2 li:nth-last-child(1) {
	/* border-bottom: 1px solid var(--color4); */
}

#header .nav_main .level_2 a:link,
#header .nav_main .level_2 a:visited {
	color: var(--colorB) !important;
	/* margin: 5px 0; */
}

#header .nav_main .level_2 a:hover,
#header .nav_main .level_2 a:focus,
#header .nav_main .level_2 strong {
	color: var(--color2) !important;
}

/********************************************************************************/
/*	Left Navigation	*/

#left .nav_left {
	font-size: var(--text);
	line-height: var(--linehT);
}

#left .nav_left .level_1 a:link,
#left .nav_left .level_1 a:visited {
	display: block;
	color: var(--colorB);
	padding: 0.5em 0;
	transition: 0.1s;
}

#left .nav_left .level_1 a:hover,
#left .nav_left .level_1 a:focus,
#left .nav_left .level_1 strong {
	display: block;
	font-weight: bold;
	color: var(--colorB);
	padding: 0.5em 0;
}

.rot #left .nav_left .level_1 strong {color: var(--color4);}
.berry #left .nav_left .level_1 strong {color: var(--color5);}
.tuerkis-blau #left .nav_left .level_1 strong {color: var(--color6);}
.orange #left .nav_left .level_1 strong {color: var(--color7);}
.lila #left .nav_left .level_1 strong {color: var(--color8);}
.blau #left .nav_left .level_1 strong {color: var(--color9);}
.gruen #left .nav_left .level_1 strong {color: var(--color10);}

/********************************************************************************/
/*	Footer Navigation	*/

.nav_footer {

}

.nav_footer ul {
	color: var(--colorW);
}

.nav_footer li {
	display: inline-block;
	font-size: var(--naviF);
	line-height: var(--linehNF);
	margin-bottom: 5px;
}

.nav_footer .level_1 a:link,
.nav_footer .level_1 a:visited {
	color: var(--colorW);
	font-weight: normal;
}

.nav_footer .level_1 a:hover,
.nav_footer .level_1 a:focus,
.nav_footer .level_1 strong {
	color: var(--colorW);
	font-weight: normal;
	border-bottom: 1px solid var(--colorW);
}

.nav_footer li:before {
	content: ' | ';
}

.nav_footer li:nth-child(1):before {
	content: '';
}

/********************************************************************************/
/*	Mobile Navigation	*/

.mobile_menu .inner {
	background: var(--color2);
}

.mobile_menu .nav_main {
	text-align: center;
	padding: 160px 20px 20px 20px;
	transition: 0.3s;
}

.scrolled .mobile_menu .nav_main {
	padding-top: 90px;
}

.mobile_menu .nav_main li {
	font-size: var(--naviM);
	line-height: var(--linehNM);
}

.mobile_menu .nav_main .level_1 a:link,
.mobile_menu .nav_main .level_1 a:visited {
	color: var(--colorW);
	border-bottom: none;
}

.mobile_menu .nav_main .level_1 a:hover,
.mobile_menu .nav_main .level_1 a:focus,
.mobile_menu .nav_main .level_1 strong {
	font-weight: normal;
	color: var(--color1);
	border-bottom: none;
}

.mobile_menu .nav_main .level_2 li {
	font-size: 80%;
	line-height: 1.6em;
}

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

/********************************************************************************/
/*
Description: CSS File for "Burger" Menu
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

/*	Fehler mit mobile-menu & position:fixed umgehen	*/
body .mobile_menu_wrapper #wrapper {
	transform: none !important;
	will-change: content !important;
}

.offcanvas {
	z-index: 20;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 32px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

@media only screen and (max-width : 599px) {
	.offcanvas {
	top: 10px;
	right: 10px;
	}
}

.offcanvas span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: var(--color1);
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.offcanvas span:nth-child(1) {
	top: 0px;
}

.offcanvas span:nth-child(2),
.offcanvas span:nth-child(3) {
	top: 14px;
}

.offcanvas span:nth-child(4) {
	top: 28px;
}

.offcanvas.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}

.offcanvas.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.offcanvas.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.offcanvas.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}

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

/********************************************************************************/
/*
Description: CSS File for columns
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.rs-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 10em;
  width: 100%;
}

@media only screen and (max-width : 1100px) {
  .rs-columns {
  gap: 2em;
  }
}

.rs-columns > * {
  flex: 1 1 280px;
}

.rs-column {
  display: flex;
  flex-wrap: wrap;
  flex-basis: calc(920px * 999 - 100% * 999);
  flex-direction: column;
}

.rs-column .content-text {
  padding: 0 !important;
}

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

/********************************************************************************/
/*
Description: CSS File for Font Sizes
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font1);
	font-weight: 300;
	hyphens: auto;
}

h1 {
	font-size: var(--head1);
	line-height: var(--linehH1);
	color: var(--color1);
	padding-bottom: 0.750rem;
}

.start h1 {
	color: var(--color2);
	padding: 0;
}

.rot h1,
.berry h1,
.tuerkis-blau h1,
.orange h1,
.lila h1,
.blau h1,
.gruen h1 {
	font-family: var(--font2);
	font-size: var(--head4);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	display: inline-block;
	color: var(--colorW);
	margin-bottom: 1em;
	padding: 5px 10px;
	line-height: initial;
	border-radius: var(--br1);
	background: rgba(255, 255, 255, 0.8);
}

.rot h1 {background: var(--color4);}
.berry h1 {background: var(--color5);}
.tuerkis-blau h1 {background: var(--color6);}
.orange h1 {background: var(--color7);}
.lila h1 {background: var(--color8);}
.blau h1 {background: var(--color9);}
.gruen h1 {background: var(--color10);}

h2 {
	font-size: var(--head2);
	line-height: var(--linehH2);
	padding: 0.375rem 0 0.625rem 0;
}

h3 {
	font-size: var(--head3);
	line-height: var(--linehH3);
	/* color: var(--color2); */
	padding: 0.375rem 0 0.438rem 0;
}

h4 {
	display: inline-block;
	font-family: var(--font2);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: var(--head4);
	line-height: var(--linehH4);
	margin-bottom: 2em;
	padding: 5px;
	border-radius: var(--br1);
	background: var(--colorW);
}

.bg-tuerkis h4 {
	color: var(--color2);
}

.bg-grau h4 {
	color: var(--color3);
}

h5 {
	font-size: var(--head5);
	line-height: var(--linehH5);
	font-weight: bold;
}

h6 {
	font-size: var(--head6);
	line-height: var(--linehH6);
	text-transform: uppercase;
}

.bg-grau p,
.bg-grau li,
.bg-grau h1,
.bg-grau h2,
.bg-grau h3,
.bg-grau h4,
.bg-grau h5,
.bg-grau h6 {
	/* color: var(--colorW); */
}

p,
.content-hyperlink {
	font-size: var(--text);
	line-height: var(--linehT);
	padding: 0 0 1.867rem 0;
}

p:nth-last-child(1) {
	padding-bottom: 0;
}

/*****	Copy to TinyMCE ANFANG	*****/
span.hinweis-text {
	color: var(--banner3);
	font-weight: bold;
}

p.small {
	font-size: var(--textS);
	line-height: var(--linehTS);
}

p.standard-banner {
	color: var(--banner1);
	margin: 0 0 1.867rem 0;
	padding: 1em;
	border: 1px dotted var(--banner1);
}

p.hinweis-banner {
	color: var(--banner2);
	margin: 0 0 1.867rem 0;
	padding: 1em;
	border: 1px dotted var(--banner2);
}

p.wichtig-banner {
	color: var(--banner3);
	margin: 0 0 1.867rem 0;
	padding: 1em;
	border: 1px dotted var(--banner3);
}
/*****	Copy to TinyMCE ENDE	*****/

#footer p {
	color: var(--colorW);
	font-size: var(--textS);
	line-height: var(--linehTS);
	margin-bottom: 5px;
	padding: 0;
}

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

/********************************************************************************/
/*
Description: CSS File for Links
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

a:link,
a:visited {
	color: var(--color2);
	/* border-bottom: 1px solid var(--color2); */
}

a:hover,
a:active,
a:focus {
	color: var(--color2);
	/* border-bottom: 1px dotted var(--color2); */
}

.rot a:link,
.rot a:visited {
	color: var(--color4);
}

.berry a:link,
.berry a:visited {
	color: var(--color5);
}

.tuerkis-blau a:link,
.tuerkis-blau a:visited {
	color: var(--color6);
}

.orange a:link,
.orange a:visited {
	color: var(--color7);
}

.lila a:link,
.lila a:visited {
	color: var(--color8);
}

.blau a:link,
.blau a:visited {
	color: var(--color9);
}

.gruen a:link,
.gruen a:visited {
	color: var(--color10);
}

/*****/

.bg-grau a:link,
.bg-grau a:visited,
#left a:link,
#left a:visited,
#footer a:link,
#footer a:visited {
	color: var(--colorW);
	/* border-bottom: 1px solid var(--colorW); */
}

.bg-grau a:hover,
.bg-grau a:active,
.bg-grau a:focus
#left a:hover,
#left a:active,
#left a:focus,
#footer a:hover,
#footer a:active,
#footer a:focus {
	color: var(--colorW);
	/* border-bottom: 1px dotted var(--colorW); */
}

/*****/

.content-hyperlink {
	margin-top: var(--linehT);
	margin-bottom: var(--linehT);
}

.rs-column .content-hyperlink,
.bg-grau .content-hyperlink {
	text-align: center;
	margin-bottom: 0;
}

.content-hyperlink a:link,
.content-hyperlink a:visited,
p.more a:link,
p.more a:visited {
	display: inline-block;
	padding: 5px 25px;
	color: var(--colorW);
	border-radius: var(--br1);
	border: var(--border) solid var(--color2);
	background: var(--color2);
	transition: 0.3s;
}

.boxen-bg .content-hyperlink a {
	color: var(--color2);
	border: var(--border) solid var(--color9);
	background: var(--color9);
}

.content-hyperlink a:hover,
.content-hyperlink a:active,
.content-hyperlink a:focus,
p.more a:hover,
p.more a:active,
p.more a:focus {
	color: var(--color2);
	border: var(--border) solid var(--color2);
	background: var(--colorW);
}

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

/********************************************************************************/
/*
Description: CSS File for boxes
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.boxen {
  --grid-layout-gap: 1rem;
  --grid-column-count: 3;
  --grid-item--min-width: 210px;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.boxen div {
   order: 1;
   width: 100%;
   height: 100%;
   color: var(--colorW);
   /* text-align: center; */
}

.boxen figure img {
   object-fit: cover;
   border-radius: var(--br3) !important;
}

.boxen .content-text {
   padding: 2em;
   border-radius: var(--br3) !important;
}

@media only screen and (max-width : 899px) {
   .boxen .content-text {
   padding: 1em;
   }
   
   .boxen .content-text h4 {
   margin-bottom: 1em;
   }
}

@media only screen and (max-width : 461px) {
  .boxen div:nth-child(5) {
  order: 0;
  }
}

/*****/

.boxen .rs-column .media--above {display: flex; flex-direction: column;}
.boxen .rs-column .media--above figure {order: 1;}
.boxen .rs-column .media--above h3 {order: 2;}
.boxen .rs-column .media--above .rte {order: 3;}

.boxen-bg .rs-column, .boxen-bg-radius .rs-column {background: var(--bg-boxes);}
.boxen-border .rs-column, .boxen-border-radius .rs-column {border: var(--border) solid var(--bl-boxes);}

.boxen-bg .rs-column,
.boxen-border .rs-column,
.boxen-bg-radius .rs-column,
.boxen-border-radius .rs-column {
   padding: var(--padding-boxes);
}

.no-padding.boxen-bg .rs-column,
.no-padding.boxen-border .rs-column,
.no-padding.boxen-bg-radius .rs-column,
.no-padding.boxen-border-radius .rs-column {
   padding: 0;
}

.boxen .rs-column .content-hyperlink {
   padding-top: 0;
   padding-bottom: 0;
}

.no-padding.boxen-bg .rs-column h3,
.no-padding.boxen-bg .rs-column .rte,
.no-padding.boxen-bg .rs-column .content-hyperlink,
.no-padding.boxen-border .rs-column h3,
.no-padding.boxen-border .rs-column .rte,
.no-padding.boxen-border .rs-column .content-hyperlink,
.no-padding.boxen-bg-radius .rs-column h3,
.no-padding.boxen-bg-radius .rs-column .rte,
.no-padding.boxen-bg-radius .rs-column .content-hyperlink,
.no-padding.boxen-border-radius .rs-column h3,
.no-padding.boxen-border-radius .rs-column .rte,
.no-padding.boxen-border-radius .rs-column .content-hyperlink {
   padding-right: var(--padding-boxes);
   padding-left: var(--padding-boxes);
}

.no-padding.boxen-bg .rs-column,
.no-padding.boxen-bg-radius .rs-column {
   padding-bottom: var(--padding-boxes);
}

.boxen-bg-radius .rs-column,
.boxen-border-radius .rs-column {
   border-radius: var(--br-boxes);
}

.boxen .rs-column img {
   border-top-right-radius: var(--br-boxes);
   border-top-left-radius: var(--br-boxes);
}

.boxen .rs-column .media--above h3,
.no-padding.boxen-bg .rs-column h3,
.no-padding.boxen-border .rs-column h3,
.no-padding.boxen-bg-radius .rs-column h3,
.no-padding.boxen-border-radius .rs-column h3 {
   padding-top: var(--padding-boxes);
}

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

/********************************************************************************/
/*
Description: CSS File for Pagination
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.pagination {
  margin: 40px 0 0 0;
  padding: 10px 0 0 0;
  border-top: var(--border) dotted var(--color4);
}

.pagination p {
  margin: 0 0 10px 0;
}

.pagination li {
  list-style-type: none;
  display: inline;
  margin: 0 5px 0 0;
}

.pagination a:link,
.pagination a:visited {
  
}

.pagination a:hover,
.pagination a:active, 
.pagination a:focus {
  
}

.pagination .current {
  font-weight: bold;
}

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

/********************************************************************************/
/*
Description: CSS File for News Modul
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.mod_newslist {
    
}

.layout_latest {
    margin-block: var(--contentPaddingH);
    padding: var(--contentPaddingH);
    border-radius: var(--br2);
    border: var(--border) solid var(--color6);
    background: var(--color6);
}

.layout_latest:nth-child(even) {
    background: none;
}

.layout_latest img {
    border-radius: var(--br1);
}

.layout_latest h3 a {
    color: var(--color1);
    border: none;
}

.mod_newsreader .layout_full {
    width: 100%;
}

/*****/

p.back {
    /* display: flex; */
    /* justify-content: flex-end; */
    width: 100%;
    text-align: right;
}

p.back a {
    display: flex;
    align-items: center;
    border-bottom: none;
}

p.back svg {
    height: 20px;
    color: var(--color2);
    margin-right: 5px;
    transition: 0.3s;
}

p.back a:hover svg {
    color: var(--color1);
    margin-right: 10px;
}

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

/********************************************************************************/
/*
Description: CSS File for Images
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

/*	Abstand unter Bildern entfernen	*/
figure {
	line-height: 0;
}

figure a:link,
figure a:visited,
figure a:hover,
figure a:active,
figure a:focus {
	border-bottom: none;
}

#main figure {
	position: relative;
}

#main .mod_article:not(.teaser) figure img {
	border-radius: var(--br1);
}

#main .media--above figure,
#main .media--below figure {
	margin: 0 0 1em 0;
}

#main .media--left figure {
	max-width: 50%;
	margin: 0 1em 1em 0;
}

#main .media--right figure {
	max-width: 50%;
	margin: 0 0 1em 1em;
}

#main .media--below {display: flex; flex-direction: column;}
#main .media--below h1 {order: 1;}
#main .media--below .rte {order: 2;}
#main .media--below figure {order: 3;}

#main figure a.cboxElement img {
	cursor: -moz-zoom-in; 
	cursor: -webkit-zoom-in; 
	cursor: zoom-in;
}

#main .mod_newslist figure a img {
	cursor: pointer;
}

@media only screen and (max-width : 599px) {
	#main .media--left figure,
	#main .media--right figure {
	float: none;
	clear: both;
	text-align: center;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1em 0 !important;
	}
}

/********************************************************************************/
/* Teaser */

.teaser figure img {
	height: 36vw;
	max-height: 500px;
	object-fit: cover;
}

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

figcaption {
	font-family: var(--font2);
	font-size: var(--head4);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	bottom: 1em;
	left: 0;
	width: min-content;
	padding: 5px;
	line-height: initial;
	border-radius: var(--br1);
	background: rgba(255, 255, 255, 0.8);
}

.boxen .rot figcaption {background: var(--color4);}
.boxen .berry figcaption {background: var(--color5);}
.boxen .tuerkis-blau figcaption {background: var(--color6);}
.boxen .orange figcaption {background: var(--color7);}
.boxen .lila figcaption {background: var(--color8);}
.boxen .blau figcaption {background: var(--color9);}
.boxen .gruen figcaption {background: var(--color10);}

@media only screen and (max-width : 899px) {
   .boxen figcaption {
   font-size: 1.2rem;
   }
}

@media only screen and (max-width : 693px) {
   .boxen figcaption {
   font-size: var(--head4);
   }
}

@media only screen and (max-width : 499px) {
   .boxen figcaption {
   font-size: 1.2rem;
   }
}

@media only screen and (max-width : 461px) {
   .boxen div {
   aspect-ratio: 1 / 1;
   }
   
   .boxen div .rte {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center; 
   }
   
   .boxen figcaption {
   font-size: var(--head4);
   }
}

/********************************************************************************/
/* Team Bilder */

.team figure {
	max-width: 300px;
}

.team figcaption {
	font-size: var(--testS);
	color: var(--colorW);
	width: 80%;
	background: rgba(0, 167, 167, 0.8);
}

/*
.content-image.rund {
	display: inline-block;
	padding-bottom: 5em;
}

.content-image.rund img {
	width: 300px;
	height: auto;
	border-radius: 50% !important;
}

.content-image.rund figcaption {
	position: absolute;
	bottom: -3em;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}
*/

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

#footer img {
	width: auto;
}

.content-text.telefon,
.content-text.email {
	margin: 1em 0;
}

.content-text.praxis .rte,
.content-text.telefon .rte,
.content-text.email .rte,
.content-text.sprechzeiten .rte {
	padding-left: 70px;
}

.content-text.telefon .rte,
.content-text.email .rte {
	display: flex;
	align-items: center;
	min-height: 50px;
}

.content-text.praxis {
	content: '';
	background: url('/files/data/icon/praxis.svg') no-repeat;
	background-size: 50px;
}

.content-text.telefon {
	content: '';
	background: url('/files/data/icon/telefon.svg') no-repeat;
	background-size: 50px;
}

.content-text.email {
	content: '';
	background: url('/files/data/icon/email.svg') no-repeat;
	background-size: 50px;
}

.content-text.sprechzeiten {
	content: '';
	background: url('/files/data/icon/sprechzeiten.svg') no-repeat;
	background-size: 50px;
}

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

/********************************************************************************/
/*
Description: CSS File for Swiper Slider
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.swiper-button-next::after,
.swiper-button-prev::after {
    /* font-size: 44px; */
    color: var(--colorW);
}

.swiper-button-next,
.swiper-button-prev {
    border: none;
    background: transparent;
}

.swiper-pagination-bullet {
    opacity: .5;
    background: var(--colorB) !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--colorW) !important;
}

/* Wenn Swiper nebeneinander in Columns verwendet werden soll */
.swiper-slide {
    width: 100% !important;
}

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

/********************************************************************************/
/*
Description: CSS File for forms
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.ce_form {
	max-width: 100%;
	font-size: var(--text);
}

.ce_form .widget-text,
.ce_form .widget-textarea {
	position: relative;
	min-height: 80px;
	margin: 0;
}

.ce_form .widget-textarea {
	min-height: 170px;
}

.ce_form label {
   z-index: 2;
   position: relative;
   display: block;
   min-height: 17px;
   font-size: 1rem;
   font-weight: normal;
   padding: 0 10px;
   margin-bottom: 6px;
   transform: translateY(33px);
   transition: all 0.3s;
}

.is-active label {
	color: var(--color1);
}

.is-completed label {
	font-size: 12px;
	transform: translateY(0);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
select,
textarea {
   display: inline-block;
   position: relative;
   width: 100%;
   min-height: 25px;
   padding: 10px;
   border: var(--border) solid var(--color1);
   border-radius: var(--br1);
   background: transparent;
   box-shadow: inset 0 1px 1px #eee;
   outline: none;
}

input[type="text"].error,
input[type="password"].error,
input[type="date"].error,
input[type="datetime"].error,
input[type="email"].error,
input[type="number"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="time"].error,
input[type="url"].error,
textarea.error {
	border: var(--border) solid var(--color1);
}

.widget-submit {
	text-align: center;
}

form button,
input[type="submit"],
.button {
   cursor: pointer;
   display: block;
   font-size: var(--text);
   line-height: var(--linehT);
   color: var(--colorW);
   padding: 5px 25px;
   border: var(--border) solid var(--color1);
   border-radius: var(--br1);
   background: var(--color1);
}

form button:hover,
form button:active,
form button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
.button:hover,
.button:active,
.button:focus {
	color: var(--color1);
	background: var(--colorW);
}

p.error {
	position: absolute;
	bottom: -3px;
	right: 10px;
	font-size: 1.000rem;
	line-height: 1.250rem;
	color: var(--error);
}

.form-confirmation {
   color: var(--color1);
}

@media only screen and (max-width : 1200px) {
	p.error {
	bottom: 5px;
	}

	.widget-textarea p.error {
	bottom: 10px;
	}
}

@media only screen and (max-width : 991px) {
	p.error {
	bottom: 10px;
	}

	.widget-textarea p.error {
	bottom: 30px;
	}
}

/********************************************************************************/
/*	Checkbox - http://doodlenerd.com/html-control/css-checkbox-generator	*/

.widget-checkbox {
	padding: 10px 0 10px 20px;
   /* background: var(--color6); */
}

.widget-checkbox label {
/* 	display: inline !important; */
	transform: none;
	padding: 0 20px 0 5px;
}

.widget-checkbox .control {
   cursor: pointer;
   display: block;
   position: relative;
   margin-top: 10px;
   padding-top: 5px;
   padding-left: 30px;
}

.widget-checkbox .control input {
   z-index: -1;
   position: absolute;
   opacity: 0;
}

.widget-checkbox .control_indicator {
   position: absolute;
   top: 3px;
   left: 0;
   width: 20px;
   height: 20px;
   border: 1px solid var(--color1);
   border-radius: 0;
   background: var(--colorW);
}

.widget-checkbox .control:hover input ~ .control_indicator,
.widget-checkbox .control input:focus ~ .control_indicator {
   background: var(--color5);
}

.widget-checkbox .control input:checked ~ .control_indicator {
   background: var(--color1);
}

.widget-checkbox .control:hover input:not([disabled]):checked ~ .control_indicator,
.widget-checkbox .control input:checked:focus ~ .control_indicator {
   /* background: var(--color5); */
}

.widget-checkbox .control input:disabled ~ .control_indicator {
   opacity: 0.6;
   pointer-events: none;
   /* background: #e6e6e6; */
}

.widget-checkbox .control_indicator:after {
   box-sizing: unset;
   content: '';
   position: absolute;
   display: none;
}

.widget-checkbox .control input:checked ~ .control_indicator:after {
   display: block;
}

.widget-checkbox .control-checkbox .control_indicator:after {
   top: 0;
   left: 5px;
   width: 4px;
   height: 11px;
   border: solid var(--colorW);
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
}

.widget-checkbox .control-checkbox input:disabled ~ .control_indicator:after {
   /* border-color: #7b7b7b; */
}

.widget-checkbox .control-checkbox .control_indicator::before {
   z-index: 99999;
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 4.5rem;
   height: 4.5rem;
   margin-top: -1.3rem;
   margin-left: -1.3rem;
   border-radius: 3rem;
   opacity: 0.6;
   transform: scale(0);
   background: var(--color1);
}

@keyframes s-ripple {
   0% {
      transform: scale(0);
   }
   20% {
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(1);
   }
}

@keyframes s-ripple-dup {
   0% {
      transform: scale(0);
   }
   30% {
      transform: scale(1);
   }
   60% {
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(1);
   }
}

.widget-checkbox .control-checkbox input + .control_indicator::before {
   animation: s-ripple 250ms ease-out;
}

.widget-checkbox .control-checkbox input:checked + .control_indicator::before {
   animation-name: s-ripple-dup;
}

/********************************************************************************/
/*	Radiobutton - http://doodlenerd.com/html-control/css-radio-button-generator	*/

.widget-radio {
   padding: 20px 0 40px 20px;
	/* background: var(--color6); */
}

.widget-radio legend {
	/* Abstand unter "legend" entfernen */
	position: absolute;
}

.widget-radio .control {
   cursor: pointer;
   display: block;
   position: relative;
   margin-bottom: 10px;
   padding-top: 5px;
   padding-left: 30px;
}

.widget-radio .control input {
   position: absolute;
   z-index: -1;
   opacity: 0;
}

.widget-radio .control_indicator {
   position: absolute;
   top: 5px;
   left: 0;
   height: 20px;
   width: 20px;
   border: 1px solid var(--color1);
   border-radius: 0;
   background: var(--colorW);
}

.widget-radio .control:hover input ~ .control_indicator,
.widget-radio .control input:focus ~ .control_indicator {
   background: var(--color5);
}

.widget-radio .control input:checked ~ .control_indicator {
   background: var(--color1);
}

.widget-radio .control:hover input:not([disabled]):checked ~ .control_indicator,
.widget-radio .control input:checked:focus ~ .control_indicator {
   background: var(--color1);
}

.widget-radio .control input:disabled ~ .control_indicator {
   background: var(--color5);
   opacity: 0.6;
   pointer-events: none;
}

.widget-radio .control_indicator:after {
   box-sizing: unset;
   content: '';
   position: absolute;
   display: none;
}

.widget-radio .control input:checked ~ .control_indicator:after {
   display: block;
}
.control-radio .control_indicator {
   border-radius: 50%;
}

.control-radio .control_indicator:after {
   left: 6px;
   top: 6px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--colorW);
   transition: background 250ms;
}

.control-radio input:disabled ~ .control_indicator:after {
   /* background: #7b7b7b; */
}

.control-radio .control_indicator::before {
   z-index: 99999;
   opacity: 0.6;
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 4.5rem;
   height: 4.5rem;
   margin-top: -1.3rem;
   margin-left: -1.3rem;
   border-radius: 3rem;
   background: var(--color1);
   transform: scale(0);
}

@keyframes s-ripple {
   0% {
      opacity: 0;
      transform: scale(0);
   }
   20% {
      transform: scale(1);
   }
   100% {
      opacity: 0.01;
      transform: scale(1);
   }
}

@keyframes s-ripple-dup {
   0% {
      transform: scale(0);
   }
   30% {
      transform: scale(1);
   }
   60% {
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(1);
   }
}

.widget-radio .control-radio input + .control_indicator::before {
   animation: s-ripple 250ms ease-out;
}

.widget-radio .control-radio input:checked + .control_indicator::before {
   animation-name: s-ripple-dup;
}

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

/********************************************************************************/
/*
Description: CSS File for Tables
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

th,
td {
    font-size: var(--text);
    line-height: var(--linehT);
    padding: var(--contentPaddingH);
    border-bottom: var(--border) solid var(--color6);
}

td {
    /* text-align: right; */
}

thead th {
    text-align: left;
    border-top: var(--border) solid var(--color6);
    background: var(--color5);
}

tr:nth-child(even) th,
tr:nth-child(even) td {
    background: var(--color5);
}

tr:nth-child(odd) td:nth-child(even) {
    /* background: var(--color5); */
}

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

/********************************************************************************/
/*
Description: CSS File for YouTube
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.content-youtube .yt_wrapper {
	margin-bottom: 10px;
}

.content-youtube .yt_wrapper figure {
	position: initial !important;
}

.content-youtube .yt_wrapper {
  position: relative;
  padding-bottom: 56%;
  padding-top: 0px;
  height: 0px;
  overflow: hidden;
  cursor: pointer;
}

.content-youtube .yt_wrapper figure img,
.content-youtube .yt_wrapper iframe,
.content-youtube .yt_wrapper object,
.content-youtube .yt_wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-youtube .yt_wrapper figure img {
  height: auto;
}

.content-youtube .content-text p {
	padding-bottom: 0;
}

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

/********************************************************************************/
/*
Description: CSS File for Accordion
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.content-accordion {
    border-bottom: var(--border) solid var(--color6);
}

.handorgel__header {
    font-size: var(--text);
    color: var(--color2);
    /* padding: 0; */
    padding: 0 0 20px 0 !important;
}

.handorgel__header__button {
    /* padding: var(--contentPaddingH) 0 !important; */
    padding: 20px 0 0 0 !important;
    /* padding: 0 !important; */
    border-top: var(--border) solid var(--color6);
    background-color: transparent;
}

.handorgel__content {
    border-top: none;
    background-color: transparent;
}

.handorgel__content .content-text {
    padding-bottom: 20px;
}

.handorgel__content__inner {
    padding: 0;
    padding-bottom: var(--contentPaddingH) !important;
}



/*
.handorgel__header {
    position: relative;
    font-family: var(--font1);
    font-size: var(--text);
    line-height: 2.500rem;
    color: var(--color1);
    cursor: pointer;
    align-items: center;

    display: flex;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 10px;
    padding: 35px 30px;

    border-top: 1px solid var(--color1);
    border-bottom: 1px solid var(--color1);
    transition: 0.3s;
}

.handorgel__header--open {
    border-bottom: 0;
}

.handorgel__header ~ .handorgel__header {
    border-top: none;
}

.handorgel__header::after {
    z-index: 1;
    position: absolute;
    top: calc(1.575rem / 2);
    right: 0;
    content: '+';
    color: var(--color1);
    font-size: 1.575rem;
    margin-left: auto;
    transition: 0.3s;
    pointer-events: none;
}

.handorgel__header:hover::after {
    transform:rotate(180deg);
}

.handorgel__header--open::after {
    content: '-';
}

.handorgel__header__button {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
}

.handorgel__content {
    border-top: 0 !important;
    border-bottom: 1px solid var(--color6);
    background: transparent !important;
}

.handorgel__content {
    display: none;
    overflow: hidden;
    height: 0;
    border-top: 1px solid #eee;
    background-color: #f6f6f6;
    transition: height .1s ease .1s;
}

.handorgel__content__inner,
.handorgel__content__inner .content-text {
    padding: 0 !important;
}
*/

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

/*
.content-accordion .handorgel__header {
    padding: 0 !important;
}

.handorgel__header__button {
    font-weight: 600 !important;
    padding: 35px 30px;
    border: none;
    background-color: transparent;
}

button.handorgel__header__button:hover,
button.handorgel__header__button:active,
button.handorgel__header__button:focus {
    border: none;
    background: none;
}

.content-accordion .handorgel__header--open {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.content-accordion .handorgel__header::after {
    content: url('/files/data/img/accordeon_open_solid.svg');
    width: 33px;
    min-width: 33px;
    height: 33px;
    margin-left: auto;
    transition: 0.3s;
}

.content-accordion .handorgel__header::after {
    position: absolute;
    right: 113px;
    pointer-events: none;
}

.content-accordion .handorgel__header:hover::after {
    transform:rotate(180deg);
}

.content-accordion .handorgel__header--open::after {
    content: url('/files/data/img/accordeon_close.svg');
    width: 33px;
}

.handorgel__content {
    margin-right: 2px;
    margin-bottom: 10px;
    margin-left: 2px;
    padding: 35px 80px 100px 80px;
    border-top: 0;
    border-radius: var(--br3);
    background: var(--colorW);
    box-shadow: 0 3px 6px var(--color7);
}

.handorgel__content__inner {
    padding: 0;
}

.handorgel__content--open {
    margin-bottom: 15px;
    padding: 15px 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 5px 6px var(--color7);
}

.handorgel__content .content-text {
    margin-bottom: 1.375rem;
}
*/

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

/********************************************************************************/
/*
Description: CSS File for Downloads
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.ext-pdf {
	padding-left: 30px;
	background: url("../../files/data/img/icon-pdf.svg") left center no-repeat;
	background-size: 20px;
}

.ext-doc,
.ext-docx,
.ext-docm {
	padding-left: 30px;
	background: url("../../files/data/img/icon-word.svg") left center no-repeat;
	background-size: 20px;
}

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

/********************************************************************************/
/*
Description: CSS File for Lists
Theme Name: Hautarztpraxis Luisenviertel
Theme URI: https://www.hautarztpraxis-luisenviertel.de
Version: 1.0 [12.2024]
Author: V15* Thorsten Neuhaus
Author URI: http://www.v15.de/
*/
/********************************************************************************/

.content-text ul {
	margin-bottom: 1.250rem;
}

.content-text p + ul {
	margin-top: -1.4em;
}

.content-text ul li {
	position: relative;
	padding-left: 20px;
	font-size: var(--text);
	line-height: var(--linehT);
}

.content-text ul li:before {
	content: '–';
	position: absolute;
	left: 0;
	/* padding: 0 0.5em 0 0; */
}

/*****/

.content-text ol li {
	list-style-type: decimal;
	font-size: var(--text);
	line-height: var(--linehT);
	margin-left: 25px;
}

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