@charset "UTF-8";

/* Extra Small Devices, Phones */
@media only screen and (min-width : 0px) {
  :root {
    --title-font-size: calc(15px + 0.390625vw);
    --padding-3: calc(14px + 1.5625vw);
    --padding-4: 1.25rem;
    --button-padding: 3.5vw 7vw;
    --icon-width: 2rem;
    --icon-height: 1.2rem;
    --gallery-gap: 15px;

    --grid-margin: calc(25px + 1.5625vw)
  }

  nav:first-of-type {
    display: none;
  }

  header > a {
    width: 100%;
    max-width: 10.5rem;
    grid-column: 1 / 10;
    margin: 1rem 0;
  }

  .portfolio-title {
    padding-bottom: 2.5vw;
  }

  .title {
    display: block;
  }

  .tagline {
    font-size: calc(24px + 0.390625vw);
  }

  .artist-text {
    font-size: calc(16px + 0.390625vw);
  }

  .indication-text-column {
    padding: var(--padding-8) var(--grid-margin);
  }

  .burgericon {
    display: flex;
  }

  .bar1, .bar2, .bar3 {
    height: 2.5px;
  }

  .highlight {
    bottom: calc(var(--padding-4) - 2%);
    height: 0.12rem;
    margin: 0;
    width: 100%;
  }

  .hero-section {
    height: var(--height);
    height: 100svh;
    background-color: rgba(255, 255, 255, 1);
  }

  @supports (-webkit-touch-callout: none) {
    .hero-section {
      height: var(--height);
    }
  }

  article {
    grid-column: 1 / 17;
  }

  .hero-article {
    grid-column: 1 / 17;
    padding: 0 var(--grid-margin) !important;
    width: 100vw;
    margin: 0;
  }

  .loading-logo {
    width: 75vw;
    height: auto;
    transform: translate(1vw, 0);
  }

  .blog-hero-article {
    grid-column: 1 / 17;
  }

  .categorie-article {
    flex-direction: column;
    grid-column: 1 / 17;
    grid-template-columns: 1fr;
  }

/*  .categorie-article:first-of-type {
    padding-top: var(--padding-8);
  }*/

  .card img {
    height: 45vw;
    object-position: 0% 5%;
  }

  a:first-child .card img {
    object-position: 0% 15%;
  }

  .footer-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    align-content: space-between;
    grid-template-areas:
    'socialbuttons'
    'footerbuttons';
  }

  .footer-buttons {
    padding: calc(var(--padding-4) * 2/3);
  }

  .social-buttons {
    justify-content: center;
    padding-top: calc(var(--padding-4) * 2/3);
  }

  .socialicon:last-of-type {
    display: block;
  }

  .socialicon {
    margin: 0 calc(var(--padding-4) / 2);
  }

  .language-button {
    display: none;
    justify-content: center;
  }

  .portfolio-text-column {
    padding: 0 0 var(--padding-6) 0;
  }

  .gallery {
    grid-column: 1 / 17 !important;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
    "title1"
    "img0"
    "img1"
    "img2"
    "img3"
    "img4"
    "img5"
    "img6"
    "img7"
    "img8"
    "img9"
    "img10"
    "img11"
    "img12"
    "img13"
    "img14"
    "img15"
    "img16"
    "img17"
    "img18"
    "img19"
    "img20"
    "title2"
    "img21"
    "img22"
    "img23"
    "img24"
    "img25"
    "img26"
    "img27"
    "img28"
    "img29"
    "img30"
    "title3"
    "img31"
    "img32"
    "img33"
    "img34"
    "img35"
    "img36"
    "img37"
    "img38"
    "img39"
    "img40";
  }

  .arrow-container {
    justify-content: center;
  }

  .three-column, .three-column-2 {
    grid-area: unset;
  }

  .full .prev-arrow, .full .next-arrow {
    display: none;
  }

  .close-gallery {
    margin: 5vw;
  }

  .close-gallery > svg {
    width: 90%;
  }

  .full .gallery-item {
    margin: 0 auto;
  }

  .full .gallery-item .content img {
    max-height: calc(var(--height) * 0.8);
    max-height: calc(100dvh * 0.8);
  }

  .pic-info {
    width: 100%;
    height: 8vh;
    text-align: center;
  }

  .impressum-article {
    grid-column: 1 / 17;
  }

  .wip-section {
    padding: 0;
    font-size: calc(24px + 0.390625vw);
  }

  .wip-article {
    align-items: center;
    padding: 0;
  }

  .two-column-article, .contact-article {
    flex-direction: column;
    grid-column: 1 / 17;
  }

  .text-column, .img-column, .img-column-2 {
    margin-bottom: var(--padding-3);
  }

  .text-column:last-of-type{
    margin-bottom: 0;
  }

  .w-text-column {
    padding: 0 !important;
  }

  .text-column .text, .text-column h3 {
    padding: 0 calc(var(--border-radius) * 0.5) 1.5vw calc(var(--border-radius) * 0.5);
  }

  .one-column-article {
    grid-column: 1 / 17;
  }

  .one-column-section .prev-arrow {
    position: absolute;
  }
}



