@charset "utf-8";
/* CSS Document */

		:root {
			--blau1:  #a8c9e0;
			--blau2: #577992;
			--blau3: #224573;
			--bg: #f2faff;
            --rot: #D94838;
		}
			
@font-face {
    font-display: swap;
    font-family: "fascinate";
    src: url("font/Fascinate/Fascinate-Regular.ttf") format('truetype');
}

@font-face {
    font-display: swap;
    font-family: "chewy";
    src: url("font/Chewy/Chewy-Regular.ttf") format('truetype');
}

@font-face {
    font-display: swap;
    font-family: "fingerpaint";
    src: url("font/Finger_Paint/FingerPaint-Regular.ttf") format('truetype');
}
@font-face {
    font-display: swap;
    font-family: "raleaway";
    src: url("font/Raleway/static/Raleway-Medium.ttf") format('truetype');
}
		
		body {
			font-family: raleaway;
				margin: 0;
			background: var(--bg);
		}
	
		button {
			background: none;
			color: inherit;
			border: none;
			padding: 0;
			font: inherit;
			cursor: pointer;
			outline: inherit;
		}

		
		
/*		//////////////////// HEADER /////////////////*/
		nav {
			height: 100px;

/*			overflow: hidden;*/
			padding: 0 20px;;
			margin: 0;
			background-color: var(--blau1);
			display: flex;
			justify-content: space-between;
		}
		
		nav img {
			height: 100%;
		}
		
		#headerlogo {
			height: 60%;
		}
		
		nav svg {
		  width: 15px;
		  height: 15px;
		  fill: var(--blau2); 
			padding: 0 5px;	

		}
		nav svg:hover {
			fill: white;
		}
		#headerdropdown {
			display: flex;
			justify-content: space-between;
			font-size: 1.2rem;
		
			color: var(--blau2);
			text-align: center;
			align-items: center;
			
/*			overflow: hidden;*/
		}
		#headerdropdown a{
			text-decoration: none;
			color: var(--blau2);
	
}
		#headerdropdown div:hover {
				 text-shadow: 
					-1px -1px 0 white,
					 1px -1px 0 white,
					-1px  1px 0 white,
					 1px  1px 0 white;
            transform: scale(1.1);
		}
		#headerdropdown div {
			padding: 15px;
			width: 90px;
			
		}
		#headershop {
			position: relative;
		}
		#headershop ul {
			background: var(--blau1);
			opacity: 0;
			visibility: hidden;
			font-size: 1rem;
			list-style: none;
			display:none;
			position: absolute;
			border-radius: 5px;
			text-shadow: none;
			text-align: left;
		
			padding: 5px 10px 5px 10px;
				
				}
		#headershop ul a {
			display: block;
			padding: 10px;
		}
		#headershop:hover ul {
			opacity: 100;
			visibility: visible;
			display:block;
		}
		#headershop ul li:hover {
			 text-shadow: 
					-1px -1px 0 white,
					 1px -1px 0 white,
					-1px  1px 0 white,
					 1px  1px 0 white;
		}
		#headerrechtspos{
            align-content: center;
            align-items: center;
        }
		#headerrechts {
			display: flex;
			align-content: center;
			align-items: center;
		}
		#headersuchfenster form input {
			background: rgba(255,255,255,0.50);
			line-height: 2rem;
			border-radius: 5px;
			border: 1px solid var(--blau2);
				
		}
        #headerrechtsunten {
            font-family: raleaway;
            color: var(--blau3);
        }
        #headerkorb {
            position: relative;
        }
        .cartnumberDiv {
            position: absolute;
            bottom: 0;
            right: 0;
            font-family: fingerpaint;
            background: var(--bg);
            color: var(--blau3);
            font-size: 0.7rem;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            text-align: center;
            align-content: center;
            justify-content: center;
        }
.cartnumberDiv p {
    margin: 0;
}

