:root {
  font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
  font-size: 14px;
  /* font-size: clamp(1rem, 0.6296rem + 0.9877vw, 3rem); */
  /* --font-size-c: 0.7rem;
  --font-size-p: 1rem;
  --font-size-h4: 1.6rem;
  --font-size-h3: 1.9rem;
  --font-size-h2: 2.3rem;
  --font-size-h1: 3rem; */
  scroll-snap-type: y mandatory;
  --primary-dark: #212121;
  --font-size-c: clamp(0.83rem, calc(0.78rem + 0.29vw), 1.00rem);
  --font-size-p: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --font-size-h4: clamp(1.44rem, calc(1.26rem + 0.89vw), 1.95rem);
  --font-size-h3: clamp(1.44rem, calc(1.26rem + 0.89vw), 1.95rem);
  --font-size-h2: clamp(2.07rem, calc(1.73rem + 1.70vw), 3.05rem);
  --font-size-h1: clamp(2.07rem, calc(1.73rem + 1.70vw), 3.05rem);
  --shadow-filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.2));
  --shadow-box: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

.display_none {
  display: none !important;
}


p {
  display: block;
  font-size: var(--font-size-p);
  font-weight: 400;
  margin: 0;
  min-width: 0;
  hyphens: auto;
  color: var(--primary-dark);
  line-height: 1.4;
  z-index: 2;
  margin-bottom: 1rem;
}

h1 {
  padding: 0;
  margin: 0;
  margin-bottom: 2rem;
  font-size: var(--font-size-h1);
  font-weight: bold;
  hyphens: auto;
  color: var(--primary-dark);
}

h2 {
  padding: 0;
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: bold;
  hyphens: auto;
  color: var(--primary-dark);
}

h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 0.4rem;
  font-size: var(--font-size-h3);
  font-weight: bold;
  hyphens: auto;
  color: var(--primary-dark);
}

li {
  display: inline-block;
  font-size: var(--font-size-p);
  font-weight: 400;
  margin: 0;
  min-width: 0;
  hyphens: auto;
  color: var(--primary-dark);
  line-height: 1.3;
  z-index: 2;
}

a {
  display: block;
  font-size: var(--font-size-p);
  font-weight: 400;
  margin: 0;
  min-width: 0;
  hyphens: auto;
  color: var(--primary-dark);
  line-height: 1.3;
  z-index: 2;
  text-decoration: none;
}

::-webkit-scrollbar {
  display: none;
}

/* NOTE: modal */
.modal {
  display: none;
  box-sizing: border-box;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* overflow: auto; */
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  justify_content: center;
  align-items: center;
}

.modal_content {
  box-sizing: border-box;
  border-radius: 1rem;
  background-color: #fefefe;
  margin: 15% auto;
  padding: 2rem;
  width: 30rem;
  height: max-content;
  animation-name: modal_zoom;
  animation-duration: 0.4s;
  box-shadow: var(--shadow-box);
}

.big_modal {
  width: 75ch;
  height: auto;
  max-height: 80vh;
  overflow: scroll;
  padding: 3rem;
  position: relative;
}

.big_modal .imprint_wrapper {
  padding: 0;
  margin: 0;
}

.modal_content h2 {
  margin-bottom: 1rem;
}

.close_modal {

  color: #aaa;
  float: right;
  font-size: 1rem;
  font-weight: bold;
}

.close_modal:hover,
.close_modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.contact_form_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact_form_content .label {
  font-size: var(--font-size-p);
  margin: 0.7rem 0;
}

.contact_form_content .input {
  resize: none;
  border-radius: 420rem;
  padding: 0.7rem 1rem;
  font-family: unset;
  font-size: var(--font-size-p);
  background-color: #E8E8E8;
  border: none;
}

.contact_form_content .input::palceholder {}

.contact_form_content #message {
  height: 7rem;
  border-radius: 1rem
}

textarea:focus, input:focus {
  outline-color: grey;
}

.contact_form_content .g-recaptcha {
  display: flex;
  justify-content: end;
}

.contact_form_content .button {
  width: 100%;
}

@keyframes modal_zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

body {
  margin: 0;
  padding: 0;
}

.lang_button {
  display: flex;
  align-items: center;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background-color: white;
  border-radius: 420rem;
  border: none;
  padding: 1rem;
  font-weight: bold;
  font-size: var(--font-size-p);
  box-shadow: var(--shadow-box);
}

