@charset "UTF-8";

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-VariableFont_wght.ttf') format("truetype-variations");
  font-weight: 1 999;
  font-display: swap;
}
/*
@media screen and (max-width: @screen-sm-max) {
  html, body {
    overflow: auto !important;
  }
}
*/
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.no-show {
  visibility: hidden;
}

@keyframes hide {
  from {visibility: hidden;}
  to {visibility: visible;}
}

*:focus {
  outline: none;
  background: none;
  box-shadow: none;
}

input, textarea, button, select, a, img, .gallery-item {
  -webkit-tap-highlight-color: transparent;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	img {
		max-width: 100%;
		height: auto;
		width: auto;
    vertical-align: middle;
    pointer-events: none;
	}
}

:-webkit-full-screen-ancestor>:not(:-webkit-full-screen-ancestor):not(:-webkit-full-screen) {
  display: none;
}

:root {
  --columns: repeat(16, 1fr);
  --height: 100vh;
  --width: 100vw;

  --light-font-color: rgb(240, 240, 240);
  --dark-font-color: rgb(50, 50, 50);
  --main-bg: rgb(250, 250, 253);
  --dark-bg: rgb(50, 50, 100);
  --white: rgb(250, 250, 250);
  --hover-grey: rgb(230, 170, 170);
  --logo-peach: rgb(222, 122, 120);
  --black: rgb(20, 20, 20);
  --middle-grey-2: rgb(188, 196, 205);
  --middle-grey: rgb(200, 205, 215);
  --purple-grey: rgb(244, 238, 247);
  --light-grey: rgb(240, 240, 250);
  --header-color: rgb(244, 246, 252);
  --header-color-light: rgb(245, 240, 245);
  --footer-color: rgb(241, 243, 249);
  --highlight-color-2: rgb(191, 39, 117);
  --highlight-color-3: rgb(100, 30, 115);
  --highlight-color: rgb(134, 102, 140);
  --highlight-font-color: rgb(230, 170, 170);
  --highlight-font-color-2: rgb(142, 110, 148);

  --font-family: Rubik, sans-serif;
  --text-font-size: 16px; /* in mediaqueries bearbeitet */
  --nav-font-size: var(--text-font-size); /* in mediaqueries bearbeitet */
  --title-font-size: calc(20px + 0.390625vw); /* in mediaqueries bearbeitet */
  --footer-font-size: calc(var(--text-font-size) - 1pt);
  --border-radius: calc(10px + 0.390625vw);
  --small-border-radius: calc(5px + 0.390625vw);
  --contact-border-radius: calc(4px + 0.390625vw);

  --padding-1: calc(50px + 1.5625vw); /* sections wie hero-image, categorie, gallery-section */ /* in mediaqueries bearbeitet ab 1647px */
  --padding-2: calc(40px + 1.5625vw); /* Impressum-section */
  --padding-3: calc(10px + 1.5625vw); /*header logo + menu/burgericon */ /* in mediaqueries bearbeitet */
  --padding-4: 0.75rem; /* nav and burgernav elements (nav ul li a) + footer-container */ /* in mediaqueries bearbeitet */
  --padding-5: calc(60px + 1.5625vw);
  --padding-6: calc(20px + 1.5625vw);
  --padding-7: calc(90px + 1.5625vw); /* wip-section */
  --padding-8: calc(55px + 1.5625vw); /* in mediaqueries bearbeitet ab 1250px */
  --footer-padding: calc(3px + 1.5625vw);
  --button-padding: 1.5vw 3.25vw; /* in mediaqueries bearbeitet */
  --grid-margin: calc(50px + 1.5625vw); /* in mediaqueries bearbeitet */

  --icon-width: 3rem;
  --icon-height: 2rem;
  --icon-gap: calc((100%/16) - var(--icon-width));
  --gallery-gap: 15px;
}

/* Globale Beschreibung Beginn */
html {
  width: 100%;
  height: auto;
  overflow: auto;
  min-height: 100%;
}