@media (min-width: 768px) {}
@media (min-width: 1200px) {
    nav {
        height: 150px;
        /*			overflow: hidden;*/
        padding: 0 20px;;
        margin: 0;
        background-color: var(--blau1);
        display: flex;
        justify-content: space-between;
    }

    nav img {
        height: 100%;
    }

    #headerlogo {
        height: 60%;
    }

    nav svg {
        width: 30px;
        height: 30px;
        fill: var(--blau2);
        padding: 0 5px;

    }
    nav svg:hover {
        fill: white;
    }
    #headerdropdown {
        display: flex;
        justify-content: space-between;
        font-size: 2.2rem;

        color: var(--blau2);
        text-align: center;
        align-items: center;

        /*			overflow: hidden;*/
    }
    #headerdropdown a{
        text-decoration: none;
        color: var(--blau2);

    }
    #headerdropdown div:hover {
        text-shadow:
                -1px -1px 0 white,
                1px -1px 0 white,
                -1px  1px 0 white,
                1px  1px 0 white;
        transform: scale(1.1);
    }
    #headerdropdown div {
        padding: 20px;
        width: 200px;

    }
    #headershop {
        position: relative;
    }
    #headershop ul {
        background: var(--blau1);
        opacity: 0;
        visibility: hidden;
        font-size: 1rem;
        list-style: none;
        display:none;
        position: absolute;
        border-radius: 5px;
        text-shadow: none;
        text-align: left;

        padding: 5px 10px 5px 10px;

    }
    #headershop ul a {
        display: block;
        padding: 10px;
    }
    #headershop:hover ul {
        opacity: 100;
        visibility: visible;
        display:block;
    }
    #headershop ul li:hover {
        text-shadow:
                -1px -1px 0 white,
                1px -1px 0 white,
                -1px  1px 0 white,
                1px  1px 0 white;
    }
    #headerrechtspos{
        align-content: center;
        align-items: center;
    }
    #headerrechts {
        display: flex;
        align-content: center;
        align-items: center;
    }
    #headersuchfenster form input {
        background: rgba(255,255,255,0.50);
        line-height: 2rem;
        border-radius: 5px;
        border: 1px solid var(--blau2);

    }
    #headerrechtsunten {
        font-family: raleaway;
        color: var(--blau3);
    }
    #headerkorb {
        position: relative;
    }
    .cartnumberDiv {
        position: absolute;
        bottom: 0;
        right: 0;
        font-family: fingerpaint;
        background: var(--bg);
        color: var(--blau3);
        font-size: 0.7rem;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        text-align: center;
        align-content: center;
        justify-content: center;
    }
    .cartnumberDiv p {
        margin: 0;
    }
}
/*   ///////////////////BODY ////////////////////////////////////*/
		
		h1 {
			color: var(--blau3);
			font-size: 5rem;
			font-family: "fingerpaint";
			 text-shadow: 
					-5px -5px 0 var(--blau1),
					 5px -5px 0 var(--blau1),
					-5px  5px 0 var(--blau1),
					 5px  5px 0 var(--blau1);
			text-align: center;
		}
		header img {
			width: 100%;
			border-bottom: 25px dotted var(--blau1);
			margin-bottom: 25px;
		}

		.textblock {
			width: 70%;
			margin: 0 auto;
			
		}
        .textblock h2 {
            text-align: center;
            color: var(--blau3);
        }
        .textblock h2 a {
            text-decoration: none;
            color: var(--blau2);
        }
        .textblock h2 a:hover {
            color: var(--blau1);
        }
.nummerierte-liste{
	counter-reset: hauptpunkt;
	list-style: none;
	
}
.nummerierte-liste > li {
	counter-increment: hauptpunkt;
	position: relative;
	
}
.nummerierte-liste > li > h2::before {
	content: counter(hauptpunkt) ". ";
	
}
.nummerierte-liste ol {
	counter-reset: unterpunkt;
	list-style: none;
}
.nummerierte-liste ol > li {
	counter-increment: unterpunkt;
}
.nummerierte-liste ol > li > h3::before {
	content: counter(hauptpunkt) "." counter(unterpunkt) " ";
}


		.leereliste {
			list-style: none;
		}