.lang_button::before {
  content: "";
  display: inline-block;
  margin-right: 0.2rem;
  width: 1.1rem;
  aspect-ratio: 1 / 1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path id="Icon_material-language" data-name="Icon material-language" d="M17.985,3A15,15,0,1,0,33,18,14.993,14.993,0,0,0,17.985,3Zm10.4,9H23.955a23.474,23.474,0,0,0-2.07-5.34A12.044,12.044,0,0,1,28.38,12ZM18,6.06A21.13,21.13,0,0,1,20.865,12h-5.73A21.13,21.13,0,0,1,18,6.06ZM6.39,21a11.733,11.733,0,0,1,0-6h5.07a24.773,24.773,0,0,0-.21,3,24.773,24.773,0,0,0,.21,3Zm1.23,3h4.425a23.474,23.474,0,0,0,2.07,5.34A11.98,11.98,0,0,1,7.62,24Zm4.425-12H7.62a11.98,11.98,0,0,1,6.495-5.34A23.474,23.474,0,0,0,12.045,12ZM18,29.94A21.13,21.13,0,0,1,15.135,24h5.73A21.13,21.13,0,0,1,18,29.94ZM21.51,21H14.49a22.069,22.069,0,0,1-.24-3,21.877,21.877,0,0,1,.24-3h7.02a21.877,21.877,0,0,1,.24,3A22.069,22.069,0,0,1,21.51,21Zm.375,8.34A23.474,23.474,0,0,0,23.955,24H28.38a12.044,12.044,0,0,1-6.495,5.34ZM24.54,21a24.773,24.773,0,0,0,.21-3,24.773,24.773,0,0,0-.21-3h5.07a11.733,11.733,0,0,1,0,6Z" transform="translate(-3 -3)" fill="%23212121"/></svg>') no-repeat;
  background-size: contain;
}

/* NOTE: NAV */
.nav_container {
  width: 8rem;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: auto;
  /* mix-blend-mode: exclusion; */
  z-index: 3;
}

.dots-list {
  position: absolute;
  padding: 1rem 1rem 1rem 1.3rem;
  width: 1rem;
  border-radius: 420rem;
  background-color: rgba(255, 255, 255, 1);
  margin: 0;
  box-shadow: var(--shadow-box);
}

.dot {
  width: 0.7rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--primary-dark);
  opacity: 0.4;
  transition: 0.2s;
}

.dot svg {
  width: 100%;
  height: 100%;
  scale: 1.3;
  fill: var(--primary-dark);
}

.dot-1 {
  margin: 0.4rem 0;
  background-color: transparent;
}

.dot-2 {
  margin: 0.4rem 0;
}

.dot-3 {
  margin: 0.4rem 0;
}

.dot-4 {
  margin: 0.4rem 0;
}

.dot-5 {
  margin: 0.4rem 0;
}

.dots-active {
  /* animation: bounce .5s 1; */
  animation-direction: forwards;
  opacity: 1;
  scale: 1.9;
  transition: 0.2s;
  margin: 0.6rem 0;
}

.dots-icon-active {
  background-color: none;
  /* animation: bounce .5s 1; */
  animation-direction: forwards;
  opacity: 1;
  scale: 1.7;
  transition: 0.2s;
  margin: 0.6rem 0;
}

@keyframes bounce {
  0% {
    transform: translatex(0.1rem)
  }
}

.slide {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  position: relative;
}

.slide_wrapper {
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
}

#Slide_Landing .slide_wrapper {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#landing_logo {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 100%;
  height: 100%;
  box-shadow: var(--box-shadow);
}

.cookie_info_intro {
  margin-top: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;

}

.cookie_info_intro p {
  font-size: var(--font-size-c);
}

.cookie_info_intro svg {

  width: 2rem;
  apsect-ratio: 1 / 1;
  transform: translate(0px, -0.4rem);

}


/* NOTE: css loading animation */
.lds-ellipsis {
  margin-top: 1em;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--primary-dark);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

.about_me_wrapper {
  margin: 0;
  padding: 0;
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about_me_image {
  box-sizing: border-box;
  aspect-ratio: 1;
  width: 17rem;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-image: url('../img/about_me_image.webp');
  margin: 1rem;
  box-shadow: var(--shadow-box);
  /* border: 0.5rem solid white; */
  z-index: 1;
}

.about_me_wrapper h2 {
  font-size: var(--font-size-h1) !important;
  font-weight: 700 !important;
  color: white;
}

.about_me_wrapper h3 {
  font-size: calc(var(--font-size-h1) - 1.6em) !important;
  font-weight: 400 !important;
  color: white;
  filter: var(--shadow-filter);
}

.about_me_icons_container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.about_me_icon_background {
  box-sizing: border-box;
  background: white;
  aspect-ratio: 1;
  border-radius: 100%;
  padding: 0;
  margin: 1em;
  margin-top: 2em;
  width: 3.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact_icon svg {
  height: 3rem;
  aspect-ratio: 1 / 1;
}

.dark_hover:hover {
  cursor: pointer;
  filter: brightness(80%);
}

.about_me_icon_background:nth-of-type(2n) {
  width: 5em;
}

.about_me_icon_wrapper {
  box-sizing: border-box;
  width: max-content;
  height: 1.8em;
  padding: 0;
  margin: 0;
}

.about_me_icon_wrapper svg {
  height: 1.8em;
  width: 1.8em;
}

#contact_icon {
  scale: 1.3;
  aspect-ratio: 1 / 1;
}

.slide_indicator {

}

#cv_indicator {
  display: flex;
  position: absolute;
  align-items: center;
  gap: 1rem;
  right: 2rem;
  bottom: 3.4rem;
  animation: cvjump 10s cubic-bezier(.51, -0.01, .99, .99) infinite;
}



