/* all rights reserved © Marcel Gangl */

/* fonts */

@font-face {
  font-family: "swiza-regular";
  src: url("../fonts/swiza/swiza-regular-webfont.woff") format("woff"),
    url("../fonts/swiza/swiza-regular-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "swiza-regularitalic";
  src: url("../fonts/swiza/swiza-regularitalic-webfont.woff") format("woff"),
    url("../fonts/swiza/swiza-regularitalic-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "swiza-medium";
  src: url("../fonts/swiza/swiza-medium-webfont.woff") format("woff"),
    url("../fonts/swiza/swiza-medium-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "swiza-semibold";
  src: url("../fonts/swiza/swiza-semibold-webfont.woff") format("woff"),
    url("../fonts/swiza/swiza-semibold-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "pixeloidMono";
  src: url("../fonts/pixeloid/PixeloidMono.woff") format("woff"),
    url("../fonts/pixeloid/PixeloidMono.woff2") format("woff2");
}

@font-face {
  font-family: "pixeloidSans";
  src: url("../fonts/pixeloid/PixeloidSans.woff") format("woff"),
    url("../fonts/pixeloid/PixeloidSans.woff2") format("woff2");
}

@font-face {
  font-family: "pixeloidSanBold";
  src: url("../fonts/pixeloid/PixeloidSansBold.woff") format("woff"),
    url("../fonts/pixeloid/PixeloidSansBold.woff2") format("woff2");
}

/* verzeichnis */

:root {
  --F-sw-r: "pixeloidSans";
  --F-sw-ri: "pixeloidSans";
  --F-sw-m: "pixeloidSans";
  --F-sw-smb: "pixeloidSanBold";
  --F-bp-f: "Arial, Helvetica, sans-serif";

  --F-nv-r: "pixeloidSans";
  --F-nv-b: "pixeloidSanBold";
  --F-nv-bi: "pixeloidSanBold";
  --F-bp-f2: "Times New Roman, Times, serif";

  --T-headline: 25px;
  --T-under-headline: 25px;
  --T-copy: 14px;
  --T-c-lh: 24px;
  --T-h1: 48px;
  --T-h1-lh: 58px;

  --C-black: rgb(36, 36, 36);
  --C-lightblack: rgb(52, 52, 52);
  --C-white: rgb(255, 255, 255);
  --C-grey: rgb(200, 200, 200);
  --C-darkgrey: rgb(120, 120, 120);
  --C-orange: rgb(255, 117, 25);
  --C-darkorange: rgb(255, 79, 25);

  --C-DM-orange: rgb(255, 79, 25);
  --C-DM-darkorange: rgb(255, 20, 25);
}

/* allgemein */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  forced-color-adjust: none !important;
}

::selection {
  background: var(--C-darkgrey);
  color: var(--C-white);
}

@media print {
  html,
  body {
    display: none;
  }
}

body {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  list-style: var(--T-c-lh);
  font-style: normal;
  background-color: var(--C-white);
}

img {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  filter: grayscale(100%);
}

/* preloader */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9992;
  transition: opacity 0.5s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.preloader.hidden2 {
  opacity: 0;
  display: none;
}

.preloader-ovl {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100vw;
  top: 0;
  height: 100vh;
  z-index: 9991;
}

.image-container {
  position: fixed;
  display: inline-block;
  z-index: 9994;
}

.image-container img {
  display: block;
  width: 350px;
}

.animated-line {
  position: absolute;
  top: 18%;
  height: 6px;
  background-color: #ffffff;
  width: 0;
}

/* body */

/* clock */

.clock {
  position: absolute;
  right: 20px;
  top: 100px;
  z-index: 20;
  background-color: var(--C-white);
  backdrop-filter: blur(20px);
  border: 1px solid var(--C-black);
  border-radius: 0px;
  padding: 8px 10px;
  box-sizing: border-box;
  width: 80px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.clock2 {
  position: absolute;
  left: 20px;
  top: 100px;
  z-index: 20;
  background-color: var(--C-white);
  backdrop-filter: blur(20px);
  border: 1px solid var(--C-black);
  border-radius: 0px;
  padding: 8px 10px;
  box-sizing: border-box;
  width: 95px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.clock p,
clock2 p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 13px;
  color: var(--C-darkgrey);
}

.clock-2nd {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  color: var(--C-darkgrey);
}
/* header – desktop */

header {
  background-color: var(--C-white);
  backdrop-filter: blur(20px);
  border: solid 1px var(--C-black);
  border-radius: 0px;
  top: 20px;
  left: 20px;
  right: 20px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  position: fixed;
  z-index: 1000;
  height: 60px;
}

.h-logo-img img {
  height: 30px;
  width: auto;
  padding-top: 4px;
  cursor: alias;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 80px;
  list-style: none;
}

.nav-btns {
  display: flex;
  align-items: center;
  gap: 20px;
}

nav li {
  text-decoration: none;
  font-family: var(--F-sw-m), var(--F-bp-f);
}

a {
  text-decoration: none;
  color: var(--C-black);
  cursor: alias;
}

a .h-txt {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
}

a:hover .h-txt {
  text-decoration-color: var(--C-grey);
}

/* header – actice class */

.h-active {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: var(--C-grey);
}

.h-m-active {
  font-family: var(--F-sw-smb), var(--F-nv-b) !important;
}

.h-nmbs {
  position: relative;
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 11px;
  display: inline-block;
  transform: translateY(-5px);
  font-variant-numeric: tabular-nums;
}

.h-nmbs::after {
  content: attr(data-alt);
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: var(--C-grey);
}

a:hover .h-nmbs {
  color: transparent;
}

a:hover .h-nmbs::after {
  opacity: 1;
}

/* header – mobile */

.h-mbtn {
  border: none;
  background-color: transparent;
  border-radius: 6px;
  width: 40px;
  height: 40px;
}

#m-btn-bar {
  z-index: 10;
  padding: 8px;
}

.m-h-nmbs {
  position: relative;
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 12px;
  transform: translateY(-8px);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.m-h-txt {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 20px;
  padding-left: 5px;
  color: var(--C-black);
}

.m-btn-bar {
  z-index: 15;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background-color: var(--C-black);
  transition: 0.5s ease;
}

/* header – mobile animation */

#m-btn-bar1 {
  transform: translateY(2.7px);
}

#m-btn-bar2 {
  transform: translateY(0px);
  transform: rotateZ(-90deg);
}

.change-bar #m-btn-bar1 {
  transform: rotateZ(45deg) translateX(2.5px) translateY(2px);
}

.change-bar #m-btn-bar2 {
  transform: rotateZ(-45deg);
}