.space {
	min-height: 100px;
}
/*  ////////////////// Comissions ////////////////////////////////*/

.commissionmain {
    display: flex;
    padding: 4% 1%;

}
.commissionslider1{} /*java*/
.commflex {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.commflex p {
    display: inline-block;
    font-size: 3.5rem;
    font-family: fingerpaint;
    color: var(--blau3);
    margin: 0;
}
.commflex h2{
    display: inline-block;
    font-family: fingerpaint;
    color: var(--blau3);
    font-size: 4rem;
    margin: 0;
}
.commflex h3{
    display: inline-block;
    font-family: fingerpaint;
    color: var(--blau3);
    font-size: 2.5rem;
    margin: 0;
}
.commextras {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.commextras div {
    width: 30%;
}
.commextras h3 {
    display: inline-block;
    font-family: fingerpaint;
    color: var(--blau3);
    font-size: 2rem;
    margin: 0;
}
.fingerh2 {
    display: inline-block;
    font-family: fingerpaint;
    color: var(--blau3);
    font-size: 4rem;
    margin: 0;
}
.commemotes {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    width: 100%;


}
.commemotes > * {
    flex: 1;
}
.commemotes img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
#base {
    font-family: raleaway;
    color: black;
    font-size: 1rem;
    width: 70%;
}
/* ////////////////  Portfolio /////////////////////////////////////*/
.portbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--blau1);
    width: 70%;
    margin: 0 auto;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    align-items: center;
    gap: 25px;
    padding: 30px;
}
.portbox div img {
    width: 100%;
 transform: scaleY(1.01)translateY(2px);
    border-radius: 8px;
    border: 1px solid var(--bg);

}
.portbox div {
    border: 10px double var(--bg);
    border-radius: 10px;
}
.portCont {
    position: fixed;
    top: 2%;
    bottom: 2%;
    left: 2%;
    right: 2%;
    background-color: var(--blau2);
    border-radius: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.portCont img {
    height: 100%;
    width: auto;
    border-radius: 15px;
}
/* //////////////////// Termin /////////////////////////////////////*/
.terminbox {
    background-color: var(--blau1);
    border-radius: 15px;
    width: 70%;
    margin: 20px auto;
}
.terminflex {
    display: flex;
    justify-content: center;

    padding: 10px;
}
.terminflex div {
    flex: 1;
    margin: 10px;
}
.terminflex div img {
    width: 100%;
    border-radius: 10px;
}
.terminbox h2 {
    font-family: fingerpaint;
    color: var(--bg);
    font-size: 2.2rem;
    text-shadow: -2px -2px 0 var(--blau2), 2px -2px 0 var(--blau2),  -2px  2px 0 var(--blau2),  2px  2px 0 var(--blau2);
    text-align: center;
    margin: 0;
    padding: 15px;

}
.terminflex div p {
    font-family: raleaway;
    font-size: 1.2rem;
    color: var(--blau3);
    margin-top: 0;
}
/* ///////////////// FAQ ///////////////////////////////////////////*/
.faqbox {
    width: 90%;
    margin: 10px auto;
    background-color: var(--blau1);
    border-radius: 15px;
    padding: 10px;


}
.faqbox h2 {
    font-family: fingerpaint;
    color: var(--bg);
    font-size: 1.8rem;
    text-shadow: -2px -2px 0 var(--blau2),    2px -2px 0 var(--blau2),    -2px  2px 0 var(--blau2),    2px  2px 0 var(--blau2);
    text-align: center;
    margin: 0;
    padding: 15px;

}
.faqbox p {
    font-family: raleaway;
    font-size: 1.2rem;
    color: var(--blau3);
    margin-top: 0;
}

/* /////////////////// Login ///////////////////////////////////////*/
.loginCont {
    background: var(--blau1);
    width: 60%;
    margin: auto;
    border-radius: 15px;
}

.loginGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1rem;
}
.loginGrid p {
    font-size: 2rem;
    font-family: fingerpaint;
    margin: 0 20%;

}
.loginGrid input {
    font-size: 1.5rem;
    border-radius: 5px;
    background: var(--bg);
    border: none;
    margin: 0 20% 0 0;
    font-family: raleaway;
    padding: 1px 10px;
}
.formUnten {
    font-family: raleaway;
    text-align: center;
    padding: 10px;
}
.loginButton {
    margin: 2% 40%;
    font-size: 1.8rem;
    font-family: fingerpaint;
    background: var(--blau2);
    border: none;
    border-radius: 10px;
    color: var(--bg);
    padding: 10px 35px;
}
.loginButton:hover {
    background: var(--blau3);
}
/*  ////////////////// Registrieren ////////////////////////////////*/
.regform {
    background: var(--bg1);
    width: 800px;
    margin: 30px auto;
    border-radius: 20px;
    padding: 20px;
    background-color: var(--blau1);
    box-shadow: 10px 10px 20px var(--get),
    -10px 10px 20px var(--get),
    10px -10px 20px var(--get),
    -10px -10px 20px var(--get);
    padding: 30px;

}
.regform h1 {
    margin-top: 0;
    text-shadow: -5px -5px 0 var(--bg), 5px -5px 0 var(--bg), -5px 5px 0 var(--bg), 5px 5px 0 var(--bg);
}

