/*
Theme Name: Anna Florin Theme
Author: Süsskind SGD
Description: Theme für Anna Florin
Version: 1.0
*/


/* variablen */

/*VARIABELN----------------------------------*/
:root{
  /*Farben*/
	--col-main: #fff; /*Weiss*/
	--col-secondary: #145faa; /*Blau*/
	--col-tertiary: #ff6030; /*Orange*/

	
	
 /*Schriften*/
	--ff-name: 'Lora', serif;
	--fs-basic: 25px;
	--lh-basic: 35px;
	
	--fs-fliesstext: calc(var(--fs-basic) * 0.85);
	--lh-fliesstext: calc(var(--lh-basic) * 0.95);
	
	--fs-small: calc(var(--fs-basic) * 0.6);
	--lh-small: calc(var(--lh-basic) * 0.65);

	--fs-h2: calc(var(--fs-basic) * 1.6);
	--lh-h2: calc(var(--lh-basic) * 1.57);
	
	--fs-h3: calc(var(--fs-basic) * 1.1);
	--lh-h3: calc(var(--lh-basic) * 1.15);
	
	--fs-aside: calc(var(--fs-basic) * 1.3);
	--lh-aside: calc(var(--lh-basic) * 1.3);
	
	
	--fa-normal: left;
	--fa-special: right;
	--fa-different: center;
	--fw-bold: 700;
	--fw-regular: 400;
	--ls-hover: 0.8;
	
	
	--fd-link: underline;
	
 /*Breiten / Abstände*/
	--con-width: 90vw;
	--con-max-width: 835px; 
	--con-max-width-plus: calc(var(--con-max-width) + 200px);
	--con-max-width-footer: calc(var(--con-max-width) + 600px);
	--sp-section: 80px;
	--sp-aside: 30px;
	--sp-big: 100px;
	--sp-medium: 55px;
	--sp-small: 10px;
	
}



/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/*Allgemeine Abstände / Farben / Schriften etc*/
section {
	padding: var(--sp-section) 0px;
	box-sizing: border-box;
}


/*Font and Color*/
html {
	font-size: var(--fs-basic); 
	scroll-behavior: smooth;
}
body {
	font-size: var(--fs-fliesstext);
	line-height: var(--lh-fliesstext);
	font-family: var(--ff-name);
	background-color: var(--col-main);
	color: var(--col-secondary);
	margin: 0;
}

h1, h2					{ font-weight: var(--fw-bold); color: var(--col-tertiary);}
h3, h4, h5, h6 			{ font-weight: var(--fw-bold); color: var(--col-secondary);}
h1, h2 					{ text-align: var(--fa-special); font-size: var(--fs-h2); line-height: var(--lh-h2); }
h2						{ margin-bottom: var(--sp-small); }
h2:not(.center)			{ max-width: 77%; margin-right: 0px; margin-left: auto;}
h3						{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0;}
h4 						{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; }
/*h2 						{ text-align: var(--fa-different); font-size: var(--fs-h2); line-height: var(--lh-h2);}*/
strong 					{ font-weight: var(--fw-bold);}
small					{ font-weight: var(--fw-regular);  }
h1 small, h2 small, h3 small { font-size: var(--fs-fliesstext); line-height: var(--lh-fliesstext); }


a {color: inherit; }
a:hover, summary:hover {opacity: var(--ls-hover);}

blockquote, summary {
	line-height: var(--lh-aside);
	font-size: var(--fs-aside); 
	font-weight: var(--fw-bold);
	margin: var(--sp-aside) 0;
}
.secondary blockquote *, .secondary summary, blockquote *, summary, .secondary blockquote, blockquote  {
	color: var(--col-tertiary)!important;
}
.tertiary blockquote *, .tertiary summary, .tertiary blockquote  {color: var(--col-main)!important;}

blockquote.quote-right 		{ text-align: var(--fa-special); }


/*Abstände angepasst wenn nach bestimmten Element*/
h3 + h3 						{ margin-top: var(--sp-big);    }
h3 + p, h4 + p, h2 + p 			{ margin-top: var(--sp-small);  }
blockquote + h2 				{ margin-top: var(--sp-big);    }
p + h2, p + h3 , a + h2, p + h2 { margin-top: var(--sp-medium); }
h2 + h3, h2 + h4 				{ margin-top: var(--sp-medium);	}