.hidden {
  display: none;
}

#m-nav-m {
  position: fixed;
  z-index: 1001;
  top: 80px;
  left: 0px;
  right: 0px;
  border: solid 1px var(--C-grey);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(-600px);
  transform-origin: top;
  transition: opacity 0.8s ease, transform 0.5s ease;
}

.m-nav-bar {
  width: 100%;
  height: 1px;
  background-color: var(--C-grey);
}
.m-nav-m {
  display: grid;
  grid-template-rows: repeat(10fr);
  padding: 50px 20px 50px 20px;
  align-items: left;
  gap: 20px;
  list-style: none;
}

.m-nav-m button {
  width: auto;
  justify-self: right;
}

.m-nav-m a {
  display: block;
}

#m-header-ol-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.2);
  z-index: 800;
}

/* Buttons */

/* Button Kontakt – schwarz */

.k-btn {
  position: relative;
  padding: 7px;
  background-color: var(--C-grey);
  color: var(--C-white);
  border: 1px solid var(--C-black);
  border-radius: 0px;
  overflow: hidden;
  cursor: alias;
  font-size: 13px;
  box-shadow: 4px 4px 0px 0px var(--C-black);
}

.k-btn a {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 13px;
}

.k-btn-b-ly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--C-white);
  color: var(--C-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 2;
}

.k-btn .k-btn-b-ly span {
  margin-right: 5px;
  transition: margin-right 0.3s ease;
  font-family: var(--F-sw-r), var(--F-bp-f);
}

.k-btn:hover .k-btn-b-ly {
  transform: translateX(calc(100% - 22px));
}

.k-btn:hover .k-btn-b-ly span {
  margin-right: 12px;
}

.k-btn .k-btn-w-ly {
  position: relative;
  display: flex;
  align-items: left;
  justify-content: left;
  width: 100%;
  height: 100%;
  margin-right: 20px;
}

/* Button Projekte – weiß */

.p-btn {
  position: relative;
  padding: 7px;
  background-color: var(--C-white);
  color: var(--C-black);
  border: 1px solid var(--C-black);
  border-radius: 0px;
  overflow: hidden;
  cursor: alias;
  box-shadow: 4px 4px 0px 0px var(--C-black);
}

.p-btn p {
  font-family: var(--F-sw-r), var(--F-bp-f);
}

.p-btn .p-btn-b-ly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--C-darkgrey);
  color: var(--C-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.p-btn .p-btn-b-ly span {
  margin-right: 5px;
  transition: margin-right 0.3s ease;
}

.p-btn:hover .p-btn-b-ly {
  transform: translateX(calc(100% - 22px));
}

.p-btn:hover .p-btn-b-ly span {
  margin-right: 12px;
}

.p-btn .p-btn-w-ly {
  position: relative;
  display: flex;
  align-items: left;
  justify-content: left;
  width: 100%;
  height: 100%;
  margin-right: 20px;
}

/* Language Button Switch */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  box-shadow: 4px 4px 0px 0px var(--C-black);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--C-white);
  border: 1px solid var(--C-black);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 5px;
  bottom: 4.5px;
  background-color: var(--C-darkgrey);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider::after {
  content: "en";
  position: absolute;
  color: var(--C-black);
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 13px;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

input:checked + .slider {
  background-color: var(--C-darkgrey);
}

input:checked + .slider::after {
  content: "de";
  left: 10px;
  right: auto;
  color: var(--C-white);
}

input:checked + .slider:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
  background-color: var(--C-white);
  height: 19px;
  width: 19px;
}