.regform label {
    font-family: fingerpaint;
    font-size: 2rem;
    margin: 15px 10% 0;

    color: var(--blau3);

}
.regform p {
    font-family: raleaway;
    color: var(--blau3);
    margin: 0 10%;
}
.regform input {
    width: 80%;
    border-radius: 10px;
    font-size: 1.1rem;
    height: 2rem;
    padding: 5px;
    margin: 0 10% 10px;
    background-color: var(--bg);
    font-family: raleaway;
}
.regform button {
    color: var(--bg);
    background: var(--blau2);
    font-family: fingerpaint;
    padding: 10px;
    border-radius: 5px;
}
.regform button:hover {
    background: var(--blau3);
}
.flexbut {
    display: flex;
    justify-content: space-between;
    margin: 0 20%;
}
.regform .regfail {
    font-size: 0.8rem;
    color: var(--rot);
}
.pw-check .ok {
    color: var(--blau3);
}
.pw-check p {
    display: flex;
    color: var(--rot);
}

/*  ////////////////// FLEX Buttons ////////////////////////////////*/
		
.flexbuttons {
	display: flex;
	position: relative;
	margin: 10px 10%;
	
}
.flexbuttons button {
	transition: transform 0.3s ease; 
  	transform-origin: center center; 
}
.flexbuttons img {
	width: 90%;
	margin: 2%;
	
}
.flexbuttons h2 {
	position:absolute;
	top: 0;
	transform: translate(90px, 45px);
	font-family: fingerpaint;
	color: var(--bg);
	font-size: 1.7rem;
}

.flexbuttons button:hover {
	 transform: scale(1.2) rotate(-7deg);
	
}

.flex95 {
	display: flex;
	gap: 2%;
	
}
.flex95 div:first-child {
/*	width: 5%;*/
	padding: 2%;
}
.flex95 div:last-child {
	width: 95%;
}
/*
.formgrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 150px auto 50px;
	grid-template-areas:
		"name . . ."
		"mail . . ."
		"mess mess mess mess"
		"capi capt capt capt"
		"chek . . ."
}

#gridname {grid-area:name;}
#gridmail {grid-area:mail;}
#gridnachricht {grid-area:mess;}
button {grid-area:butt;}
#gridcaptcha {grid-area:capt;}
#griddaten  {grid-area:chek;}
#gridcaptchainput {grid-area:capi;}
*/

