@charset "UTF-8";
:root {
  --text: calc((16*100vw)/1920);
  --text20: calc((20*100vw)/1920);
  --text21: calc((21*100vw)/1920);
  --text23: calc((23*100vw)/1920);
  --text25: calc((25*100vw)/1920);
  --h2: clamp(2.813rem, 1.2vw, 3.5rem);
  --cards: 5;
  --cardHeight: calc((350*100vw)/1920);
  --cardTopPadding: 40px;
  --cardMargin: 7vw;
}

body {
  overflow-x: hidden;
  font-family: "Fira Sans Condensed", sans-serif;
  font-style: var(--fs-it);
  background-color: black;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 18%;
  color: transparent;
  display: grid;
  grid-template-columns: 10% 11.5% 5% 20.5% 21% 9.5% 13% 6% 3.5%;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  box-sizing: border-box;
  z-index: 40;
  /* SIGNET */
  /* MENU */
  /* TEUFEL */
  /* SCROLLER */
}
header .div1 {
  grid-area: 1/1/2/10;
}
header .div2 {
  grid-area: 2/1/3/2;
}
header .div3 {
  grid-area: 2/2/3/3;
  align-self: end;
}
header .div3 .fade-btt {
  animation: fade-btt 0.5s ease-in;
}
header .div3 img {
  width: 104%;
  height: auto;
}
header .div4 {
  grid-area: 2/3/3/4;
}
header .div5 {
  grid-area: 2/4/3/5;
}
header .div5 .fade-ltr {
  animation: fade-ltr 1.1s ease-in;
}
header .div5 ul {
  display: flex;
  width: 100%;
  height: 47%;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
  padding-inline-start: 0;
}
header .div5 ul li {
  color: var(--col);
  list-style-type: none;
  font-weight: var(--fw-light);
  font-size: var(--textHeader);
  /* ------------- HOVER ------------- */
}
header .div5 ul li a {
  color: var(--col);
  text-decoration: none;
  font-weight: var(--fw-semi);
}
header .div5 ul li a:hover {
  color: var(--hover);
}
header .div5 ul li .active {
  color: var(--hover);
}
header .div5 ul li .link {
  position: relative;
}
header .div5 ul li .link::before,
header .div5 ul li .link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}
header .div5 ul li .link::before {
  content: "";
}
header .div5 ul li .link-var1::before {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
header .div5 ul li .link-var1:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
header .div5 ul li .link-var1::after {
  content: "";
  top: calc(100% + 4px);
  transform-origin: 0% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
header .div5 ul li .link-var1:hover::after {
  transform-origin: 100% 50%;
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
header .div6 {
  grid-area: 2/6/3/8;
}
header .div7 {
  grid-area: 2/8/3/9;
  align-self: end;
}
header .div7 img {
  width: 97%;
  height: auto;
}
header .div8 {
  grid-area: 2/9/3/10;
}
header .div9 {
  grid-area: 3/1/4/6;
}
header .div10 {
  grid-area: 3/6/4/7;
}
header .div10 .scroller {
  position: absolute;
  top: 9.6vh;
  right: 25.5vw;
  width: 100%;
}
header .div10 .scroller .scroller-linear,
header .div10 .scroller .scroller-full {
  position: absolute;
  top: 1.71875vw;
  right: -3.125vw;
  width: 9.1666666667vw;
  height: 4.8958333333vw;
  background-image: url("../img/scrolldown_linear.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
}
header .div10 .scroller .scroller-linear:hover,
header .div10 .scroller .scroller-full:hover {
  background-image: url("../img/scrolldown_full.svg");
}
header .div10 .scroller .scroller-linear.slideIn-ttb2,
header .div10 .scroller .scroller-full.slideIn-ttb2 {
  transform: translateY(-400%);
  animation: slideIn-ttb2 1s cubic-bezier(0.92, 0, 0.81, 1.43) forwards;
  animation-delay: 3.5s;
}
header .div11 {
  grid-area: 3/7/4/10;
}
header.konzept-header .div5 {
  grid-area: 2/4/3/5;
}
header.konzept-header .div5 .fade-ltr {
  animation: fade-ltr 1.1s ease-in;
}
header.konzept-header .div5 ul {
  display: flex;
  width: 100%;
  height: 47%;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
  padding-inline-start: 0;
}
header.konzept-header .div5 ul li {
  color: var(--col);
  list-style-type: none;
  font-weight: var(--fw-light);
  font-size: var(--textHeader);
  /* ------------- HOVER ------------- */
}
header.konzept-header .div5 ul li a {
  color: var(--col);
  text-decoration: none;
  font-weight: var(--fw-semi);
}
header.konzept-header .div5 ul li a:hover {
  color: var(--hover);
}
header.konzept-header .div5 ul li .active {
  color: var(--hover);
}
header.konzept-header .div5 ul li .link {
  position: relative;
}
header.konzept-header .div5 ul li .link::before,
header.konzept-header .div5 ul li .link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}
header.konzept-header .div5 ul li .link::before {
  content: "";
}
header.konzept-header .div5 ul li .link-var1::before {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
header.konzept-header .div5 ul li .link-var1:hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
header.konzept-header .div5 ul li .link-var1::after {
  content: "";
  top: calc(100% + 4px);
  transform-origin: 0% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
header.konzept-header .div5 ul li .link-var1:hover::after {
  transform-origin: 100% 50%;
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
header.konzept-header .div5 button {
  padding: 0;
}
header.konzept-header .div5 .btn-link {
  width: 194px;
  height: 56px;
  color: #86725b;
  cursor: pointer;
  padding-right: 0;
  padding-left: 1.5rem;
  background-image: url(../img/dropdown.svg);
  background-size: 16px;
  background-position: 0% 58%;
  background-repeat: no-repeat;
  font-family: "Fira Sans Condensed", sans-serif;
  color: var(--col);
  font-size: var(--textHeader);
  text-decoration: none;
  font-weight: var(--fw-semi);
}
header.konzept-header .div5 .drop-link {
  font-size: var(--textHeader);
  font-weight: var(--fw-light);
  background: none;
  text-decoration: none;
  cursor: pointer;
}
header.konzept-header .div5 .dropdown.active > .btn-link,
header.konzept-header .div5 .btn-link:hover {
  color: var(--hover);
}
header.konzept-header .div5 .dropdown {
  position: relative;
}
header.konzept-header .div5 .dropdown-menu {
  position: absolute;
  left: -20px;
  background-color: #000;
  opacity: 0;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
  transform: translateY(30px);
  pointer-events: none;
}
header.konzept-header .div5 .dropdown.active > .btn-link + .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 2;
}
header.konzept-header .div5 .dropdown-links {
  width: 100%;
  display: flex;
  flex-direction: column;
}
header.konzept-header .div5 .dropdown-links a {
  font-style: var(--fs-it);
  color: #000;
  background-color: #a2a9a9;
  margin-top: 3px;
  padding: 0.25rem 0.75rem;
}
header.konzept-header .div5 .dropdown-links a:hover {
  color: var(--hover);
  background-color: var(--col);
}
header.konzept-header {
  position: absolute;
}

/* GRAFIK KONZEPT */
.konzept-wrapper .konzept-start {
  height: 47.8125vw;
  margin-top: 10%;
  display: flex;
  flex-wrap: wrap;
}
.konzept-wrapper .konzept-start h2 {
  font-family: "Fira Sans", sans-serif;
  font-weight: var(--fw-light);
  font-size: 1.875vw;
  font-style: var(--fs-it);
  margin-bottom: 10px;
}
.konzept-wrapper .konzept-start p {
  font-family: "Fira Sans", sans-serif;
  font-weight: var(--fw-semi);
  font-size: 1.09375vw;
  font-style: var(--fs-it);
}
.konzept-wrapper .konzept-start .text-swoosh {
  position: absolute;
  top: 10.9375vw;
  left: 2.34375vw;
  width: 100%;
  z-index: 5;
  text-align: center;
  opacity: 0;
  animation: fade-in 1s ease-in-out forwards;
  animation-delay: 1s;
}
.konzept-wrapper .konzept-start .text-swoosh .font-c {
  color: #646f70;
  animation: font-c 0.05s ease-in-out forwards;
  animation-delay: 4.1s;
}
.konzept-wrapper .konzept-start .lampe-aus,
.konzept-wrapper .konzept-start .lampe-an {
  position: absolute;
  left: 6.9270833333vw;
  width: 28.125vw;
  opacity: 0;
}
.konzept-wrapper .konzept-start .lampe-aus img,
.konzept-wrapper .konzept-start .lampe-an img {
  position: absolute;
  top: 0;
  width: 28.125vw;
}
.konzept-wrapper .konzept-start .lampe-aus {
  animation: fade-in 1s ease-in-out forwards;
  animation-delay: 2s;
  z-index: 3;
}
.konzept-wrapper .konzept-start .lampe-an {
  animation: fade-in 0.05s ease-in-out forwards;
  animation-delay: 4.1s;
  z-index: 4;
}
.konzept-wrapper .konzept-start .mockup,
.konzept-wrapper .konzept-start .mockup2 {
  position: absolute;
  right: 8.0729166667vw;
  width: 53.2291666667vw;
  opacity: 0;
  z-index: 2;
}
.konzept-wrapper .konzept-start .mockup img,
.konzept-wrapper .konzept-start .mockup2 img {
  position: absolute;
  top: 4.9479166667vw;
  width: 100%;
  height: auto;
}
.konzept-wrapper .konzept-start .mockup {
  animation: fade-in2 1s ease-in-out forwards;
  animation-delay: 2s;
}
.konzept-wrapper .konzept-start .mockup2 {
  animation: fade-in 0.05s ease-in-out forwards;
  animation-delay: 4.1s;
}
.konzept-wrapper .konzept-wow {
  width: 100%;
  height: 56.25vw;
  background-color: #e3e6e6;
  color: #636e6f;
  display: grid;
  place-items: center;
}
.konzept-wrapper .konzept-wow .wow-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1020px;
  gap: 2.0833333333vw;
}
.konzept-wrapper .konzept-wow .wow-inner p {
  font-size: 1.1979166667vw;
  line-height: 1.71875vw;
  font-weight: var(--fw-light);
  align-self: flex-end;
}
.konzept-wrapper .konzept-wow .wow-inner p:first-of-type {
  text-align: right;
  align-self: flex-start;
}
.konzept-wrapper .konzept-wow .wow-inner h2 {
  font-family: "Fira Sans", sans-serif;
  font-size: 2.34375vw;
  font-weight: var(--fw-semi);
}
.konzept-wrapper .konzept-cards {
  width: 100%;
  height: calc(var(--cardHeight) * 8.5);
  background-color: #000;
  color: #636e6f;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}
.konzept-wrapper .konzept-cards .container {
  width: 33.8541666667vw;
  margin: 2.6041666667vw auto 0 auto;
}
.konzept-wrapper .konzept-cards .container #cards {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--cards), var(--cardHeight));
  gap: var(--cardMargin);
  padding-bottom: calc(var(--cards) * var(--cardTopPadding));
  margin-bottom: var(--cardMargin);
}
.konzept-wrapper .konzept-cards .container #cards #card1 {
  --index: 1;
  --final-scale: 1;
}
.konzept-wrapper .konzept-cards .container #cards #card2 {
  --index: 2;
  --final-scale: 1.02;
}
.konzept-wrapper .konzept-cards .container #cards #card3 {
  --index: 3;
  --final-scale: 1.04;
}
.konzept-wrapper .konzept-cards .container #cards #card4 {
  --index: 4;
  --final-scale: 1.06;
}
.konzept-wrapper .konzept-cards .container #cards #card5 {
  --index: 5;
  --final-scale: 1.08;
}
.konzept-wrapper .konzept-cards .container #cards .card {
  position: sticky;
  top: 40px;
  padding-top: calc(var(--index) * var(--cardTopPadding));
}
.konzept-wrapper .konzept-cards .container #cards .card-body {
  height: var(--cardHeight);
  width: 100%;
  padding: 2.6041666667vw;
  background-color: #929A9B;
  color: #000;
  box-sizing: border-box;
  border-radius: 25px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.7);
  transition: transform 0.5s ease-out, opacity 0.3s ease-out;
  display: grid;
  place-items: center;
}
#card1 .konzept-wrapper .konzept-cards .container #cards .card-body {
  transform: scale(1);
  opacity: 1;
}
#card2 .konzept-wrapper .konzept-cards .container #cards .card-body, #card3 .konzept-wrapper .konzept-cards .container #cards .card-body, #card4 .konzept-wrapper .konzept-cards .container #cards .card-body, #card5 .konzept-wrapper .konzept-cards .container #cards .card-body {
  transform: scale(1.3);
  opacity: 0;
}
#card1 .konzept-wrapper .konzept-cards .container #cards .card-body.landed {
  transform: scale(1);
}
#card2 .konzept-wrapper .konzept-cards .container #cards .card-body.landed {
  transform: scale(1.02);
  opacity: 1;
}
#card3 .konzept-wrapper .konzept-cards .container #cards .card-body.landed {
  transform: scale(1.04);
  opacity: 1;
}
#card4 .konzept-wrapper .konzept-cards .container #cards .card-body.landed {
  transform: scale(1.06);
  opacity: 1;
}
#card5 .konzept-wrapper .konzept-cards .container #cards .card-body.landed {
  transform: scale(1.08);
  opacity: 1;
}
.konzept-wrapper .konzept-cards .container #cards .card-body .card-body-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;
  width: 95%;
}
.konzept-wrapper .konzept-cards .container #cards .card-body .card-body-title h2 {
  font-size: 2.34375vw;
  font-weight: 600;
  font-style: var(--fs-n);
}
.konzept-wrapper .konzept-cards .container #cards .card-body .card-body-title h2 span {
  font-style: italic;
}
.konzept-wrapper .konzept-cards .container #cards .card-body p {
  border-top: 1px dashed;
  padding-top: 35px;
  font-size: 1.1979166667vw;
  line-height: 1.6666666667vw;
  font-weight: var(--fw-light);
}
.konzept-wrapper .konzept-cards .konzept-card-text {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  color: #636e6f;
  font-size: 1.1979166667vw;
  line-height: 1.6666666667vw;
  font-weight: var(--fw-light);
  margin-top: -110px;
}
.konzept-wrapper .konzept-cards .konzept-card-text.fade-in {
  animation: fade-in 1s ease-in-out forwards;
  animation-delay: 2s;
}
.konzept-wrapper .konzept-pt1,
.konzept-wrapper .konzept-pt2,
.konzept-wrapper .konzept-pt3 {
  height: 56.25vw;
  width: 100%;
}
.konzept-wrapper .konzept-pt1 h4,
.konzept-wrapper .konzept-pt2 h4,
.konzept-wrapper .konzept-pt3 h4 {
  font-family: "Fira Sans", sans-serif;
  font-style: normal;
  font-weight: var(--fw-light);
  font-size: 1.875vw;
  color: #636e6f;
}
.konzept-wrapper .konzept-pt1 h4 span,
.konzept-wrapper .konzept-pt2 h4 span,
.konzept-wrapper .konzept-pt3 h4 span {
  font-style: italic;
}
.konzept-wrapper .konzept-pt1 {
  height: 66.6666666667vw;
  background-color: #a2a9a9;
  color: #636e6f;
  display: grid;
  place-items: center;
  position: relative;
}
.konzept-wrapper .konzept-pt1 h4 {
  font-size: 1.875vw;
  font-weight: var(--fw-light);
  font-style: normal;
  position: absolute;
}
.konzept-wrapper .konzept-pt1 h4.h4-left {
  top: 110px;
  left: 230px;
}
.konzept-wrapper .konzept-pt1 h4 span {
  font-style: italic;
}
.konzept-wrapper .konzept-pt1 img {
  width: 79.6875vw;
  height: auto;
}
.konzept-wrapper .konzept-pt2 {
  background-color: #000;
  height: 8.0729166667vw;
  display: flex;
  position: relative;
}
.konzept-wrapper .konzept-pt2 h4 {
  font-size: 1.875vw;
  font-weight: var(--fw-light);
  font-style: normal;
  position: absolute;
}
.konzept-wrapper .konzept-pt2 h4.h4-left {
  top: 90px;
  left: 230px;
}
.konzept-wrapper .konzept-pt2 h4.h4-right {
  top: 90px;
  left: 59.375vw;
}
.konzept-wrapper .konzept-pt2 h4 span {
  font-style: italic;
}
.konzept-wrapper .content-wrapper .content {
  position: relative;
  padding-left: 9.7916666667vw !important;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  display: flex;
}
.konzept-wrapper .content-wrapper .content section {
  min-width: 34.8958333333vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  margin-right: 25px;
}
.konzept-wrapper .content-wrapper .content section img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 90vh;
}
.konzept-wrapper .konzept-pt3 {
  height: 66.6666666667vw;
  background-color: #000;
  display: grid;
  place-items: center;
  position: relative;
}
.konzept-wrapper .konzept-pt3 h4 {
  font-size: 1.875vw;
  font-weight: var(--fw-light);
  font-style: normal;
  position: absolute;
}
.konzept-wrapper .konzept-pt3 h4.h4-left {
  top: 110px;
  left: 230px;
}
.konzept-wrapper .konzept-pt3 h4.h4-right {
  top: 110px;
  left: 59.375vw;
}
.konzept-wrapper .konzept-pt3 h4 span {
  font-style: italic;
}
.konzept-wrapper .konzept-pt3 img {
  width: 79.6875vw;
  height: auto;
}
.konzept-wrapper .konzept-bsp {
  width: 100%;
  height: 56.25vw;
  background-color: #e2e5e5;
  color: #636e6f;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 75px;
}
.konzept-wrapper .konzept-bsp h4 {
  font-family: "Fira Sans", sans-serif;
  font-style: normal;
  font-weight: var(--fw-extra);
  font-size: 1.875vw;
  letter-spacing: 0.4rem;
}
.konzept-wrapper .konzept-bsp .konzept-bsp-inner {
  display: flex;
  width: 79.6875vw;
}
.konzept-wrapper .konzept-bsp .konzept-bsp-inner img {
  width: 50%;
  height: auto;
}
.konzept-wrapper .konzept-erm1 {
  width: 100%;
  height: 56.25vw;
  background-color: #000;
  display: grid;
  place-content: center;
}
.konzept-wrapper .konzept-erm1 img {
  width: 62.5vw;
  height: auto;
}
.konzept-wrapper .konzept-erm2 {
  width: 100%;
  height: 41.6666666667vw;
  background-color: #000;
  color: #636e6f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6041666667vw;
}
.konzept-wrapper .konzept-erm2 h4 {
  font-family: "Fira Sans Condensed", sans-serif;
  font-style: normal;
  font-weight: var(--fw-extra);
  font-size: 1.875vw;
  letter-spacing: 0.4rem;
  text-align: center;
}
.konzept-wrapper .konzept-erm2 img {
  width: 100%;
  height: auto;
}
.konzept-wrapper .konzept-erm2 img.logo-erm {
  width: 13.0208333333vw;
  height: auto;
  margin-top: 10px;
}
.konzept-wrapper footer {
  display: grid;
  grid-template-columns: 65% 31% 4%;
  grid-template-rows: 1fr;
  -moz-column-gap: 0px;
       column-gap: 0px;
  row-gap: 0px;
  margin-bottom: 50px;
}
.konzept-wrapper footer .div1 {
  grid-area: 1/1/2/2;
  display: flex;
  color: #636e6f;
  padding-left: 50px;
}
.konzept-wrapper footer .div1 img {
  width: 7.65625vw;
  height: auto;
  padding-right: 20px;
  border-right: 1px solid #636e6f;
  align-self: start;
}
.konzept-wrapper footer .div1 p {
  padding-left: 20px;
  font-size: 0.9895833333vw;
  line-height: 1.4583333333vw;
  font-weight: var(--fw-light);
  margin-top: -7px;
}
.konzept-wrapper footer .div2 {
  grid-area: 1/2/2/3;
  display: grid;
}
.konzept-wrapper footer .div2 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: end;
}
.konzept-wrapper footer .div2 ul li {
  line-height: var(--textFooter);
  color: var(--col90);
  font-weight: var(--fw-light);
  font-style: normal;
  font-size: var(--textFooter);
  list-style-type: none;
}
.konzept-wrapper footer .div2 ul li a {
  color: var(--col90);
  text-decoration: none;
}
.konzept-wrapper footer .div2 ul li a:hover {
  color: var(--hover);
}
.konzept-wrapper footer .div3 {
  grid-area: 1/3/2/4;
  position: relative;
}
.konzept-wrapper footer .div3 .logo-anf {
  display: block;
  width: 8.59375vw;
  height: 4.1666666667vw;
  position: absolute;
  left: -495px;
  bottom: 70px;
  color: transparent;
  background-image: url(../img/grafik/logo_button.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0;
}
.konzept-wrapper footer .div3 .logo-anf:hover {
  background-image: url(../img/grafik/logo_button_hover.svg);
}
.konzept-wrapper footer .div3 .up {
  display: block;
  position: absolute;
  left: -70px;
  bottom: 70px;
  width: 2.1875vw;
  height: 2.1875vw;
  color: transparent;
  background-image: url(../img/arrow_up_neu.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  align-self: flex-end;
}
.konzept-wrapper footer .div3 .up:hover {
  background-image: url(../img/arrow_up_neu_hover.svg);
}

/* ---------------------------------------------------- */
/* .button2 -> kleine Buttons im Menü */
.button2 {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  background: var(--background);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  --background: var(--hover);
  --border-width: 1px;
  --edge-size: .1px;
}
.button2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: -2;
}
.button2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background);
  z-index: -1;
  clip-path: polygon(var(--border-width) calc(var(--edge-size) + var(--border-width) * 0.5), calc(var(--edge-size) + var(--border-width) * 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - (var(--edge-size) + var(--border-width) * 0.5)), calc(100% - (var(--edge-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), calc(var(--border-width)) calc(100% - var(--border-width)));
  transition: clip-path 500ms;
}
.button2:where(:hover, :focus)::after {
  clip-path: polygon(calc(100% - var(--border-width)) calc(100% - (var(--edge-size) + var(--border-width) * 0.5)), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - (var(--edge-size) + var(--border-width) * 0.5)), calc(100% - (var(--edge-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), calc(100% - (var(--edge-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)));
}

/* -------------------------------------------------- *//*# sourceMappingURL=grafik-konzept-final.css.map */