.slider.round {
  border-radius: 0px;
}

.slider.round:before {
  border-radius: 0%;
}

/* color mode Button Switch */

.switch2 {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  box-shadow: 4px 4px 0px 0px var(--C-black);
}

.switch2 input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider2 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--C-white);
  border: 1px solid var(--C-black);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider2:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 5px;
  bottom: 4.5px;
  background-color: var(--C-darkgrey);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider2::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z" fill="rgb(0,0,0)" /> </svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  color: var(--C-black);
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
}

input:checked + .slider2 {
  background-color: var(--C-darkgrey);
}

input:checked + .slider2::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(255,255,255)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="rgb(255,255,255)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z" fill="rgb(255,255,255)"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 7px;
  right: auto;
}

input:checked + .slider2:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
  background-color: var(--C-white);
  height: 19px;
  width: 19px;
}

.slider2.round2 {
  border-radius: 0px;
}

.slider2.round2:before {
  border-radius: 0%;
}

/* css switch  */

.switch3 {
  position: absolute;
  display: inline-block;
  width: 200px;
  height: 89px;
  z-index: 1;

  font-family: "swiza-medium", sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.switch3:hover {
  opacity: 1;
}

.switch3 input {
  display: none;
}

.switch3:has(input:checked) {
  opacity: 1;
}

.slider3 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(36, 36, 36, 1);
  border: 1px solid var(--C-grey);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider3:before {
  position: absolute;
  content: "";
  height: 65px;
  width: 65px;
  left: 10px;
  bottom: 11px;
  background-color: var(--C-white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider3::after {
  content: "turn on secret style";
  display: inline-block;
  height: 65px;
  width: 65px;
  position: absolute;
  color: var(--C-white);
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

input:checked + .slider3 {
  background-color: var(--C-orange);
}

input:checked + .slider3::after {
  content: "turn off secret style";
  display: inline-block;
  height: 65px;
  width: 65px;
  position: absolute;
  color: var(--C-white);
  top: 50%;
  left: 20px;
}

input:checked + .slider3:before {
  -webkit-transform: translateX(112px);
  -ms-transform: translateX(112px);
  transform: translateX(112px);
  background-color: var(--C-black);
  height: 68px;
  width: 68px;
  bottom: 10px;
}

.slider3.round3 {
  border-radius: 20px;
}

.slider3.round3:before {
  border-radius: 10px;
}

/* Hero Intro */

.hero {
  width: 100vw;
  height: 95vh;
  background-image: url("../media/Hero-Banner-Desktop.jpg");
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background-blend-mode: multiply;
  filter: grayscale(100%);
}

.hero h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  margin: 50px 40px;
  color: var(--C-white);
}

#hero-h1-bar {
  width: 100%;
  height: 2px;
  background-color: var(--C-white);
  margin-top: -10px;
  margin-bottom: -40px;
}

#hero-h1-txt0 {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 17px;
}

.hero-h1-txt1 {
  text-decoration: line-through;
  text-decoration-thickness: 6px;
  text-decoration-color: var(--C-white);
}

.hero-h1-txt2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-underline-offset: 7px;
  text-underline-position: below;
  text-decoration-color: var(--C-white);
  cursor: pointer;
  font-family: var(--F-nv-bi), var(--F-bp-f2);
  transition: all 0.3s ease;
}

.hero-h1-txt2:hover {
  text-decoration-color: var(--C-orange);
}

#hero-h1-txt3 {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
}

/* Hero h2 mobile */

.hero h2 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: 38px;
  line-height: 48px;
  margin: 0px 10px 30px 30px;
  color: var(--C-white);
}

#hero-h2-bar {
  width: 90%;
  height: 2px;
  background-color: var(--C-white);
  margin-top: -10px;
  margin-bottom: -40px;
}

#hero-h2-txt0 {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: 15px;
}

.hero-h2-txt1 {
  text-decoration: line-through;
  text-decoration-thickness: 5px;
  text-decoration-color: var(--C-white);
}

.hero-h2-txt2 {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  text-underline-position: below;
  text-decoration-color: var(--C-white);
  cursor: pointer;
  font-family: var(--F-nv-bi), var(--F-bp-f2);
  transition: all 0.3s ease;
}

.hero-h2-txt2:hover {
  text-decoration-color: var(--C-orange);
}

#hero-h2-txt3 {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
}

/* Hero transition section borderradius */

.hero-t {
  position: relative;
  width: 100vw;
  height: 40px;
  background-color: var(--C-white);
  border-top: 1px solid var(--C-black);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-top: -10px;
}

