/*

Appearance
Fonts, Type, Buttons, colors

*/

@font-face{
    font-family:"Die Grotesk A";
    font-style:normal;
    font-weight:200;
    font-display:block;
    src:url('https://bennetmeyer.com/wp-content/uploads/fonts/die-grotesk-a-thin.woff2') format('woff2');
}
@font-face{
    font-family:"Die Grotesk A";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url('https://bennetmeyer.com/wp-content/uploads/fonts/die-grotesk-a-regular.woff2') format('woff2');
}

:root{
    font-size: 16px;
    
    /* will be overwritten by colortheme_#.css */
    --fontcolor : rgba(0,0,0, 1.00);
    --fontcolor_invert : rgba(255,255,255, 1.00);
    --fontcolor_soft : rgba(170,170,170,1.00);
    
    --bg_color : rgba(255,255,255,1.00);
    --bg_color_soft : rgba(190,190,190,1.00);
    --bg_color_alpha : rgba(210,210,210, .85);
    
    
    --bg_color_invert : rgba(0,0,0,1.00);
    --bg_color_invert_soft : rgba(100,100,100,1.00);
    --bg_color_invert_alpha : rgb( 0,0,0, 0.85);
}


h1 a, h2 a, h3 a, h4 a, h5 a, p a{
   text-decoration: underline;  
}   

.nav-extra-content h5 a{
    text-decoration: underline;
}
.nav-extra-content h5 a:hover{
    text-decoration: none;
}

a, .no-decoration a,  .nav-extra-content .no-decoration a,
.feed h3 a, .no-decoration { text-decoration: none; }

body {
    background-color: var(--bg_color);
    color: var(--fontcolor);
}
/*----------------------------------------------- Typo */
/*----------------------------------------------- */
/*----------------------------------------------- */

/*    Spacings   */
h1, h2, h3, h4, h5, h6, p{ margin-block-start : 0 !important; margin-block-end: 0 !important;}
h1, h2, h3, h4, p, :root :where(.wp-block-list), pre.wp-block-verse,
.full-paddingbottom { padding-bottom: 1.0rem !important; }
h4, h5, h6, .half-paddingbottom {padding-bottom: .5rem !important; }
.third-paddingbottom {padding-bottom: .25rem !important; }
:root :where(.wp-block-list li) { margin-top: 0 !important; padding-bottom: .25rem; }
:root :where(.wp-block-list){ padding-inline-start: 1rem; }

.full-paddingtop{padding-top: 1rem;}
.half-paddingtop{padding-top: .5rem;}
.third-paddingtop{padding-top: .25rem;}

.full-paddingright{padding-right: 1rem;}
.half-paddingright{padding-right: .5rem;}
.third-paddingright{padding-right: .25rem;}

ul { list-style: none; }
ul li::marker { content: "\2013\00A0\00A0"; }



/*    Zeilenbreite      */
p, h1, h4, h5, h6, 
:root :where(.wp-block-list li),
:root :where(.wp-block-quote){
    max-width: 65ch !important;
}
h2, h3{
    max-width: 45ch !important;
}
.has-text-align-right {
    text-align: right;
    margin-left:auto !important;
}
.has-text-align-center {
    text-align: center;
    display: block;
    margin: 0 auto;
}
.header-small::after {
  content: "";
  display: block;
  clear: both;
}

/*    Font-Sizes etc.   */
p, li, pre.wp-block-verse{
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: normal !important;
}
code{
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--die-grotesk-a);
    line-height: 1.5rem;
}
h1{
    font-size: 3rem !important;
    line-height: 3.25rem; 
}
h2{
    font-size: 1.8rem !important;
    line-height: 2.0rem; 
}
h3{
    font-size: 1.3rem !important;
    line-height: 1.5rem !important; 
}
h4{
    font-size: 0.8rem;
    line-height: .9rem; 
}
h5{
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: 0;
    font-size: .7rem;
    line-height: .85rem;
}
h6{
    font-size: .7rem;
    line-height: .85rem; 
    letter-spacing: 0px !important;
    text-transform: uppercase;
    font-weight: normal !important;
}
pre.wp-block-verse{
    overflow: inherit;
    font-weight: 200 !important;
}
:root :where(.wp-block-quote) {
    border-color: currentColor;
    border-width: 0 0 0 1px;
    border-style: solid;
    font-size: inherit !important;
    font-weight: inherit !important;;
    margin: 0 0 1rem;
    padding: .5rem 0 .33rem 1rem;
}

/*    Colors   */

