/*
 * https://codepen.io/mandymichael/pen/wpYQKx
 */
 #hund-liegt {
    position: absolute;
    bottom: 17px;
    right: 15px;
    height: 130px;
    width: 170px;
    background: url(../images/logos/hund-liegt.png);
    background-size: 100%,100%;
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    opacity: .7;
    transition: .45s all
}


.haustueren{
    position: absolute;
    top: 12%;
    left: 0;
    width: 250px;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}

.fenster{
    position: absolute;
    top: 16%;
    left: 0;
    width: 250px;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}
.ueberdachungen{
    position: absolute;
    top: 20%;
    left: 0;
    width: 250px;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}

.duschwaende{
    position: absolute;
    top: 24%;
    left: 0;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}

.glastrennwaende{
    position: absolute;
    top: 28%;
    left: 0;
    width: 250px;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}
.kuechenr{
    position: absolute;
    top: 37%;
    left: 0;
    width: 250px;
    padding-left: 15px;
    t/ext-align: center;
	font-size: 1.6em;
	font-family: "Arial Black";
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color:  rgba(0, 0, 255, 0.18);
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
    transform: skew(0deg, 18deg);
    opacity:  0.3;
}

.check:before { /*  */
	font-family: FontAwesome;
	content: "\f00c";
	display: inline-block;
	padding-right: 5px;
	color: #ff0033;
	font-size: 1.5em;
	justify-content: center;
}

.driver-license:before { /*  */
	font-family: FontAwesome;
	content: "\f2c3";
	display: inline-block;
	padding-right: 5px;
	color: #ff0033;
	font-size: 1.5em;
	justify-content: center;
}

.shower:before { /*  */
	font-family: FontAwesome;
	content: "\f2cc";
	display: inline-block;
	padding-right: 5px;
	color: #ff0033;
	font-size: 1.5em;
	justify-content: center;
}

.people:before { /*  */
	font-family: FontAwesome;
	content: "\f007";
	display: inline-block;
	padding-right: 5px;
	color: #ff0033;
	font-size: 1.5em;
	justify-content: center;
}


.night:before { /*  */
	font-family: FontAwesome;
	content: "\f186";
	display: inline-block;
	padding-right: 5px;
	color: #ff0033;
	font-size: 1.5em;
	justify-content: center;
}




.card-move.background  {
	position: relative;
	height: 300px;
	b/ackground: rgba(0, 0, 0, 0.2);
	background: linear-gradient(340deg, rgba(255,255,255,0.1) 0%, rgba(0,0,255,0.1) 100%);
	backdrop-filter: blur(5px);
	border-radius: 10px;
	padding: 15px 25px;
	b/order: 1px solid rgba(0, 0, 0, 0.1);
	b/ox-shadow: 0 2px 10px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
	backdrop-filter: blur( 5.5px );
	-webkit-backdrop-filter: blur( 5.5px );
}

.card-move.background ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/page/bg-03.jpg'); /* Ersetze durch dein Bild */
    background-size: 150% 150%;
	background-repeat: no-repeat;
    background-position: 1px 1px;
	opacity: 0.1;
	animation: bg-animation 24s infinite;
}

@keyframes bg-animation {
  0% {
    background-position: top left;
  }
  50% {
    background-position: bottom right;
  }
  100% {
    background-position: top center;
  }
}

/* ------------------------------------------------------------------------------------------------------------------- */

/* animation to make on-hover tiles float */
@keyframes animate{
  0,100% {
    transform: translateY(10px);
  }
  50%{
    transform: translateY(-10px);
  }
}
/* ------------------------------------------------------------------------------------------------------------------- */
/*
.artikel-test{
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 5px;
	z-index: 1;    
    transition: all 0.6s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius, 4px);
}


.artikel-test::before{
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 40px;
  height: 40px;
  border: 8px;
  background: rgba(0, 128, 0, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s linear infinite;
}


.artikel-test::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: -5px;
  w/idth: 50px;
  h/eight: 50px;
  border: 8px;
    border-radius: 50%;
  background-color:  rgba(210, 105, 30, 0.35);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s linear infinite;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
  animation-delay: -1s;
  
}

.artikel-test:hover::before{
  top: 0px;
  right: -5px;
  width: 40px;
  height: 40px;
  opacity: 1;
}

.artikel-test:hover::after{
  bottom: -25px;
  right: 100px;
  width: 40px;
  height: 40px;
  opacity: 1;

}

/* ------------------------------------------------------------------------------------------------------------------- */


.artikel-test{
	position: relative;
	display: block;
    margin-top: 10px;
    margin-bottom: 20px;
	padding: 15px 15px 15px 15px;
    
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--border-radius, 14px);
    
    background: rgba(250, 199, 255, 0.32);
	box-shadow: 1px 0 15px rgba(0, 0, 255, 0.20);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
    transform: skewY(3deg);
    z-index: 1;
}