.hero-t-about {
  width: 100vw;
  height: 40px;
  background-color: var(--C-grey);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-top: -10px;
  border-top: solid 1px var(--C-black);
}

/* Hero secondary */

.hero-secondary {
  width: 100vw;
  height: 55vh;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background-blend-mode: multiply;
}

.hero-secondary-ovl {
  position: absolute;
  background-color: rgba(36, 36, 36, 0.5);
  backdrop-filter: blur(6px);
  width: 100vw;
  top: 0;
  height: 55vh;
}

.hero-secondary-ovl-2 {
  position: absolute;
  background-color: rgba(36, 36, 36, 0);
  background: linear-gradient(
    to top,
    rgb(36, 36, 36, 0.5) 0%,
    rgba(36, 36, 36, 0.1) 60%,
    rgba(36, 36, 36, 0) 100%
  );
  width: 100vw;
  top: 0;
  height: 55vh;
  z-index: 0;
}

.hero-txt-black {
  color: var(--C-black);
}

.hero-txt-white {
  color: var(--C-white);
}

/* Hero secondary – background images */

.portfolio {
  background-image: url("../media/Hero-Banner-Desktop-Portfolio.jpg");
  filter: grayscale(100%);
}

.about {
  background-image: url("../media/Hero-Banner-Desktop-About.jpg");
  filter: grayscale(100%);
}

.contact {
  background-image: url("../media/Hero-Banner-Desktop-Contact.jpg");
  filter: grayscale(100%);
}

.project16 {
  background-image: url("../media/portfolio/portfolio-thumbnails/16-Queen-Decoded-thumbnail.jpg");
  filter: grayscale(100%);
}

.project15 {
  background-image: url("../media/portfolio/portfolio-thumbnails/15-Tirol-Tourismus-thumbnail.jpg");
  filter: grayscale(100%);
}

.project14 {
  background-image: url("../media/portfolio/portfolio-thumbnails/14-Murphy-Text-thumbnail.jpg");
  filter: grayscale(100%);
}

.project13 {
  background-image: url("../media/portfolio/portfolio-thumbnails/13-PopUpPlay-thumbnail.jpg");
  filter: grayscale(100%);
}

.project12 {
  background-image: url("../media/portfolio/portfolio-thumbnails/12-Balit-thumbnail.jpg");
  filter: grayscale(100%);
}

.project11 {
  background-image: url("../media/portfolio/portfolio-thumbnails/11-Lienz-Aguntum-thumbnail.jpg");
  filter: grayscale(100%);
}

.project10 {
  background-image: url("../media/portfolio/portfolio-thumbnails/10-Brokeback-App-thumbnail.jpg");
  filter: grayscale(100%);
}

.project09 {
  background-image: url("../media/portfolio/portfolio-thumbnails/09-TauchEin-Magazin-thumbnail.jpg");
  filter: grayscale(100%);
}

.project08 {
  background-image: url("../media/portfolio/portfolio-thumbnails/08-Cinema-Plakat-thumbnail.jpg");
  filter: grayscale(100%);
}

.project07 {
  background-image: url("../media/portfolio/portfolio-thumbnails/07-Verlag-VES-thumbnail.jpg");
  filter: grayscale(100%);
}

.project06 {
  background-image: url("../media/portfolio/portfolio-thumbnails/06-Crema-thumbnail.jpg");
  filter: grayscale(100%);
}

.project05 {
  background-image: url("../media/portfolio/portfolio-thumbnails/05-Creative-Coding-thumbnail.jpg");
  filter: grayscale(100%);
}

.project04 {
  background-image: url("../media/portfolio/portfolio-thumbnails/04-Verbaende-thumbnail.jpg");
  filter: grayscale(100%);
}

.project03 {
  background-image: url("../media/portfolio/portfolio-thumbnails/03-Kalligrafie-Handlettering-thumbnail.jpg");
  filter: grayscale(100%);
}

.project02 {
  background-image: url("../media/portfolio/portfolio-thumbnails/02-Illustration-1-thumbnail.jpg");
  filter: grayscale(100%);
}

.project01 {
  background-image: url("../media/portfolio/portfolio-thumbnails/01-Illustration-2-thumbnail.jpg");
  filter: grayscale(100%);
}

/* Hero secondary h1 */

.hero-secondary h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  margin: 50px 40px;
}

.hero-h1-bar-2nd-black {
  width: 90%;
  height: 2px;
  background-color: var(--C-black);
  margin-top: -10px;
  margin-bottom: -40px;
}

.hero-h1-bar-2nd-white {
  width: 90%;
  height: 2px;
  background-color: var(--C-white);
  margin-top: -10px;
  margin-bottom: -40px;
}

/* Intro »ich bin« section */

