@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
  --padding-inline: 1.2rem;
  --content-max-width: 1200px;
  --breakout-max-width: 1320px;

  --headerHigh: 4rem;
  --footerHigh: 2.4rem;

  --linkColor: #000;
  --footerBG: rgb(47, 47, 52); 
  --footerColor: rgb(203, 201, 210);
  --footerlinkColor: #cbbd95;

  --block1BG: #2e4a4b;
  --block1Color: #FFF;
  --block1Link: #cbbd95;

  --swiper-theme-color: #ffffff;
}
body > header, 
body > footer,
.content-grid {
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )

    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-end];
  align-content: start;
}
body > header > div, 
body > footer > div,
.content-grid > :not(.breakout, .full),
.full > :not(.breakout, .full) {
    grid-column: content;
}
.content-grid > .breakout {
    grid-column: breakout;
    z-index: 6;
    box-shadow: 0 0.2rem 1rem -0.8rem blac
}
.content-grid > .full {
    grid-column: full;
    display: grid;
    grid-template-columns: inherit;
}
/*.content-grid > header:not(.full),*/
.content-grid > div:not(.full){
    margin: 0 calc( var(--padding-inline) * -1 );
    padding: var(--padding-inline);
}
.content-grid > img{
    margin: 0 calc( var(--padding-inline) * -1 );
    width: calc( 100% + var(--padding-inline) * 2 );
}

/* Font */
h1,h2,h3,h4,h5,h6{
    text-wrap: balance;
}
p{
    text-wrap: pretty;
    max-width: 80ch;
    text-align: justify;
}
a{
    position: relative;
    color: var(--linkColor);
    text-decoration: none;
    text-underline-offset: 0.2em;
    font-weight: bold;
    display: inline-block;
}
a:hover{
    text-decoration: underline;  
}
a::before {
    display: inline-block;
    position: relative;
    top: -0.08em;
    width: 1em;
    aspect-ratio: 1;
    margin-right: 0.2em;
    transition: transform 0.1s ease;
    text-decoration-skip-ink: auto;
    text-decoration: none;
    vertical-align: middle;
    background-color: currentColor;
}
a::after {
    display: inline-block;
    position: relative;
    top: -0.08em;
    width: 1em;
    aspect-ratio: 1;
    margin-left: 0.2em;
    transition: transform 0.1s ease;
    text-decoration-skip-ink: auto;
    text-decoration: none;
    vertical-align: middle;
    background-color: currentColor;
}
a>span{
    opacity: 0.7;
}

    
a:hover::before {
    transform: scale(1.2);
}
a[href^="mailto:"]::before {
    content: "\2709 ";
}
a[href^="tel:"]::before {
    content: "\1F4DE";
    transform: rotate(0deg);
}
a[href^="tel:"]:hover::before {
    animation-duration: 0.9s;
    animation-timing-function: linear(0, 0.769 2.8%, 0.937 3.9%, 0.994 5%, 0.932 6.1%, 0.761 7.2%, -0.637 12.3%, -0.864 13.6%, -0.945 14.8%, -0.902 15.9%, -0.753 17%, 0.563 22.2%, 0.775 23.5%, 0.853 24.7%, 0.818 25.8%, 0.688 26.9%, -0.47 32.1%, -0.656 33.4%, -0.728 34.7%, -0.693 35.8%, -0.579 36.9%, 0.352 41.9%, 0.512 43.2%, 0.579 44.5%, 0.559 45.6%, 0.475 46.7%, -0.253 51.8%, -0.373 53.1%, -0.423 54.4%, -0.412 55.4%, -0.355 56.5%, 0.155 61.6%, 0.239 62.9%, 0.275 64.2%, 0.27 65.2%, 0.234 66.3%, -0.07 71.2%, -0.149 73.8%, -0.148 74.8%, -0.131 75.9%, 0.017 80.6%, 0.057 83.1%, 0.054 85.1%, -0.008 91.4%, 0);
    animation-name: rotateAnimationWiggleInfinite;
}
@keyframes rotateAnimationWiggleInfinite {
    from {transform: rotate(0deg);}
    to {transform: rotate(30deg);}
}
a[href*="discord"]::before {
    content: '';
    mask-image: url('/img/icons/icon_discord.svg');
}
a[href*="facebook"]::before {
    content: '';
    mask-image: url('/img/icons/icon_facebook.svg');
}
a[href*="instagram"]::before {
    content: '';
    mask-image: url('/img/icons/icon_instagram.svg');
}
a[href*="linkedin"]::before {
    content: '';
    mask-image: url('/img/icons/icon_linkedIn.svg');
}
a[href*="mastodon"]::before {
    content: '';
    mask-image: url('/img/icons/icon_mastodon.svg');
}
a[href*="youtube"]::before {
    content: '';
    mask-image: url('/img/icons/icon_youtube.svg');
}

a[href="#"] {
    opacity: 0.5;
}
h1>a::before{
    content: "\276C";
    background-color: transparent;
    width: auto;
    top: 0;
    vertical-align: inherit;
}
h1>a:hover::before {
    transform: translateX(-0.1em);
    z-index: 5;
}