.formborder {
	align-content: center;
	max-width: 600px;
	margin: 35px auto 0;
	padding: 6px;
    background: linear-gradient(90deg,rgba(8, 61, 102, 1) 0%, rgba(7, 110, 50, 1) 100%);
	border-radius: 30px;
	
}
.formgrid {

	padding: 25px;
	background: var(--blau1);	
	border-radius: 27px;
/*	border: 5px solid var(--blau3);*/
	
}
.formgrid div {
	padding-bottom: 15px;
}
.formgrid div label,
#gridcaptcha	{
	display: block;
	text-align: center;
	color: var(--blau2);
	font-size: 2rem;
	font-family: fingerpaint;
	justify-content: center;
}
.formgrid input{
	display: block;
	width: 100%;
	background: var(--bg);
	border: none;
	border-radius: 10px;
	margin: 10px 0 25px 0;
	padding: 10px 0 10px 10px;
	font-family: raleaway;
	font-size: 1.3rem;
	
}
.formgrid textarea {
	display: block;
	width: 100%;
	background: var(--bg);
	border: none;
	border-radius: 10px;
	margin: 10px 0 25px 0;
	padding: 10px 0 10px 10px;
	min-height: 14rem;
	font-family: raleaway;
	font-size: 1.3rem;
}
.formgrid img {
	max-width: 80%;
}
.formgrid input[type="checkbox"]{
	display:block;
	transform: scale(1.8);   /* vergrößert um 80 % */
  	margin: 10px 0;
	padding-right: 50px;/* etwas Abstand, weil sie sonst zu nah am Text sitzt */
  	accent-color: var(--blau2); /* moderne Methode, um die Farbe zu ändern */
}
.formgrid button {
	width: 80%;
	background: var(--blau3);
	border-radius: 20px;
	color: var(--bg);
	font-family: fingerpaint;
	font-size: 2rem;
	display: block;
	margin: auto;
}
/* /////////////// SLIPPERY SLIDER/////////////////////////////*/

/* Portfolio */
.portfolio .sy-controls {
  display: block;
}
.portfolio .sy-pager {
  margin: 1.5em 0;
}
.portfolio .external-captions {
  background-color: #fff;
  padding: 1em;
}
.sy-pager li.sy-active a {
	background-color: var(--blau1)!important;
}
.mainSlider {
    height: 500px;
    width: auto !important;
    display: block;
    margin: 0 auto !important;
}