#about_indicator {
  display: flex;
  position: absolute;
  align-items: center;
  gap: 1rem;
  left: 2rem;
  bottom: 3.4rem;
  animation: cvjump 10s cubic-bezier(.51, -0.01, .99, .99) infinite;
  z-index: 3;
}

#about_indicator svg {
  transform: rotate(180deg);
 }


#scroll_indicator {

display: flex;
  position: sticky;
  padding-bottom: 2rem !important;
  justify-content: end;
  flex-direction: column;
  align-items: center;
  animation: scrolljump 10s cubic-bezier(.51, -0.01, .99, .99) infinite;
  height: auto;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

#scroll_indicator p {
  transform: translate(0, -1rem);
}

.slide_indicator p {
  filter: var(--shadow-filter);
  font-size: var(--font-size-p);
  color: white;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  width: min-content;
}

.slide_indicator svg {
  filter: var(--shadow-filter);
  height: 0.5rem;
  width: 0.5rem;
  scale: 2;
}

@keyframes scrolljump {
  0%, 20%, 100% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(-1rem);
  }
}

@keyframes cvjump {
  0%, 20%, 100% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-1rem);
  }
}

@keyframes pause {
  0%, 100% {
    animation-play-state: running;
  }

  50% {
    animation-play-state: paused;
  }
}

.content_scroll_wrapper {
  scroll-snap-align: start;
  box-sizing: border-box;
  padding: 0 clamp(8rem, 7vw, 12rem);
  flex: 0 0 auto;
  width: 100vw;
  height: 70vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 2rem;
  grid-template-areas:
    "image image text";
}

.heading_wrapper {
  top: 0;
  z-index: 1;
  padding-left: clamp(8rem, 7vw, 12rem);
  padding-bottom: 1.3rem;
}

.heading_title {
  display: inline-block;
}

.heading_title p {
  padding: 0;
  margin: 0;
}