#medias h4 + p, #medien h4 + p 	{ margin-top: 0;  }
#medias p + h4, #medien p + h4 	{ margin-top: var(--sp-medium);  }

/*Colors*/
.secondary {
	background-color: var(--col-secondary);
	color: var(--col-main);
}
.secondary, .secondary h3, .secondary p, .secondary h4, .secondary h5, .secondary h6 {
	color: var(--col-main);
}

.tertiary {
	background-color: var(--col-tertiary);
	color: var(--col-main);
}
.tertiary * {
	color: var(--col-main);
}




/*Custom helper classes*/
.nopaddingbottom {padding-bottom: 0;}
.nopaddingtop {padding-top: 0;}
.twocolumns {column-count: 2;}
.twocolumns p {display: inline-block;}

.fullheight {
	height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  	height: calc(var(--vh, 1vh) * 100);

}

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



/*Content not full width*/
.contentwidth {
	width: var(--con-width); 
	max-width: var(--con-max-width);
	margin: 0 auto;
}
.contentwidthplus {
	width: var(--con-width); 
	max-width: var(--con-max-width-plus);
	margin: 0 auto;
	padding-bottom: var(--sp-big);
}



/*************************************************************************/
/*************************************************************************/
/*Fade-In Content*/

.animation {
	opacity: 0;
	transition: opacity 1s ease, transform 1s ease;
	will-change: auto;
	transform: translatey(80px);
}
.animation.start {
	opacity: 1;
	transform: translatey(0px);
}









/**************************************************************************************************/
/**************************************************************************************************/
/* Header / Menu / Menü */

.x_icon, .burger_icon/*, .burger_icon_weiss*/ {fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.x_icon {stroke:var(--col-main);}
#menu_burger:not(.white) .burger_icon {stroke:var(--col-secondary);}
#menu_burger.white .burger_icon {stroke:var(--col-main);}
/*.burger_icon_weiss {stroke:var(--col-main);}*/

/*Overlay*/
.mobile_menu_content {
    display: none;
    z-index: 999;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left: 0;
    background: var(--col-tertiary);
}

.mobile_menu_inner {
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
}

/*Burger Icon*/
#menu_burger {position: fixed;}
#menu_close {position: absolute;}
#menu_burger, #menu_close {
    top: 50px;
    right: 50px;
    background: #0000;
    border: none;
	cursor: pointer;
	z-index: 9;
}
#menu_close svg {margin-right: 5px; margin-top: 5px;}


/*Menu Elemente*/
#menu-main-menu, #menu-main-menu-de {
	list-style: none;
	padding-left: 0px;
}
#menu-main-menu li, #menu-main-menu-de li { padding: 15px 0; }
#menu-main-menu li a, #menu-main-menu-de li a {
	color: var(--col-main);
	text-decoration: none;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-bold);
}

body.mobilemenu_open {
	overflow: hidden;
}
/*body.mobilemenu_open {
	position: fixed; 
	width: 100%;
	overflow-y:scroll;
}*/













/**************************************************************************************************/
/**************************************************************************************************/
/*Intro / Start / Home / Logo*/


/*Logo*/
.logo_outer {
	height: 96%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo { width: 50vw; }
/*.logo img { margin-top: -50px; }*/
.logo svg { margin-top: -50px; }






/*************************************************************************/
/*************************************************************************/
/*SVG Animation / Logo Animation*/
/*https://css-tricks.com/animate-calligraphy-with-svg/*/

	.logo .st0{fill:var(--col-secondary);}
	.logo .st1{fill:var(--col-tertiary);}
	.logo .st2{fill:none;stroke:#fff;stroke-width:14.2446;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  


.first #gestaltung .a {
  stroke-dasharray: 586;
  stroke-dashoffset: 586;
  animation: dash 0.5s linear forwards;
}

.first #gestaltung .nna {
  stroke-dasharray: 970;
  stroke-dashoffset: 970;
  animation: dash 1s linear forwards .5s;
}


.first #gestaltung .f1 {
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  animation: dash 0.2s linear forwards 1.6s;
}

