@charset "UTF-8";
body {
  overflow-x: hidden;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 1.2rem;
  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_full.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_linear.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-wrapper {
  height: 463.5416666667vw;
}

.starttext {
  position: absolute;
  top: 21.5vh;
  left: 32.1vw;
  color: var(--col);
  font-size: var(--text23);
  line-height: var(--lh30);
  font-weight: var(--fw-light);
  opacity: 0;
  animation: fade-bottom 0.5s cubic-bezier(0.57, 0.02, 0.68, 1.71) forwards;
  animation-delay: 3.7s;
}

.card-container {
  display: grid;
  height: 100%;
  width: 100vw;
  justify-content: center;
  grid-template-columns: repeat(4, 18.8541666667vw);
  grid-template-rows: repeat(24, 18.8541666667vw);
  grid-auto-rows: 1fr;
  box-sizing: border-box;
  margin-top: 20vh;
  place-items: center;
  transform: none !important;
}

.card-item {
  width: 85%;
  height: 85%;
}

.card__content {
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.card__front,
.card__back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  color: var(--col);
}

/* ----- */
/* ----- */
.card__back {
  transform: rotateX(0.5turn);
  background: #fff;
}

.card__turn {
  transform: rotateX(0.5turn);
}

.card-border {
  border: 1px solid var(--col);
}

/* --------------------------------------- */
#cc1 .card__front:hover {
  background-image: url(../img/grafik/01.logoentwurf_druckwiesel_b.svg);
}

#cc2 .card__front:hover {
  background-image: url(../img/grafik/02.logoentwurf_gruentau_b.svg);
}

#cc3 .card__front:hover {
  background-image: url(../img/grafik/03.logoentwurf_licapanni_b.svg);
}

#cc4 .card__front:hover {
  background-image: url(../img/grafik/04.logoentwurf_baumann_b.svg);
}

/* ----- */
#cc5 .card__front:hover {
  background-image: url(../img/grafik/05.logoentwurf_zur_kogge_b.svg);
}

#cc6 .card__front:hover {
  background-image: url(../img/grafik/06.logoentwurf_moebelwikinger_b.svg);
}

#cc7 .card__front:hover {
  background-image: url(../img/grafik/07.logoentwurf_ermonies_b.svg);
}

#cc8 .card__front:hover {
  background-image: url(../img/grafik/08.logoentwurf_moesch_b.svg);
}

/* ----- */
#cc9 .card__front:hover {
  background-image: url(../img/grafik/09.logoentwurf_atp_b.svg);
}

#cc10 .card__front:hover {
  background-image: url(../img/grafik/10.logoentwurf_st-georg-apotheke_b.svg);
}

#cc11 .card__front:hover {
  background-image: url(../img/grafik/11.logoentwurf_schirrmacher_b.svg);
}

#cc12 .card__front:hover {
  background-image: url(../img/grafik/12.logoentwurf_boompicker_b.svg);
}

/* ----- */
#cc13 .card__front:hover {
  background-image: url(../img/grafik/13.logoentwurf_kreuzfahrtpiraten_b.svg);
}

#cc14 .card__front:hover {
  background-image: url(../img/grafik/14.logoentwurf_gesundschuh_b.svg);
}

#cc15 .card__front:hover {
  background-image: url(../img/grafik/15.logoentwurf_majer_b.svg);
}

#cc16 .card__front:hover {
  background-image: url(../img/grafik/16.logoentwurf_hahn_b.svg);
}

/* ----- */
#cc17 .card__front:hover {
  background-image: url(../img/grafik/17.logoentwurf_paternus_b.svg);
}

#cc18 .card__front:hover {
  background-image: url(../img/grafik/18.logoentwurf_kurapotheke_b.svg);
}

#cc19 .card__front:hover {
  background-image: url(../img/grafik/19.logoentwurf_hensing-apotheke_b.svg);
}

#cc20 .card__front:hover {
  background-image: url(../img/grafik/20.logoentwurf_apotheke-offering_b.svg);
}