.clipped-element {
  scale: 0.9;
  box-sizing: border-box;
  margin: 1.5em;
  /* clip-path: url(#clip-path); */
  filter: var(--shadow-filter);
  width: 501.001px;
  height: 396.492px;
  background: rgb(235, 59, 54);
  background: linear-gradient(142deg, rgba(235, 59, 54, 1) 20%, rgba(54, 93, 235, 1) 100%);
  animation: gradient 6s ease infinite;
  background-size: 200% 200%;
  background-attachment: fixed;
  clip-path: path('M221.081,383.429a41.07,41.07,0,0,1-12.02-30.95,62.622,62.622,0,0,0-11.425-34.717,59.858,59.858,0,0,0-10.859,32.552c.4,11.546-2.84,24-11.878,33.035a41.179,41.179,0,0,1-70.3-28.59l-.034.033A62.966,62.966,0,0,0,43.927,290.88,41.169,41.169,0,0,1,0,249.921v-.254a41.183,41.183,0,0,1,82.36-.561l.036-.036a62.964,62.964,0,0,0,63.943,63.944c-.011.01-.022.022-.033.034.754.008,1.508.041,2.261.093a62.6,62.6,0,0,0,33.142-11.121,62.612,62.612,0,0,0-34.431-11.008q-.76.028-1.521.028a41.187,41.187,0,1,1,41.156-39.663,62.6,62.6,0,0,0,10.969,34.376,62.593,62.593,0,0,0,10.922-33.087,41.835,41.835,0,0,1-.062-4.209,62.96,62.96,0,0,0-61.465-61.782,41.182,41.182,0,1,1-2.358-82.319l-.034-.035a62.622,62.622,0,0,0,36.644-11.056,62.616,62.616,0,0,0-33.8-10.951c-.493.026-.986.037-1.481.046l.018.018-.3,0h-.708a62.959,62.959,0,0,0-62.924,61.6,41.192,41.192,0,1,1-41.158-39.6q1.562,0,3.125.118a62.967,62.967,0,0,0,60.155-60.582,41.179,41.179,0,1,1,82.263-3.324l.067-.068A62.655,62.655,0,0,0,197.76,77.039a62.6,62.6,0,0,0,11-32.492A41.173,41.173,0,0,1,249.67,0h.253a41.184,41.184,0,0,1,41.018,43.014A62.62,62.62,0,0,0,302.366,77.73a59.855,59.855,0,0,0,10.859-32.552c-.4-11.544,2.84-24,11.879-33.034a41.179,41.179,0,0,1,70.3,28.59l.034-.033a62.966,62.966,0,0,0,60.638,63.911q1.372-.092,2.743-.091a41.187,41.187,0,1,1-41.179,41.864c-.011.013-.023.024-.036.037A62.961,62.961,0,0,0,354.67,82.47c-.334,0-.673,0-1.01.008l.033-.034c-.753-.01-1.507-.042-2.26-.093a62.6,62.6,0,0,0-33.143,11.12,62.613,62.613,0,0,0,34.431,11.008,41.188,41.188,0,1,1-39.634,39.635,62.6,62.6,0,0,0-10.97-34.377A62.6,62.6,0,0,0,291.2,142.825a41.328,41.328,0,0,1,.063,4.21,62.958,62.958,0,0,0,61.465,61.781q.914-.039,1.828-.04a41.182,41.182,0,0,1,.531,82.361l.034.034c-.337-.005-.674-.008-1.011-.008a62.621,62.621,0,0,0-35.635,11.064,62.606,62.606,0,0,0,33.8,10.95c.495-.025.988-.036,1.482-.044l-.018-.019c.14,0,.279,0,.419,0h.335a62.958,62.958,0,0,0,63.179-61.6,41.185,41.185,0,1,1,82.339-1.7v.252A41.171,41.171,0,0,1,455.7,291a62.968,62.968,0,0,0-60.156,60.583,41.171,41.171,0,0,1-40.961,43.907h-.254a41.171,41.171,0,0,1-41.047-40.585l-.067.067a62.657,62.657,0,0,0-10.97-36.521,62.594,62.594,0,0,0-10.995,32.492,41.182,41.182,0,0,1-70.166,32.485ZM212.8,352.392l0,.126-.005.125a37.443,37.443,0,1,0,74.723-1.395L287.5,351l.011-.244a66.385,66.385,0,0,1,12.374-35.525,63.405,63.405,0,0,0-10.515-10.592A66.554,66.554,0,0,1,253.751,317l-.245.013-.244-.021c-1.051-.085-2.1-.13-3.128-.13-.532,0-1.067.013-1.592.036l-.124,0-.125,0A66.516,66.516,0,0,1,210.6,304.236a62.249,62.249,0,0,0-10.559,10.327A66.5,66.5,0,0,1,212.8,352.392Zm40.766-39.13a62.6,62.6,0,0,0,32.552-11.036,62.613,62.613,0,0,0-33.534-11.162,41.6,41.6,0,0,1-5.38,0,63.975,63.975,0,0,0-33.333,10.817,62.616,62.616,0,0,0,34.509,11.278q.876-.038,1.756-.039Q251.851,313.121,253.565,313.262Zm61.692-13.388a66.393,66.393,0,0,1,31.249-12.023l-.339-.34,8.866-.114a37.442,37.442,0,0,0-.483-74.88c-.552,0-1.112.012-1.662.036l-.125.006-.125,0A66.482,66.482,0,0,1,287.518,147.1l0-.1,0-.1a37.859,37.859,0,0,0-.057-3.829l-.013-.192.007-.193a66.129,66.129,0,0,1,12.381-36.064,63.358,63.358,0,0,0-10.6-10.7,67.278,67.278,0,0,1-36.3,12.243l-.192.008-.192-.013c-.813-.053-1.638-.08-2.451-.08s-1.635.027-2.445.079l-.189.013-.188-.007A66,66,0,0,1,210.8,95.533a63.384,63.384,0,0,0-10.669,10.641,66.475,66.475,0,0,1,12.555,37.86l0,.1,0,.1a37.418,37.418,0,0,0,37.413,38.73q.693,0,1.383-.025l.1,0,.1,0a66.48,66.48,0,0,1,65.453,65.119l0,.124,0,.125c-.017.393-.022.786-.028,1.178L317,258.343l-.334-.334a66.386,66.386,0,0,1-12.009,31.342A63.357,63.357,0,0,0,315.257,299.874Zm-167.911-12.6a66.515,66.515,0,0,1,37.6,12.351,63.361,63.361,0,0,0,10.56-10.619,66.519,66.519,0,0,1-12.327-37.561l0-.1,0-.1a37.578,37.578,0,0,0-10.935-27.859,37.448,37.448,0,1,0-26.483,63.92q.693,0,1.384-.025l.1,0Zm131.675-66.425a41.067,41.067,0,0,1,12.029,30.543A62.607,62.607,0,0,0,302.241,286.1a62.639,62.639,0,0,0,11.1-36.706l.034.034c.006-.431.013-.863.031-1.294a62.961,62.961,0,0,0-61.78-61.465q-.76.03-1.521.029a41.16,41.16,0,0,1-41.152-42.6,62.6,62.6,0,0,0-11.191-34.707,62.641,62.641,0,0,0-11.1,36.706l-.035-.034c0,.431-.011.863-.03,1.293a62.959,62.959,0,0,0,61.78,61.465q.761-.028,1.522-.028A41.049,41.049,0,0,1,279.021,220.849ZM421.38,146.323a37.448,37.448,0,1,0,37.438-38.062c-.828,0-1.669.027-2.5.082l-.19.013-.192-.007c-33.032-1.185-60.022-26.869-63.8-58.946l-.376.383-.1-9a37.441,37.441,0,0,0-63.916-25.994c-9.946,9.945-11.026,23.227-10.785,30.261l0,.126,0,.126A63.568,63.568,0,0,1,304.654,80.78a63.39,63.39,0,0,0,10.53,10.414,66.125,66.125,0,0,1,36.095-12.581l.2-.007.2.013c.709.049,1.4.076,2.057.086l9.027.116-.358.35a66.762,66.762,0,0,1,58.517,58.639l.305-.306ZM14.709,119.069A37.448,37.448,0,1,0,78.6,144.114l0-.11,0-.111c.7-33.445,26.584-61.095,59.142-64.829l5.211-.39c.769-.027,1.536-.04,2.31-.04h.045l.883-.015c.448-.008.9-.017,1.346-.041l.149-.008.149,0A66.477,66.477,0,0,1,184.76,90.887,63.38,63.38,0,0,0,195.5,80.116a66.45,66.45,0,0,1-12.023-31.052l-.365.362-.128-8.786a37.438,37.438,0,1,0-74.79,3.023l.013.19-.007.19a66.974,66.974,0,0,1-63.733,64.184l-.221.008-.22-.015c-.942-.071-1.9-.107-2.843-.107A37.188,37.188,0,0,0,14.709,119.069ZM252.8,104.429a63.979,63.979,0,0,0,33.333-10.818,62.618,62.618,0,0,0-34.509-11.278,41.383,41.383,0,0,1-5.186-.1,62.6,62.6,0,0,0-32.553,11.036,62.612,62.612,0,0,0,33.533,11.162q1.343-.088,2.688-.087T252.8,104.429Z');
}