.artikel-test .menue,
.artikel-test .image-with-text {
     transform: skewY(-3deg);   
}


/*
.artikel-test {
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px;
	z-index: 1;    
    transition: all 0.6s ease-in-out;
    border: 1px solid rgba(88, 120, 255, 0.2);
    border-radius: 5px;

}

.artikel-test:before,
.artikel-test:after {
    content: "";
    position: absolute;
    border-radius: var(--border-radius, 4px);
    z-index: -1;
}



.artikel-test:before {
    top: 0;
    left: 0;
	width: 50%;
    height: 100%;
    background: rgba(88, 120, 255, 0.2);

    z-index: -1;

    transform: translate(50%, 0) scaleY(1.1) skew(0deg, 0deg);
    transition: all 0.6s ease-in-out;
}

.artikel-test:hover:before {
    top: 0;
    right: 0;
	width: 100%;
    height: 100%;
    background: transparent;
    transform: translate(0, 0) scaleY(1.0) skew(0deg, 0deg);
    border: none;
    -webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
/* ------------------------------------------------------------------------------------------------------------------- */

/* From https://css.glass 
background: rgba(136, 140, 207, 0.17);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.6px);
-webkit-backdrop-filter: blur(5.6px);
border: 1px solid rgba(136, 140, 207, 0.43);
/* ------------------------------------------------------------------------------------------------------------------- */


.artikel-hg-01 {
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 5px;
	z-index: 1;    
    transition: all 0.6s ease-in-out;

}

.artikel-hg-01:before,
.artikel-hg-01:after {
    content: "";
    position: absolute;
    border-radius: var(--border-radius, 4px);
    z-index: -1;
     
}

.artikel-hg-01:before {
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
    
}

.artikel-hg-01:after {
    top: 0;
    left: 35%;
    right: 35%;
    height: 100%;
    background: linear-gradient(315deg, #4dff03, #00d0ff);
    z-index: -2;
    transform: translate(0, 0) scale(0.7, 1.04) skew(-30deg, 0deg);
    transition: all 0.6s ease-in-out;
}

.artikel-hg-01:hover::after {
    filter: brightness(0.7) ;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translate(0, 0) scale(0.7, 1.04) skew(20deg, 0deg);
}


.artikel-hg-01:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  
}



/* ------------------------------------------------------------------------------------------------------------------- */

.artikel-hg-02 {
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 5px;
	z-index: 1;    
    transition: all 0.6s ease-in-out;
}

.artikel-hg-02:before,
.artikel-hg-02:after {
    content: "";
    position: absolute;
    border-radius: var(--border-radius, 4px);
    z-index: -1;
}