.first #gestaltung .f2 {
  stroke-dasharray: 451;
  stroke-dashoffset: 451;
  animation: dash 0.2s linear forwards 1.8s;
}

.first #gestaltung .f3 {
  stroke-dasharray: 103;
  stroke-dashoffset: 103;
  animation: dash 0.2s linear forwards 2s;
}

.first #gestaltung .lor {
  stroke-dasharray: 1192;
  stroke-dashoffset: 1192;
  animation: dash 0.8s linear forwards 2.2s;
}

.first #original .punkt {
  opacity: 0;
  animation: fadein .05s linear forwards 2.9s;
}
.first #byline {
	opacity: 0;
   animation: fadein 1s linear forwards 3.3s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fadein {
  to {
    opacity: 1;
  }
}




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










.language {
	width: 90vw;
	margin: 0 auto;
}
.wpml-ls-statics-shortcode_actions ul {
	display: flex;
    justify-content: space-between;
	list-style: none;
}
.language * {
	font-size: var(--fs-h3);
}

.wpml-ls-statics-shortcode_actions {
	width: 100%;
}

.wpml-ls-slot-shortcode_actions.wpml-ls-current-language {color: var(--col-tertiary);}




/*************************************************************************/
/*************************************************************************/
/*WPML / Sprachwahl / Sprachen*/

.language a {
	font-weight: var(--fw-bold);
    text-decoration: none;
}
.language .ru a {
	color: var(--col-tertiary);
}







/**************************************************************************************************/
/**************************************************************************************************/
/*Situationsplan Guarda SVG animation*/