/* Small Devices, Phones */
@media only screen and (min-width : 360px) {
  :root {
    --title-font-size: calc(18px + 0.390625vw);
  }
}




/* larger Phones */
@media only screen and (min-width : 480px) {
  header > a {
    grid-column: 1 / 8;
  }
}




/* Tablets */
@media only screen and (min-width : 555px) {
  :root {
    --title-font-size: calc(22px + 0.390625vw);
    --padding-4: 1.75rem;
  }

  .bar1, .bar2, .bar3 {
    height: 3px;
  }

  .hero-section::before {
    top: 0;
  }

}




@media only screen and (min-width : 700px){
  :root {
    --padding-3: calc(10px + 1.5625vw);
    --button-padding: 2vw 4.5vw;
    --padding-8: calc(75px + 1.5625vw);
    --grid-margin: calc(30px + 1.5625vw);
    --footer-padding: calc(-3px + 1.5625vw);
    --icon-width: 2.1rem;
    --icon-height: 1.25rem;
  }

  header > a {
    max-width: 10rem;
    padding-top: 0;
    grid-column: 1 / 5;
  }

  .portfolio-title {
    padding-bottom: 1.5vw;
  }

  .hero-section {
    height: 100vh;
    background-color: unset;
  }

  .tagline {
    font-size: calc(30px + 0.390625vw);
  }

  .artist-text {
    font-size: calc(16px + 0.390625vw);
  }

  .indication-text-column {
    padding: var(--padding-8);
  }

  article {
    grid-column: 2 / 16;
  }

  .hero-article {
    grid-column: 1 / 17;
    padding: 0 !important;
    width: 78vw;
  }

  .loading-logo {
    width: 45vw;
    height: auto;
    transform: translate(0, 0);
  }

  .two-column-article, .contact-article {
    grid-column: 3 / 15;
  }

  .card img {
    height: 32vw;
    object-position: 44% 5%;
  }

  a:first-child .card img {
    object-position: 44% 20%;
  }

  .full .prev-arrow, .full .next-arrow {
    display: flex;
  }

  .close-gallery {
    margin: 2%;
  }

  .close-gallery > svg {
    width: 100%;
  }

  .prev-arrow, .next-arrow {
    width: 10%;
    font-weight: 600;
    font-size: 2.8rem;
  }

  .arrow-container {
    justify-content: space-between;
  }

  .portfolio-text-column {
    padding: 0 15vw var(--padding-6) 15vw;
  }

  .text-column .text, .text-column h3 {
    padding: 0 calc(var(--border-radius) * 0.75) 0.75vw calc(var(--border-radius) * 0.75);
  }

  .gallery {
    grid-column: 1 / 17 !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "title1 title1 title1"
    "col0 col1 col2"
    "title2 title2 title2"
    "col00 col11 col22"
    "col3 col3 col3"
    "title3 title3 title3"
    "col000 col111 col222"
    "col33 col33 col33";
  }

  .full .gallery-item {
    margin: 0 auto 0 auto;
  }

  .three-column {
    grid-area: col3;
  }

  .three-column-2 {
    grid-area: col33;
  }

  .pic-info {
    height: 5vh;
    /*transform: translate(0, 200%);*/
  }

  .categorie-article {
    grid-template-columns: 1fr 1fr;
  }
}