/* ----- */
#cc21 .card__front:hover {
  background-image: url(../img/grafik/21.logoentwurf_janmaat_b.svg);
}

#cc22 .card__front:hover {
  background-image: url(../img/grafik/22.logoentwurf_moebelboerse_b.svg);
}

#cc23 .card__front:hover {
  background-image: url(../img/grafik/23.logoentwurf_avitus_b.svg);
}

#cc24 .card__front:hover {
  background-image: url(../img/grafik/24.logoentwurf_stromer_b.svg);
}

/* ----- */
#cc25 .card__front:hover {
  background-image: url(../img/grafik/25.logoentwurf_layoutagent_b.svg);
}

#cc26 .card__front:hover {
  background-image: url(../img/grafik/26.logoentwurf_szs_b.svg);
}

#cc27 .card__front:hover {
  background-image: url(../img/grafik/27.logoentwurf_zum-hanseaten_b.svg);
}

#cc28 .card__front:hover {
  background-image: url(../img/grafik/28.logoentwurf_mq_b.svg);
}

/* ----- */
#cc29 .card__front:hover {
  background-image: url(../img/grafik/29.logoentwurf_fischereiverein_b.svg);
}

#cc30 .card__front:hover {
  background-image: url(../img/grafik/30.logoentwurf_koest_b.svg);
}

#cc31 .card__front:hover {
  background-image: url(../img/grafik/31.logoentwurf_siccad_b.svg);
}

#cc32 .card__front:hover {
  background-image: url(../img/grafik/32.logoentwurf_foerster_koestner_b.svg);
}

/* ----- */
#cc33 .card__front:hover {
  background-image: url(../img/grafik/33.logoentwurf_auh_b.svg);
}

#cc34 .card__front:hover {
  background-image: url(../img/grafik/34.logoentwurf_cleversailing_b.svg);
}

#cc35 .card__front:hover {
  background-image: url(../img/grafik/35.logoentwurf_meisner_b.svg);
}

#cc36 .card__front:hover {
  background-image: url(../img/grafik/36.logoentwurf_montana_b.svg);
}

/* ----- */
#cc37 .card__front:hover {
  background-image: url(../img/grafik/37.logoentwurf_atrium_b.svg);
}

#cc38 .card__front:hover {
  background-image: url(../img/grafik/38.logoentwurf_alacart_b.svg);
}

#cc39 .card__front:hover {
  background-image: url(../img/grafik/39.logoentwurf_pier46_b.svg);
}

#cc40 .card__front:hover {
  background-image: url(../img/grafik/40.logoentwurf_ostseewoge_b.svg);
}

/* ----- */
#cc41 .card__front:hover {
  background-image: url(../img/grafik/41.logoentwurf_kaiserhof_b.svg);
}

#cc42 .card__front:hover {
  background-image: url(../img/grafik/42.logoentwurf_bonappetito_b.svg);
}

#cc43 .card__front:hover {
  background-image: url(../img/grafik/43.logoentwurf_grand-hotel_b.svg);
}

#cc44 .card__front:hover {
  background-image: url(../img/grafik/44.logoentwurf_zur-post_b.svg);
}

/* ----- */
#cc45 .card__front:hover {
  background-image: url(../img/grafik/45.logoentwurf_internetrecht_b.svg);
}

#cc46 .card__front:hover {
  background-image: url(../img/grafik/46.logoentwurf_groenfingers_b.svg);
}

#cc47 .card__front:hover {
  background-image: url(../img/grafik/47.logoentwurf_fch-akademie_b.svg);
}

#cc48 .card__front:hover {
  background-image: url(../img/grafik/48.logoentwurf_rsv_b.svg);
}

/* ----- */
#cc49 .card__front:hover {
  background-image: url(../img/grafik/49.logoentwurf_werbestation_b.svg);
}

#cc50 .card__front:hover {
  background-image: url(../img/grafik/50.logoentwurf_gbm_b.svg);
}