body {
  width: 100%;
  overflow: hidden;
  min-height: 100%;
	position: relative;
	font-family: var(--font-family);
  line-height: 1.6;
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: auto 1fr auto;
  grid-gap: 0;
  grid-template-areas:
  'header'
  'main'
  'footer';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

header {
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: auto;
  position: fixed;
  top: 0;
  background: none;
  grid-area: header;
  height: auto;
  width: 100%;
  grid-column: 1 / span 16;
  transition: background-color 0.25s ease-out;
  z-index: 5;
  padding: 0 var(--grid-margin);
}

header:not(#nobackground) {
    background: var(--header-color);
    border-bottom: 3px solid var(--purple-grey);
  }

.dynamic {
  background: var(--header-color);
  border-bottom: 3px solid var(--purple-grey);
}

.no-transition {
  transition: none;
}

main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--main-bg);
  grid-area: main;
  height: 100%;
 
  width: 100%;
  grid-column: 1 / span 16;
  align-self: auto;
}

section {
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: auto;
  width: 100%;
  height: fit-content;
  padding-left: var(--grid-margin) !important;
  padding-right: var(--grid-margin) !important;
}

article {
  height: auto;
}

button {
  cursor: pointer;
  font-family: var(--font-family);
}

button:visited, button:focus, button:active {
  outline: none;
}

a {
  text-decoration: none;
}

.text, .impressum-section p {
  font-size: var(--text-font-size);
}


/* Header Beginn */
nav {
  justify-content: space-between;
  align-items: center;
  color: var(--dark-font-color);
  font-size: var(--nav-font-size);
  font-weight: 450;
  grid-column: 6 / 17;
  justify-self: flex-end;
}

.highlight {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: var(--dark-font-color);
  width: calc(100% - var(--padding-4) * 2);
  transition: background-color 0.35s ease-out;
  border-radius: 50px;
}

nav ul li:last-of-type .highlight {
  width: calc(100% - var(--padding-4));
  margin-right: 0;
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: var(--padding-3) 0;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: inherit;
  font-size: inherit;
  padding: var(--padding-4);
}

nav ul li:last-of-type a {
  padding-right: 0;
}

header a {
  grid-column: 1 / 4;
  padding: 0;
  margin: var(--padding-3) 0;
  transition: color 0.35s ease-out;
  align-self: center;
  transform: translate(0, 1.5%);
  z-index: 1;
}

header a img {
  pointer-events: none;
}

.title {
  font-size: var(--title-font-size);
  font-weight: 500;
  grid-column: 5 / 9;
  justify-content: center;
  align-self: center;
  text-align: center;
  width: 100%;
  hyphens: none;
  word-break: break-word;
  line-height: 1.1;
  color: var(--dark-font-color);
}

.burgericon {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  background: none;
  outline: none;
  border: none;
  grid-column: 16 / 17;
  justify-self: flex-end;
  align-self: center;
  margin: var(--padding-3) 0;
  padding: 10px 0 10px 10px;
  width: calc(var(--icon-width) + 10px);
  height: calc(var(--icon-height) + 20px);
}

.bar1, .bar2, .bar3 {
  width: 100%;
  background-color: var(--dark-font-color);
  transition: transform 0.2s ease-in, background-color 0.35s ease-out;
  margin: 0;
  z-index: 1;
  border-radius: 50px;
}

.closeburger {
  position: absolute;
  z-index: 11;
  justify-content: space-around;
  padding: 20px 15px 20px 20px;
  width: var(--icon-width);
  height: var(--icon-height);
}

.closeburger .bar2 {
  display: none;
}

.closeburger .bar1, .closeburger .bar3 {
  transform-origin: center;
  position: absolute;
  transition: transform 0.35s ease-out, background-color 0.35s ease-out;
}

.closeburger .bar1 {
  transform: rotate(45deg);
}

.closeburger .bar3 {
  transform: rotate(-45deg);
}

.circle-bg {
  display: none;
  position: absolute;
  width: calc(var(--icon-width) + 4vw);
  height: calc(var(--icon-width) + 4vw);
  background-color: var(--header-color);
  border-radius: 50%;
  z-index: 0;
}

.closeburger .circle-bg {
  display: block;
}

.show-flex {
  display: flex !important;
}

.hide {
  display: none !important;
}

.hide-overflow {
  overflow: hidden !important;
}

.burgernav {
  display: none;
  position: fixed;
  left: 0;
  /*width: calc(75% + var(--icon-gap));*/
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: var(--header-color);
  animation: 1s burgerslide;
  animation-timing-function: cubic-bezier(.2,.88,0,1.01);
  font-size: var(--nav-font-size);
  font-weight: 450;
  overflow-y: auto;
}

@keyframes burgerslide {
  from {transform: translateY(-80vh);}
  to {transform: translateY(0);}
}

.burgernav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
}

.burgernav ul li {
  padding: var(--padding-4) 0;
  position: relative;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content;
}

