/*
 * https://codepen.io/mandymichael/pen/wpYQKx
 */

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: #000000;
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

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

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: rgba(111, 111, 255, 0.08);
    --bs-btn-border-color: rgba(0, 0, 255, 0.1);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: rgba(111, 111, 255, 0.3);
    --bs-btn-hover-border-color: rgba(198, 199, 200, 0.85);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

 #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;
	d/isplay: block;
    m/argin-bottom: 15px;
	padding: 15px 15px 5px 15px;
	border-radius: var(--border-radius, 4px);
    -we/bkit-backdrop-filter: blur(15px);
	b/ackdrop-filter: blur(15px);
	overflow: auto;
    b/ackground: trnsparent;
    z-index: 2;

}



.card-move.background ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/page/bg-03-1.webp'); /* Ersetze durch dein Bild */
    background-size: 110% 110%;
	background-repeat: no-repeat;
    background-position: 1px 1px;
	opacity: 0.05;
	animation: bg-animation 24s  infinite alternate ease-in-out;
    z-index: -1;

}


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

/* 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.1);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	-w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	b/ackdrop-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%;
    m/argin-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);
	-w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	b/ackdrop-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);
	-we/bkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	ba/ckdrop-filter: blur(var(--blur-effekt, 5px));
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.artikel-hg-02:after {
    top: 0;
    right: 0;
	width: 60px;
    height: 60px;
	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%);
}

.artikel-hg-anim-01 {
    background: linear-gradient(-85deg, #000000, #80aed1, #00002a, #032270);
    background-size: 400% 400%;
    animation: gradient-background-1 15s ease infinite;
}

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


.artikel-hg-anim-01 {
    background: linear-gradient(-85deg, #000000, #80aed1, #00002a, #032270);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

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

.artikel-hg-anim-02 {
  background-color: #00052c;
  background-image:
    radial-gradient(at 167% 55%, rgba(159,143,240,0.6) 0%, transparent 47%),radial-gradient(at 45% 5%, #c0f4ff 0%, transparent 45%), 
    radial-gradient(at 9% 50%, hsla(60,96%,75%,0.2) 0%, transparent 75%), radial-gradient(at 50% 93%, rgba(71,203,255,0.7) 0%, transparent 70%);

  background-size: 300% 300%;
  animation: gradient-background-0 40s ease-in-out infinite forwards;
}

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



.cursor-box {
    position: relative;
    display: block;
    transition: all 0.3s ease;
    overflow: hidden;
}

.cursor-box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    top: -100%;
    left: -100%;
    transition: all 0.5s ease;
}

.cursor-box:hover::before {
    top: 100%;
    left: 100%;
}

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

.arrow-icon {
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;

    margin-top: auto;
    display: block;
    width: 97px;
    min-width: 97px;
    height: 46px;
    color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' height='46' width='97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M72.93 0l-1.965 1.918L90.282 21.17H.137v2.715H91.23L70.965 44.082 72.93 46l23.078-23-1.415-1.41v-.42h-.42z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E")
}


/* arrow-icon bewegt sich bei hover div */
div:hover > .arrow-icon {
    transform: translate(15px) rotate(0) scale(1) skew(0);
    -webkit-transform: translate(15px) rotate(0) scale(1) skew(0);
    -moz-transform: translate(15px) rotate(0) scale(1) skew(0);
    -ms-transform: translate(15px) rotate(0) scale(1) skew(0);
    -o-transform: translate(15px) rotate(0) scale(1) skew(0)
}

/* Div in dem arrow-icon ist, wird durchsichtig bei hover */
div:hover:has(> .arrow-icon) { 
    opacity: .7;
}



.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);
	-w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	b/ackdrop-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);
	-w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
	b/ackdrop-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);
    -w/ebkit-backdrop-filter: blur(var(--blur-effekt, 5px));
    b/ackdrop-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: 4px 15px 15px 15px;
	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));
	b/ackdrop-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-hg-06{
	position: relative;
	display: inline-block;
    border-right: 1px solid  rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
	padding: 15px 15px 15px 15px;
	border-radius: 5px;
    ba/ckground: linear-gradient(215deg, rgba(250, 199, 255, 0.2), rgba(0, 0, 255, 0.02));
    background: rgba(255, 255, 255, 0.09);
	b/ackdrop-filter: blur(5px);
	b/ox-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1;
}


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

.artikel-hg-07{
	position: relative;
	display: inline-block;

	padding: 4px 15px 15px 15px;
	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));
	b/ackdrop-filter: blur(5px);
	b/ox-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: 1;
}



.artikel-hg-07:before {
    content: "";
    position: absolute;
    top: 20%;
    left: 0;
    width: 80%;
    height: 60%;
    background: linear-gradient(315deg, #4dff0320, #00d0ff30);
	transform: translate(0, 0%);
    transform: rotate(-18deg);
    transition: all 0.6s ease-in-out;
    border-radius: 5px;
    b/ox-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: -2;
}

.artikel-hg-07:after {
    content: "";
    position: absolute;
    top: 30%;
    left: -1%;
    width: 104%;
    height: 40%;
    background: linear-gradient(315deg, #4dff0320, #00d0ff30);
	transform: translate(0, 0%);
    transform: rotate(16deg);
    transition: all 0.6s ease-in-out;
    border-radius: 5px;
    b/ox-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: -2;
}


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

.a/rtikel-glas-hg-02{
	position: relative;
	padding: 15px 15px 5px 15px;
	border-radius: 5px;
    background: linear-gradient(215deg, rgba(0, 0, 255, 0.10), rgba(250, 199, 255, 0.3));
	b/ackdrop-filter: blur(3px);
	box-shadow: 1px 0 15px rgba(0, 0, 0, 0.20);
    z-index: 1;
}

.artikel-glas-hg-02{
	position: relative;
	border-radius: 5px;
    background: linear-gradient(215deg, rgba(0, 0, 255, 0.10), rgba(250, 199, 255, 0.3));
	b/ackdrop-filter: blur(3px);
	bo/x-shadow: 1px 0 15px rgba(0, 0, 0, 0.10);
    z-index: 1;
    
    background: linear-gradient(215deg, rgba(0, 0, 255, 0.1), rgba(250, 199, 255, 0.2));
    background-size: 130% 130%;
    animation: gradientMove 4s infinite alternate ease-in-out;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.artikel-glas-hg{
	position: relative;
	d/isplay: 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));
	b/ackdrop-filter: blur(5px);
	box-shadow: 1px 0 15px rgba(255, 255, 255, 0.20);
    z-index: 1;
}

.artikel-glas-hg: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%;
	}  
}  




/* Text Animationen */


.btnss:hover {
    animation-name: jump;
    animation-duration: 0.5s;
    animation-delay: calc(var(--i) * 0.075s);
}

@keyframes jump {
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

.textanimation1 {
  
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  b/ackground: black;
  position: relative;
/*   shorthand animation property: name | duration | iteration count */
/*   animation: text 4s 1; */
  animation-name: textanimation;
  animation-duration: 4s;
  asnimation-iteration-count: infinite;
}

.textanimation2 {
  font-size: 25px;
  color: #FFE997;
}

@keyframes textanimation {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    margin-bottom: 20px;
  }
}