/*	////////////////////Mein Slider /////////////////////////////////*/
.arrow {
    width: 70px;
    height: 70px;
    margin: auto 0;

}
.arrow:hover {
    cursor: pointer;
}
.sliderpic {
    width: 300px;
    height: 425px;
    border-radius: 10px;
    border: 5px solid var(--blau3);
}
.bullet {
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: var(--blau1);
    margin: 3px;
}
.bullethov {
    background-color: var(--blau3);
}
.bulletbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bullet2 {
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: var(--blau1);
    margin: 3px;
}
.bullethov2 {
    background-color: var(--blau3);
}
.bulletbox2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bullet3 {
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: var(--blau1);
    margin: 3px;
}
.bullethov3 {
    background-color: var(--blau3);
}
.bulletbox3 {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*  ///////////////////  SHOP   ////////////////////////////////*/
#shopCategories {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-wrap: wrap;
    padding: 0 10%;
    background-color: var(--blau3);
    color: white;
}
#shopCategories p {
    padding: 15px 2%;
    margin: 0;

}
#shopCategories p:hover {
    background-color: var(--blau2);
    transform: scale(1.2);
    border-radius: 15px;
    cursor: pointer;
}
#shop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 80%;
    margin: auto;

}
.shopContainer {
    background-color: var(--blau1);
    padding: 25px;
    margin: 5px;
    border-radius: 30px;

}
.productName {
    color: var(--blau3);
    font-family: fingerpaint;
    font-size: 2rem;
    text-align: center;
    margin: 5px;
    text-shadow: -5px -5px 0 var(--bg), 5px -5px 0 var(--bg), -5px 5px 0 var(--bg), 5px 5px 0 var(--bg);
}
.katContainer {
    display: flex;
    flex-wrap: wrap;
    curser: pointer;
}
.shopKat {
    margin: 3px;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--blau2);
    color: var(--blau1);
    min-width: 30%;
    font-size: 0.7rem;
    font-family: fingerpaint;
}
.productImgCont {
    position: relative;
    margin: 10px 0;
}
.productImg {
    width: 100%;
    border-radius: 20px;
    border: 8px double var(--bg);
    transform: translateX(-8px);
}
.productKurz {
    font-family: fingerpaint;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--blau3);
    position: absolute;
    top: 10px;
    left: -22px;
    transform: rotate(-30deg);
    padding: 5px 20px;
    text-shadow: -3px -3px 0 var(--bg), 3px -3px 0 var(--bg), -3px 3px 0 var(--bg), 3px 3px 0 var(--bg);


}
.productBottomContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shopButton {
    background-color: var(--blau3);
    color: var(--bg);
    font-family: fingerpaint;
    font-size: 1rem;
    border-radius: 5px;
    padding: 10px;
    min-width: 30%;
    text-align: center;
}
.shopButton:hover {
    cursor: pointer;
    transform: scale(1.1);

}
.preis {
    font-family: fingerpaint;
    font-size: 1.8rem;
    color: var(--rot);
    transform: rotate(-15deg);
    text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
}
/*  ///////////////////Warenkorb ///////////////////////////////*/
.korbCont {
    background-color: var(--blau1);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 1fr 5fr 2fr;
    width: 80vw;
    padding: 25px;
    margin: 5px auto;
}
.korbBilder {
    width: 100%;
    border-radius: 10px;
    border: 8px double var(--bg);
}
.korbName {
    font-family: fingerpaint;
    text-align: left;
    margin: 0 30px;
    color: var(--blau3);
    font-size: 2.2rem;
    text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
}
.korbType {
    font-family: fingerpaint;
    color: var(--bg);
    text-align: left;
    transform: translate(70px, -10px);
    margin: 0;
    text-shadow: -1px -1px 0 var(--blau3), 1px -1px 0 var(--blau3), -1px 1px 0 var(--blau3), 1px 1px 0 var(--blau3);
}
.korbKurz {
    margin: 10px 20px 0 30px;
    font-family: raleaway;
    font-size: 1.2rem;
    color: var(--blau3);
}
.korbCont2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.korbPreis {
    font-family: fingerpaint;
    font-size: 1.8rem;
    color: var(--blau3);
    text-align: right;
    margin: 0 15px 0 0;
}
.korbCont3 {
    display: flex;
    justify-content: center;
    background: var(--bg);
    border-radius: 10px;
    padding: 10px;
    margin: 0 15px;
    border: 1px solid var(--blau3);
}
.korbButton {
    background-color: var(--blau3);
    border-radius: 10px;
    fill: var(--blau1);
    width: 45px;
    height: 45px;
    margin: 0 5px;
}
.korbButton:hover {
    background-color: var(--blau2);
    transform: scale(1.2);
    curser: pointer;
}
.korbAnzahl {
    font-family: raleaway;
    font-size: 1rem;
    color: var(--blau3);
    text-align: center;
    margin: 0;
}
.korbAnzahlXPreis {
    color: var(--rot);
    font-family: fingerpaint;
    font-size: 2.5rem;
    text-align: right;
    margin: 0 15px 0 0;
    text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
}
.korbBestellen {
    background-color: var(--blau2);
    border-radius: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 80vw;
    padding: 25px;
    margin: 5px auto;

}
.korbBestellenText {
    font-family: fingerpaint;
    color: var(--blau3);
    background-color: var(--bg);
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 50px;
    padding: 5px;
    curser: pointer;

}
.korbBestellenText:hover {
    background-color: var(--blau1);
    transform: scale(1.2);
}
.korbnotExist {
    font-family: fingerpaint;
    font-size: 1.8rem;
    color: var(--blau3);

}
.korbnotExist a {
    text-decoration: none;
}