.intro-ib {
  width: 100vw;
  padding-top: 100px;
  padding-bottom: 140px;
  background-color: var(--C-white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.intro-ib img {
  width: 400px;
  height: 400px;
  border: solid 1px var(--C-black);
  border-radius: 0px;
}

.intro-ib-txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.intro-ib-txt p {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  color: var(--C-black);
}

.intro-ib-txt h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  color: var(--C-black);
}

#intro-ib-h1 {
  font-family: var(--F-nv-bi), var(--F-bp-f2);
}

.intro-ib-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.intro-ib-btns p {
  font-size: 13px;
  line-height: normal;
  color: inherit;
}

/* intro – type effect */

#intro-ib-h1 {
  position: absolute;
}

#intro-ib-h1::after {
  font-family: var(--F-nv-r), var(--F-bp-f2);
  transform: translateY(-4px);
  display: inline-block;
  padding-left: 5px;
  content: "|";
  animation-name: blinking;
  animation-duration: 0.71s;
  animation-iteration-count: infinite;
}

@keyframes blinking {
  from {
    color: transparent;
  }
  to {
    color: var(--C-darkgrey);
  }
}

/* Ausgewählte Projekte Overview – Desktop */

.home-proj-ov {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 275px 200px 1.5fr;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: flex-end;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
  background-image: radial-gradient(
      circle at center,
      var(--C-black) 0.05rem,
      transparent 0
    ),
    radial-gradient(circle at center, var(--C-black) 0.05rem, transparent 0);
  background-size: 0.2rem 0.2rem;
  background-position: 0 0, 0.2rem 0.2rem;
  color: var(--C-black);
  border-top: solid 1px var(--C-black);
  transition: all 0.3s ease;
  overflow: hidden;
}

#home-proj-ov-first {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#home-proj-ov-last {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: solid 1px var(--C-black);
}

.home-proj-ov p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  z-index: 2;
}

#home-proj-ov-p1 {
  text-align: right;
}

#home-proj-ov-p2 {
  text-align: left;
}

.home-proj-ov-img {
  width: 200px;
  height: 200px;
  border: solid 1px var(--C-black);
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.home-proj-ov-img img {
  width: auto;
  height: 200px;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
  cursor: alias;
}

.home-proj-ov-img img:hover {
  transform: scale(1.2);
}

.home-proj-ov h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  text-align: left;
  z-index: 2;
}

.home-proj-ov-txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.home-proj-ov::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--C-white);
  transform: translateY(100%);
  transition: transform 0.25s ease-in-out;
  z-index: 0;
  pointer-events: none;
  color: var(--C-black);
}

.home-proj-ov:hover::before {
  transform: translateY(0);
  color: var(--C-black);
}

.home-proj-ov:hover {
  color: var(--C-black);
}

.home-proj-ov > * {
  position: relative;
  z-index: 1;
}

/* Ausgewählte Projekte Overview Mobil */

.home-proj-ov-m {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: left;
  align-items: flex-start;
  padding: 50px 20px 50px 20px;
  background-color: white;
  background-image: radial-gradient(
      circle at center,
       rgba(36, 36, 36, 0.35) 0.05rem,
      transparent 0
    ),
    radial-gradient(circle at center, rgba(36, 36, 36, 0.35) 0.05rem, transparent 0);
  background-size: 0.2rem 0.2rem;
  background-position: 0 0, 0.2rem 0.2rem;
  color: var(--C-black);
  border-top: solid 1px var(--C-black);
  transition: all 0.3s ease;
  overflow: hidden;
}

#home-proj-ov-m-first {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#home-proj-ov-m-last {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: solid 1px var(--C-black);
}

#home-proj-ov-ptxt-m {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.home-proj-ov-m p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  z-index: 2;
}

.home-proj-ov-img-m {
  width: 100%;
  height: auto;
  display: flex;
  border: solid 1px var(--C-black);
  border-radius: 0px;
  overflow: hidden;
}

.home-proj-ov-img-m img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
}

.home-proj-ov-m h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: 38px;
  line-height: 45px;
  text-align: left;
  z-index: 2;
}

/* Projekt Overview Portfolio */

.p-proj-ov-all {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  padding: 80px 12.5% 80px 12.5%;
  gap: 60px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: var(--C-white);
}

.p-proj-ov {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  justify-content: left;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--C-black);
  transition: all 0.3s ease;
  overflow: hidden;
  border-bottom: solid 1px var(--C-black);
}

.p-proj-ov:nth-last-child(1),
.p-proj-ov:nth-last-child(2) {
  border: none;
}

#p-proj-ov-ptxt {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.p-proj-ov p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  z-index: 2;
}

.p-proj-ov-img {
  width: 99.5%;
  width: calc(100% - 2px);
  height: auto;
  border: solid 1px var(--C-black);
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  cursor: alias;
}

.p-proj-ov-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
}

.p-proj-ov-img img:hover {
  transform: scale(1.2);
}

.p-proj-ov h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: 38px;
  line-height: 45px;
  text-align: left;
  z-index: 2;
}

/* scroll fade in effect – projects overview – mobil */