/* Medium Devices, Desktops */
@media only screen and (min-width : 900px) {
  :root {


  }

  header > a {
    max-width: 10rem;
    padding-top: 0;
    grid-column: 1 / 5;
  }

  .hero-section::before {
    top: -3%;
  }

  article {
    grid-column: 4 / 14;
  }

  .hero-article {
    grid-column: 3 / 15;
  }

  .full .gallery-item {

  }

  .categorie-article {
    grid-column: 2 / 16;
  }

  .impressum-article {
    grid-column: 2 / 16;
  }

  .card img {
    height: 26vw;
    object-position: top;
  }

}




/* Large Devices, Wide Screens */
@media only screen and (min-width : 1098px) {
  :root {
    --padding-1: calc(65px + 1.5625vw);
    --padding-3: calc(-2px + 1.5625vw);
    --padding-4: 1rem;
    --button-padding: 1.25vw 3.5vw;
    --icon-width: 1.9rem;
    --gallery-gap: 20px;
    --text-font-size: 18px;
    --nav-font-size: calc(var(--text-font-size) - 1px);
  }

  nav:first-of-type {
    display: flex;
    align-items: center;
  }

  header > a {
    grid-column: 1 / 4;
    padding-top: 3px;
  }

  .portfolio-title {
    padding-bottom: 0.75vw;
  }

  .gallery {
    grid-column: 2 / 16 !important;
  }

  .title {
    display: none;
  }

  .burgericon {
    display: none !important;
  }

  .highlight {
    height: 1.5pt;
    margin: auto;
    width: calc(100% - var(--padding-4) * 2);
    bottom: 0;
  }

  .hero-article {
    width: 58vw;
  }

  .portfolio-text-column {
    padding: 0 20vw var(--padding-6) 20vw;
  }

  .indication-article {
    flex-direction: row;
  }

  .indication-text-column {
    flex-basis: 50%;
    padding: var(--padding-1);
  }

  .indication-img-column, .img-column-2 {
    flex-basis: 50%;
    height: 100%;
  }

  .loading-logo {
    width: 35vw;
    height: auto;
    transform: translate(0, 0);
  }

  .blog-categorie-section .card img {
    height: 15vw;
    object-position: center;
  }

  .blog-hero-article {
    grid-column: 5 / 13;
  }

  .footer-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    justify-content: space-between;
    align-items: center;
    grid-template-areas:
    '. . .'
    '. . .'
    'socialbuttons footerbuttons languagebutton';
  }

  .footer-buttons, .social-buttons {
    padding: 0;
  }

  .social-buttons {
    justify-content: flex-start;
  }

  .socialicon:last-of-type {
    display: none;
  }

  .socialicon {
    margin-left: 0;
    margin-right: var(--padding-4);
  }

  .language-button {
    display: flex;
    justify-content: flex-end;
  }

  .full .gallery-item {
    margin: 2.5% 13% 5.5% 13%;
  }

  .img-title {
    text-align: right;
    left: 50%;
    bottom: 7vh;
    transform: translate(-50%, 0);
    margin-right: 3.8vw;
    width: 15%;
  }

  .full .gallery-item .content img {
    max-height: 84vh;
  }
  
  .pic-info {
    width: 15%;
    bottom: 0;
    right: 0;
    transform: translate(44%, 0);
    text-align: right;
  }

  .impressum-article {
    grid-column: 3 / 15;
  }

  .wip-section {
    padding: var(--padding-8) 0;
    font-size: calc(28px + 0.390625vw);
  }

  .wip-article {
    align-items: flex-start;
    padding-top: unset;
  }

  .two-column-article:nth-of-type(even), .contact-article {
    flex-direction: row;
    grid-column: 2 / 16;
  }

  .two-column-article:nth-of-type(odd) {
    flex-direction: row-reverse;
    grid-column: 2 / 16;
  }

  .text-column, .img-column, .img-column-2 {
    flex-basis: 45%;
    margin-bottom: 0;
  }

  .contact-article .text-column {
    flex-basis: 42%;
  }

  .text-column {
    padding-top: var(--padding-4);
  }

  .w-text-column {
    padding: var(--padding-6) 0 !important;
  }

  .text-column .text, .text-column h3 {
    padding: 0 0 0.5vw 0;
  }

  .contact-container {
    flex-basis: 47%;
  }

  .categorie-article {
    grid-template-columns: 1fr 1fr;
    grid-column: 3 / 15;
  }

  .categorie-article:first-of-type {
    padding-top: 0;
  }

  .card img {
    height: 16vw;
    object-position: top;
  }

  .one-column-article {
    grid-column: 4 / span 6;
  }

  .an-delay {
    transition-delay: 150ms;
  }

  .an-delay-2 {
    transition-delay: 50ms;
  }
}

