/*
 Theme Name:   Impfbruecke
 Description:  Impfbruecke Theme (Child von Twenty Twenty-One Version:1.1)
 Author:       Johannes Niessen
 Author URI:   https://www.webtimiser.de
 Template:     twentytwentyone
 Version:      1.0
 Text Domain:  twentytwentyone-impfbruecke
*/

:root {
	/*e6007e*/

	--global--color-black:#222!important;
	--global--color-primary: #111!important;
	/*
		adjust default button style
	*/
	--global--font-size-base:1rem!important;
	--global--color-secondary:#009fe3!important;
	--button--color-background:#009fe3!important;
	--button--border-radius:35px!important;
	--primary-nav--font-weight:300!important;
}

.menu{
	font-weight:var(--primary-nav--font-weight);
}
.primary-navigation .current-menu-item{
	/*text-decoration: underline;*/
}
.primary-navigation a:focus{
	color: rgb(146, 146, 146)!important;
	/*text-decoration: underline!important;*/
}
.wp-block-button:not(.is-style-outline) a.wp-block-button__link:active,
.wp-block-button:not(.is-style-outline) a.wp-block-button__link:hover {
    color: inherit !important;
    background: var(--button--color-background) !important;
	border-color:transparent!important;
}

/*
	adjust default content width of the theme
*/
@media only screen and (min-width: 822px){
	:root {
		--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 850px)!important;
    	--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 850px)!important;
		--footer--font-size:16px!important;
	}
}

.site-branding {
    min-width: 222px;
    min-height: 73px;
    position: relative;
    margin-top: 12px!important;
    margin-right: 0!important;
	padding-bottom: 0!important;
}
.site-logo,
.site-logo .custom-logo-link{
    position: absolute;
    margin:0!important;
	padding:0!important;
    bottom: 0!important;
    left: 0!important;
    right: 0!important;
    top: 0!important;
}
.site-logo .custom-logo {
	height: 100%!important;
	position: absolute;
    margin:0!important;
	padding:0!important;
    bottom: 0!important;
    left: 0!important;
    top: 0!important;
    max-width: none!important;
	max-height: 100%!important;
}

.site-header {
    padding-top:0!important;
	padding-bottom:0!important;
	/*margin-bottom: -30px;*/
}

body:not(.home) .site-content{
	margin-top: -35px;
}
body.home .site-content{
	margin-top: -5px;
}
@media only screen and (max-width: 482px){
	.site-branding {
		min-height: 60px;
		width: calc(100% - 130px);
		margin-top: 14px!important;
	}
	.site-header {
		/*margin-bottom: -20px;*/
	}
	body:not(.home) .site-content{
		margin-top: -25px;
	}
	div.counter{
		padding-right: 5%!important;
		padding-left: 5%!important;
	}
	.counter .wp-block-column:first-of-type{
		margin-bottom: 50px;
	}
}

/*
.site-header {
    padding-top:0!important;
	padding-bottom:0!important;
	justify-content: space-between;
}
.site-header .site-header-widget{
	text-align: right;
}
.site-header > div{
	width:50%;
}

.site-header .site-header-widget img{
	margin-top: 20px;
	width:100%; 
	max-width:250px; 
	margin-left: auto;
}*/

/* For tablets: 
@media only screen and (max-width: 600px){
	.site-logo .custom-logo {
		max-width: 200px!important;
    	max-height: 200px!important;
    	width: 100%!important;
	}
}*/
/* For destop: 
@media only screen and (min-width: 600px){
    .site-header .site-header-widget img{
		margin-top:45px; 
	}
}*/

/* For mobile: */
@media only screen and (max-width: 600px){
	.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container {
		/*width: calc(100% - var(--global--spacing-vertical))!important;*/
		width: 100%!important;
	}
}


/*
	hide default page header
*/
article.page header,
article.page .entry-footer{
    display:none;
}

/*
	adjust footer  
*/
.entry-content{
    margin-bottom:0!important;
}
.site-main{
    padding-top:0!important;
	padding-bottom:0!important;
}
.site-footer {
    max-width: 100%!important;
	background-color: var(--global--color-secondary);
}
.site-footer .site-info{
	border:none!important;
	display: block!important;
	padding:0!important;
	/*text-align: center;*/
	/*font-size: var(--global--font-size-base)!important;*/
}
.site-footer .site-info *{
	/*color:#000;*/
}
.no-widgets .site-footer {
    margin-top: 0!important;
	background-color: var(--global--color-secondary);
}










/*
	adjust footer navigation 

.footer-navigation {
    margin: auto;
}
ul.footer-navigation-wrapper,
ul.footer-navigation-wrapper li{
	display: block!important;
	line-height: inherit!important;
}*/
/*
	links don't need underines
*/
a{
	text-decoration: none!important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
    background-color: var(--button--color-background)!important;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
	background: none!important;
}

/*
	special class for banner with phone number
*/
.banner-phone.wp-block-cover{
	padding: 0 1em ;
}
.banner-phone.wp-block-cover .wp-block-cover__inner-container{
    margin-top: calc(var(--global--spacing-vertical) / 2 );
    margin-bottom: calc(var(--global--spacing-vertical) / 2 );
}
/*
.banner-phone.wp-block-cover h3{
	font-size:2.5em;
}
*/

/*
	special class for banenr with centered content
*/
.center-content,
.center-content *{
    text-align:center;
}