#cc51 .card__front:hover {
  background-image: url(../img/grafik/51.logoentwurf_bach_b.svg);
}

#cc52 .card__front:hover {
  background-image: url(../img/grafik/52.logoentwurf_shk_b.svg);
}

/* ----- */
#cc53 .card__front:hover {
  background-image: url(../img/grafik/53.logoentwurf_bauhof_b.svg);
}

#cc54 .card__front:hover {
  background-image: url(../img/grafik/54.logoentwurf_doering_b.svg);
}

#cc55 .card__front:hover {
  background-image: url(../img/grafik/55.logoentwurf_lkd_b.svg);
}

#cc56 .card__front:hover {
  background-image: url(../img/grafik/56.logoentwurf_hoehne_b.svg);
}

/* ----- */
#cc57 .card__front:hover {
  background-image: url(../img/grafik/57.logoentwurf_pm-bautech_b.svg);
}

#cc58 .card__front:hover {
  background-image: url(../img/grafik/58.logoentwurf_mwr_b.svg);
}

#cc59 .card__front:hover {
  background-image: url(../img/grafik/59.logoentwurf_wabau_b.svg);
}

#cc60 .card__front:hover {
  background-image: url(../img/grafik/60.logoentwurf_parkhotel_b.svg);
}

/* ----- */
#cc61 .card__front:hover {
  background-image: url(../img/grafik/61.logoentwurf_ms-gudrun_b.svg);
}

#cc62 .card__front:hover {
  background-image: url(../img/grafik/62.logoentwurf_ferienland_b.svg);
}

#cc63 .card__front:hover {
  background-image: url(../img/grafik/63.logoentwurf_titus-rhode_b.svg);
}

#cc64 .card__front:hover {
  background-image: url(../img/grafik/64.logoentwurf_moebelmeile_b.svg);
}

/* ----- */
#cc65 .card__front:hover {
  background-image: url(../img/grafik/65.logoentwurf_dierhagen_b.svg);
}

#cc66 .card__front:hover {
  background-image: url(../img/grafik/66.logoentwurf_osr_b.svg);
}

#cc67 .card__front:hover {
  background-image: url(../img/grafik/67.logoentwurf_autogaszentrum_b.svg);
}

#cc68 .card__front:hover {
  background-image: url(../img/grafik/68.logoentwurf_kulturmeer_b.svg);
}

/* ----- */
#cc69 .card__front:hover {
  background-image: url(../img/grafik/69.logoentwurf_harrmann_b.svg);
}

#cc70 .card__front:hover {
  background-image: url(../img/grafik/70.logoentwurf_stoll_b.svg);
}

#cc71 .card__front:hover {
  background-image: url(../img/grafik/71.logoentwurf_gesundschuh_b.svg);
}

#cc72 .card__front:hover {
  background-image: url(../img/grafik/72.logoentwurf_ci-druck_b.svg);
}

/* ----- */
#cc73 .card__front:hover {
  background-image: url(../img/grafik/73.logoentwurf_kangruu_b.svg);
}

#cc74 .card__front:hover {
  background-image: url(../img/grafik/74.logoentwurf_php_b.svg);
}

#cc75 .card__front:hover {
  background-image: url(../img/grafik/75.logoentwurf_hst_b.svg);
}

#cc76 .card__front:hover {
  background-image: url(../img/grafik/76.logoentwurf_hillmer_b.svg);
}

/* ----- */
#cc77 .card__front:hover {
  background-image: url(../img/grafik/77.logoentwurf_heckmann_b.svg);
}

#cc78 .card__front:hover {
  background-image: url(../img/grafik/78.logoentwurf_strauss_b.svg);
}

#cc79 .card__front:hover {
  background-image: url(../img/grafik/79.logoentwurf_poschke_b.svg);
}

#cc80 .card__front:hover {
  background-image: url(../img/grafik/80.logoentwurf_aquaro_b.svg);
}

