@charset "UTF-8";
/* CSS Document */

/*
Theme Name: ALICIA – Theme
Author: MWIMMERDESIGN / Christoph Ehlers
Description: A sticky header theme.
Version: 1.0
*/

/* FONTS */
@font-face {
font-family: 'HubotSans-Light';
src: url('../woff2/hubotsans-light.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HubotSans-LightItalic';
src: url('../woff2/hubotsans-lightitalic.woff2') format('woff2');
font-weight: 300;
font-style: italic; 
font-display: swap;
}
@font-face{ 
font-family: 'HubotSans-SemiBold';
src: url('../woff2/hubotsans-semibold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HubotSans-SemiBoldItalic';
src: url('../woff2/hubotsans-semibolditalic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HubotSans-Bold';
src: url('../woff2/hubotsans-bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HubotSans-BoldItalic';
src: url('../woff2/hubotsans-bolditalic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}

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

body{
font-family: 'HubotSans-Light', sans-serif; 
font-weight: normal;
font-style: normal;
font-size: 22px;
line-height: 32px;
color: #000;
width: 100%;
height: auto;
background-color: #fff;
}
.page{
background-image: url("../svg/red-triangle.svg");	
background-repeat: no-repeat;
background-position: right 12em;
background-attachment: fixed;
background-size:10%;	
}
h1{
font-family: 'HubotSans-Light', sans-serif; 
font-weight: normal;
font-style: normal;
font-size: 3em;
line-height: 1.2em;
margin: 1em 0 .6em 0;
}
h2{
font-family: 'HubotSans-SemiBold';
font-style: normal;
font-weight: normal; 
font-size: 2.1em;
line-height: 1.2em;
margin: 2em 0 1em 0;
}
h3{
font-family: 'HubotSans-SemiBold';
font-style: normal;
font-weight: normal;
font-size: 1.6em;
line-height: 1.2em;
margin: 1.2em 0 .6em 0;
}
h4{
font-family: 'HubotSans-SemiBold';
font-weight: normal;
font-style: normal;
font-size: 1.2em;
line-height: 1em;
text-transform: uppercase;
margin: 1em 0 .4em 0;
}
h5{
font-family: 'HubotSans-SemiBold';
font-weight: normal;
font-style: normal;
font-size: 1.2em;
line-height: 1em;
margin: 1em 0 .4em 0;
}
h6{
font-family: 'HubotSans-SemiBold';
font-weight: normal;
font-style: normal;
font-size: 1em;
line-height: 1em;
margin: 1em 0 .4em 0;
color: #e84f35;
}
p{
margin: .6em 0 1.2em 0;
}
sub, sup{
line-height: 1em;
font-size: .8em;
margin: 0 0 0 .1em;
}
blockquote{
padding: 1em  4em;
margin: 1em 0 2em 0; 
}
blockquote p{
font-size: 2em;
line-height: 1.2em;
color: #e84f35;
margin: .4em 0;
}
blockquote p::before{
content:"\2014 \00a0";
display: block;
line-height: 1em;
}
cite{
font-size: .8em;
line-height: 1.2em;
margin: 0;
color: #e84f35;
font-weight: bold;
font-style: normal;
}
main ul{
list-style: "\2014\2003";
margin: 0 0 0 .6em;	
}
main ul li{
margin:0 0 .6em 1em;
}
main ol{
list-style-position: outside;
}
main ol li{
margin:0 0 .6em 1.2em;
}
strong, b {
font-family: 'HubotSans-SemiBold';
font-style: normal;
font-weight: normal; 
}
p i, p em{
font-family: 'HubotSans-LightItalic';	
font-weight: normal;
font-style: italic;
}
img{
width: 100%;
height: auto;
margin: 0;
}
figcaption{
font-size: .8em;
line-height: 1em;
margin: .6em 0;
text-align: center
}
figcaption::before{
content: "\2191\2003 Fig.: \2003";
color:#e84f35;
}
main h1{
padding: 0 20%;
}
main p a,
main p a:visited{
color: #e84f35;
text-decoration: underline dotted;
}
main p a:hover,
main p a:focus,
main p a:active{
color: #000;
text-decoration: underline solid;
}
/* Layout */
header {
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.9);
color: white;
margin: 0 20%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
padding: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.logo{
flex-basis: 18%;
height: auto;
margin: 0;
min-width: 8em;
}
.logo:hover img{
filter: saturate(0) grayscale(100%);
transition: all ease .6s; 
}
.nav-menu {
display: flex;
list-style: none;
align-content: flex-end;
margin: 2em 1em 0 0;
font-size: .88em;
}
.nav-menu li {
margin: 0 0 0 1em;
}
.nav-menu a,
.nav-menu a:visited {
color: #e84f35;
text-decoration: none;
padding: .2em .2em .1em .2em;
transition: all ease .4s;  
}
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a:active{
color: #fff; 
background-color: #e84f35;
}
li.current-menu-item a{
color: #fff!important; 
background-color: #e84f35;
}
#menu-footer-nav li.current-menu-item a{
color: #000!important; 
background-color:none;
}
.burger-menu {
display: none;
cursor: pointer;
margin: 0 0 4em 0; 
}
.burger-menu div {
width: 25px;
height: 3px;
background: #000;
margin: 5px;
}
main{
margin: 4em auto;
min-height: 60vh;
}
main::after{
content: "\00a0";
display: block;
min-height: 4em;
background-image: url("../svg/stripes-blue-right.svg");
background-repeat: no-repeat;
background-position: right center;
background-size:40vw;
}
.news-post h1{
 padding: 0;
}
footer{
margin: 6em auto 0 auto;
padding: 2em 20% 0 20%;
display: flex;
column-gap: 1.4em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
flex-wrap: wrap;
justify-content: space-between;
background-color: rgba(255, 255, 255, 0.8);
font-size: .8em;
line-height: 1.4em;
}
footer p{
margin: 0 0 .4em 0;
}
footer a,
footer a:visited{
color: #e84f35;
text-decoration: none;
}
footer a:hover,
footer a:focus,
footer a:active {
color: #0089b6;
text-decoration: none;
}
footer div{
flex-basis: 27%;
}
footer nav{
flex-basis: 12%;
}
footer nav ul{
list-style: none;
}
footer nav ul li a::before{
content:"\2192\00a0";
}
footer nav ul li.current-menu-item a{
color: #000!important;
background-color: transparent;
}
.footer-date{
flex-basis: 100%;
font-size: .8em;
margin: 2em 0 0 0;
padding: 2em 0;
color: #0089b6;
}
#scrollToTop {
display: none;
position: fixed;
bottom: 1em;
right: 1em;
background: #e84f35;
color: #fff;
border: none;
font-size: 1.4em;
line-height: .7em;
height: 2em;
width: 2em;
padding: .6em;
cursor: pointer;
border-radius: 100%;
}
/* Posts */
.news-post{
max-width: 980px;
margin: 0 auto;
}
.news-post h1{
color: #e84f35;
margin: .6em 0;
}
.wp-block-latest-posts__list li, .filtered-post{
padding: 1.4em;
background-color: #fff;
border-radius: 1em;
margin: 1em 0;
box-shadow: 0px 2px 4px #ccc;	
}
.wp-block-latest-posts__list li:hover{
padding: 1.4em;
background-color: #fff;
border-radius: 1em;
margin: 1em 0;
box-shadow: 0px 4px 8px #b4b4b4;	
}
a.wp-block-latest-posts__post-title,
a.wp-block-latest-posts__post-title:visited{
display: block;
font-size: 1.4em;
margin: .4em 0;
color: #e84f35;
text-decoration: none;
}
a.wp-block-latest-posts__post-title:hover,
a.wp-block-latest-posts__post-title:focus,
a.wp-block-latest-posts__post-title:active{
color: #000;
text-decoration: none;
}
a.wp-block-latest-posts__read-more,
a.wp-block-latest-posts__read-more:visited{
color: #e84f35;
text-decoration: none;
text-transform: uppercase;
font-size: .88em;
display: block;
}
a.wp-block-latest-posts__read-more::before{
content: "+ ";	
}
a.wp-block-latest-posts__read-more:hover,
a.wp-block-latest-posts__read-more:focus,
a.wp-block-latest-posts__read-more:active{
color: #000;
}
.history-back,
.history-back:visited {
font-family: 'HubotSans-SemiBold';
font-style: normal;
font-weight: normal; 
text-decoration: none;
color: #fff;
background: #e84f35;
padding: .4em 1em;
text-align: center;
font-size: 1em;
border-radius: 0;
transition: all ease .4s;
margin: 4em auto;
border: none;
display: block;
}
.history-back:hover,
.history-back:focus,
.history-back:active{
background-color: #000;
border-radius: 1em;
}

/* Individuelle Farbpalette */
.has-white-color {
color: #fff;
}
.has-black-color {
color: #000;
}
.has-orange-color {
color: #e84f35;
}
.has-blue-color {
color: #0089b6;
}
.has-grey-color {
color: #666666;
}

/* Gutenberg Blockstyles */
.is-style-intro{
font-size: 1.6em;
line-height: 1.4em;
}
p.is-style-btn-small{
margin: 2em 0;
}
.is-style-btn-small a,
.is-style-btn-small a:visited {
text-decoration: none;
color: #fff;
background: #e84f35;
padding: .6em 4em .6em 1em;
text-align: center;
border-radius: 0;
transition: all ease .4s;
font-weight: 600;
font-style: normal;
background-image: url("../svg/nav-arrow-white.svg");
background-repeat: no-repeat;
background-size: 1.6em;
background-position: 90% center;
}
.is-style-btn-small a:hover,
.is-style-btn-small a:focus,
.is-style-btn-small a:active{
background-color: #000;
text-decoration: none;	
color: #fff;	
border-radius: 4em;
}
.is-style-btn-large a,
.is-style-btn-large a:visited{
margin: 1em 0;
display: block;
padding: .4em 1.4em .4em .4em;
color: #fff;
background: #e84f35;
text-align: left;
text-decoration: none;
font-size: 1.4em;
line-height: 1.2em;
background-image: url("../svg/nav-arrow-white.svg");
background-position: calc(100% - .8em) center;
background-repeat: no-repeat;
background-size: 1.6em;
border-radius: 0;
transition: all ease .4s;
font-weight: bold;
font-style: normal;
}
.is-style-btn-large a:hover,
.is-style-btn-large a:focus,
.is-style-btn-large a:active{
background-color: #000;
padding: .4em 1.4em .4em .8em;	
color: #fff;
border-radius: 12em;
background-position: calc(100% - 1.2em) center;
text-decoration: none;	
}

.is-style-btn-download a,
.is-style-btn-download a:visited{
color: #e84f35;
background-image: url("../svg/download-icon.svg");
background-position: left center;
background-repeat: no-repeat;
background-size:1.2em;	
padding: .2em .2em 0 1.4em;
line-height: 2em;
}
.is-style-btn-download a:hover,
.is-style-btn-download a:focus,
.is-style-btn-download a:active{
filter: grayscale(100%) brightness(0%);
text-decoration: none;	
}
.is-style-large-p{
font-size: 1.2em;
line-height: 1.4em;
}
.is-style-x-large-p{
font-size: 1.4em;
line-height: 1.4em;
}
.is-style-indent{
padding: 4em 20%;
}
.is-style-indent-blue{
padding: 4em 20%;
background-color: #0089b6;
color: #fff;
mix-blend-mode: multiply;	
}
.is-style-indent-red{
padding: 4em 20%;
background-color: #e84f35;
mix-blend-mode: multiply;
}
.is-style-indent-rose{
padding: 4em 20%;
background-color: #faeeeb;
mix-blend-mode: multiply;
}

/* Responsive */
@media (max-width: 1920px) {
main{
margin: 4em 0;
min-height: 60vh;
}
main h1{
padding: 0 4rem;
}
header {
margin: 0 4rem;
}
.is-style-indent{
padding: 4em 4rem;
}
.is-style-indent-blue{
padding: 4em 4rem;
}
.is-style-indent-red{
padding: 4em 4rem;
} 
footer{
margin: 6em 4rem 0 4rem;
padding: 1em 0 0 0;
}
}

@media (max-width: 1600px) {
main{
margin: 4em 0;
min-height: 60vh;
}
main h1{
padding: 0 1rem;
}
header {
margin: 0 1rem;
}
.is-style-indent{
padding: 4em 1rem;
}
.is-style-indent-blue{
padding: 4em 1rem;
}
.is-style-indent-red{
padding: 4em 1rem;
}
footer{
margin: 6em 1rem 0 1rem;
} 
}
@media (max-width: 1080px) {
footer div{
flex-basis: 30%;
}
footer nav{
flex-basis: auto;
}
}

@media (max-width: 1020px) {
.news-post h1{
padding: 0 1rem;
font-size: 2em;
line-height: 1.2em;	
}
.news-post p{
padding: 0 1rem;
}
}

@media (max-width: 960px) {
body{
font-size: 18px;
line-height: 24px;
background-size:4%; 
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 8em;
left: 0;
width: 100%;
background: #fff;
}
.nav-menu li{
padding:.4em 1em;
}
.nav-menu.active {
display: flex;
padding: 0 0 2em 0; 
}
.burger-menu {
margin: 2em 0 0 0;
display: block;
}
main::after{
content: "\00a0";
display: block;
min-height: 4em;
background-image: url("../svg/stripes-blue-right.svg");
background-repeat: no-repeat;
background-position: right center;
background-size:88vw;
} 
footer nav, footer div{
flex-basis: 100%;
}
}