p, pre, h1, h2, h3, h4, h5, h6{
    color: var(--fontcolor);
}
::selection, code {
  background: var(--fontcolor);
  color: var(--bg_color);
}
code::selection{
  background: var(--bg_color_soft);
  color: var(--fontcolor); 
}
.signal {
    color:var(--fontcolor_soft);
    text-decoration:none;
}
a.signal:is(:hover, :active){
    color:var(--fontcolor);
}
.text-background{
	background-color: var(--bg_color);
}
#loading-screen :is(p, pre, h1, h2, h3, h4, h5, h6){
    color: var(--fontcolor_soft);
}
#loading-screen :is(p, pre, h1, h2, h3, h4, h5, h6) span.highlight{
    color: var(--fontcolor);
}
#loading-screen {
    background-color: var(--bg_color) ;
}
#cookie-notice{
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.25rem;
    text-align: center;
    font-weight: 400;
    font-family: var(--wp--preset--font-family--die-grotesk-a);
}

/*    Links   */

/* ---- Animations */
p, h1, h2, h3, h4, h5, h6, li a, li a span{
    color:var(--fontcolor);
}
.popup-dark :is(p, h1, h2, h3, h4, h5, h6, li a, li a span) {
    color: var(--bg_color);
}
.popup-dark :is(.signal) {color: var(--fontcolor_invert);}
.popup-dark :is(.signal):is(:hover, :active) {color: var(--fontcolor_soft);}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, li a, p a, 
li a:is(:hover, :active) span, li a:is(:hover, :active),
:root :where(.wp-element-button, .wp-block-button__link){
    transition: color .5s ease;
}
li a{ text-decoration: underline !important; }
li a:hover, ul.wp-block-navigation__container li a { text-decoration: none !important; }
h5 a, h6 a, li a{
    text-decoration: underline;
    text-decoration-thickness: 1px !important;
}
p a:is(:hover, :active), h1 a:is(:hover, :active), h2 a:is(:hover, :active), h3 a:is(:hover, :active), h4 a:is(:hover, :active), 
h5 a:is(:hover, :active), h6 a:is(:hover, :active),  li a:is(:hover, :active), li a:is(:hover, :active) span{
    color: var(--fontcolor_soft);
}
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1rem;
}

/*    Alternatives   */

.nav-extra-content h6,
.about-text h6, .about-text .text h6{ 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}
.skills p{
    padding-bottom: 0 !important;
} 
.wp-block-cover__inner-container h3{
    padding-bottom: 0 !important;
}
:where(.wp-block-cover__inner-container .wp-block-columns) {
    margin-bottom: 0 !important;
}
.project-caption h3, .project-caption h5,
.more-projects p, .more-projects h4{
    padding: 0 !important;
}
.project-caption p{ line-height:1rem; }
.more-projects p a, .more-projects h4 a, .footer li a{
    text-decoration: none !important;
}
.fontcolor-invert{
    color: var(--fontcolor_invert);
}

/*    Graphic Elements   */

:root :where(.wp-block-separator){
    border-color: var(--fontcolor);
    border-width: .1px;
    color: var(--fontcolor);
    margin: 0 0 1rem 0;
}

svg.footer-logo{
    fill:var(--fontcolor);
}

@media (max-width:782px){
    h3{
        font-size: 1.1rem !important;
        line-height:1.3rem !important; 
    }
    h5{
        font-size: .65rem;
        line-height: .75rem; 
    }
    .single-title h3{
        font-size: 1.33rem;
        line-height: 1.5rem;
    }
    .mr-container .header-small{
        padding-top:var(--my--global--gap--size);
    }
    .header-small, .more-projects p, .more-projects h4{
        padding-left: calc(var(--my--global--gap--size)*1) !important;
        padding-right:calc(var(--my--global--gap--size)*1) !important;
    }
    .arrow-down{
        max-width: 2ch;
    }
    .arrow-down h3{
        text-align: right;
    }
    .slideshow:not(.popup-container .slideshow){
        background-color:var(--bg_color_soft);
    }
}

/*----------------------------------------------- Menus */
/*----------------------------------------------- */
/*----------------------------------------------- */

.wp-block-navigation__responsive-container-content li a{
    font-weight: normal;
    font-size:1.5em;
    line-height: 2.2rem;
    letter-spacing: 0 !important;
    color:var(--fontcolor) !important;
}
.wp-block-navigation__responsive-container-content li a:is(:hover, :active) {
    text-decoration:none;
    color:var(--fontcolor_soft) !important;
}
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
    background-color:var(--bg_color) !important;
}


@media (max-width:782px){
  .nav-extra-content h5{ 
    font-size: .85rem;
    line-height: 1.1rem;
    }  
}

/*----------------------------------------------- Buttons */
/*----------------------------------------------- */
/*----------------------------------------------- */

button, .wp-block-button__link, .wp-element-button {
  user-select: none;
}

