/*
Theme Name: Theme for Caro
Theme URI:  https://carolynbreuer.com
Author:     Christoph Ehlers
Author URI: https://mwimmerdesign.de
Description: Ba1rierefreies WordPress Theme mit ARIA, Skip link, sticky header und responsive Burger Menu.
Version:    1.1.0
Text Domain: accessible-theme
Tags: accessibility, a11y, responsive, custom-logo, sticky-header
*/
/* FONTS */

@font-face {
  font-family: 'Switzer-Variable';
  src: url('../fonts/Switzer-Variable.woff2') format('woff2'),
       url('../fonts/Switzer-Variable.woff') format('woff'),
       url('../fonts/Switzer-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-VariableItalic';
  src: url('../fonts/Switzer-VariableItalic.woff2') format('woff2'),
       url('../fonts/Switzer-VariableItalic.woff') format('woff'),
       url('../fonts/Switzer-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

*{
margin:0;
padding: 0;
hyphens: auto; 
box-sizing: border-box;
}

body{
font-family: 'Switzer-Variable', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 32px;
background: #000;
color: #fff;
background-image: url("images/caro-bg.gif");
background-repeat: no-repeat;
background-position: 0 0;
background-size: auto;
background-attachment: fixed;
}
:focus-visible{
outline:3px solid #3b5768;
outline-offset:2px;
}
.skip-link{
position:absolute;
left:-9999px;
}
.skip-link:focus{
left:1rem;
top:1rem;
background:#000;
color:#fff;
padding:10px;
z-index:999;
}
/* Typography */
h1{
font-size: 2.6em;
line-height: 1.2em;
font-weight: 300;
margin: 1em 0 .6em 0;
}
h2{
font-size: 2.2em;
line-height: 1.2em;
font-weight: 300;
margin: 1em 0 .6em 0; 
}
h3{
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
margin: 1em 0 .6em 0;
color: #ff0000;
}
h4{
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;
margin: 1em 0 .6em 0; 
}
h5{
font-size: 1.1em;
line-height: 1.2em;
font-weight: 600;
margin: 1em 0 .6em 0; 
}
h6{
font-size: 1em;
line-height: 1.2em;
font-weight: 700;
margin: 1em 0 .6em 0; 
}
p{
margin: 0 0 1em 0;
}
p a,
p a:visited{
color: #ff0000;
 transition: all ease .4s;
}
p a:hover,
p a:focus,
p a:active{
color: #fff;
background-color: #ff0000;
text-decoration: none;
}
img{
width: 100%;
height: auto;
margin: 1em 0 1.4em 0;
}
.wp-block-gallery img{
margin: 0!important;
}
.blocks-gallery-caption{
font-size: .6em;
margin: .6em 0;
}
strong, bold{
font-weight: 800;
}
em, i{
font-style: italic;
}
.wp-block-quote cite{
font-family: 'Switzer-VariableItalic', sans-serif;
font-style: italic;
font-size: .52em;
line-height: 1.2em;
margin: .6em 0;
}
blockquote{
font-weight:100;
font-size: 2em;
line-height: 1.2em;
color: #ff0000;
margin: 1em 0;
border-top: dotted 2px #ff0000;
padding: .6em 0;
}
hr{
border-bottom: dotted 2px #ff0000!important;
border-top: none!important;
border-left: none!important;
border-right: none!important;
height: 1em!important;
margin: 1em 0!important;
display: block!important;
float: none;
}
/* Custom colors */
.has-red-color{
color: #ff0000;
}
.has-white-color{
color: #fff;
}
.has-yellow-color{
color: #ffcc00;
}
.has-blue-color{
color: #00ccff;
}

/* Custom font-size */
.has-small-font-size{
font-size: .88em!important;
line-height: 1.4em;
}
.has-medium-font-size{
font-size: 1.2em!important;
line-height: 1.4em;
}
.has-large-font-size{
font-size: 1.4em!important;
line-height: 1.4em;
}
.has-x-large-font-size{
font-size: 1.6em!important;
line-height: 1.4em;
}
/* Layout */
.header{
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: space-between;
position:sticky;
top: 0;
padding: 1em;
background-color:rgb(0, 0, 0, .9);
z-index:1000;
}
/*
.header.scrolled{
box-shadow: 0 2px 4px #ccc;
}
*/
.custom-logo-link{
flex-basis: 26%;
transition: all ease .2s;
}
.custom-logo-link img{
width: 100%;
height: auto;
transition: all ease .4s;
}
.custom-logo-link:hover{
filter: grayscale(100%) brightness(800%);
}
.header.scrolled .custom-logo-link img{
width: 66%;
margin: .4em 0 0 0;
}
.nav{
align-self: flex-end;
flex-basis: 70%;
display: flex;
justify-content: flex-end;
}
.nav ul{
list-style:none;
margin:0;
padding:0;
display: flex;
gap: 1em;
}
.nav li{
position:relative;
}
.nav li ul{
display:none;
position:absolute;
}
.nav li:focus-within>ul,
.nav li:hover>ul{
 display:block;
}
.nav li ul li{
position:relative;
}
.nav ul.sub-menu{
flex-direction: column;
min-width: 14em;
font-size: .8em;
font-style: italic;
background-color:rgb(0, 0, 0, .9);
}
.nav ul.sub-menu li{
border-bottom: dotted 2px #00837d;
padding: .4em;
}
.nav ul.sub-menu li a::before{
content: '\2192\00a0';
}

.nav a{
font-size: .88em;
line-height: 1em;
color: #ff0000;
text-decoration: none;
transition: all ease .4s;
border-bottom: solid 2px transparent; 
padding: .4em 0 0 0; 
text-transform: uppercase;
font-weight: 800;
}
.nav a:hover{
color: #fff;
border-bottom: solid 3px #000;
}
nav .current-menu-item a{
border-bottom: solid 3px #fff;
}
nav .current-lang a{
color: #fff!important;
}

/* Header Homepage */
.home-header-wrapper{
position: relative;
max-width: 1440px;
}
.header-image{
position: relative;
}
.header-widgets{
position: absolute;
right: 0;
bottom: 0;
padding: 1em;
background: rgba(255, 255, 255, .9);
}
main{
max-width: 1440px;
margin: 0em auto;
padding: 0 1em; 
}
/* Footer */
footer{
max-width: 1440px;
margin: 8em auto 0 auto;
padding: 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.6em;
font-size: .88em;
}
footer .menu ul,
footer .menu-footer-nav-container ul,
footer .menu-footer-nav-deutsch ul{
list-style-type: none;
}
footer .menu ul a::before,
footer .menu-footer-nav-container ul a::before{
content: '+\00a0';
}
footer .menu ul a,
footer .menu ul a:visited,
footer .menu-footer-nav-container ul a,
footer .menu-footer-nav-container ul a:visited{
color: #ff0000;
padding: .2em 0; 
text-decoration: none;
display: block;
}
footer .menu ul a:hover,
footer .menu ul a:focus,
footer .menu ul a:active,
footer .menu-footer-nav-container ul a:hover,
footer .menu-footer-nav-container ul a:focus,
footer .menu-footer-nav-container ul a:active{
color: #fff;
}
#menu-footer-nav-deutsch,
#menu-footer-nav-english{
list-style: none;
}
#menu-footer-nav-deutsch a:before,
#menu-footer-nav-english a:before{
content: "+\00a0";
}
#menu-footer-nav-deutsch a,
#menu-footer-nav-deutsch a:visited{
color: #ff0000;
padding: .2em 0; 
text-decoration: none;
display: block;
}