.crossfade h2 {
  color: var(--primary-dark) !important;
  filter: unset !important;
  font-size: var(--font-size-p);
  font-weight: 400;
}

.crossfade h1 {
  color: var(--primary-dark) !important;
  filter: unset !important;
  font-size: var(--font-size-h2);
  font-weight: 700;
}

.Logo_wrapper {}

/* NOTE: Background Animation */
.CV_list .year,
.button,
.gestaltungspunkt,
.colorfull_background {
  overflow: auto;
  background: rgb(235, 59, 54);
  background: linear-gradient(142deg, rgba(235, 59, 54, 1) 10%, rgba(54, 93, 235, 1) 90%);
  animation: gradient 80s ease infinite;
  background-size: 400% 400%;
}

.colorfull_background::before {
  content: "";
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* background-color: rgba(255, 255, 255, 0);
  opacity: 0.2;
  background-image:  radial-gradient(#ffffff 3px, transparent 3px), radial-gradient(#ffffff 3px, rgba(255, 255, 255, 0) 2px);
  background-size: 6rem 6rem;
  background-position: 0 0,3rem 3rem; */
  background:
    conic-gradient(from -60deg at 50% calc(100%/3), #ffffff 0 120deg, #0000 0),
    conic-gradient(from 120deg at 50% calc(200%/3), #ffffff 0 120deg, #0000 0),
    conic-gradient(from 60deg at calc(200%/3), #ffffff 60deg, #ccc 0 120deg, #0000 0),
    conic-gradient(from 180deg at calc(100%/3), #999 60deg, #ffffff 0 120deg, #0000 0),
    linear-gradient(90deg, #999 calc(100%/6), #ccc 0 50%,
      #999 0 calc(500%/6), #ccc 0);
  background-size: 28rem 16rem;
  mix-blend-mode: multiply;
  bacgkround-attachment: scroll;
  /* animation: gradient 240s linear infinite; */
  background-position: center;
  opacity: 0.17;
  /* background-color: rgba(255, 255, 255, 0);
  background-image:  radial-gradient(#ffffff 0.3rem, transparent 0.3rem), radial-gradient(#ffffff 0.3rem, rgba(0, 0, 255, 0) 0.3rem);
  background-size: 6rem 6rem;
  background-position: 0 0,3rem 3rem;
    opacity: 0.1;
  background-attachment: fixed;
  filter: blur(1); */
}

#Slide_Landing {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}


@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* The .crossfade class applies a transition effect to the opacity of the divs over 1 second. */
.crossfade {
  position: absolute;
  /* opacity: 1;
  transition: opacity 1s linear; */
}

/* The .hide class sets the opacity of an element to 0, making it invisible. */
.hide {
  /* opacity: 0; */
  transform: translate(0, -101vh);
  transition: 0.5s;
  transition-timing-function: cubic-bezier
    /* transition: opacity 1s linear; */
}

#slide_UX_UI {
  /*background: #311FDE;*/
  background: white;
}

#slide_CI {
  /*background: #311FDE;*/
  background: var(--primary-dark);
}

#slide_misc {
  background: white;
}

#slide_CI h1,
#slide_CI h3,
#slide_CI p,
#slide_CI h2 {
  /*background: #311FDE;*/
  color: white;
}

#Slide_Landing h1 {
  padding: 0;
  margin: 0;
  margin-top: 0.5rem;
  font-size: 4rem;
  font-weight: 700;
  hyphens: auto;
  color: white;
  filter: var(--shadow-filter);
}

#Slide_Landing h2 {
  font-size: 1.9rem;
  font-weight: 400;
  padding: 0;
  margin: 0;
  color: white;
  filter: var(--shadow-filter);
}