/*reset
:root :where(.wp-block-button .wp-block-button__link){
    padding:0;    
}
*/
/*
:root :where(.wp-element-button, .wp-block-button__link){
    background:none;
    padding: .25rem 1.0rem;
    display: block;
    border-radius: 9999px;
    border: var(--fontcolor) 1px solid !important;
    color: var(--fontcolor) !important;  
}
*/

:root :where(.wp-element-button, .wp-block-button__link){
    background:var(--bg_color_invert);
    padding: .25rem 1.0rem;
    display: block;
    border-radius: 9999px;
    /*border: none !important; */
    color: var(--bg_color);  
}

.wp-block-buttons.has-custom-font-size .wp-block-button__link{
    font-size: 0.8rem;
    line-height: 1.0rem;
}

.nav-button .wp-block-navigation__responsive-container-open, 
.wp-block-navigation__responsive-container-close,
.wp-block-button__link,
div.btn-nxt a, div.btn-prv a, div.btn-down a,
.pop-up-close a,
.do-overlay-light a, .do-overlay-dark a,
.centered_button,
:where(input[type="submit"]),
#cookie-notice .cn-buttons-container .cn-button{
    background:var(--bg_color_invert);
    padding: 0rem 1.5rem;
    display: block;
    border-radius: 9999px;
    /*border: none !important;*/
    line-height: 1.0rem;
    color: var(--fontcolor_invert);
    transition: color .5s ease;
}
#cookie-notice .cn-buttons-container,
#cookie-notice .cn-text-container{
    display:flex;
}
#cookie-notice .cn-buttons-container .cn-button{
    font-family: var(--wp--preset--font-family--die-grotesk-a)!important;
    letter-spacing: 0 !important;
    background-color: var(--bg_color) !important;
    color: var(--fontcolor) !important;
    transition: color 1s ease, background-color 1s ease;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
#cookie-notice .cn-buttons-container .cn-button:is(:hover, :active) {
    color: var(--fontcolor_soft) !important;
    background-color: var(--bg_color_soft) !important;
}
#cookie-notice .cn-close-icon:after,
#cookie-notice .cn-close-icon:before
{
    background-color: var(--fontcolor_invert) !important;
    width:1px;
    height:.65rem;
    top:0.2rem;
}
#cookie-notice .cn-close-icon{
    border:var(--fontcolor_invert) 1px solid;
    padding: .5rem 2rem !important;
    border-radius: 999px; 
    transition: border 1s ease;
}
#cookie-notice .cn-close-icon:is(:hover, :active){
    border:var(--fontcolor_soft) 1px solid;
}
.wp-block-button__link{
    padding-bottom: .15rem;
    padding-top: .15rem;
}
.nav-floating.nav-button .wp-block-buttons{
    background-color: var(--bg_color_invert);
}
:root :where(.wp-element-button, .wp-block-button__link) {
    color: var(--fontcolor_invert);
}
:root :where(.wp-element-button, .wp-block-button__link):is(:hover, :active),
:where(input[type="submit"]):is(:hover, :active) 
{
    color: var(--bg_color_invert_soft);
    cursor: pointer;
}
:where(input[type="submit"]){
    color: var(--fontcolor_invert);
    appearance: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    padding-block: .075rem;
}
:where(input[type="password"]){
    background-color:var(--bg_color); 
    border: var(--fontcolor) 1px solid;
    padding: .075rem;
}

/*overwriting the default above*/
.pop-up-close a{ line-height: 0;}

.popup-dark .pop-up-close a,
.popup-dark .pop-up-close a svg, 
.popup-dark div.btn-nxt a, 
.popup-dark div.btn-prv a{
    background:var(--bg_color);
    color: var(--fontcolor);
    fill: var(--fontcolor);
}
.popup-dark .pop-up-close a:is(:hover, :active),
.popup-dark .pop-up-close a:is(:hover, :active) svg,
.popup-dark div.btn-nxt a:is(:hover, :active), 
.popup-dark div.btn-prv a:is(:hover, :active){
    color: var(--fontcolor_soft);
    fill: var(--fontcolor_soft);
}
div.btn-nxt a, div.btn-prv a{
    padding: 0rem 3.0rem;
}
div.btn-down a{
    padding: 1.5rem 0.25rem;
}
.btn-highlight a{
    /*border: var(--fontcolor_invert) .1px solid;*/
     box-shadow: 0 0 20px rgba(255,255,255,0.33);
}

.pseudo-click {
    background-color: var(--bg_color_invert_soft);
    animation: buttonScale 0.8s ease-out forwards;
    border-radius: 9999px;
}

.pseudo-click a{
    opacity: 1;
    animation: fadeIn 0.66s ease-out forwards;
    border-radius: 9999px;
}
.skills a.wp-block-button__link:is(:hover, :active){
    color: var(--fontcolor_invert);
    cursor: auto;
}