@media only screen and (min-width : 1250px) {
  :root {
    --padding-3: calc(-4px + 1.5625vw);
    --padding-8: calc(110px + 1.5625vw);
  }

  header > a {
    grid-column: 1 / 4;
    padding-top: 2px;
  }

  .loading-logo {
    width: 30vw;
  }
}

/* Large Monitors */
@media only screen and (min-width : 1647px) {
  :root {
    --padding-1: calc(75px + 1.5625vw);
    --padding-3: calc(-10px + 1.5625vw);
    --padding-4: 1.25rem;
    --padding-8: calc(120px + 1.5625vw);
    --button-padding: 0.85vw 2vw;
    --icon-width: 2.2rem;
    --gallery-gap: 1.5vw;

    --text-font-size: 18px;

    --grid-margin: calc(30px + 1.5625vw);
  }

  .hero-article {
    width: 40vw;
  }

  .tagline {
    font-size: calc(32px + 0.390625vw);
  }

  .artist-text {
    font-size: calc(18px + 0.390625vw);
  }

  .indication-text-column {
    padding: var(--padding-1) calc(var(--padding-8) * 1.2);
  }

  .portfolio-text-column {
    padding: 0 15vw var(--padding-6) 15vw;
  }

  .gallery {
    grid-column: 3 / 15 !important;
  }

  .impressum-article {
    grid-column: 4 / 14;
  }

  .two-column-article:nth-of-type(even), .contact-article {
    grid-column: 3 / 15;
  }

  .two-column-article:nth-of-type(odd) {
    grid-column: 3 / 15;
  }

  #img-bio-1 {
    min-height: 34rem;
  }

  header > a {
    max-width: 10rem;
    padding-top: 0;
    grid-column: 1 / 4;
    margin: 1.05rem 0;
  }

  .hero-section::before {
    top: -6%;
  }

  .loading-logo {
    width: 24.5vw;
  }

  .highlight {
    height: 1.5pt;
  }

  .prev-arrow, .next-arrow {
    width: 17%;
    font-weight: 700;
    font-size: 4rem;
  }

  .pic-info {
    width: 15%;
    transform: translate(45%, 0);
  }

  .categorie-article {
    grid-column: 4 / 14;
  }

  .blog-categorie-section .card img  {
    height: 18vw;
  }

  .card img {
    height: 16vw;
  }
}


@media only screen and (min-width : 2000px) {
  :root {
    --padding-1: calc(100px + 1.5625vw);
    --padding-3: calc(-16px + 1.5625vw);
    --footer-padding: calc(-8px + 1.5625vw);
    --icon-width: 2.5rem;
    --text-font-size: 19px;
  }

  header > a {
    padding-top: 0;
    grid-column: 1 / 3;
    max-width: 10.5rem;
    margin: 1rem 0;
  }

  .indication-text-column {
    padding: var(--padding-1) calc(var(--padding-8) * 1.75);
  }

  .loading-logo {
    width: 22vw;
  }

  .categorie-article {
    grid-column: 5 / 13;
  }

  .two-column-article:nth-of-type(even), .contact-article {
    grid-column: 5 / 13;
  }

  .two-column-article:nth-of-type(odd) {
    grid-column: 5 / 13;
  }
}