.home-proj-ov-m h1,
.home-proj-ov-img-m,
.sticky-card-intro h1,
.sticky-card-intro p,
.sticky-card-items,
.sticky-card-intro-secondary h1,
.sticky-card-intro-secondary p,
.sticky-card-items-secondary,
.hero-txt-black,
.hero-txt-white,
.home-proj-ov p,
.home-proj-ov h1,
.m-nav-m li,
.p-proj-ov-img,
.p-proj-ov h1,
article p,
article h1,
.project-img-item,
.about-awards-items {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.home-proj-ov-m h1.show,
.home-proj-ov-img-m.show,
.sticky-card-intro h1.show,
.sticky-card-intro p.show,
.sticky-card-items.show,
.sticky-card-intro-secondary h1.show,
.sticky-card-intro-secondary p.show,
.sticky-card-items-secondary.show,
.hero-txt-black.show,
.hero-txt-white.show,
.home-proj-ov p.show,
.home-proj-ov h1.show,
.m-nav-m li.show,
.p-proj-ov-img.show,
.p-proj-ov h1.show,
article p.show,
article h1.show,
.project-img-item.show,
.about-awards-items.show {
  opacity: 1;
  transform: translateY(0);
}

/* Transition Headlines */

.t-headlines {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--C-white);
}

.t-headlines h1 {
  font-family: var(--F-sw-m), var(--F-bp-f);
  font-size: 20px;
  color: var(--C-black);
}

.t-headlines-K {
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -10px;
  margin-bottom: -20px;
  padding-top: 190px;
  padding-bottom: 190px;

  background-color: white;
  background-image: radial-gradient(
      circle at center,
      var(--C-black) 0.05rem,
      transparent 0
    ),
    radial-gradient(circle at center, var(--C-black) 0.05rem, transparent 0);
  background-size: 0.2rem 0.2rem;
  background-position: 0 0, 0.2rem 0.2rem;
}

.t-headlines-K h1 {
  font-family: var(--F-sw-smb), var(--F-bp-f);
  font-size: 40px;
  color: var(--C-black);
}

/* Sticky Cards – intro*/

.sticky-card-intro {
  justify-content: left;
  width: 100vw;
  height: 350px;
  background-color: var(--C-grey);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top: solid 1px var(--C-black);
  padding-bottom: 50px;
}

.sticky-card-intro h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  color: var(--C-black);
  padding: 80px 20px 0px 20px;
}

#sticky-card-intro-h1 span,
#sticky-card-intro-h2 span {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
}

.sticky-card-intro p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  color: var(--C-black);
  padding: 20px 20px 0px 20px;
}

/* Sticky Cards – container */

.sticky-card-cont {
  margin-top: 0px;
  padding: 20px 20px 100px 20px;
  width: auto;
  background-color: var(--C-grey);
  box-sizing: border-box;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.sticky-card {
  top: 100px;
  position: sticky;
  position: -webkit-sticky;
  border-top: solid 1px var(--C-black);
  background-color: var(--C-grey);
  padding: 20px 20px 20px 0px;
  color: var(--C-black);
}

.sticky-card-items {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 2fr;
}

.sticky-card-txt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 200px;
  margin-left: 20px;
}

.sticky-card-txt h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
}

.sticky-card-txt p,
.sticky-card p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  font-variant-numeric: tabular-nums;
  margin-right: 35vh;
}

#sticky-card-bar {
  background-color: var(--C-black);
  width: 1px;
  width: 100%;
}

/* Sticky Cards – backgroundcolour */

.sticky-card:nth-child(1) {
  background-color: var(--C-grey);
}

.sticky-card:nth-child(2) {
  background-color: var(--C-grey);
  top: 200px;
}

.sticky-card:nth-child(3) {
  background-color: var(--C-grey);
  top: 300px;
}

.sticky-card:nth-child(4) {
  background-color: var(--C-grey);
  border-bottom: solid 1px var(--C-black);
}

/* Sticky Cards About/ Secondary */

/* Sticky Cards Secondary – intro */

.sticky-card-intro-secondary {
  justify-content: left;
  width: 100vw;
  height: 350px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 50px;
}

.sticky-card-intro-secondary h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  color: var(--C-black);
  padding: 80px 20px 0px 20px;
}

#sticky-card-intro-h1-secondary span,
#sticky-card-intro-h2-secondary span {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
}

.sticky-card-intro-secondary p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  color: var(--C-black);
  padding: 20px 20px 20px 20px;
}

/* Sticky Cards Secondary – container */

.sticky-card-cont-secondary {
  position: relative;
  z-index: 10;
  margin-top: 0px;
  padding: 20px 20px 100px 20px;
  width: auto;
  background-color: var(--C-white);
  box-sizing: border-box;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.sticky-card-secondary {
  top: 100px;
  position: sticky;
  border-top: solid 1px var(--C-black);
  background-color: var(--C-white);
  padding: 20px 20px 20px 0px;
  color: var(--C-black);
}

.sticky-card-items-secondary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 2fr;
}