nav a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
}

.content_scroll_outer_wrapper {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel {
  grid-area: image;
  object-fit: cover;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-radius: 1rem;
}

/* .carousel:hover .carousel-image {
  animation-play-state: paused;
} */

/* .content_image {
  background-clip: border-box;
  position: relative;
  z-index: 2;
  border-radius: 1rem;
  margin-right: 2vw;
  background-size: cover;
  background-position: center;
  width: 66vw;
  height: auto;
  transition: 0.3s;
  overflow: hidden;
  box-shadow: var(--shadow-box);
} */
.carousel-image {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.animate-carousel {
  animation: carousel 18s infinite;
}

.carousel-image:nth-child(3) {
  animation-delay: 0s;
}

.carousel-image:nth-child(2) {
  animation-delay: 6s;
}

.carousel-image:nth-child(1) {
  animation-delay: 12s;
}

@keyframes carousel {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
    scale: 1.01;
  }

  35% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    scale: 1.1;
  }
}

.gestaltung_kreis {
  display: none;
  position: absolute;
  padding: 5vh 0 0 50vw;
  z-index: 1;
}

#gestaltung_kasten {
  display: none;
  margin-left: 40vw;
  margin-top: 10vh;
  z-index: 1;
  position: absolute;
  border-style: solid;
  border-radius: 1rem;
  border-width: 0.5rem;
  border-color: red;
  width: 35vw;
  height: 40vh;
  transform: rotate(5deg);
}

.content_text {
  grid-area: text;
  max-width: 65ch;
  margin: 0;
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;
  white-space: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  /* padding-right: 3rem; */
}

/* NOTE: Slide Navigation Arrows */
.Arrow_icon_container {
  position: absolute;
  grid-area: text;
  width: auto;
  height: auto;
  z-index: 4;
  /* background-color: red; */
  right: 0;
  bottom: 0.7rem;
}

.Arrow_icon_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  border-radius: 420px;
}

.Arrow_icon_wrapper svg {
  width: 2rem;
  height: auto;
}

.back_Arrow_icon_wrapper {
  z-index: 4;
  width: 2rem;
  height: 2rem;
  border-radius: 420px;
}

.back_Arrow_icon_wrapper svg {
  width: 1.3rem;
  height: auto;
}

.arrow_end {
  bottom: 0.4rem;
}

#arrow_icon_SVG {
  translate: 0.2rem 0;
  scale: 0.7;
}

#back_arrow_icon_SVG {
  translate: 0.2rem 0;
  scale: 2;
}

/* NOTE: Logo */
/* NOTE: Buttons */
.button {
  z-index: 1;
  display: block;
  border-width: 0;
  min-height: 3rem;
  padding: 0.2rem;
  width: clamp(15rem, 60%, 17rem);
  border-radius: 420rem;
  color: white;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--font-size-p);
  font-weight: 700;
  margin: 0;
  min-width: 0;
  hyphens: auto;
  line-height: 0;
  text-align: center;
  line-height: 3rem;
  cursor: pointer;
  transition: 0.3s;
  position: static;
  box-shadow: var(--box-shadow);
}

.button:hover {
  transition: 0.2s;
  color: black;
  filter: saturate(0%) brightness(220%);
}

/* NOTE: Gestaltungsbutton */
.gestaltungspunkt {
  display: inline-block;
  padding: 0;
  margin-right: 1rem;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 4.5rem;
}