a.arrow-r::after{
    content: "\276D";
    background-color: transparent;
    width: auto;
    top: 0;
    vertical-align: inherit;
}
a.arrow-r:hover::after {
    transform: translateX(0.1em);
    z-index: 5;
}

/* Allgemeines Setup */
img{
    width: 100%;
    height: auto;
}
img.link {
    cursor: pointer;
    transition: 
        transform 0.1s ease-in-out,
        box-shadow 0.1s ease-in-out;
}
img.link:hover {
    cursor: pointer;
    transform: scale(101%);
    box-shadow: 0 0.1rem 0.8rem -0.2rem black;
}
/* Main Grid */

body{
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    background-color: darkgray;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    hyphens: auto;
    display: grid;
    grid-template-rows: var(--headerHigh) auto var(--footerHigh);
    grid-template-areas:
        "header"
        "main"
        "footer";
}

/* Header */

body>header{
    position: relative;
    background-color: #FFF;
    grid-template-rows: 100%;
    box-shadow: 0 -1rem 1rem 1rem black;
    z-index: 5;
    > div {
        display: flex;
        justify-content: space-between;
    }
    a.logo img{
    height: 100%;
    }
    button.navMenuButton{
        anchor-name: --navMenu;
        position-area: end;
        width: var(--headerHigh);
        font-size: calc( var(--headerHigh) * 0.9 );
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    #navMenu{
        --animationTimeIN: 0.2s;
        position: absolute;
        position-anchor: --navMenu;
        position-area: bottom span-left;
        z-index: 20;

        opacity: 0;
        transform: translateY(-8px);
        transition: 
            opacity .1s ease, 
            transform .1s ease, 
            overlay .1s,
            display .1s;
        transition-behavior: allow-discrete;
        border: none;
        box-shadow: 0 0.4rem 0.8rem -0.4rem;
    }
    #navMenu:popover-open {
        opacity: 1;
        transform: translateY(0);
        transition-duration: var(--animationTimeIN);
    }
    @starting-style {
        header #navMenu:popover-open {
            opacity: 0;
            transform: translateY(-1rem);
        }
    }
    #navMenu>a{
        display: block;
        position: relative;
        font-size: 1.2rem;
        padding: 0.5rem 2.4rem 0.5rem 3rem;
    }
    #navMenu>a::before{
        content: "\25B6";
        position: absolute;
        left: 2em;
        font-size: 0.7em;
        top: 0.8em;
        transition: left 0.1s ;
        background-color: transparent;
    }
    #navMenu>a:hover::before{
        left: 2.2em;
    } 
}

/* Main */

main{
    background-image: url("./portfolio_BG.webp");
    background-repeat: repeat;
    background-position: center top;
    background-size: 6rem;

    header{
        position: relative;
        overflow: hidden;
    }
}
main > header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
main > header > h1 {
    background-color: #ffffffDD;
    display: inline;
    width: fit-content;
    padding: 0.2rem var(--padding-inline);
    margin: 0.3em calc(var(--padding-inline) * -1);
}
main > header > div {
    font-weight: 400;
    background-color: #FFFFFFCC;
    padding: 0 var(--padding-inline);
    max-width: 70ch;
    border-radius: 0.4rem;
    margin-bottom: calc(var(--padding-inline) * 0.4);
}

/* Footer */

body>footer{
    background-color: var(--footerBG);
    color: var(--footerColor);
    align-content: center;

    footer>div{
        display: flex;
        align-items: center;
        justify-content: center;
    }
   
}
body > footer a{
    color: var(--footerlinkColor);
    margin-left: 0.2em;
    padding: 0 1em;
    height: 100%;
    align-items: center;
}

/* Kontakt block */
.contact{
  background-color: var(--blockColor1BG);
  color: var(--blockColor1Color);
  text-align: center;
  font-size: 1.4em;
  line-height: 1.6em;
  a{
    color: var(--blockColor1Link);
    padding: 0.4em 0;
  }
  p{
    text-align: center;
  }
}

/* Impressum */

.impressum h3{
  font-size: 1em;
  margin-bottom: 0;
}
.impressum p{
  margin: 0;
}
.impressum a{
  display: block;
  padding: 0.4em 0;
}


:root{
  --blockBG: #FFF;
  --blockColor: #000;
  --blockLink: #4e2830;

  --blockColor1BG: #2e4a4b;
  --blockColor1Color: #FFF;
  --blockColor1Link: #cbbd95;

  --blockColor2BG: #4e2830;
  --blockColor2Color: #cbbd95;
  --blockColor2Link: #8e7542;

  --blockColor3BG: #b3b9a9;
  --blockColor3Color: #4e2830;
  --blockColor3Link: #2e0915;

  --blockDarkBG: #111d2e;
  --blockDarkColor: #FFF;
  --blockDarkLink: #cbbd95;
}