.burgernav ul li a {
  color: inherit;
  font-size: inherit;
  padding: var(--padding-4) 0;
}

.overlay {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0);
}
/* Header Ende */

/* Footer Anfang */
footer {
  display: grid;
  grid-template-columns: var(--columns);
  position: relative;
  bottom: 0;
  background: var(--footer-color);
  grid-area: footer;
  height: auto;
  width: 100%;
  grid-column: 1 / 17;
  align-self: flex-end;
  align-items: center;
  padding: 0 var(--grid-margin);
}

.footer-container {
  display: grid;
  grid-column: 1 / 17;
  padding: var(--footer-padding) 0;
}

.social-buttons {
  display: flex;
  align-self: center;
  grid-area: socialbuttons;
}

.hero-icons {
  position: absolute;
  display: flex;
  align-self: center;
  left: 50%;
  bottom: 2%;
  transform: translate(-50%, 0);
  z-index: 1;
}

.hero-socialicon {
  height: var(--icon-width);
  width: auto;
  transition: transform 1.5s cubic-bezier(.2,.88,0,1.01);
  margin: calc(var(--icon-width) * 2/5);
}

.hero-socialicon img {
  max-height: 100%;
  max-width: unset;
}

.socialicon, .languageicon {
  width: var(--icon-width);
  height: auto;
  transition: transform 1.5s cubic-bezier(.2,.88,0,1.01);
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:after {
  content: "Coming soon";
  position: absolute;
  top: calc(var(--icon-width) * -2);
  right: 0;
  opacity: 0;
  text-align: center;
  background-color: var(--dark-font-color);
  color: var(--white);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
  width: max-content;
}
.tooltip:hover:after {
  display: block;
  opacity: 1;
}

.footer-buttons {
  display: flex;
  justify-content: center;
  grid-area: footerbuttons;
}

.dsgvo-link {
  color: var(--dark-font-color);
  font-size: var(--footer-font-size);
  font-weight: 500;
  transition: color 0.35s ease-out;
}

.language-button {
  align-self: center;
  grid-area: languagebutton;
}

li a span, h1 span, h3 span {
  letter-spacing: calc(var(--nav-font-size)/15);
}

.footer-buttons a span {
  letter-spacing: calc(var(--footer-font-size)/15);
}
/* Footer Ende */
/* Globale Beschreibung Ende */


/* Home Anfang */
.hero-section {
  position: fixed;
  width: 100%;
  padding: var(--padding-1) 0;
  will-change: transform;
}

.parallax {
  /*transition: transform 0.25s cubic-bezier(.2,.88,0,1.01);*/
}

.hero-section-container {
  position: relative;
  width: 100%;
  height: var(--height);
  height: 100svh;
  backface-visibility: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: url(../images/portfolio/port3.webp);
  opacity: 0.07;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
}

.hero-article {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  width: 68vw;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -60%, 1px);
  backface-visibility: hidden;
}

.artist-text {
  color: var(--dark-font-color);
  font-size: calc(20px + 0.390625vw);
  border-radius: var(--border-radius);
  font-weight: 450;
  text-align: center;
  line-height: 1.5;
}

.tagline {
  color: var(--logo-peach);
  font-size: calc(32px + 0.390625vw);
  text-align: center;
  line-height: 1.1;
}

.categorie-section {
  background: var(--main-bg);
  padding: var(--padding-8) 0 var(--padding-8) 0;
  hyphens: auto;
  z-index: 2;
}

.categorie-article {
  display: grid;
  grid-template-rows: auto;
  align-items: center;
  gap: var(--padding-6);
}