/* ----- */
#cc81 .card__front:hover {
  background-image: url(../img/grafik/81.logoentwurf_theresa-fritz_b.svg);
}

#cc82 .card__front:hover {
  background-image: url(../img/grafik/82.logoentwurf_rossdruck_b.svg);
}

#cc83 .card__front:hover {
  background-image: url(../img/grafik/83.logoentwurf_zornow_b.svg);
}

#cc84 .card__front:hover {
  background-image: url(../img/grafik/84.logoentwurf_wege_b.svg);
}

/* ----- */
#cc85 .card__front:hover {
  background-image: url(../img/grafik/85.logoentwurf_goldenbow_b.svg);
}

#cc86 .card__front:hover {
  background-image: url(../img/grafik/86.logoentwurf_muschelhoeh_b.svg);
}

#cc87 .card__front:hover {
  background-image: url(../img/grafik/87.logoentwurf_strom89_b.svg);
}

#cc88 .card__front:hover {
  background-image: url(../img/grafik/88.logoentwurf_st-moritz_b.svg);
}

/* ----- */
#cc89 .card__front:hover {
  background-image: url(../img/grafik/89.logoentwurf_boulanger_b.svg);
}

#cc90 .card__front:hover {
  background-image: url(../img/grafik/90.logoentwurf_gestuet_b.svg);
}

#cc91 .card__front:hover {
  background-image: url(../img/grafik/91.logoentwurf_msaat_b.svg);
}

#cc92 .card__front:hover {
  background-image: url(../img/grafik/92.logoentwurf_teddy_b.svg);
}

/* ----- */
#cc93 .card__front:hover {
  background-image: url(../img/grafik/93.logoentwurf_dixieland_b.svg);
}

#cc94 .card__front:hover {
  background-image: url(../img/grafik/94.logoentwurf_warnemuender-woche_b.svg);
}

#cc95 .card__front:hover {
  background-image: url(../img/grafik/95.logoentwurf_metzler_b.svg);
}

#cc96 .card__front:hover {
  background-image: url(../img/grafik/96.logoentwurf_hillmer_b.svg);
}

#cc1 .card__front img:hover,
#cc2 .card__front img:hover,
#cc3 .card__front img:hover,
#cc4 .card__front img:hover,
#cc5 .card__front img:hover,
#cc6 .card__front img:hover,
#cc7 .card__front img:hover,
#cc8 .card__front img:hover,
#cc9 .card__front img:hover,
#cc10 .card__front img:hover,
#cc11 .card__front img:hover,
#cc12 .card__front img:hover,
#cc13 .card__front img:hover,
#cc14 .card__front img:hover,
#cc15 .card__front img:hover,
#cc16 .card__front img:hover,
#cc17 .card__front img:hover,
#cc18 .card__front img:hover,
#cc19 .card__front img:hover,
#cc20 .card__front img:hover,
#cc21 .card__front img:hover,
#cc22 .card__front img:hover,
#cc23 .card__front img:hover,
#cc24 .card__front img:hover,
#cc25 .card__front img:hover,
#cc26 .card__front img:hover,
#cc27 .card__front img:hover,
#cc28 .card__front img:hover,
#cc29 .card__front img:hover,
#cc30 .card__front img:hover,
#cc31 .card__front img:hover,
#cc32 .card__front img:hover,
#cc33 .card__front img:hover,
#cc34 .card__front img:hover,
#cc35 .card__front img:hover,
#cc36 .card__front img:hover,
#cc37 .card__front img:hover,
#cc38 .card__front img:hover,
#cc39 .card__front img:hover,
#cc40 .card__front img:hover,
#cc41 .card__front img:hover,
#cc42 .card__front img:hover,
#cc43 .card__front img:hover,
#cc44 .card__front img:hover,
#cc45 .card__front img:hover,
#cc46 .card__front img:hover,
#cc47 .card__front img:hover,
#cc48 .card__front img:hover,
#cc49 .card__front img:hover,
#cc50 .card__front img:hover,
#cc51 .card__front img:hover,
#cc52 .card__front img:hover,
#cc53 .card__front img:hover,
#cc54 .card__front img:hover,
#cc55 .card__front img:hover,
#cc56 .card__front img:hover,
#cc57 .card__front img:hover,
#cc58 .card__front img:hover,
#cc59 .card__front img:hover,
#cc60 .card__front img:hover,
#cc61 .card__front img:hover,
#cc62 .card__front img:hover,
#cc63 .card__front img:hover,
#cc64 .card__front img:hover,
#cc65 .card__front img:hover,
#cc66 .card__front img:hover,
#cc67 .card__front img:hover,
#cc68 .card__front img:hover,
#cc69 .card__front img:hover,
#cc70 .card__front img:hover,
#cc71 .card__front img:hover,
#cc72 .card__front img:hover,
#cc73 .card__front img:hover,
#cc74 .card__front img:hover,
#cc75 .card__front img:hover,
#cc76 .card__front img:hover,
#cc77 .card__front img:hover,
#cc78 .card__front img:hover,
#cc79 .card__front img:hover,
#cc80 .card__front img:hover,
#cc81 .card__front img:hover,
#cc82 .card__front img:hover,
#cc83 .card__front img:hover,
#cc84 .card__front img:hover,
#cc85 .card__front img:hover,
#cc86 .card__front img:hover,
#cc87 .card__front img:hover,
#cc88 .card__front img:hover,
#cc89 .card__front img:hover,
#cc90 .card__front img:hover,
#cc91 .card__front img:hover,
#cc92 .card__front img:hover,
#cc93 .card__front img:hover,
#cc94 .card__front img:hover,
#cc95 .card__front img:hover,
#cc96 .card__front img:hover {
  opacity: 0;
  background-size: 100%;
  background-repeat: no-repeat;
}