#menu-footer-nav-deutsch a:hover,
#menu-footer-nav-deutsch a:focus,
#menu-footer-nav-deutsch a:active{
color: #fff;
}

#menu-footer-nav-english a,
#menu-footer-nav-english a:visited{
color: #ff0000;
padding: .2em 0; 
text-decoration: none;
display: block;
}

#menu-footer-nav-english a:hover,
#menu-footer-nav-english a:focus,
#menu-footer-nav-english a:active{
color: #fff;
}


footer div:last-of-type{
flex-basis: 100%;
margin: 2em 0 0 0;
border-top: solid 1px #999;
}
footer div:last-of-type p{
padding: 1em 0 0 0; 
margin: 0;
}
a.mail,
a.mail:visited{
font-weight:800;
font-size:1.4em;
padding: .2em .2em .2em 2em;
background-image: url("images/pp-mail.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.2em;
display: block;
text-decoration: none;
color: #ff0000; 
transition: all ease .4s;
}
a.mail:hover,
a.mail:focus,
a.mail:active{
color: #fff;
filter: saturate(0%) brightness(900%);
background-color: transparent;
text-decoration: none;
}
a.phone,
a.phone:visited{
font-weight:800;
font-size:1.4em;
padding: .2em .2em .2em 2em;
background-image: url("images/pp-phone.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.2em;
display: block;
text-decoration: none;
color: #ff0000;
transition: all ease .4s;
}
a.phone:hover,
a.phone:focus,
a.phone:active{
color: #fff;
filter: saturate(0%) brightness(900%);
background-color: transparent;
text-decoration: none;
}
/* Social Media */
.social{
transition: all ease .4s;
}
a.facebook,
a.facebook:visited{
background-image:url("images/facebook-logo.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.6em;
padding:.2em 0 .2em 2.2em;
color: #fff;
text-decoration: none;
display: block;
margin: 0 0 .4em 0;
border-bottom: solid 2px transparent;
transition: all ease .4s; 
}
a.facebook:hover,
a.facebook:focus,
a.facebook:active{
filter: grayscale(100%);
border-bottom: solid 2px #000;
}
a.instagram,
a.instagram:visited{
background-image:url("images/instagram-logo.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.6em;
padding:.2em 0 .2em 2.2em;
color: #fff;
text-decoration: none;
display: block;
margin: 0 0 .4em 0;
border-bottom: solid 2px transparent;
transition: all ease .4s;  
}
a.instagram:hover,
a.instagram:focus,
a.instagram:active{
filter: grayscale(100%);
border-bottom: solid 2px #000; 
}
a.xing,
a.xing:visited{
background-image:url("images/xing-logo.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.6em;
padding:.2em 0 .2em 2.2em;
color: #fff;
text-decoration: none;
display: block;
margin: 0 0 .4em 0;
border-bottom: solid 2px transparent; 
transition: all ease .4s; 
}
a.xing:hover,
a.xing:focus,
a.xing:active{
filter: grayscale(100%);
border-bottom: solid 2px #000; 
}
a.youtube,
a.youtube:visited{
background-image:url("images/youtube-logo.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.6em;
padding:.2em 0 .2em 2.2em;
color: #fff;
text-decoration: none;
display: block;
margin: 0 0 .4em 0;
border-bottom: solid 2px transparent;  
transition: all ease .4s; 
}
a.youtube:hover,
a.youtube:focus,
a.youtube:active{
filter: grayscale(100%);
border-bottom: solid 2px #000; 
}
a.linkedin,
a.linkedin:visited{
background-image:url("images/linkedin-logo.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 1.6em;
padding:.2em 0 .2em 2.2em;
color: #fff;
text-decoration: none;
display: block;
margin: 0 0 .4em 0;
border-bottom: solid 2px transparent;  
transition: all ease .4s; 
}
a.linkedin:hover,
a.linkedin:focus,
a.linkedin:active{
filter: grayscale(100%);
border-bottom: solid 2px #000;
}
/* To Top*/ 
.scroll-top,
.scroll-top:visited{
position:fixed;
bottom:1.6em;
right:1.6em;
display:none;
border: none;
color: #fff;
background: #ff0000;
font-size: 1.6em;
width: 2em;
height: 2em;
border-radius: 100%;
transition: all ease .4s;
cursor: pointer;
}
.scroll-top:hover,
.scroll-top:focus,
.scroll-top:active{
color: #000;
background: #ff000!important;
filter: none!important;
}
/* Yoast Breadcrumbs */
#breadcrumbs{
font-size: .8em;
line-height: 1.2em;
margin: 1em 0;
}
#breadcrumbs a,
#breadcrumbs a:visited{
color: #ff000;
}
#breadcrumbs a:hover,
#breadcrumbs a:focus,
#breadcrumbs a:active{
color: #000;
background: transparent;
text-decoration: underline;
}
#breadcrumbs strong{
font-weight: 600;
font-style: normal; 
}
@media (prefers-reduced-motion: reduce){
*{scroll-behavior:auto !important; transition:none !important;}
}
.burger{display:none;}
/* Responsiveness */
@media(max-width:820px){
body{
font-size: 18px;
line-height: 26px;
}
.header{
flex-wrap: wrap;
}
.custom-logo-link{
flex-basis: 60%;
transition: all ease .4s;
}
.header.scrolled .custom-logo-link img{
width: 80%;
margin: .4em 0 0 0;
} 
.nav ul{
flex-direction:column;
}
.nav{
flex-basis: 100%;
display:none;
}
 .burger{
display:block;
width: 40px;
border: none;
background: transparent;
}
.burger span {
width: 40px;
height: 4px;
display: block;
background-color: #ff0000;
margin: 8px auto;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* oberer Balken */
.burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(12px) rotate(45deg);
}
/* mittlerer Balken */
.burger[aria-expanded="true"] span:nth-child(2) {
 opacity: 0;
}
/* unterer Balken */
.burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-12px) rotate(-45deg);
} 
.nav{
padding: 1em 0;
 }
.nav ul ul {
position: static;
display: block !important;
}
.scroll-top,
.scroll-top:visited {
font-size: 1.4em;
width: 1.6em;
height:1.6em;
bottom:1em;
right:1em;
}
footer div{
flex-basis: 100%;
}
.is-style-small-20{
max-width: 60%!important;
}
.is-style-small-40{
max-width: 80%!important;
}
.is-style-small-60{
max-width: 100%!important;
}	
}
/* Languages */
.lang-item{
font-size: .6em;
font-weight: 300;
}
/* Gutenberg Blockstyles */
.is-style-btn-large a{
display: block;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
color: #ff0000;
background: #000;
padding:.4em .2em .1em .2em;
border-radius: 2em;
border: solid 2px #ff0000;
font-size: 1.2em;
line-height: 1.2em;	
text-align: center;
margin: 1em 0;
}
.is-style-btn-small a,
.is-style-btn-small a:visited{
display: inline-block;
font-weight: 600;
text-decoration: none;
color: #fff;
background: #ff0000;
border-radius: 1em;
padding: .1em .6em 0 .6em;
border: solid 2px #ff0000;
}
.is-style-btn-small a:hover,
.is-style-btn-small a:focus,
.is-style-btn-small a:active{
background: #000;
border-radius: 0em;	
}
.is-style-small-20{
max-width: 20%;
margin: 0 1em 1em 0;
}
.is-style-small-40{
max-width: 40%;
margin: 0 1em 1em 0;
}
.is-style-small-60{
max-width: 60%;
margin: 0 1em 1em 0;
}

/* Custom Blocks */
.dates{
margin: 0 0 2em 0;
border-bottom: dotted 2px #ff0000;
padding: 0 0 1em 0;	
}
.dates p:nth-of-type(1){
font-weight: 600;
font-size:1.6em;
color: #fff;
margin:.2em 0;
}
.time{
font-size:.48em;
color: #fff;
background: #ff0000;
padding: .2em .2em 0 .2em;
}
.time:empty{
display: none;
}
.time:after{
content:" Uhr";
}
.dates p:nth-of-type(2){
font-weight: 600;
font-size: 1.4em;
color: #fff;
margin: .2em 0;
}
.dates p:nth-of-type(3){
font-weight: 600;
font-size: 1.4em;
color: #fff;
margin: .2em 0;
}
.dates p:nth-of-type(4){
font-weight: 600;
font-size: 1.2em;
color: #fff;
margin: .2em 0;
}
.dates p:nth-of-type(5){
margin: .2em 0;
}
a.more:empty {
display: none;
}
/* WP Overwrite */
.wp-block-embed{
margin: 1em 0 2em 0;
}
/* Open Complianz Banner */
.cmplz-show-banner{
position: fixed;
left: 1em;
bottom: 1em;
z-index: 999999;
width: 2.6em;
height: 2.6em;
border-radius: 100%;
background-color: #cc0000;
cursor: pointer;
background-image: url("images/complianz-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);	
}
.cmplz-manage-consent{
display:none;
}