.categorie-article a {
  height: 100%;
  width: 100%;
  color: var(--light-font-color);
  transition: transform 1s cubic-bezier(.29,1.06,.46,.81);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.categorie-article h3, .categorie-article h4 {
  color: var(--highlight-font-color);
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: var(--dark-font-color);
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
}

.card img {
  width: 100%;
  object-fit: cover;
  min-width: 100%;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.card-text {
  padding: calc(10px + 1.5625vw) calc(15px + 1.5625vw) calc(15px + 1.5625vw) calc(15px + 1.5625vw);
}


.indication-section {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--main-bg);
  padding: var(--padding-3) 0 0 0 !important;
}

.indication-article {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  grid-column: 1/18;
  background-color: rgb(240, 180, 180);
}

.indication-text-column {
  padding: 0;
}

.indication-article h2 {
  color: rgb(255,255,255);
  font-size: calc(30px + 0.390625vw);
}

.indication-text-column .text {
  color: var(--dark-font-color);
  font-weight: 500;
}

.indication-img-column {
  content: "";
  display: block;
  height: 40vh;
  width: 100%;
}

#indication-img-home {
  background: url(../images/portfolio/port18.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#indication-img-portfolio {
  background: url(../images/debby-hudson-MzSqFPLo8CE-unsplash_edit.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.indication-article .go-to-button {
  display: block;
  margin-top: var(--padding-3);
  color: var(--logo-peach);
  background: rgb(255,255,255);
  font-weight: 500;
  font-size: calc(var(--text-font-size) + 1pt);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
  cursor: pointer;
  transition: transform 1.75s cubic-bezier(.2,.88,0,1.01);
  text-align: center;
  width: 100%;
}

.go-to-button-2 {
  display: block;
  margin-top: var(--padding-6);
  color: rgb(255,255,255);
  background: none;
  font-weight: 500;
  font-size: calc(var(--text-font-size) + 1pt);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
  cursor: pointer;
  transition: transform 1.75s cubic-bezier(.2,.88,0,1.01);
  text-align: center;
  border: 3px solid rgb(255,255,255);
  width: 100%;
}
/* Home Ende */


/* Portfolio Anfang */
.gallery-section {
  background: var(--main-bg);
  color: var(--dark-font-color);
  padding: var(--padding-1) 0;
}

.gallery {
  display: grid;
  grid-column-gap: var(--gallery-gap);
  grid-row-gap: var(--gallery-gap);

  grid-auto-rows: auto;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.full .portfolio-text-column {
  display: none;
}

.portfolio-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 20vw var(--padding-6) 20vw;
}

/* Selects every class instance except the first*/
.portfolio-text-column ~ .portfolio-text-column {
  margin-top: var(--padding-1);
}

.portfolio-text-column .text {
  font-size: var(--text-font-size);
}

.portfolio-title {
  text-align: center;
  font-weight: 500;
  color: var(--logo-peach);
  font-size: calc(30px + 0.390625vw);
  z-index: 0;
}

.portfolio-text-column .text {
  text-align: center;
}

.portfolio-title:first-of-type {
  margin-top: -1.75vw;
}

.column {
  display: flex;
  flex-direction: column;
}

.three-column {
  grid-column: 1 / -1;
}

.full {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;;
  height: 100dvh;
  z-index: 6;
  touch-action: none;
  background-color: var(--main-bg) !important;
  transform-origin: center center;
  /*animation: scaleup 0.75s ease-in;*/
}

.full .gallery-item {
  display: none;
  position: fixed !important;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: relative;
  padding: 0 !important;
  margin: 0;
  cursor: auto;
}

.active-slide {
  display: block !important;
}

.full .gallery-item .content img {
  touch-action: none;
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  max-width: 100%;
  min-width: auto;
  height: 100%;
  object-fit: contain;
  opacity: 1 !important;
}

.zoom-animation {
  animation: 0.5s zoomin !important;
  animation-timing-function: ease !important;
}

.gallery img {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
}

.gallery .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 100%;
  transition: scale 2s cubic-bezier(.2,.88,0,1.01);
  align-content: center;
}

.gallery-item .content {
  transition: transform 3.5s cubic-bezier(.2,.88,0,1.01);
}

.full .gallery-item .content {
  transition: transform 0s;
}

.full .gallery-item .scaleup {
  animation: scaleup 0.95s cubic-bezier(.2,.88,0,1.01);
}

@keyframes scaleup {
  0% {
    transform: scale(90%);
  }
  100% {
    transform: scale(100%);
  }
}

.gallery-item {
  transition: grid-row-start 300ms linear;
  cursor: pointer;
  margin-bottom: var(--gallery-gap);
  overflow: hidden;
  border-radius: var(--border-radius);
}

.full .gallery-item {
  overflow: unset;
  border-radius: 0;
}

.smooth {
  transition: transform 0.5s ease-in-out, margin 0s !important;
  transition-timing-function: ease-out !important;
  transition-delay: 0 !important;
}

.close-gallery {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  background: none;
  border: none;
  cursor: pointer;
}

.arrow-container {
  display: none;
  position: absolute;
  bottom: 2.5vh;
  width: 100%;
  height: 100%;
  align-items: flex-end;
}

.full .close-gallery, .full .arrow-container {
  display: flex;
}

.close-gallery > svg {
  transition: fill 0.35s ease-out;
  fill: var(--dark-font-color);
}

.prev-arrow, .next-arrow {
  display: none;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  /*position: fixed;*/
  top: 0;
  text-align: center;
  z-index: 100;
  height: 100%;
}

.img-title {
  position: relative;
  z-index: 101;
  text-align: center;
  font-size: calc(var(--text-font-size));
  color: var(--dark-font-color);
}

.prev-arrow {
  justify-content: flex-start;
  left: 0;
}

.next-arrow {
  justify-content: flex-end;
  right: 0;
}

.prev-arrow > svg {
  transition: fill 0.35s ease-out;
  margin-left: 1.9vw;
  fill: var(--dark-font-color);
  width: calc(var(--icon-width) * 1.025);
}

.next-arrow > svg {
  transition: fill 0.35s ease-out;
  margin-right: 1.9vw;
  fill: var(--dark-font-color);
  width: calc(var(--icon-width) * 1.025);
}

.full .gallery-item .content .pic-info {
  display: flex;
}

@-webkit-keyframes zoomin {
  0% {
    transform: scale(107%);
  }
  100% {
    transform: scale(100%);
  }
}

@keyframes zoomin {
  0% {
    transform: scale(107%);
  }
  100% {
    transform: scale(100%);
  }
}
/* Portfolio Ende */


/* Impressum Anfang */
h2 {
  color: var(--dark-font-color);
  font-size: calc(26px + 0.390625vw);
  font-weight: 700;
  padding-bottom: var(--padding-4);
  line-height: 1.2;
}

h5 {
  color: var(--dark-font-color);
  font-size: var(--text-font-size);
  font-weight: 600;
  padding-top: 1vw;
}

.impressum-section {
  background: var(--main-bg);
  color: var(--dark-font-color);
  padding-bottom: var(--padding-2);
}

.impressum-section:first-of-type {
  padding-top: var(--padding-5);
}

.impressum-section ul {
  list-style-position: inside;
  font-size: var(--text-font-size);
  list-style-type: disc;
}
/* Impressum Ende */


/* WIP Anfang */
.wip-section {
  color: var(--light-font-color);
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: url(../images/khara_woods_unsplash.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.wip-article {
  display: flex;
}

.wip-header {
 background: var(--header-color);
}

.wip-footer {
  position: fixed;
}

.wip-text {
  font-weight: 600;
  text-align: center;
  background: var(--dark-font-color);
  padding: var(--padding-6);
  border-radius: var(--border-radius);
}
/* WIP Ende */


/* Workshops Anfang */
.two-column-section {
  padding: var(--padding-1) 0;
}

.two-column-article {
  display: flex;
  justify-content: space-between;
  height: auto;
  background: var(--main-bg);
  color: var(--dark-font-color);
  margin-bottom: var(--padding-8);
}

.two-column-article:last-of-type {
  margin-bottom: 0;
  padding-bottom: var(--padding-4);
}

.img-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-column-2 {
  content: "";
  display: block;
  height: 60vw;
  width: 100%;
  border-radius: var(--border-radius);
}

#img-workshop-1 {
  background: url(../images/20230219_122111.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-workshop-2 {
  background: url(../images/20240307_162039_copy.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-workshop-3 {
  background: url(../images/20230219_123446.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-bio-1 {
  background: url(../images/IMG_1474_edited2.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

#img-bio-2 {
  background: url(../images/pexels-leventsimsek-20633200_copy.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-bio-3 {
  background: url(../images/mateo-krossler-KsOWP1sH6W4-unsplash_copy.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-bio-4 {
  background: url(../images/khara_woods_unsplash_copy.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#img-bio-5 {
  background: url(../images/port5_9to13.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.img-column img {
  border-radius: var(--border-radius);
}

h3 {
  color: var(--dark-font-color);
  font-size: calc(18px + 0.390625vw);
  font-weight: 600;
  padding-bottom: 1.5%;
  line-height: 1.2;
}

.button-wrapper {
  display: flex;
  justify-content: center;
}

#left-button {
  justify-content: left;
}

.go-to-button {
  display: block;
  width: 100%;
  margin-top: var(--padding-6);
  color: var(--light-font-color);
  background: var(--dark-font-color);
  font-weight: 500;
  font-size: calc(var(--text-font-size) + 1pt);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
  cursor: pointer;
  transition: transform 1.75s cubic-bezier(.2,.88,0,1.01);
  text-align: center;
}

.contact-section {
  padding: var(--padding-1) 0;
  color: var(--light-font-color);
  background: var(--dark-font-color);
}

.contact-section h2 {
  color: var(--light-font-color);
}

#workshop-contact .text a {
  color: var(--highlight-font-color-2);
  transition: color 0.3s;
}

.contact-article {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--padding-4);
}

.contact-article p, .contact-article h2 {
  text-align: left;
}

#contact-text, #contact-text > * {
  padding: 0 !important;
}
/* Workshops Ende */


/* Bio Anfang */
.vita-list {
  font-size: var(--text-font-size);
  padding-top: 0.5vw;
  padding-left: var(--text-font-size);
}

.vita-list li {
  padding-bottom: var(--padding-4);
}
/* Bio Ende */


/* Contact Anfang */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=text], input[type=email], select, textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font-family);
  border-radius: var(--contact-border-radius);
  font-size: var(--text-font-size);
  font-weight: 400;
  color: var(--dark-font-color);
  font-family: inherit;
  padding: var(--padding-4) var(--padding-4) var(--padding-4) calc(var(--padding-4) / 1.5);
  background: var(--header-color);
  margin-bottom: calc(var(--padding-4) * 0.5);
}

#contact input[type=text], #contact input[type=email], #contact select, #contact textarea {
  color: var(--dark-font-color);
  background: var(--purple-grey);
}

label {
  font-size: var(--text-font-size);
  display: inline-block;
  font-weight: 500;
  color: var(--light-font-color);
  margin: var(--padding-4) 0 calc(var(--padding-4) / 3) 0;
}

#contact label, #contact h2 {
  color: var(--dark-font-color);
}

.row:first-of-type label {
  margin: 0 0 calc(var(--padding-4) / 3) 0;
}

/* Submit Button */
input[type=submit] {
  background-color: var(--highlight-color);
  color: var(--light-font-color);
  width: 100%;
  outline: none;
  border-radius: var(--border-radius);
  border: none;
  text-align: center;
  font-family: var(--font-family);
  font-size: calc(var(--text-font-size) + 1pt);
  font-weight: 500;
  cursor: pointer;
  align-self: center;
  box-sizing: content-box;
  padding: var(--button-padding);
  transition: transform 1.75s cubic-bezier(.2,.88,0,1.01);
  margin-top: var(--padding-4);
}

.horizontal-center {
  display: flex;
  justify-content: center;
}

#contact input[type=submit] {
  background-color: var(--highlight-color);
}

/* Entfernt das Standardaussehen der Select Form (inklusive Dropdown Pfeil) */
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}
select::-ms-expand {
  display: none;
}

select {
  display: inline-block;
  width: 100%;
  height: 60%;
  outline: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  background-color: var(--header-color);
}

/* Entfernt die gestrichelte Linie, wenn ein Element ausgewaehlt wird */
select:focus::-ms-value {
  background-color: transparent;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* Fügt den Rahmen wieder hinzu, wenn ein Element ausgewählt wird */
input[type=text]:focus, input[type=email]:focus, textarea:focus, #contact input[type=text]:focus, #contact input[type=email]:focus, #contact textarea:focus {
  border: 4px solid var(--purple-grey);
  cursor: text;
  background: var(--white);
  color: var(--dark-font-color);
  font-family: var(--font-family);
}

select:focus {
  border: none;
  cursor: pointer;
  background: var(--white);
  color: var(--dark-font-color);
}

select, input[type=text], input[type=email], textarea {
  border: none;
}

/* Beschreibt den neuen Dropdown Pfeil */
.select-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  border: none;
  margin-bottom: calc(var(--padding-4) * 0.5);
}

select {
  margin: 0;
}

.select-wrapper::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 50%;
  border-right: solid var(--dark-font-color);
  border-bottom: solid var(--dark-font-color);
  pointer-events: none;
  transform: translate(0, -65%) rotate(45deg);

  right: var(--padding-4);
  width: calc(var(--icon-width) / 2.5);
  height: calc(var(--icon-width) / 2.5);
  border-right-width: calc(var(--text-font-size) / 5);
  border-bottom-width: calc(var(--text-font-size) / 5);
}
/* Contact Ende */


/* Kontakt Seite Anfang */
#contact {
  background: var(--main-bg);
  color: var(--dark-font-color);
}

#contact a {
  color: var(--highlight-color);
  cursor: pointer;
  transition: color 0.35s ease-out;
}

/* Kontakt Seite Ende */


/* Blog Anfang */
.blog-hero-section {
  width: 100%;
  height: 100%;
  background: url(../images/jennie-razumnaya-rixN0q0IamQ-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  padding: var(--padding-1) 0;
}

.blog-hero-text {
  color: var(--dark-font-color);
  font-size: calc(28px + 0.390625vw);
  background-color: var(--highlight-font-color);
  padding: var(--padding-2);
  border-radius: var(--border-radius);
  hyphens: auto;
  text-align: center;
  font-weight: 500;
}

.blog-hero-text span {
  white-space: nowrap;
}

.blog-categorie-section {
  background: var(--main-bg);
  padding: var(--padding-1) 0;
  hyphens: auto;
}

.sort-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--padding-6);
}

.blog-categorie-section label {
  color: var(--dark-font-color);
  margin: calc(var(--padding-4) * -1) 0 calc(var(--padding-4) / 3) 0;
  font-weight: 700;
}

.blog-categorie-section select {
  width: 100%;
  height: 100%;
  background-color: var(--header-color);
  font-weight: 400;
  padding: calc(var(--padding-4) / 2) 0;
  text-align: center;
  margin-bottom: 0;
}

.blog-categorie-section .select-wrapper {
  position: relative;
  width: calc(200px + 6.5625vw);
  margin: 0 auto;
  text-align: left;
  border: none;
}

.blog-categorie-section .select-wrapper::before {
  content: "";
  position: absolute;
  margin: auto;
  bottom: 36%;
  border-right: solid var(--dark-font-color);
  border-bottom: solid var(--dark-font-color);
  pointer-events: none;
  transform: rotate(45deg);

  right: var(--padding-4);
  width: calc(var(--icon-width) / 2);
  height: calc(var(--icon-width) / 2);
  border-right-width: calc(var(--text-font-size) / 5);
  border-bottom-width: calc(var(--text-font-size) / 5);
}

#farben {
  background: url(../images/keila-hotzel-lFmuWU0tv4M-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 85%;
}

#werkzeuge {
  background: url(../images/keila-hotzel-lFmuWU0tv4M-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 85%;
}

#techniken {
  background: url(../images/keila-hotzel-lFmuWU0tv4M-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 85%;
}

#sonstige {
  background: url(../images/keila-hotzel-lFmuWU0tv4M-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 85%;
}

.one-column-section {
  padding: var(--padding-1) 0;
  position: relative;
}

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

.one-column-article img {
  border-radius: var(--border-radius);
  margin: var(--padding-2) 0;
}

.one-column-section .prev-arrow {
  display: flex;
  height: auto;
  width: auto;
  top: 0.5%;
  align-items: flex-start;
  z-index: 0;
}

/* Blog Ende */

/* Cookie Banner Anfang */
#Cki {
  display: none;
}