@keyframes fadeIn {
  from { opacity: 0.0; }
  to { opacity: 1; }
}
@keyframes buttonScale {
  0% { transform: scale(1); }
  10% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
.nav-button .wp-block-navigation__responsive-container-open svg, 
.wp-block-navigation__responsive-container-close svg, 
.pop-up-close a svg{
    fill:var(--fontcolor_invert);
    width:1rem; height:auto;
    transition: fill .5s ease;
}
.nav-button .wp-block-navigation__responsive-container-open:is(:hover, :active) svg, 
.wp-block-navigation__responsive-container-close:is(:hover, :active) svg,
.pop-up-close a:is(:hover, :active) svg{
    fill:var(--bg_color_invert_soft); 
}
.nav-floating.nav-button .wp-block-button__link{
    background-color: transparent;
    border-radius:0;
    padding: 0 0.15rem !important;
}

/* load more work */
.centered_button{
    background-color: var(--bg_color_invert);
    /*border: var(--fontcolor) 1px solid;*/
    border: none;
    color: var(--fontcolor_invert) !important;
    display: block;
    margin: 7rem auto 0 auto;
    font-weight: 200;
    font-size: 0.75rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.centered_button.button-disabled{
    /*border-color: var(--fontcolor_soft);*/
    background-color: var(--bg_color) !important;
    color: var(--fontcolor_soft) !important;
    font-size: 1rem;
}
.loading_state{
    border-color:  white;
    color: var(--fontcolor_invert) !important;
    /*background: linear-gradient(-90deg, #cccccc, #666666, #333333);*/
    background: linear-gradient(-90deg, var(--bg_color_invert), var(--bg_color), var(--bg_color_invert));
    background-size: 600%;
    animation: gradientanim 3s linear infinite;
}


@keyframes gradientanim {
    0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.overlay-button a{
    background-color: var(--bg_color);
    border: none;
    color: var(--fontcolor);
    font-weight: normal;
    font-size:0.85rem;
}
.overlay-button a svg{ 
    fill:var(--fontcolor);
    width: .66rem; height: .66rem;
}
.do-overlay-dark a{
    background-color: var(--bg_color_invert);
    color: var(--fontcolor_invert);
}
.do-overlay-dark a svg{  
    fill:var(--fontcolor_invert); 
}

/* -------------------------------------------Layout */
.ratio-container{ background-color: var(--bg_color_soft); }
.ratio-container.load-complete, .ratio-container.media-load-complete { background-color: transparent; }
.entry-content .figure-video-load .ratio-container.load-complete, 
.entry-content .figure-video-load .ratio-container.media-load-complete
{ background-color: var(--bg_color_soft); }

.popup-container .figure-video-load .ratio-container.load-complete, 
.popup-container .figure-video-load .ratio-container.media-load-complete
{ background-color: var(--bg_color); }

.popup-container .popup-dark .figure-video-load .ratio-container.load-complete, 
.popup-container .popup-dark .figure-video-load .ratio-container.media-load-complete
{ background-color: var(--bg_color_invert); }

.single-page .mr-container,
.popup-window.popup-dark .mr-container,
.popup-window.popup-light .mr-container{
    background: transparent url('../img/cross.svg') repeat 0 0 / 6px;
}
.popup-window.popup-dark .mr-container{
    background: transparent url('../img/cross_medium.svg') repeat 0 0 / 6px;
}
.mr-container{
    background-color: var(--bg_color);
}
.popup-window.popup-light{
    background:var(--bg_color_alpha);
}
.popup-window.popup-dark{
    background:var(--bg_color_invert_alpha);
}
.wp-block-cover{
    background-color: var(--bg_color_invert);
}

.popup-window.popup-light .slideshow-content figure
/*, .popup-window.popup-light .slideshow-content .slideshow-text-container*/
{ background-color: var(--bg_color); }

.popup-window.popup-dark .slideshow-content figure
/*, .popup-window.popup-dark .slideshow-content .slideshow-text-container*/
{ background-color: var(--bg_color_invert); }

@media (max-width:782px){
    .popup-window.popup-light .slideshow-content figure,
    .popup-window.popup-dark .slideshow-content figure
    { background-color: transparent; }
}
/* --------------------- Cookie Notice */
#cookie-notice{ 
    background-color: var(--bg_color_invert) !important;
    border-radius: 1rem;
}
.cookie-notice-container{}
/* --------------------- Vimeo & Youtube Einbettung */

.popup-container .wp-block-embed__wrapper{
    background-color:var(--bg_color);
}
.popup-container .popup-dark .wp-block-embed__wrapper{
    background-color:var(--bg_color_invert);
}