.gestaltungspunkt #UX_icon {
  width: 100%;
  height: 100%;
  scale: 0.55;
  transform: translate(0rem, 0.1rem);
}

.gestaltungspunkt #CI_icon {
  width: 100%;
  height: 100%;
  scale: 0.7;
}

.gestaltungspunkt #misc_icon {
  width: 100%;
  height: 100%;
  scale: 0.7;
}

/* NOTE: Collaborators */
.Collaborator_list {
  width: auto text-align: center;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  padding-left: 0;
  padding-bottom: 2rem;
}

.Collaborator_list a {
  display: flex;
  background: lightgrey;
  width: min-content;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 420rem;
  margin-right: 0.3rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  /* font-size: 0.8rem; */
  color: var(--primary-dark);
  transition: 0.2s;
  font-size: var(--font-size-c);
}

.Collaborator_list a:before {
  font-family: 'Material Icons';
  content: '\e89e';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1.1;
  font-size: var(--font-size-p);
  /* Adjust the font size as needed */
  margin-right: 0.5rem;
}

.Collaborator_list a:hover {
  filter: brightness(110%);
  transition: 0.3s;
}

/* NOTE: CV Cards */
#Slide_CV .heading_wrapper h2 {
  color: white;
  filter: var(--shadow-filter);
}

#Slide_CV .heading_wrapper p {
  color: white;
  filter: var(--shadow-filter);
}

#Slide_CV .gestaltungspunkt {
  background: none;
  border: 0.2rem solid white;
}

#Slide_CV .slide_wrapper {
  position: relative;
  justify-content: center;
}

.cv_grid_container {
  position: absolute;
  top: 10vh;
  bottom: 10vh;
  left: clamp(8rem, 10%, 20rem);
  right: clamp(8rem, 10%, 20rem);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1.1fr 0.9fr 0.05fr;
  gap: 3.6% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "cv_Small_text cv_hard_skills cv_soft_skills"
    "cv_job_history cv_job_history cv_job_history"
    "scrollbar scrollbar scrollbar";
}

.cv_box {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  box-sizing: border-box;
  background-color: white;
  padding: 2rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-box);
}

.cv_hard_skills {
  grid-area: cv_hard_skills;
}

.cv_soft_skills {
  grid-area: cv_soft_skills;
}

.cv_Small_text {
  grid-area: cv_Small_text;
}

.cv_job_history {
  grid-area: cv_job_history;
}

.scrollbar {
  grid-area: scrollbar;
}

.cv_job_history {
  overflow: auto;
}

.CV_list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: start;
  height: 100%;
  padding: 0;
  margin: 0;
  /* scroll-snap-align: start;
    scroll-snap-stop: normal; */
  gap: 2%;
}

.CV_list>li {
  height: 100%;
  min-width: 31.93%;
}

.CV_list .Collaborator_list {
  margin-bottom: 0;
  width: 100%;
  padding: 0;
  text-align: center;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}

.CV_list .year {
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scrollbar {
  box-sizing: border-box;
  position: absolute;
  border-radius: 420rem;
  left: 0;
  bottom: 50%;
  height: 0.2rem;
  width: 100%;
  background: white;
}

.thumb {
  overflow: visible;
  position: relative;
  border-radius: 420rem;
  height: 800%;
  width: 50%;
  /* Initial width, will be updated by JavaScript */
  background: white;
  bottom: 400%;
}

#Footer {
  position: relative;
  height: 50vh;
  height: 50svh;
  scroll-snap-align: end;
  background: var(--primary-dark);
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 35rem;

}

.footer_links {
  display: flex;
  flex-direction: row;
}

#Footer .footer_button {
  font-size: var(--font-size-p);
  color: grey;
  border: solid 0.2rem grey;
  margin: 0 1rem;
  padding: 0.2rem 2rem;
  border-radius: 420rem;
  cursor: pointer;
}

#Footer .footer_button:hover {
    color: white;
    border: solid 0.2rem white;
}

#Footer img {
  padding-bottom: 3rem;
  opacity: 50%;
}

#cookie_info_footer {
  fill: grey;
  }

#cookie_info_footer p  {
  color: grey;
}


#creditbar {

  display: flex;
  justify-content: center;
  align-items: center;
  background: #151515;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem;
}

#creditbar p {
  color: grey;
  font-size: var(--font-size-c);
  bottom: 1rem;
  margin: 0;
  padding: 0;
}