.cki-info {
  position: fixed;
  align-items: flex-start;
  align-content: center;
  justify-items: flex-start;
  right: 0;
  bottom: 0;
  min-width: 100%;
  height: auto;
  padding: var(--padding-6) 0;
  background: var(--dark-font-color);
  color: var(--light-font-color);
  text-align: left;
  z-index: 80;
  animation: 4s ckislide;
  animation-timing-function: cubic-bezier(.2,.88,0,1.01);
  transition: transform 0.2s;
  grid-template-columns: var(--columns);
  border-top: 3px solid rgb(80, 80, 80);
}

@keyframes ckislide {
  0% {margin-bottom: -200%; display: none;}
  75% {margin-bottom: -200%; display: none;}
  100% {margin-bottom: 0; display: grid !important;}
}

.cki-info > * {
  grid-column: 2 / 12;
}

h4 {
  color: var(--light-font-color);
  font-size: calc(var(--text-font-size) + 4pt);
  line-height: 1.25;
  padding-bottom: 0.5vw;
}

.cki-info p {
	color: var(--light-font-color);
  padding: 0 0 1.2vh 0;
}

.cki-info a {
	color: var(--light-font-color);
  font-weight: 500;
  display: inline-block;
  text-align: center;
  transition: color 0.35s ease-out;
}