/*  /////////////////// Bestellen ///////////////////////////// */
.bestellCont {
    width: 70%;
    margin: 0 auto;
    background-color: var(--blau1);
    border-radius: 15px;
}
.bestellPruef {
    color: var(--blau3);
    font-family: fingerpaint;
    font-size: 1.8rem;
    text-align: center;
    text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
}
.bestellBlockGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}
.bestellBlock {
 background-color: var(--blau3);
    border-radius: 10px;
    margin: 2%;
}
.bestellGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 3% 10px;
}
.bestellh2 {
    font-family: fingerpaint;
    font-size: 1.5rem;
    color: var(--bg);
    text-align: center;
    text-shadow: -2px -2px 0 var(--blau2), 2px -2px 0 var(--blau2), -2px 2px 0 var(--blau2), 2px 2px 0 var(--blau2);
}
.bestellBox {
    font-family: raleaway;
    font-size: 1rem;
    margin: 0;
    color: var(--bg);
    padding: 0 5px;
}
.bestellProdGrid {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    padding: 0 0 10px;
}
.priceFinal {
    font-family: fingerpaint;
    font-size: 1.2rem;
    margin: 10px 5px;
    padding: 0 3%;
    text-align: right;
    font-weight: bold;
    color: var(--rot);
    text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
}
.bestellZahlGrid {
    display: grid;
    grid-template-columns: 1fr 7fr 12fr ;
    justify-content: center;
    align-items: center;
}
.zahlCheck {

}
.zahlBild {
    width: 100%;
    background-color: var(--bg);
    padding: 5px;
    border-radius: 5px;
}
.zahlText {
    font-family: raleaway;
    color: var(--bg);
    margin-left: 12px;
    font-size: 1rem;
}
.kostenPflicht {
    font-family: fingerpaint;
    font-size: 2rem;
    color: var(--bg);
    background-color: var(--blau2);
    text-align: center;
    margin: 25px auto;
    width: 35%;
    padding: 10px;
    border-radius: 10px;
    text-shadow: -2px -2px 0 var(--blau1), 2px -2px 0 var(--blau1), -2px 2px 0 var(--blau1), 2px 2px 0 var(--blau1);
}
.kostenPflicht:hover {
    background-color: var(--blau3);
    transform: scale(1.2);
}
.kostenPflicht p {
    margin: 0;
}
.kreditbox {
    font-family: raleaway;
    font-size: 1rem;
    margin: 0 15% 20px 15%;
    padding: 15px;
    color: var(--blau3);
}

/*	////////////////////FOOTER /////////////////////////////////*/
		footer {
/*			display: flex;*/
			background: var(--blau2);
			justify-content: space-between;
			padding: 20px 40%;
			text-align: center;
			margin-top: 20px;
			
		}
		footer a {
			color: var(--bg);
			text-decoration: none;
			display: block;
			padding: 7px;
		}
		footer a:hover {
			text-decoration: underline;
		}
		
/*	////////////////////DISPLAY FIXED //////////////////////////*/
		
		#back_top{
			position: fixed; 
			bottom: 100px;
			right: 20px;
			background: var(--blau1);
			
			height: 70px;
			width: 70px;
			border-radius: 35px;
			align-items: center;
			text-align: center;
			display: none;
			transition: 0.5s
		}
		#back_top img {
			width: 90%;
		}
		#back_top.visible {
			opacity: 0;
			display:block;
		}