.situationsplan .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#DFE4F2;}
.situationsplan .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#B6C3E1;}
.situationsplan .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FF6130;}
.situationsplan .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#145FAA;}
.situationsplan .st4{display:none;fill:#010000;}
.situationsplan .st6{font-size:7.1865px;}
.situationsplan .st7{display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#135EAB;}
.situationsplan .st8{display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#B6C3E1;}
.situationsplan .st9{fill:#FF6130;}
.situationsplan .st11{font-size:22.9095px;}
.situationsplan .st12{fill:#B6C3E1;}
.situationsplan .st13{fill:#145FAA;}
.situationsplan .st14{fill-rule:evenodd;clip-rule:evenodd;fill:#4F87BF;}
.situationsplan .st15{fill:#4F87BF;}
.situationsplan .st16{fill-rule:evenodd;clip-rule:evenodd;fill: var(--col-secondary);}
.situationsplan .st17{fill:#4F87BF; opacity: 1;}

.situationsplan .st16.animate {animation: col 1s linear forwards;}
.situationsplan .st17.animate {animation: plan_fadeIn 1s linear forwards;}
	

@keyframes col {
	from {fill: #FF6130;}
	to {fill: #145FAA;}
}

@keyframes plan_fadeIn {
	to {opacity: 100%;}
}	




/**************************************************************************************************/
/**************************************************************************************************/
/*Posters*/

.poster 					{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 7%;}
.poster img 				{width: 100%; cursor: pointer; }
.modal img 					{max-width: 70vw; max-height: 70vh;}

.modal {
	visibility: hidden; 
	position: fixed; 
	z-index: 1; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4); 
	display: flex;
    width: 100vw;
    height: 100vh;
    align-content: center;
    justify-content: center;
	cursor: pointer;
}
.modal.open 				{visibility: visible;}
.modal-content 				{align-self: center; cursor: auto;}

/**************************************************************************************************/
/**************************************************************************************************/
/*Interview*/
details summary {
	font-weight: var(--fw-bold); 
	color: var(--col-tertiary);
	text-align: var(--fa-special);
	cursor: pointer;
	text-decoration: var(--fd-link);
	margin-top: var(--sp-section);
	max-width: 200px;
    margin-right: 0px;
    margin-left: auto;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary::after {
  content: attr(data-open);
}

details:not([open]) summary::after {
  content: attr(data-close);
}





/**************************************************************************************************/
/**************************************************************************************************/
/*Footer*/
footer section { margin: 0 auto; max-width: var(--con-max-width-footer); width: var(--con-width); padding-bottom: var(--sp-medium);}
.footer_logo {
	display: flex;
	justify-content: center;
	/*margin-bottom: var(--sp-section);*/
}
.footer_logo img {max-width: 400px; max-height: 155px; width: var(--con-width); }

/*.footer_content {
	display: flex;
}
.footer_content > div {width: 33.33%;}*/
.footer_content * {
	font-weight: var(--fw-bold);
	text-align: var(--fa-different);
}
/*.footer_content .widget_2 {text-align: var(--fa-different);}
.footer_content .widget_3 {text-align: var(--fa-special);}*/


.socket { font-size: var(--fs-small); line-height: var(--lh-small);}

#menu-footer-menu, #menu-footer-menu-de {list-style: none;}

footer .widget_1 a {text-decoration: none;}


.social_icons {
	display: flex; 
	justify-content: space-between;
    width: 80px;
    margin: auto;
}

.social_icons svg {
	width: 30px;
	height: 30px;
	fill: var(--col-secondary);
}

.socket {
	display: flex;
    justify-content: space-between;
	margin: 0;
	padding: 0;
}

.socket {padding-top: var(--sp-section);}





/**************************************************************************************************/
/**************************************************************************************************/
/* Erweiterter Seitenbesuchszähler / Advanced Page visit counter / Zähler */
.counter { 
	color: var(--col-main);
    margin: 0 auto;
    padding: 0px;
    text-align: center;
    font-size: 16px;
    height: 5px;
    line-height: 1;
}














/*************************************************************************/
/*************************************************************************/
/*Text Selection*/
::-moz-selection { 
  background: #B6C3E1; 
  color: var(--col-main); 
}
::selection { 
  background: #B6C3E1;
  color: var(--col-main); 
}

.alternate ::-moz-selection { 
  background: #B6C3E1; 
  color: var(--col-alternate); 
}
.alternate ::selection { 
  background: #B6C3E1; 
  color: var(--col-alternate); 
}






/**************************************************************************************************/
/**************************************************************************************************/
/*Responsive*/
@media only screen and (max-width: 768px) {
	:root {
		--fs-basic: 22px;
		--lh-basic: 29px;
	}
	
	.logo { width: 75vw; }
	
	#menu_burger, #menu_close {
		top: 5vw;
		right: 5vw;
		padding: 0;	
	}
	
	.socket, #menu-footer-menu,  #menu-footer-menu-de {
		flex-direction: column;
    	align-items: center;
	}
	.socket {padding-top: var(--sp-aside);}
	
	/*h1, h2, h3 {text-align: var(--fa-normal);}*/
	
	.twocolumns { column-count: 1; }
	
	details summary:focus {	
     outline: 0;
	}
	
}

@media only screen and (max-width: 600px) {
	:root {
		--sp-section: 40px;
	}
	#menu-main-menu li a, #menu-main-menu-de li a { font-size: var(--fs-h3); line-height: var(--lh-h3); }
	#menu-main-menu li, #menu-main-menude li {padding: 10px 0;}
	
	h2:not(.center)			{ max-width: 90%;}
	
	
	.logo_outer { height: 90%; }
	.logo svg { margin-top: 0px; }
	
	#menu_burger svg { width: 40px; height: 40px;}
	#menu_close svg { width: 30px; height: 30px;}
	.x_icon, .burger_icon {stroke-width:2.5;}
}

@media only screen and (max-width: 400px) {
	.logo { width: 95vw; }
}







/**************************************************************************************************/
/**************************************************************************************************/
/*Print Version*/

@media print { 
	@page {
    margin: 2cm;
  	}

	header, footer, .language { display: none !important; } 
	body *, .secondary blockquote *, .secondary summary, blockquote *, summary {color: #000!important;}
	.secondary, .tertiary {background-color: #fff!important;}
	section, .contentwidth, #occurenzas {page-break-inside: avoid!important;}
	#commember {page-break-after: always;}
	h2:not(.center) {max-width: 100%;}
	
	
	:root{
	--fs-basic: 12px;
	--lh-basic: 16px;
	--fa-special: left;
	--fa-different: left;
	--sp-section: 10px;
	}
	
	
	.animation {
		opacity: 1!important;
		transform: translatey(0px)!important;
	}


	.situationsplan .st16, .situationsplan .st16.animate {fill:#145FAA!important;}
	.situationsplan .st17, .situationsplan .st17.animate {opacity: 100%!important;}
	
	
	
}