.artikel-hg-02:before {
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.artikel-hg-02:after {
    top: 0;
    right: 0;
	width: 100px;
    height: 100px;
	border-radius: 50%;
    background: rgba(88, 120, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: -2;
	transform: translate(25%, -25%);
}


/* ------------------------------------------------------------------------------------------------------------------- */

.karo-or {
     overflow: visible;
}

.karo-or:after {
    content: "";
    position: absolute;
    border-radius: 4px;
    top: 0;
    right: 0;
	width: 50px;
    height: 50px;

    background: rgba(88, 120, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
	transform: translate(15%, -15%);
}

.karo-ol {
     overflow: visible;
}

.karo-ol:before {
    content: "";
    position: absolute;
    border-radius: 4px;
    top: 0;
    left: 0;
	width: 50px;
    height: 50px;
    background: linear-gradient(315deg, #00900050, #0066ff50);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: -1;
	transform: translate(-15%, -15%);
}

.karo-ul {
     overflow: visible;
}

.karo-ul:after {
    content: "";
    position: absolute;
    border-radius: 4px;
    bottom: 0;
    left: 0;
	width: 50px;
    height: 50px;
    background: rgba(88, 120, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: -1;
	transform: translate(-15%, 15%);
}
.karo-ur {
     overflow: visible;
}

.karo-ur:after {
    content: "";
    position: absolute;
    border-radius: 4px;
    bottom: 0;
    right: 0;
	width: 50px;
    height: 50px;

    background: linear-gradient(315deg, #0066ff50, #00900050);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
	transform: translate(15%, 15%);
}

/* ------------------- */
.artikel-hg-03 {
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 5px;
	z-index: 1;    
    transition: all 0.6s ease-in-out;
}

.artikel-hg-03:before,
.artikel-hg-03:after {
    content: "";
    position: absolute;
    border-radius: var(--border-radius, 4px);
    z-index: -1;
}

.artikel-hg-03:before {
    inset: 0;
    background: rgba(00, 0, 0, 0.05);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.artikel-hg-03:after {
    top: 0;
    right: 0;
	width: 50px;
    height: 50px;
	b/order-radius: 50%;
    background: rgba(88, 120, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
	transform: translate(15%, -15%);
}

.artikel-hg-03:hover:after {
    background: rgba(0, 128, 0, 0.27);
	transform: translate(15%, -15%);
}

/* ------------------------------------------------------------------------------------------------------------------- */
.artikel-hg-04{
	position: relative;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 15px 15px 5px;
	z-index: 1;
}

.artikel-hg-04:before,
.artikel-hg-04:after {
    content: "";
    position: absolute;
    border-radius: var(--border-radius, 4px);
    z-index: -1;
}

.artikel-hg-04:before {
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	backdrop-filter: blur(var(--blur-effekt, 5px));
	border: 1px solid rgba(255, 255, 255, 0.03);
}


.artikel-hg-04 h3 {
    display: flex;
    justify-content: flex-start;  
    align-items: center;         
    margin: 0 auto;
    font-size: 1.3rem;
    border-radius: 50px;
    padding: 15px 20px;
    margin-bottom: -10px;
    transform: translateY(-20px);
    background: rgba(135, 206, 235, 0.2);
    -webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
    backdrop-filter: blur(var(--blur-effekt, 5px));
    box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
    z-index: 3;
}


.artikel-hg-04:hover  h3 {
    box-shadow: 0 8px 17px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    background: rgba(135, 206, 235, 0.8);
}
@media (max-width: 768px) { /* Für Mobilgeräte */

}

/* ------------------------------------------------------------------------------------------------------------------- */


.artikel-hg-05{
	position: relative;
	display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	padding: 25px 50px;
	border-radius: var(--border-radius, 14px);
    background: rgba(250, 199, 255, 0.32);
    background: linear-gradient(215deg, rgba(250, 199, 255, 0.38), rgba(0, 0, 255, 0.05));
	backdrop-filter: blur(5px);
	box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: 1;
}



.artikel-hg-05:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(315deg, #4dff0345, #00d0ff40);
	transform: translate(25%, -25%);
    transition: all 0.6s ease-in-out;
    border-radius: 50%;
    box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: -2;
}

.artikel-hg-05:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
	transform: translate(30%, 30%);
    transition: all 0.6s ease-in-out;
    border-radius: 50%;
    background: linear-gradient(315deg, #4dff0345, #00d0ff40);
    box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: -2;
}
/* ------------------------------------------------------------------------------------------------------------------- */

.artikel-glas-hg{
	position: relative;
	display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	padding: 15px 15px 5px 15px;
	border-radius: 5px;
    background: linear-gradient(215deg, rgba(250, 199, 255, 0.3), rgba(0, 0, 255, 0.03));
	backdrop-filter: blur(5px);
	box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: 1;
}


.artikel-glas-hg:hover{

	box-shadow: 1px 0 10px rgba(0, 0, 0, 0.30);
    z-index: 1;
}

.artikel-glas-hg-02{
	position: relative;
	display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	padding: 15px 15px 5px 15px;
	border-radius: 5px;
    background: linear-gradient(215deg, rgba(250, 199, 255, 0.3), rgba(0, 0, 255, 0.03));
	backdrop-filter: blur(5px);
	box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: 1;
}



.artikel-glas-hg-02:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(315deg, #4dff0345, #00d0ff40);
	transform: translate(25%, -25%);
    transition: all 0.6s ease-in-out;
    border-radius: 50%;
    box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: -2;
}
/* ------------------------------------------------------------------------------------------------------------------- */

#artikel-rund {
  	margin: 0 auto;
	transition: all 0.3s ease-in-out;
}

.artikel-rund p{
    padding-top: 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: 600;
    text-shadow: 1px 1px 11px  rgba(0,0,0,1.0);
    line-height: 1.2em;
    text-transform: uppercase;
    font-size: 110%;
	z-index: 1;
}

.artikel-rund {
    aspect-ratio: 1 / 1;
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%; 
    background-color:  rgba(0, 128, 0, 0.7);
    z-index: 1;
}

.artikel-rund:hover {
    background-color:  rgba(0, 0, 0, 0.7);
}

.artikel-rund:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%; 
    background-image: url('../images/buttons/camper.png'); 
    background-size: 60%; 
    background-position:  center 40%;
    background-repeat: no-repeat;
    z-index: -1; 
    opacity:  0.3;
}

@media screen and (min-width: 991px){
	.artikel-rund.col-sm-3 {
		max-width: 18.0%;
	}  
}