/*
	adjust default headlines
*/
:root {
	/*--global--font-size-xl: 2.5rem;*/
	--global--font-size-xxl: 3.5rem!important;
	/*--global--font-size-xxxl: 9rem;*/
	/*--heading--font-size-h3: 2rem;*/
	/*--heading--font-size-h2: 3rem;*/
}
@media only screen and (min-width: 652px){
	:root {
    	/*--global--font-size-xl: 2.5rem;*/
    	--global--font-size-xxl: 4rem!important;
    	/*--global--font-size-xxxl: 9rem;*/
    	/*--heading--font-size-h3: 2rem;*/
    	/*--heading--font-size-h2: 3rem;*/
	}
}
article.page h1,
article.page h2,
article.page h3{
	hyphens: auto!important;
	-ms-hyphens: auto;
-webkit-hyphens: auto;
}
article.page h2{
	color:#e6007e;
	font-weight: var(--heading--font-weight-strong);
}
article.page h3{
 	color:var(--global--color-secondary);
 	font-weight: var(--heading--font-weight-strong);
}



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

/*
.widget-area section{
	display: flex;
}*/
.site-footer .widget-area {
    margin-top: calc(1 * var(--global--spacing-vertical))!important;
}

.site-footer .widget-area ul li {
    line-height: 1.5em!important;
}
.site-footer .widget-area section img{
	/*margin:auto;*/
	max-width: 160px!important;
}
.site-footer .widget-area section h2 {
    margin-bottom: 20px;
}
.site-footer .widget-area section:not(:first-child) h2 {
	/*border-top: 1px solid rgb(255 255 255 / 36%);*/
    /*padding-top: 33px;*/
	font-size: 12px;
    font-weight: 400;
    border-bottom: 1px solid #000000ab;
    color: #000000db;
}
.site-footer .widget-area section:nth-child(2) img{
	margin-top: 47px;
}

/* For tablets: */
@media only screen and (max-width: 652px){
	.site-footer .widget-area section{
		text-align: center; 
	}
	.site-footer .widget-area section img{
		margin:auto;
	}
}




/* WPSM Accordeons 
-------------------------------------------------------------
*/
[id^="wpsm_accordion_"] .wpsm_panel-title a{
	font-family: inherit!important;
	font-size: var(--heading--font-size-h3)!important;
}

[id^="wpsm_accordion_"] .wpsm_panel-title a:focus{
	background:inherit!important;
}
[id^="wpsm_accordion_"] .wpsm_panel-body{
	font-size: inherit!important;
	font-weight: inherit!important;
	color: var(--global--color-primary)!important;
	font-family: inherit!important;
	padding: 25px;
}
[id^="wpsm_accordion_"] .ac_title_class{
   padding-top: 25px!important;
   padding-bottom: 25px!important;
   padding-left: 25px!important;
   padding-right: 74px!important;
}
[id^="wpsm_accordion_"] .wpsm_panel + .wpsm_panel {
   margin-top: 20px!important;
}
[id^="wpsm_accordion_"] .ac_open_cl_icon {
   background-color: #009fe3 !important;
   color: #ffffff !important;
   border-radius: 50px!important;
   padding-top: 9px !important;
   padding-bottom: 5px !important;
   line-height: 1 !important;
   padding-left: 10px !important;
   padding-right: 10px !important;
   margin-top: 18px!important;
   margin-right: 25px!important;
}

/* For mobile: */
@media only screen and (max-width: 600px){
	[id^="wpsm_accordion_"] .wpsm_panel-title a,
	#main h3{
		font-size: var(--heading--font-size-h4)!important;
	}
	#main h2{
		font-size: var(--heading--font-size-h3)!important;
	}
}


/* tip-group
-------------------------------------------------------------
*/
@media (min-width: 782px){
	.tip-group .wp-block-column:not(:first-child) {
		margin-left: 1em!important;
	}
}

.tip-group .wp-block-image img{
	box-shadow: 0 0 10px rgb(0 0 0 / 20%);
	border-radius: 20px;
}
.tip-group .wp-block-column{
	position: relative;
}
.tip-group .tip{
	position: relative;
	padding-left: 50px;
}
.tip-group p{
	hyphens: auto;
}
.tip-group .tip:before{
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--global--color-secondary);
    color: #FFFFFF;
    text-align: center;
    font-weight: var(--heading--font-weight-strong);
    font-size: var(--heading--font-size-h3);
    line-height: 1.2em;
}
.tip-group .tip.tip-1:before{
	content:'1';
}
.tip-group .tip.tip-2:before{
	content:'2';
}
.tip-group .tip.tip-3:before{
	content:'3';
}
.tip-group .tip.tip-4:before{
	content:'4';
}
.tip-group .tip.tip-5:before{
	content:'5';
}

/* For tablets: */
@media only screen and (min-width: 600px){
	.tip-group .tip{
		position: absolute;
	}
    .tip-group .tip.tip-1{
		top: 21%!important;
	}
	.tip-group .tip.tip-2{
		top: 42%!important;
	}
	.tip-group .tip.tip-3{
		top: 61%!important;
	}
	.tip-group .tip.tip-4{
		top: 16%!important;
	}
	.tip-group .tip.tip-5{
		top: 23%!important;
	}
}

/* For desktop: */
@media only screen and (min-width: 780px){
	.tip-group .tip{
		position: absolute;
	}
	.tip-group .tip.tip-1{
		top: 22%!important;
	}
	.tip-group .tip.tip-2{
		top: 51%!important;
	}
	.tip-group .tip.tip-3{
		top: 63%!important;
	}
	.tip-group .tip.tip-4{
		top: 175%!important;
	}
	.tip-group .tip.tip-5{
		top: 46%!important;
	}
}