.sticky-card-txt-secondary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-left: 20px;
}

.sticky-card-txt-secondary h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
}

.sticky-card-txt-secondary p,
.sticky-card-secondary p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  font-variant-numeric: tabular-nums;
  margin-right: 35vh;
}

.sticky-card-secondary span {
  display: inline;
  margin: 0;
  padding: 0;
}

.txt-semibold {
  font-family: var(--F-sw-smb), var(--F-nv-b);
}

#sticky-card-bar-secondary {
  background-color: var(--C-grey);
  width: 1px;
  width: 100%;
}

.sticky-card-secondary:nth-child(1) {
  top: 100px;
}

.sticky-card-secondary:nth-child(2) {
  top: 200px;
}

.sticky-card-secondary:nth-child(3) {
  top: 300px;
  border-bottom: solid 1px var(--C-black);
}

.sticky-card-secondary:nth-child(4) {
  border-bottom: solid 1px var(--C-black);
}

.sticky-card-secondary a {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
}

.sticky-card-secondary a:hover {
  text-decoration-color: var(--C-darkgrey);
}

/* About awards section */

.about-awards {
  position: relative;
  background-color: var(--C-darkgrey);
  margin-top: -10px;
  margin-bottom: 0px;
  padding: 80px 20px 100px 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  z-index: 9;
  border-bottom: solid 1px var(--C-black); 
}

.about-awards-items {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 2fr;
}

.about-awards-txt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-left: 20px;
}

.about-awards span {
  display: inline;
  margin: 0;
  padding: 0;
}

#about-awards-bar {
  background-color: var(--C-grey);
  width: 1px;
  width: 100%;
}

.about-awards h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
  color: var(--C-white);
}

.about-awards p,
.about-awards a {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  font-variant-numeric: tabular-nums;
  color: var(--C-white);
}

.about-awards a {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
}

.about-awards a:hover {
  text-decoration-color: var(--C-darkgrey);
}

/* Article About section */

.about-article {
  width: 100vw;
  padding-top: 80px;
  padding-bottom: 140px;
  margin-bottom: 50px;
  background-color: var(--C-grey);
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: center;
  gap: 40px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: solid 1px var(--C-black);
}

.about-article img {
  width: 400px;
  height: 400px;
  border: solid 1px var(--C-black);
  border-radius: 0px;
}

.about-article-txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-article-txt p {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  color: var(--C-black);
}

.about-article-txt h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: 38px;
  color: var(--C-black);
}

/* contact section */

.contact-info-section {
  padding: 70px 20px 80px 20px;
  margin-bottom: -10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: white;
  border-top: solid 1px var(--C-black);
  
}

.contact-info-section h1,
.contact-info-section p,
.contact-info-section a {
  color: var(--C-black);
}

.contact-info-section p,
.contact-info-section a {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
}

.contact-info-section a:hover {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--C-darkgrey);
}

.contact-info-section p {
  font-family: var(--F-sw-smb), var(--F-bp-f);
}

