/*
 Theme Name:   stephankaelin2019 child
 Theme URI:    /themes/stephankaelin2019-child
 Description:  verbosa Child Theme
 Author:       ---
 Author URI:   ---
 Template:     verbosa
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  stephankaelin2019-child
*/

/* import der Systemschriften aus dem Ordner resources/fonts */

/* =================== Social Icons Schriften ========================*/

@import "resources/fonts/fontfaces.css";

@import "resources/fonts/stylesheet.css";

/* =====================================  Änderungen an der Seite ====================================*/
/*--------------------------------------------------------------
	# Schriften
-------------------------------------------------------------- */

/*schriften im Content*/
.main h1 { font-size: 2em; margin: .67em 0; padding: 0 0 1em 0; font-weight:600; text-align:center;} /*ändert die Titel der Seite*/
.main h2 { font-size: 1.5em; margin: 2.5em 0 .75em 0;font-weight:600;padding-top: 1.2em;}
.main h3 { font-size: 1.3em; margin: 2em 0 .83em 0;font-weight:600;}
.main h4 { font-size: 1.2em; margin: 2em 0 1.12em 0; font-weight:600;}
.main h5 { font-size: .83em; margin: 1.5em 0;}
.main h6 { font-size: .75em; margin: 1.67em 0;}
.main p {font-size:1.1em; margin: 0 0 0.5em 0; }
.main h1 {padding-top: 1em;overflow-wrap: break-word;}
.main li {font-size:1.1em; margin: 0 0 0.5em 0; }


/*--------------------------------------------------------------
	# Links im Content
-------------------------------------------------------------- */
/*links im content*/
.main a {
	color: #F26E3F;
}
.main a:hover {
	text-decoration:underline;
	color: #666;
}
.entry-content blockquote {
	display: table;
	padding: 2em;
	margin: 0 auto;
	width: auto;
	font-style: italic;
	text-align: center;
	clear: both;
	float: none;
	position: relative;
	font-weight: 400;
}

/*--------------------------------------------------------------
	# HR Menu
-------------------------------------------------------------- */
#header hr {
  border: none ;
  margin-top: 0;
  margin-bottom: 0;
  width: 10em;

}
/*--------------------------------------------------------------
	# NAVIGATION
-------------------------------------------------------------- */
/*--------------------------------------------------------------
	## MAIN MENU
--------------------------------------------------------------*/
#access {
	display: block;
	float: none;
	margin: 3em auto 2em;
}

#access a {
	display: inline-block;
	text-decoration: none;
	/*line-height: 3;*/
}

#access a:hover span {
	padding-left: .3em;
}

#access a span {
	display: block;
	position: relative;
	/*line-height: 1.2;*/
	padding: .75em 0;
	word-break: break-word;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#access li a span::before {
	content: "";
	position: absolute;
	left: -1.3em;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 100px;
	opacity: .4;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#access > div  ul li a:not([href]) { /* Default cursor for menu items with no link */
	cursor: default;
}

#access > div > ul > li > a {
	position: relative;
	z-index: 9999;
}

#access ul li {
	position: relative;
	display: block;
	float: none;
	clear: both;
	word-break: break-word;
	margin-left: .3em;

}

#mobile-menu ul li.current_page_item > a span::before,
#mobile-menu ul li.current-menu-item > a span::before,
#access ul li.current_page_item > a span::before,
#access ul li.current-menu-item > a span::before {
	opacity: 1;
}

#mobile-menu .menu-item-has-children > a,
#access .menu-item-has-children > a {
    max-width: calc(100% - 1em);
}


/*--------------------------------------------------------------
	## Pfeil für das Untermenü
--------------------------------------------------------------*/
/* Erste Ebene - Dropdown-Toggle */
#mobile-nav > li.menu-item-has-children {
    position: relative;  /* Container relativ setzen für absolute Positionierung der Pfeile */
}

#mobile-nav > li.menu-item-has-children > .dropdown-toggle,
#mobile-nav > li.menu-item-has-children > .dropdown-toggle:after,
#mobile-nav > li.menu-item-has-children > .toggle-on.dropdown-toggle {    
    position: absolute;           
    top: -0.15em;                 
    line-height: inherit;         
    display: inline-block;
    margin: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.9em;             
    color: inherit;
    background: transparent;
    opacity: 0.75;                
    transform: rotateX(0);
    transition: .6s all ease-in-out;
}