.card-item {
  animation: fade-ltr 2s ease forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.margin-50 {
  animation: ttb 3s ease forwards;
  animation-delay: 3s;
  opacity: 0;
}

.test-left {
  animation: fade-ltr 2s ease forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.test-left2 {
  animation: fade-ltr-b 3s ease forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.test-right {
  animation: fade-rtl 2s ease forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.test-right2 {
  animation: fade-rtl-b 3s ease forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.fade-out {
  animation: fade-out 0.7s ease forwards;
}

footer {
  height: 100px;
  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;
}
footer .div1 {
  grid-area: 1/1/2/2;
  display: flex;
  color: #636e6f;
  padding-left: 50px;
}
footer .div1 img {
  width: 6.6666666667vw;
  height: 6.6666666667vw;
  padding-right: 20px;
  border-right: 1px solid #636e6f;
}
footer .div1 p {
  padding-left: 20px;
  font-size: var(--text19);
  line-height: var(--lh28);
  font-weight: var(--fw-light);
  margin-top: -7px;
}
footer .div2 {
  grid-area: 1/2/2/3;
  display: grid;
}
footer .div2 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: end;
}
footer .div2 ul li {
  line-height: 3vh;
  color: var(--col);
  font-weight: var(--fw-light);
  font-style: normal;
  font-size: var(--textFooter);
  list-style-type: none;
}
footer .div2 ul li a {
  color: var(--col);
  text-decoration: none;
}
footer .div2 ul li a:hover {
  color: var(--hover);
}
footer .div3 {
  grid-area: 1/3/2/4;
  position: relative;
}
footer .div3 .logo-anf {
  display: block;
  width: 8.59375vw;
  height: 4.1666666667vw;
  position: absolute;
  left: -395px;
  bottom: 70px;
  color: transparent;
  background-image: url(../img/grafik/logo_button.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0;
}
footer .div3 .logo-anf:hover {
  background-image: url(../img/grafik/logo_button_hover.svg);
}
footer .div3 .up {
  display: block;
  position: absolute;
  left: -50px;
  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;
}
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=grafik8.css.map */