.contact-info-section span {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-info-section h1 {
  font-family: var(--F-nv-b), var(--F-bp-f2);
  font-size: var(--T-h1);
  line-height: var(--T-h1-lh);
}

.contact-info-section p {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
}

/* article section – projects */

article {
  position: relative;
  padding: 50px 20px 30px 20px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.proj-bottom-btn {
  position: relative;
  display: flex;
  padding: 0px 20px 120px 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--C-white);
}

.portfolio-subdmn-bottom-btn {
  position: relative;
  display: flex;
  padding: 0px 20px 120px 20px;
  background-color: var(--C-white);
}

article a {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

article a:hover {
  text-decoration-color: var(--C-darkgrey);
}

article p {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  padding-right: 20vw;
}

article span {
  font-family: var(--F-sw-r), var(--F-bp-f);
}

article .article-bar {
  width: 100%;
  height: 1px;
  background-color: var(--C-grey);
  margin-top: 20px;
}

article h1 {
  font-family: var(--F-sw-smb), var(--F-bp-f);
  font-size: 16px;
  line-height: var(--T-c-lh);
}

/* article section – imprint */

.imprint {
  position: relative;
  padding: 50px 20px 30px 20px;
  gap: 5px;
  display: flex;
  flex-direction: column;
  color: var(--C-black);
}

.imprint a {
  text-decoration: underline;
  text-decoration-thickness: 1.8px;
  text-underline-offset: 5px;
  text-underline-position: below;
  text-decoration-color: transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.imprint a:hover {
  text-decoration-color: var(--C-darkgrey);
}

.imprint p {
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
  padding-right: 20vw;
}

.imprint span {
  font-family: var(--F-sw-r), var(--F-bp-f);
}

.imprint .article-bar {
  width: 100%;
  height: 1px;
  background-color: var(--C-grey);
  margin-top: 10px;
  margin-bottom: 10px;
}

.imprint h1 {
  font-family: var(--F-sw-smb), var(--F-bp-f);
  font-size: 16px;
  line-height: var(--T-c-lh);
}

/* Contact Form */

.form-container {
  width: 100vw;
  background-color: var(--C-white);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-bottom: -10px;
  color: var(--C-black);
}

form {
  display: flex;
  flex-direction: column;
  font-family: var(--F-sw-r), var(--F-bp-f);
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
  gap: 30px;
  padding: 50px 0px 100px 0px;
}

label {
  font-family: var(--F-sw-m), var(--F-bp-f);
  font-size: var(--T-copy);
  color: var(--C-black);
}

input,
textarea {
  padding: 10px;
  border: 1px solid var(--C-black);
  border-radius: 0px;
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  caret-color: var(--C-darkgrey);
  background-color: var(--C-white);
  color: var(--C-black);
}

input:focus,
textarea:focus {
  border: 1px solid var(--C-darkgrey);
  outline: none;
}

input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
  border: 1px solid var(--C-darkgrey);
  outline: none;
}

textarea {
  resize: vertical;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

form p {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  line-height: var(--T-c-lh);
}

.form-group input {
  font-family: var(--F-sw-r), var(--F-bp-f);
  color: var(--C-black);
  width: 100%;
  padding: 12px 10px;
  font-size: 15px;
  box-sizing: border-box;
}

.form-group label span {
  font-family: var(--F-sw-r), var(--F-bp-f);
  color: var(--C-darkgrey);
  font-size: var(--T-copy);
  position: absolute;
  left: 8px;
  top: 15px;
  background-color: transparent;
  padding: 0 5px;
  line-height: 1;
  transition: all 0.3s ease;
  pointer-events: none;
}

.form-group input:focus + label span,
.form-group textarea:focus + label span,
.form-group input:not(:placeholder-shown) + label span,
.form-group textarea:not(:placeholder-shown) + label span {
  font-family: var(--F-sw-r), var(--F-bp-f);
  color: var(--C-darkgrey);
  font-size: 14px;
  top: -8px;
  left: 5px;
  background-color: var(--C-white);
  border-radius: 5px;
  padding: 0 5px;
}

.form-message {
  font-family: var(--F-sw-r), var(--F-bp-f);
  font-size: var(--T-copy);
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
}

/* project page gallery */

.project-img-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  padding: 80px 12.5% 80px 12.5%;
  gap: 40px;
}

.project-img-item {
  width: 99.5%;
  width: calc(100% - 2px);
  height: auto;
  border: solid 1px var(--C-black);
  border-radius: 0px;
  overflow: hidden;
}

.project-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
  cursor: zoom-in;
}

.project-img-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-img-item img:hover {
  transform: scale(1.2);
}

/* Lightbox */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 0px;
  border: solid 1px var(--C-black);
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.lightbox svg {
  width: auto;
  height: 40px;
}

.lightbox svg path {
  fill: var(--C-white);
}

#lightbox.zoomed .zoom-btn svg path,
#lightbox.zoomed .close svg path,
#lightbox.zoomed .next svg path,
#lightbox.zoomed .prev svg path {
  fill: var(--C-darkgrey);
}

.close,
.prev,
.next {
  z-index: 10;
  position: absolute;
  color: var(--C-white);
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.close {
  top: 20px;
  right: 15px;
}
.prev {
  top: 45%;
  left: 15px;
}
.next {
  top: 45%;
  right: 15px;
}

#lightbox.zoomed img {
  transform: scale(2);
  cursor: zoom-out;
}

.zoom-btn {
  position: absolute;
  top: 15px;
  right: 80px;
  font-size: 50px;
  z-index: 10;
  color: var(--C-white);
  cursor: pointer;
  display: none;
}

.zoom-btn svg {
  width: auto;
  height: 28px;
}

.zoom-btn svg path {
  fill: var(--C-white);
}

/* Impressum */

.impressum-intro {
  height: 50px;
}

.notfoundpage-intro {
  height: 50px;
}

.notfoundpage-outro {
  height: 200px;
}

/* Footer */

footer {
  width: 100vw;
  height: auto;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: var(--C-darkgrey);
  border-top: solid 1px var(--C-black);
}

.footer-btm {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 20px 20px 20px;
  align-items: flex-end;
}

.footer-btm img {
  width: 200px;
  height: auto;
}

.footer-txt-btm {
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.footer-txt-btm a,
.footer-txt-btm p,
.footer-top a {
  color: var(--C-white);
  font-size: var(--T-copy);
}

.footer-top {
  display: flex;
  flex-direction: row;
  gap: 80px;
  padding: 50px 0px 0px 20px;
}

.footer-top h1 {
  font-family: var(--F-sw-m), var(--F-bp-f);
  font-size: 20px;
  color: var(--C-white);
}

.footer-txt1-top,
.footer-txt2-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}