#mobile-nav > li.menu-item-has-children > .dropdown-toggle:hover {
    background: transparent;
}

#mobile-nav > li.menu-item-has-children > .toggle-on.dropdown-toggle {
    transform: rotateX(-180deg);
    top: 1.9em;
}

#mobile-nav > li.menu-item-has-children > .dropdown-toggle:after {
    transform: rotate(180deg);
}

/* Zweite Ebene - Dropdown-Toggle */
#mobile-nav li .sub-menu > li.menu-item-has-children {
    position: relative;  /* Container relativ setzen für absolute Positionierung der Pfeile */
}

#mobile-nav li .sub-menu > li.menu-item-has-children > .dropdown-toggle,
#mobile-nav li .sub-menu > li.menu-item-has-children > .dropdown-toggle:after,
#mobile-nav li .sub-menu > li.menu-item-has-children > .toggle-on.dropdown-toggle {    
    position: absolute;           
    top: -0.5em;                 
    line-height: inherit;         
    display: inline-block;
    margin: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.9em;             
    color: inherit;
    background: transparent;
    opacity: 0.75;                
    transform: rotateX(0);
    transition: .6s all ease-in-out;
}

#mobile-nav li .sub-menu > li.menu-item-has-children > .dropdown-toggle:hover {
    background: transparent;
}

#mobile-nav li .sub-menu > li.menu-item-has-children > .toggle-on.dropdown-toggle {
    transform: rotateX(-180deg);
    top: 1.7em;
}

#mobile-nav li .sub-menu > li.menu-item-has-children > .dropdown-toggle:after {
    transform: rotate(180deg);
}

/* Dritte Ebene - Dropdown-Toggle */
#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children {
    position: relative;  /* Container relativ setzen für absolute Positionierung der Pfeile */
}

#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .dropdown-toggle,
#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .dropdown-toggle:after,
#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .toggle-on.dropdown-toggle {    
    position: absolute;           
    top: -0.7em;                 /* Angepasste Positionierung der Pfeile der dritten Ebene */
    line-height: inherit;         
    display: inline-block;
    margin: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.9em;             
    color: inherit;
    background: transparent;
    opacity: 0.75;                
    transform: rotateX(0);
    transition: .6s all ease-in-out;

}

#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .dropdown-toggle:hover {
    background: transparent;
}

#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .toggle-on.dropdown-toggle {
    transform: rotateX(-180deg);
    top: 1.6em;  /* Angepasste Position für die aktive dritte Ebene */
}

#mobile-nav li .sub-menu li .sub-menu > li.menu-item-has-children > .dropdown-toggle:after {
    transform: rotate(180deg);
}


/*--------------------------------------------------------------
	## Kinder im Menü
--------------------------------------------------------------*/

nav .sub-menu,
nav .children {
	display: none;
	opacity: 0;
	max-height: 0;
    font-size:0.8em;
	text-align: center;
	max-width: 450px;
	-webkit-transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease;
	-moz-transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease;
	-o-transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease;
	transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease;
}

nav .sub-menu.toggled-on,
nav .children.toggled-on {
	display: block;
	opacity: 1;
	 font-size:0.8em;
	text-align: center;

	-webkit-transition: 1s max-height ease-in-out, .3s .3s opacity ease-in-out, .3s .3s padding ease;
	-moz-transition: 1s max-height ease-in-out, .3s .3s opacity ease-in-out, .3s .3s padding ease;
	-o-transition: 1s max-height ease-in-out, .3s .3s opacity ease-in-out, .3s .3s padding ease;
	transition: 1s max-height ease-in-out, .3s .3s opacity ease-in-out, .3s .3s padding ease;
}

#mobile-nav li .sub-menu li .sub-menu {
    font-size: 0.75em; /* Schriftgrösse 3 ebene*/
}
nav#mobile-menu .sub-menu .sub-menu a {
    text-transform: none !important; /*Schriftart 3 eben*/
}