.cki-btn {
	background: var(--highlight-color);
	color: var(--light-font-color);
  font-size: var(--text-font-size);
  font-weight: 500;
	padding: var(--button-padding);
	margin: 1rem 0 0 0;
	border-radius: var(--border-radius);
	cursor: pointer;
  width: auto;
  outline: none;
  border: none;
  text-align: center;
  transition: transform 1.5s cubic-bezier(.2,.88,0,1.01);
}
/* Cookie Banner Ende */


/* js Animations */
.fade-in {
  will-change: opacity;
  transition: opacity 0.75s ease-in;
  backface-visibility: hidden;
  perspective: 1000;
}

.slide-in {
  position: relative;
  will-change: transform, opacity;
  transition: opacity 3s cubic-bezier(.2,.88,0,1.01), transform 1.75s cubic-bezier(0,1.05,.42,1);
  backface-visibility: hidden;
  opacity: 0;
  transform-origin: top;
  transform: translate3d(0,10vh,1px);
}
/*
.slide-in-2 {
  transition: opacity 0.25s ease-in, transform 1.75s cubic-bezier(0,1.05,.42,1);
}*/

#no-js .slide-in {
  opacity: 1;
  transform: translate3d(0,0,1px);
}

html.no-animation .slide-in {
  opacity: 1;
  transform: translate3d(0,0,1px);
}