/* Blocks */
.block{
  background-color: var(--blockBG);
  color: var(--blockColor);
  a{
    color: var(--blockLink);
  }
}
.block.color1{
  background-color: var(--blockColor1BG);
  color: var(--blockColor1Color);
  a{
    color: var(--blockColor1Link);
  }
}
.block.color2{
  background-color: var(--blockColor2BG);
  color: var(--blockColor2Color);
  a{
    color: var(--blockColor2Link);
  }
}
.block.color3{
  background-color: var(--blockColor3BG);
  color: var(--blockColor3Color);
  a{
    color: var(--blockColor3Link);
  }
}
.block.dark{
  background-color: var(--blockDarkBG);
  color: var(--blockDarkColor);
  a{
    color: var(--blockDarkLink);
  }
}
.block.link{
  text-align: center;
  font-size: 1.4em;
  line-height: 1.6em;
  a{
    padding: 0.4em 0;
  }
}

a.block{
  background-color: var(--blockBG);
  color: var(--blockLink);
}
a.color1{
  background-color: var(--blockColor1BG);
  color: var(--blockColor1Link);
}
a.color2{
  background-color: var(--blockColor2BG);
  color: var(--blockColor2Link);
}
a.color3{
  background-color: var(--blockColor3BG);
  color: var(--blockColor3Link);
}
a.dark{
  background-color: var(--blockDarkBG);
  color: var(--blockDarkLink);
}
.center{
  text-align: center;
}

/* Coloums */
.col{
  --min: 250px;   /* minimale Spaltenbreite */
  --max: 1;       /* maximale Anzahl Spalten */
  --gap: 1rem;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      max(var(--min), calc((100% - (var(--max) - 1) * var(--gap)) / var(--max))),
      1fr
    )
  );
  /*margin-bottom: var(--gap);*/
}
.col.link>p{
  text-align: center;
  font-size: 1.4em;
}
.col>p{
    margin: 0.1em 0em;
}
.col.center>p{
    text-align: center;
}
.col-2{ --min: 250px; --max: 2; --gap: var(--padding-inline); }
.col-3{ --min: 200px; --max: 3; --gap: var(--padding-inline); }
.col-4{ --min: 140px; --max: 4; --gap: var(--padding-inline); }
.colSmall { --gap: calc( var(--padding-inline) * 0.3 ); }



/* figure */
figure:has(a){
  position: relative;
  margin: calc( var(--padding-inline) * -0.4 );
  padding: calc( var(--padding-inline) * 0.4 );
  padding-bottom: calc( var(--padding-inline) * 0.8 );

    a{
    position: initial;
    color: inherit;
    text-decoration: none;
    }
    a img{
    transition: 
        transform .1s,
        box-shadow .1s;
    }
    a:hover img{
    transform: scale(1.02) translateY(-0.1em);
    box-shadow: 0 .3em .5em -.4em black;
    }
    img{
    position: absolute;
    width: calc( 100% - var(--padding-inline) * 0.4 * 2 );
    left: calc( var(--padding-inline) * 0.4 );
    top: calc( var(--padding-inline) * 0.4 );
    opacity: 0;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    }
    img:first-of-type{
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 1;
    }
    img:nth-of-type(2){
        animation-name: loopImage-3_2;
    }
    img:nth-of-type(3){
        animation-name: loopImage-3_3;
    }
    h3{
    margin: 0.2em 0;
    }
    p{  
    margin: 0;
    opacity: 0.64;
    font-weight: 100;
    }
    @keyframes loopImage-3_2 {
        23%  {opacity: 0;}
        33%  {opacity: 1;}
        66%  {opacity: 1;}
        67%  {opacity: 0;}
    }
    @keyframes loopImage-3_3 {    
        56%  {opacity: 0;}
        66%  {opacity: 1;}
        89%  {opacity: 1;}
        99%  {opacity: 0;}
    }
}
/* Imgaes */

img.img-float-r{
    float: right;
    position: relative;
    width: 50%;
    margin: 0 0 var(--padding-inline) var(--padding-inline);
}

/* Paralax */

main.paralax{
  animation: parallax2 1s linear;
  animation: parallax2 linear;
  animation-timeline: scroll(); 
}
div.paralax,
img.paralax{
  position: relative;
  object-fit: cover;
  background-size: cover;
  animation: parallax 1s linear;
  animation: parallax linear;
  animation-timeline: scroll();
  aspect-ratio: 2 / 1;
  height: 100%;
}

@keyframes parallax {
  from {
    object-position: center bottom;
    background-position: center bottom;
  }
  to {
    object-position: center top;
    background-position: center top;
  }
}
@keyframes parallax2 {
  from {
    background-position: center -20%;
  }
  to {
    background-position: center 0%;
  }
}

.swiper-slide{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.swiper-slide>img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.swiper-slide>img.link:hover{  
}
.swiper-slide > a{
    padding: 2rem;
    background-color: #000000CC;
    color: #FFF;
    width: calc(100% - 4rem);
}
.swiper-slide h2{
    margin-top: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.024em;
}
.content-grid > div.headerSwiper {
    padding: 0;
  /*aspect-ratio: 5 / 2;
    min-height: 40rem; */
    height: 60dvh;
}

video,
iframe.video{
    width: 100%;
    height: auto;
}
.video16-9{
    aspect-ratio: 16 / 9;
}
.text-width{
    max-width: 80ch;
}