/*--------------------------------------------------------------
	## Hamburger Menu Icon
--------------------------------------------------------------*/

#nav-toggle { 					/* nav toggle */
	display: none;
	cursor: pointer;
	background: transparent;
	margin: 0 auto 0;
	text-align: center;
	color:black;
}

#nav-toggle span:before {
	content: "\c001";
	font-family: "socials";
	font-size: 2.25em;
}

#nav-toggle:hover {
color: #1e73be;
}

#mobile-menu #nav-cancel {
    cursor: pointer;
    display: inline-block;
    width: auto;
    font-size: 1em;
    position: absolute;
    padding-top: 0;
}

nav#mobile-menu { /* Actual mobile menu */
	display: flex;
	position: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	top: 0;
	left: -100%;
	right: 0;
	bottom: 0;
	font-size: 1.5em;
	font-weight: normal;
	z-index: 999999;
    text-align: center;
}
#mobile-menu > div {
	margin: 3em auto 0;
	max-width: 1000px;
	position: static;
}

nav#mobile-menu a {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 1.1em;
}

nav#mobile-menu a span {
	position: relative;
}

nav#mobile-menu > div  ul li a:not([href]) { /* Default cursor for menu items with no link */
	cursor: default;
}

nav#mobile-menu > div > ul > li > a {
	position: relative;
	z-index: 9999;
}

nav#mobile-menu ul li {
	position: relative;
	display: block;
	float: none;
	clear: both;
	white-space: normal;
    line-height: 1.5em;
	margin-bottom: 0.7em;
}

nav#mobile-menu ul li ul li{
	position: relative;
	display: block;
	float: none;
	clear: both;
	white-space: normal;
    line-height: 1;
    margin-top:1em;
}


/*--------------------------------------------------------------
	# Grösse der Socials
-------------------------------------------------------------- */

.socials a {
	margin: 0 .3em .5em .3em;
	font-size: 1em;
	border: 1px solid transparent;
	border-radius: 100px;
}

#sidebar .socials {
	display: table;
	margin: 0.5em auto;
	float: none;
}


/*--------------------------------------------------------------
	# Platzierung K Logo
-------------------------------------------------------------- */

#logisch {
margin: 4em 0 0 0;
text-align:center;
}



/*--------------------------------------------------------------
	# Header infos mittig vertikal
-------------------------------------------------------------- */

#site-title a { /* strich oben und unten von titel weg */

	border-top: none;
	border-bottom: none;
}
#site-description {
	line-height: 1.5;
}


li .invisible {
	
color:white;	

}


/*--------------------------------------------------------------
	# Bilder SW und Farbe
-------------------------------------------------------------- */
.grayscale img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.grayscale img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.9;

}


/*--------------------------------------------------------------
	# Layout
-------------------------------------------------------------- */


/*Container main abstand oben bei einer Column*/

#container.one-column #sidebar {
	float: none;
	display: block;
	width: 100%;
	margin: 0.5em auto 0.5em;
	border: none;	
	border-radius: 5px;
}
#container.one-column #branding {
	margin-top: 0;
}
#branding .branding-spacer {
	margin-bottom: 0em;
}

/* Abstand Entry Header nach oben*/

.entry-header {
	margin: 0;
}

/*setzt den Seitentitel vertikal in die mitte*/
.main h1.entry-title{
	
	padding-top: 0.5em;

}
/*unterer spacer der navigation bei einer column*/

#sidebar {
	display: block;
	position: relative;
	padding: 0 3em 0 3em; /*oben normal 2, wenn Menu links dann 0*/
}

/* Breite der einzelnen Seiten*/

.main.schmal {
	margin:auto;
	max-width:500px;
}
.main.breit {
	margin: auto;
	max-width: 800px;
}

.main.sehrbreit {
	margin:auto;
	max-width:1000px;
}

.main.breit p, .main.sehrbreit p, .main.schmal p{
	text-align: justify;
}

.portrait {
	margin: auto;
	max-width: 1200px;
}

.lehre, .referate, .podcasts, .publikationen, .medienspiegel  {
	margin:auto;
	max-width:800px;
}