/*---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  :root {
    font-size: 15px !important;
    scroll-snap-type: none;
  }

  /* .colorfull_background::before {
  display: none;
  background: none;
} */
  #cv_indicator {
    display: none;
  }

  #resume {
    display: none !important;
  }

  .slide .button {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    align-self: flex-end;
    position: absolute;
    bottom: 1rem;
  }

  .carousel {
    height: 100%;
    max-width: unset;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  #Slide_Landing {
    min-height: unset;
    height: 100svh;
  }

  /* NOTE: Slide Page Indicator */
  .mobile_page_indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .mobile_page_indicator .mobile_page_indicator_dot {
    margin: 0 0.6rem;
    height: 0.6rem;
    width: 0.6rem;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease, transform 0.6s ease;
  }

  .mobile_page_indicator_active {
    /* background-color: var(--primary-dark) !important; */
    transform: scale(1.5);
  }

  #slide_UX_UI, #slide_CI, #slide_misc {
    margin: 0;
    height: 70rem;
  }

  .about_me_wrapper h2 {
    font-size: var(--font-size-h2) !important;
  }

  .about_me_wrapper h3 {
    font-size: var(--font-size-p) !important;
  }


  .page-two .slide_wrapper {
    position: relative;
    justify-content: start;
    height: auto;
  }

  .page-three .slide_wrapper {
    position: relative;
    justify-content: start;
    height: auto;
  }


  .slide_wrapper .content_scroll_wrapper {
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 0;
    flex: 0 0 auto;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.8fr 1.2fr;
    gap: 1.5rem 0;
    grid-template-areas:
      "image"
      "text";
    height: 50rem;
    padding: 0 clamp(1.5rem, 2%, 6rem);
  }

  .clipped-element {
    scale: 0.5;
    margin: 0;
  }

  nav {
    display: none;
  }

  .content_text {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
    max-width: unset;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    white-space: wrap;
    justify-content: start;
    align-content: start;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
  }

  .content_image {
    box-sizing: border-box;
    z-index: 2;
    border-radius: 1em;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 60vh !important;
    transition: 0.3s;
  }

  .content {
    height: 100%;
    flex-direction: row;
  }

  /* p {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    min-width: 0;
    hyphens: auto;
    color: var(--primary-dark);
    line-height: 1.3;
    z-index: 2;
    margin-bottom: 1em;
  }

  h1 {
    padding: 0;
    margin: 0;
    margin-bottom: 0.1em;
    font-size: 1.9rem;
    font-weight: bold;
    hyphens: auto;
    color: var(--primary-dark);
  }

  h2 {
    font-size: 1.9rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-bottom: 0.1em;
    color: var(--primary-dark);
    z-index: 2;
  }

  h3 {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-bottom: 0.3em;
    color: var(--primary-dark);
    z-index: 2;
  }

  li {
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    min-width: 0;
    hyphens: auto;
    color: var(--primary-dark);
    line-height: 1.3;
    z-index: 2;
  }

  a {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    min-width: 0;
    hyphens: auto;
    color: var(--primary-dark);
    line-height: 1.3;
    z-index: 2;
    text-decoration: none;
  } */
  .Arrow_icon_container {
    width: auto;
    height: auto;
    z-index: 4;
    position: static;
    /* background-color: red; */
    right: 1.5em;
    bottom: 1.5rem;
    margin: -3.4rem 0 0 0;
    padding: 0;
    top: auto;
    display: flex;
    justify-content: end;
    display: none;
  }

  .Arrow_icon_wrapper {
    padding-bottom: 0;
    height: auto;
  }

  .gestaltungspunkt {
    padding: 0;
    margin: 0;
    margin-right: 0.5rem;
    right: 1.5em;
    left: unset;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 3.5rem;
  }

  .content_scroll_wrapper {}

  .heading_wrapper {
    padding: 6rem clamp(1.5rem, 6%, 6rem) 1.5rem clamp(1.5rem, 6%, 6rem);
    margin: 0;
  }

  .heading_wrapper h2 {
    padding-left: 0;
  }

  .heading_wrapper p {
    padding-left: 0;
  }

  #Slide_Landing h1 {
    padding: 0;
    margin: 0;
    margin-top: 0.5em;
    font-size: 2.5rem;
    font-weight: 700;
    hyphens: auto;
    color: white;
  }

  #Slide_Landing h2 {
    font-size: 1.2rem;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: white;
  }
}


/* NOTE: IMPRINT AND PRIVACY STYLING-------------------------------------------------------------- */

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

  margin: 0;
  padding: 0;
}



.big_modal .close_modal {
  position: absolute;
  right: 3rem;

}

.legal_wrapper h2 {
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
    margin-top: 1.3rem;
    font-size: var(--font-size-h4);
    font-weight: bold;
    hyphens: auto;
    color: var(--primary-dark);
  }

  .legal_wrapper a {
    display: inline;
    color: blue;
  }

  .legal_wrapper a:hover {
    display: inline;
    color: lightgrey;
  }