.slide-in[data-view="slided-in"] {
  opacity: 1;
  transform: translate3d(0,0,1px);
}

html.no-animation .fade-in {
  opacity: 1 !important;
}


/* Loading Container */
#show-page {
  animation: showpage 2.5s cubic-bezier(.2,.88,0,1.01);
  opacity: 0;
}

.loading-content #show-page {
  animation: showpage 1.5s ease-in !important;
  opacity: 0;
}

#show-page .loading-fade {
  display: none;
}

@keyframes showpage {
  0% {opacity: 100;}
  100% {opacity: 0;}
}

#no-js .loading-container {
  display: none;
}

.loading-container {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--width);
  height: 100vh;
  height: 100dvh;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  z-index: 1000;
  background-color: var(--white);
  opacity: 100;

  background: url(../images/loading-bg-3.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  background: none !important;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.loading-logo {
  width: 35vw;
  height: auto;
}

.loading-circle {
  display: none;
  position: relative;
  transform-origin: center center;
  border: calc(var(--text-font-size) - 10pt) solid var(--dark-font-color);
  border-top: calc(var(--text-font-size) - 10pt) solid var(--logo-peach);
  border-radius: 50%;
  animation: spin 2s linear infinite;
  margin: 0 auto;
  width: calc(var(--icon-width) * 1.75);
  height: calc(var(--icon-width) * 1.75);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-fade {
  animation: loadingfade 6s ease-in-out infinite;
  transition: opacity 1s;
}

@keyframes loadingfade {
  0% { opacity: 10%; }
  50% { opacity: 100%; }
  100% { opacity: 100%; }
}


/* Hover Klassen */
@media (hover: hover) and (pointer: fine) {
  .categorie-article a:hover {
    transform: translateZ(0) scale(0.97, 0.97);
  }

  @-moz-document url-prefix() {
  .categorie-article a:hover {
      transform: translateZ(0) scale(0.98, 0.98) rotate(0.015deg);
    }
  }

  nav ul li:hover > a {
    color: var(--logo-peach);
  }

  nav ul li:hover > div, .burgernav ul li:hover > div {
    background: var(--logo-peach);
  }

  .burgericon:hover .bar1, .burgericon:hover .bar2, .burgericon:hover .bar3  {
    background-color: var(--logo-peach);
  }

  .burgernav ul li a:hover {
    color: var(--logo-peach);
  }

  .socialicon:hover, .hero-socialicon:hover {
    transform: scale(110%);
  }

  .cki-btn:hover{
    transform: scale(104%);
  }

  input[type=submit]:hover, .go-to-button:hover, .go-to-button-2:hover {
    transform: scale(103%);
  }

  .dsgvo-link:hover {
    color: var(--logo-peach);
  }

  .prev-arrow > svg:hover, .next-arrow > svg:hover, .close-gallery > svg:hover {
    fill: var(--logo-peach);
  }

  .prev-arrow:hover > svg, .next-arrow:hover > svg {
    fill: var(--logo-peach);
  }

  #contact a:hover{
    color: var(--middle-grey);
  }

  .text a:hover {
    color: var(--highlight-font-color);
  }

  #workshop-contact .text a:hover {
    color: var(--middle-grey);
  }

  .gallery-item .content:hover {
    transform: scale(105%);
  }

  .full .gallery-item .content:hover {
    transform: scale(100%);
    transition: none !important;
  }
}