/* ######################################################################################################
** ### Globale Layoutanpassungen
** ######################################################################################################
*/

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/source-sans-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/source-sans-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/source-sans-pro-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/source-sans-pro-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/source-sans-pro-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/source-sans-pro-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/source-sans-pro-v14-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}


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

/* Festlegung der Layoutbreite und Zentrierung */
.ym-wrapper, .ym-wrapper2 {
	max-width: calc(836px + 40px);
	margin: 0 auto;
}
.ym-wbox {padding: 0px 20px; }
.startseite .ym-wrapper, .ym-wrapper2 {max-width: calc(1196px + 40px);} 


/* Grundlegende Schrift- + Farb-Definitionen */
body {
	padding: 0;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 400;
	
	color: #333333;
	background-color: #FFFFFF;
}

/* allgemeine Linklogik */
.hover {cursor: pointer;}
a {text-decoration: none; color: inherit;}
main a {text-decoration: none; color: #14549E;}
main a:hover, main a:focus, main a:active, main .hover a {text-decoration: underline;}

 /* link mit Icon: external-link-square-alt */
 a.link-mit-icon:before,  ul.linkliste li:before {font-family: 'Font Awesome 5 Pro'; content: "\f360"; font-weight: 900;}
 a.link-mit-icon:before {padding-right: 5px;}
 ul.linkliste {list-style-type: none; color: #14549E;}
 ul.linkliste li:before {margin-left: -20px; width: 20px; display: inline-block;}

/* link mit Icon Telefon */
a[href^="tel:"]:before {font-family: 'Font Awesome 5 Pro'; content: "\f098"; padding-right: 5px; font-weight: 900;}


/* Überschriften */
h1 {font-size: 44px; font-weight: 400; margin-bottom: 28px; line-height: 1;}
h2 {font-size: 36px; font-weight: 400; margin-top: 60px; margin-bottom: 28px;}
h3 {font-size: 30px; font-weight: 400; margin-top: 28px; margin-bottom: 28px;}
h4 {font-size: 26px; font-weight: 600; margin-top: 14px; margin-bottom: 14px;}
h5, h6 {font-size: 22px; font-weight: 600; margin-top: 14px; margin-bottom: 14px;}

h1, h2, h3, h4 {text-align: center;}
.box-content h3, .box-content h4 {text-align: left;}


/* allgemeine Abstände */
p {margin-bottom: 28px;}
ul, ol, dl {margin-left: 20px; display: grid;} /* display: grid; damit Listen neben float-Elementen auch eingerück sind. Sonst "kleben" die direkt daran */
li {margin-left: 20px;}
.mittelzentriert {text-align: center;}
.ueberbreit {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); height: auto;}
dt, strong {font-weight: 600;}


/* Farben */
/* dunkle Farben: hier ändert sich die Schriftfarbe auf weiss. Sollte also im Zusammenhang mit bg-dunkel verwendet werden */
.bg-dunkel {color: #FFFFFF;}
.bg-dunkelblau       {background-color: #041930;}
.bg-grau_auswahlfeld {background-color: #5A5A5A;}
.bg-graublau         {background-color: #3D4658;}
.bg-rot              {background-color: #C5003D;}

/* Klinik-Farben */
.bg-kompetenz_gold   {background-color: #8E5402;}
.bg-reutlingen_blau  {background-color: #084A97;}
.bg-ermstal_gruen    {background-color: #0B6842;}
.bg-alb_rot          {background-color: #B72E1F;}
.bg-mvz_grau         {background-color: #666666;}


/* helle Farben: hier bleibt die standard dunkle Schriftfarbe erhalten */
.bg-hellblau         {background-color: #E9F2FD;}
.bg-hellgrau         {background-color: #EDE9E7;}


/* spezielle Schrift-Farben */
.dunkelblau {color: #041930;}
.hellgrau {color: #DDDDDD;}
.error {color: #C5003D;}

.bg-dunkel a {color: #FFFFFF;}



/* ######################################################################################################
** ### Allgemeine Überschreibungen
** ######################################################################################################
*/

/* default iframe */
iframe {border: none;}




/* ######################################################################################################
** ### Elemente des Kopf-Bereichs
** ######################################################################################################
*/

body {}
header.header-fixed {position: relative; min-height: 110px;}
header.header-unfixed {margin-bottom: 50px;}

/*	fix: Sprung zu Anker-Link bei fixiertem Kopf wird von Kopf verdeckt.
	zusätztlich gibt es dazu noch eine jQuery Lösung, da dies hier im Firefox / Chrome .. ?? nicht funktioniert.
 */
:target:before {
	content: '';
	display: block;
	height: 150px; /* fixed header height*/
	margin: -150px 0 0; /* negative fixed header height */
}


#mod_kopftext {position: absolute; left: 0; top: 0; z-index: 1;}
#mod_kopftext a {display: block; padding: 5px 5px 5px 20px; line-height: 0;}

header h1 {font-size: 60px; font-weight: 600; margin-bottom: 14px;}
header select {margin-top: 10px;}

.modul-suchbox {padding: 10px 0; position: relative; text-align: center;}
.modul-suchbox input {width: 50%; max-width: calc(100% - 260px); margin-right: 20px;}
.modul-suchbox .button {margin-top: 0;}
.modul-suchbox .close-searchbox {vertical-align: sub; padding-left: 20px;}


/* ######################################################################################################
** ### Menue
** ######################################################################################################
*/


.flyout ul {list-style-type: none;}
.flyout ul, .flyout li {margin: 0px; padding: 0px;}


/* flyout functionality (used for alle flyout menus) */
.flyout ul {float: right;}

.flyout > ul, .flyout > div > ul {text-align: left; display: inline-block;}

.flyout > ul > li, .flyout > div > ul > li {
	position: relative;
}
.flyout > ul > li, .flyout > div > ul > li {float: left;}


/* Abstände der Links */
.flyout a {display: block; padding: 5px 17px 5px 30px;}
/* spezielle Einstellungen für Menüpunkte der obersten Ebene */
.flyout > ul > li > a, .flyout > div > ul > li > a {text-transform: uppercase; padding: 10px 30px;}
/* Einstellugen für Menüpunkte der 3. Ebene */
.flyout ul ul ul a {padding: 3px 17px 3px 55px;}
/* Einstellugen für Menüpunkte der 4. Ebene */
.flyout ul ul ul ul a {padding-left: 75px;}
/* Einstellugen für Menüpunkte der 5. Ebene */
.flyout ul ul ul ul ul a {padding-left: 95px;}
/* Einstellugen für Menüpunkte der 6. Ebene */
.flyout ul ul ul ul ul ul a {padding-left: 115px;}

/* Farbgebung */
.flyout a  {background-color: #041930;} /* bg-dunkelblau */
.flyout a, .flyout .label, .flyout:after {color: #FFFFFF}


.flyout ul ul a:hover, .flyout ul ul a:focus, .flyout ul ul a:active,
.flyout ul ul a.menuxaktiv_back, .flyout ul ul a.menuy_aktiv {background-color: #EDE9E7; color: #041930;} /* bg: hellgrau; color: dunkelblau; */

/* Icons zum öffnen und schließen des Burger-Menüs */
.flyout .label {text-transform: uppercase; float: right;}
.flyout .label, .flyout:after {display: none; cursor: pointer;}
.flyout .label i, .flyout:after { font-size: 30px; line-height: 40px; padding: 4px 20px 6px 20px;}
.flyout:after {font-family: 'Font Awesome 5 Pro'; font-weight: 900; content: '\f00d'; margin-top: 0.3EM;  text-align: right;}


/* Icons zum Auf- / Zu-Klappen der Unternavigations-Punkte in Burger Menü und MultiToggle Navigation */
.flyout span.show-more, .flyout span.show-more-dummie,
.flyout span.multitoggle-show-more, .flyout span.multitoggle-show-more-dummie {display: none; float: left; padding: 0 20px; width: 55px; font-family: 'Font Awesome 5 Pro'; font-weight: 900; cursor: pointer;}

.flyout span.show-more:before {content: '\f078';}
.flyout li.open > a span.show-more:before {content: '\f077';}
.flyout span.show-more-dummie:before {content: '\00A0';}

.flyout  span.multitoggle-show-more, .flyout span.multitoggle-show-more-dummie {display: block; padding: 0 20px; width: 25px; margin-left: -38px; margin-right: -25px;}
.flyout span.multitoggle-show-more:before {content: '\f0d7';}
.flyout li.open > a span.multitoggle-show-more:before {content: '\f0d8';}
.flyout span.multitoggle-show-more-dummie:before {content: '\00A0';}


.flyout-multitoggle ul ul div {display: none;}
.flyout-multitoggle .open > div {display: block;}



/* ######################################################################################################
** ### Elemente im Fuss
** ######################################################################################################
*/

footer {margin-top: 40px; padding-bottom: 40px;}



/* ######################################################################################################
** ### Formatierung im Inhalt / spezielle Artikel-Klassen
** ######################################################################################################
*/
main {position: relative;}

.artikel_liste, ol.searchol .box-content {margin-bottom: 28px;}

hr {border-width: 0px; border-bottom: 1px solid #D9D8D5; color: transparent; background-color: transparent;}

table {width: 100%; border-spacing: 0px; border-collapse: collapse; font-size: inherit;}
tr {border-bottom: 1px solid #00515A;}
thead tr, tr:last-child {border-width: 2px;}

th {font-weight: 600;}
th, td {text-align: left; vertical-align: top; padding: 9px 10px 9px 0;}


.text-klein {font-size: 75%;}
p.text-klein {font-size: 14px;}
.kein-Obenabstand {margin-top: 0px;}
.kein-Untenabstand {margin-bottom: 0px;}

/* No-Style Listen */
ul.nostyle, ul.nostyle ul,
ol.nostyle {list-style-type: none; display: block;}
ul.nostyle, ul.nostyle ul, ul.nostyle li,
ol.nostyle, ol.nostyle li {margin: 0px; padding: 0px;}


.counterreihe {font-size: 28px;}
.counterreihe i {font-size: 120px;}
.counter, .counterText {font-size: 90px; line-height: 1.2; font-weight: 300;}


img.portrait {width: 40%; height: auto; float: left; margin-right: 20px;}
.startseite img.portrait {width: 25%;}

img.bildHalbeBreite {width: calc(50% - 10px); height: auto; float: left; margin-right: 20px;}
img.bildVolleBreite {width: 100%; height: auto;}

img.bildRechts {margin-right: 0; float: right; margin-left: 20px;}


ul.liste-mit-Abstand > li {margin-bottom: 20px;}



/* ######################################################################################################
** ### spezielle Modul-Anpassungen
** ######################################################################################################
*/

#mod_back_top {margin-top: 28px;}
#linkbacktop_top i {color: #041930;}

ul.weiterul li {display: inline-block; margin-right: 2%;}


.lum-lightbox {z-index: 1;}
.bildergalerie img {width: 100%; height: auto;}

.jobabo_berufsfelder ul {list-style-type: none;}


.veranstaltungskalender_kalenderblatt {
	display: block;
	float: left;
	width: 60px;
	height: 60px;
	margin-right: 20px;
	padding-top: 23px;
	line-height: 1;
	text-align: center;
	font-weight: 700;
	background-image: url("./images/calendar.svg");
	background-position: center top;
	background-repeat: no-repeat;
	backgrouns-size: contain;
}



/* ######################################################################################################
** ### freie Module
** ######################################################################################################
*/


/* ######################################################################################################
** ### Formulare
** ######################################################################################################
*/

legend {width: 100%;}

.labdiv, .labdiv2 {margin-bottom: 14px;}



/* ######################################################################################################
** ### Unsichtbare Elemente
** ######################################################################################################
*/

/* Unsichtbare Objekte  */
.ignore, .ignoreornot, dfn, #mod_menue #menux, .unsichtbar {
	position: absolute;
	left: -2000px;
	top: -5000px;
	width: 0px;
	height: 0px;
}

.insert, dfn
{display: none;}