/*!
Theme Name: Brigitta Gabban
Theme URI: https://www.brigitta-gabban.ch/
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für BG
Version: 1.0.0
Tested up to: 8.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bg
Tags: custom-menu, translation-ready
*/

@charset "UTF-8";


  @font-face {
  font-family: 'Studio6';
  src: url('./fonts/Studio6-Regular.woff2') format('woff2'),
       url('./fonts/Studio6-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

  @font-face {
  font-family: 'Studio6';
  src: url('./fonts/Studio6-Italic.woff2') format('woff2'),
       url('./fonts/Studio6-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}



body{
--black:#000;
--white:#ffffff;
--lineheight:1.295em;
--fonts:0.885vw;
--h1:1.882em;
--space:1vw;
}

@media (max-width:768px){
	
}
 :root{

  }


/* Global */

body, html{
font-family: "Studio6", sans-serif;
font-weight: 400;
font-style: normal;
width:100vw;
text-rendering: geometricPrecision;
letter-spacing:-0.005em;
padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--fonts);line-height:var(--line-height);font-weight:400;background-color:var(--white);color: var(--black);white-space-collapsing:discard;line-height:var(--lineheight)}

a, a:link, a:hover, a:active, a:visited{text-decoration:none;transition:color .2s ease-in-out;color:var(--black);}

h1, h2, h3, h4, h5, h6{
 
margin-inline-start: 0px;
margin-block-end: 1em;
margin-block-start: 0rem;
font-weight:400;
}

p{
margin-inline-start: 0px;
margin-block-end: 0.5rem;
margin-block-start: 0.5rem;
}

h1{font-size:var(--h1);color:var(--black);line-height:1.15em}
h2{font-size:var(--h1);color:var(--black);line-height:1.15em}
img{max-width:100%}
section{display:block}
.container{width:100vw;text-align: center;position: relative;display: block;overflow:hidden;}
.container-inner{width:100%;text-align:left}
.one-fourth{float:left;display:inline-block;width:25%;min-height:1em;position:relative}
.one-half{float:left;display: inline-block;width:50%}
.three-fourth{float:left;display: inline-block;width:75%}
.grid-inner{width:calc(100% - (var(--space) * 2));margin-left:1em;margin-right:1em;position:relative;}

.cursor {
    position: fixed;
    z-index: 9999999;
    pointer-events: none;
   opacity:0;
    width: 3.5em;
    height: 1.5em;
    transform: translateX(-50%) translateY(-50%);
transition:transform .2s ease;
}

.cursor.active{opacity:1; cursor: none;}
.cursor.left{transform:translateX(-50%) translateY(-50%) rotate(180deg)}


/*header*/

.header{position:fixed;width:100%;top:0;z-index:3;background-color:var(--white)}
.header .container-inner{padding:1.5em 0;}
.logo{float:left;display:inline-block;}
.logo img{height:3.76em;}
.menu{float:right;display: inline-block;text-align:right;}
.menu a{font-size:var(--small);margin-left:10em;position: relative;display:inline-block;}
.menu a:after{content:"";background-color:var(--black);height:var(--borderwidth);width:0.7em;bottom:0em;left:0;transition:width .5s ease-in-out;position:absolute;}
.menu a:hover:after{width:100%;}
.main-content{margin-top:calc(8.5 * var(--space))}

/*start*/

.container-aktuelles{min-height:calc(100dvh - 8.5 * var(--space))}

.aktuelles-image{height:100%;position: relative;height:calc(100dvh - 8.5 * var(--space));cursor:none}
.aktuelles-image img{width:100%;height:100%;object-fit: cover;position: absolute;left:0;top:0;opacity:0;transition:opacity .3s ease;pointer-events:none}
.aktuelles-image img.cur{opacity:1;pointer-events:auto}
.aktuelles-mehr{cursor:pointer;position:relative;display:inline-block}
.mehr-hover{opacity:0;transition:opacity .2s ease;position:absolute;left:0;top:1.5em;width:100%;}
.aktuelles-mehr:hover .mehr-hover{opacity:1;transition:opacity .2s ease}
.mehr{opacity:1;transition:opacity .2s ease}
.aktuelles-mehr:hover .mehr{opacity:0;transition:opacity .2s ease}
.mehr{height:3em;margin-top:1.5em}
.menu-image{height:3em;display:inline-block;position:relative}
.menu-image-scribble{height:100%;opacity:1;}
.menu-image img{transition:opacity .1s ease}
.menu-image-scribble-active{height:100%;position:absolute;left:0;top:0;opacity:0;max-width:unset}
.menu-image:hover .menu-image-scribble{opacity:0}
.menu-image:hover .menu-image-scribble-active{opacity:1}
.aktuelles-single-text{position:absolute;transition:opacity .3s ease;pointer-events:none;opacity:0;left:0;top;}
.aktuelles-single-text.cur{opacity:1;pointer-events:auto;}
.aktuelles-image-pagination-arrow{width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;z-index:4}
.aktuelles-image-pagination-right{right:0;left:unset}
/*werke*/

.werke-single-container {
    width: 100%;
    display: inline-block;
    margin-bottom: 2.5em;
}
.werke-single h1{margin-top:2rem}
.werke-single-close {
    position: absolute;
    top: -1.7rem;
    right: 0;
    width: 2em;
}

.close-image{opacity:1;transition:opacity .3s ease}
.close-image-hover{opacity:0;transition:opacity .3s ease;width:100%;position:absolute;top:0;left:0}
.werke-single-close:hover .close-image{opacity:0}
.werke-single-close:hover .close-image-hover{opacity:1}
.werke-single-close a:hover{border:none !important}

.werke-mehr .mehr, .werke-mehr .mehr-hover{margin-top:0;top:0}
.werke-text{margin-bottom:5em}
.werke-pagination{position:absolute;bottom:4em;left:0;width:100%}
.werke-pagination img{height:1.5em;transform:translateY(.5em);cursor:pointer}
.werke-pagination-cur{margin-left:1em;}
.werke-pagination-max{margin-right:1em}
.werke-text a:before{content:"↗";margin-right:0.5em;}
.werke-text a:hover, .one-fourth a:hover{color:#4A1FFF;border-bottom:solid 1px #4A1FFF;}

.aktuelles-mehr a:hover, .logo a:hover{border-bottom: unset !important;}

.werke-image{height:100%;position: relative;height:calc(100dvh - 8.5 * var(--space));}
.werke-single-text{height:100%;position: relative;height:calc(100dvh - 8.5 * var(--space));}
.werke-single-text .grid-inner{height:100%;}
.werke-image img{width:100%;height:100%;object-fit: cover;position: absolute;left:0;top:0;opacity:0;transition:opacity .2s ease;pointer-events:none}
.werke-image img.cur{opacity:1;pointer-events:auto}
.arrow-image-hover{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity .3s ease;pointer-events:none}
.arrow:hover .arrow-image-hover{opacity:1}
.arrow{display:inline-block;position:relative}
.arrow-image{position:relative;left:0;top:0;width:auto;opacity:1;transition:opacity .3s ease}
.arrow:hover .arrow-image{opacity:0}

.werke-caption{bottom:2em;position:absolute;left:0;}
.werke-caption-text{opacity:0;transition:opacity .2s ease;position:absolute;left:0;bottom;0;pointer-events:none;bottom:0;width:12em}
.werke-caption-text.cur{opacity:1;pointer-events:auto}

/*werke single*/

.single-image img{object-fit:contain;object-position: right top}

/*archiv*/

.archiv .container-inner{display:grid;grid-template-columns: 24.5% 24.5% 24.5% 24.5%;gap:1em;margin-bottom:2em}
.archiv .one-fourth{width:100%}
.archiv-text{width:47.5%;float:right;display:inline-block;}
.archiv-image{width:47.5%;display: inline-block;aspect-ratio:1}
.archiv-image img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.archiv-text p{margin-block-start:0}

.footer a:hover, .archiv-text a:hover{color:#4A1FFF;border-bottom:solid 1px #4A1FFF;}

.archiv-filter{position:fixed;bottom:0;left:0;background-color:#4A1FFF;color:var(--white);padding: 0.5vw 1vw 0.2vw 1vw;}
.filter-single{margin-right:3em;display:inline-block;float:left;cursor:pointer;position:relative;}
.filter-single img{height:2.8em;filter:brightness(0) invert(100%)}
.filter-single .image{opacity:1;position:relative}
.filter-single .image_hover{opacity:0;position:absolute;left:0;top:0}
.filter-single.cur .image{opacity:0;}
.filter-single.cur .image_hover{opacity:1;}

.hidden{display:none;}

.filter-single:last-of-type{margin-right:0em}
.filter-single{position:relative}

/*about*/

.about .container-inner{display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:1em;margin-bottom:2em}
.about .one-fourth{width:100%}

.more-hidden{height:0;overflow: hidden;transition:height .5s ease-in-out}
.more{position:relative;margin-top:0em}
.more-mehr{cursor:pointer;opacity:1}
.more-less{position:absolute;left:0;opacity:0;cursor:pointer;top:0;pointer-events:none}

.about-mehr .mehr, .more-less .mehr{margin-top:0}

/*footer*/

.footer{background-color:var(--white);border-top:solid 1px var(--black);padding:1.5em 0;}
.footer-links{width:100%;text-align:right;}
.footer-links a{margin-left:2em;}
.footer-links a:before{content:"↗";margin-right:0.5em;}

.mobile-only{display:none}

@media (max-width:768px){
	
	
	body{
--black:#000;
--white:#ffffff;
--lineheight:1.295em;
--fonts:3.8vw;
--h1:1.5em;
--space:4vw;
--small:0.8em;
}
	
	
	.grid-inner {
  
    margin-left:var(--space);
    margin-right:var(--space);

}
	
	p {
    margin-inline-start: 0px;
    margin-block-end: 0.5em;
    margin-block-start: 0.5em;
}
	
.mobile-only{display:inherit}
.menu a {
    font-size: var(--small);
    margin-left: 5em;
    position: relative;
    display: inline-block;
	margin-top:-0.5em;
}
	
	.one-fourth, .three-fourth {
    float: left;
		width: 100%;}
	.logo{width:40%}
	.menu{width:100%}
	.header{height:5em;transition:all .5s ease;height:6.2em;overflow:hidden;}
	.header.active{height:100dvh;background-color:#4A1FFF}
	.header img{transition:filter .5s ease}
	.header.active img{filter:brightness(0) invert(100%)}
	.burger-menu, .burger-close{position:absolute;transition:opacity .5s ease;right:var(--space);top:2em;width:2.2em}
	.burger-close{opacity:0}
	.header.active .burger-menu{opacity:0}
	.header.active .burger-close{opacity:1}
	.werke-single-container h1{margin-top:0.5em;}
	
	.header-menu-inner{padding-top: 40dvh;
        transform: translateY(-25%);
        text-align: center;}
	.menu a{margin-left:0}
	
	.menu-image {
    height: 5em;
    margin: 1em 5em;
    display: inline-block;
    position: relative;
}
	
	.main-content {
    margin-top: calc(7.5 * var(--space));
}
	
	
	.aktuelles-image img{top:3em;height:calc(100% - 3em)}
	
	.aktuelles-image-pagination{position:absolute;top:0;left:var(--space);width:calc(100% - (var(--space) * 2));text-align:center}
	.aktuelles-image-pagination-left{float:left;
}
	.aktuelles-image-pagination-right{float:right;}
	.aktuelles-image-pagination-arrow{width:3em;position:relative;z-index:unset}
	
	.aktuelles-image-pagination-arrow img{position:relative;opacity:1;top:0;height:unset}
	.aktuelles-image-pagination-left img{transform:rotate(180deg)}
	.aktuelles-image{position:absolute;top:0;width:100%;height:80vw;left:0}
	
	.aktuelles-text{margin-top:calc(80vw + 1em);margin-bottom:2em;}
	
	
	.cursor.active{opacity:0;cursor:auto}
	
	.werke .image{display:none}
	
	
	.werke-single-container img.mehr {
    width: auto;
}
	
	.werke-single-container{margin-bottom:2em;}
	.werke-pagination-desktop{display:none}
	.werke-pagination img{width:3em;position:relative;height:unset;pointer-events:auto;transform:translateY(-0.05em)}
	.werke-pagination{width:100%;text-align:center;left:var(--space);width:calc(100% - (var(--space) * 2));        position: absolute;
        top: 0;}
	.werke-pagination img{opacity:1;}
	.werke-pagination .arrow-left{float:left}
	.werke-pagination .arrow-right{float:right}
	.werke-image{height: 100%;
    position: relative;
    height: 80vw;}
	.werke-images{margin-top:3em;height:calc(100% - 3em);position:relative}
	
	.werke-single-close{display:none}
	
	.werke-single-text {
    height: 100%;
    position: relative;
    height: auto;
		margin-top:0.5em;
}
	.werke-single-text h1{
	margin-block-start: 0rem;
	}
	
	
	.archiv .container-inner {
    display: grid;
    grid-template-columns: 47.5% 47.5%;
    gap: 2em 5%;
    margin-bottom: 2em;
		margin-left:var(--space);width:calc(100% - (var(--space) * 2));
}
	
	
	.archiv .grid-inner{width:100%;margin-left:0;margin-right:0;}
	
	.archiv-image, .archiv-text{width:100%;}
	.archiv-text{margin-top:0.3em;}
	
	.filter-single {
    margin-right: 3em;
    display: inline-block;
    float: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    margin: 0.5em 0;
}
	
	.archiv-filter {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #4A1FFF;
    color: var(--white);
    padding: 1em 0;
   width:0;
		overflow:hidden;
		transition:width .5s ease;
    box-sizing: border-box;
		z-index:9;
}
	
	.archiv-filter-close{position:absolute;right:1em;top:1.5em;width:2em;filter:invert(1)}
	
		.archiv-filter-open {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #4A1FFF;
    color: var(--white);
            padding: 1em 1em 0 1em;
   width:auto;
		transition:width .5s ease;
    box-sizing: border-box;
		z-index:8;
			
}
	
	.archiv-filter-open img{height:2.8em;filter:brightness(0) invert(100%)}
	
	.archiv-filter.active{ width: 100%;}
	
	.filter-single .image_hover{width:100%}
	
	.about .container-inner{display:inline-block;}
	.about .one-fourth{margin-bottom:1em;}
	
	.about .about-image{width:100vw;transform:translateX(-4vw)}
	
	.about .headspace{margin-top:1.5em;}
	
	.aktuelles-single-text{display:none;position:relative;}
	.aktuelles-single-text.cur{display:inline-block;}
	.werke-caption{position:relative;margin-top:0.5em;width:100%;display:inline-block;}
	.werke-caption-text{position:relative;display:none}
   

}