.main.portrait p, .main.lehre p, .main.referate p, .main.podcasts p, .main.publikationen p, .main.medienspiegel p{
	text-align: left !important;
}


/*Listen auf der Person Seite*/
ul.wp-block-list {padding-left: 0.8em;}
ul.wp-block-list > li {
	line-height: 1.2em; 
	list-style-type: "- "; 
	list-style-position: outside; 
	margin-bottom: 1em;
}


	



/*--------------------------------------------------------------
	# Responsiveness
-------------------------------------------------------------- */
body.mobile {-webkit-text-size-adjust: 100%;} /* Iphone browser fix*/
body.mobile .main {min-height:0;}

@media (max-width: 1280px) {

	body {
		font-size: .95em;
		margin-top: 0; /* removed fixed header menu */
	}

	.verbosa-magazine-three #content-masonry article.hentry {
		width: 48%;
	}

	.noscroll { /* to be added to body on mobile */
		overflow: hidden;
	}


	
	
	.main h1 {text-align:center;}

	.main ul {padding-left: 0.8em;}
	.main li {line-height: 1.2em; list-style-type:"- "; list-style-position:outside ; margin-bottom:1em;}
	
}

@media (max-width: 1024px) {

	.cryout #container[class*="two-"] .main {
		width: 100%;
		margin: 0 0 1.5em;
	}

	.cryout #container[class*="two-"] #primary,
	.cryout #container[class*="two-"] #secondary {
		width: 100%;
		margin: 0 0 1.5em;
		float: none;
	}

	.cryout #colophon:not(.footer-one) .widget-container {
		width: 40%;
		margin: 0 5% 1.5em;
		float: left;
	}

	.verbosa-magazine-three #content-masonry article.hentry {
		width: 48%;
	}

	.cryout #branding {
		margin-top: 1.5em;
	}

	.cryout #sidebar {
		float: none;
		display: block;
		width: 100%;
		margin: 0 auto 3em;
	}

	.cryout #sidebar-back {
		display: none;
	}

	#access,
	#tertiary,
	#footer {
		display: none;
	}

	#nav-toggle {
		display: block;
		margin-bottom:0em;
	}


}

@media (max-width: 800px) {

	body {
		font-size: .90em;
	}

	.cryout #container #main {
		width: 90%;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.verbosa-magazine-three #content-masonry article.hentry,
	.verbosa-magazine-two #content-masonry article.hentry {
		width: 98%;
	}

}

@media (max-width: 640px) {

	body {
		font-size: .85em;
	}
}

@media (max-width: 480px) {

	body {
		font-size: .8em;
	}

	#mobile-menu > div {
		max-width: 300px;
	}

	.lp-staticslider .staticslider-caption {
		font-size: .8em;
	}


}
	
/*--------------------------------------------------------------
	# Anpassungen Accordion  
-------------------------------------------------------------- */

.ugb-accordion__item svg{
    display: none;
}

.ugb-accordion.ugb-accordion--v2 .ugb-accordion__heading:after {
    content: "+"!important;
    display: block;
	width: 20px;
    order: 3;
    font-size: 30px;
    flex-sink: 0;
    line-height: 0;
    font-weight: normal;
    transition: all 0.2s linear;
    transform-origin: 50% 50%;
}
.ugb-accordion.ugb-accordion--v2.ugb-accordion--open .ugb-accordion__heading:after {
    transform: rotate(45deg);
}

.ugb-accordion.ugb-accordion--v2 .ugb-accordion__heading:focus{
	outline-width:1px;
	outline-style:none!important;
}



/*Listen auf der Person Seite*/

ul.wp-block-list {padding-left: 0.8em;}
ul.wp-block-list > li {line-height: 1.2em; list-style-type:"- "; list-style-position:outside ; margin-bottom:1em;}


/* Standardzustand der Untermenüs: versteckt */
.menu-item .sub-menu {
  display: none;
}

/* Anzeige des Untermenüs, wenn der übergeordnete Menüpunkt aktiv ist */
.menu-item-active .sub-menu {
  display: block;
}

/* Stil für aktive Menüpunkte */
.menu-item-active > a {
  font-weight: bold;
}