/* CSS - rebieesart */



/* schriften */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/* CSS variablen */
:root {
    --blau:rgba(0,28,123,1.00);
    --orange:rgba(245,190,0,1.00);
    --rot:rgba(177,4,14,1.00);
    --gruen:rgba(46,132,0,1.00);
    
    --dunkel:rgba(22,22,17,1);
    --hellblau:rgba(62,189,231,1.00);
    --lavendel:rgba(100,149,237,1.00);
    --weiss:rgba(255,245,235,1.00);
}


/* reset */
        *{
        box-sizing:border-box;
        margin:0;
        padding:0;
        }


/* gundlagen */
 
        html{
            font-size:17px;
			max-width: 1420px;
			background: url("bilder/clown/a.jpg");
			height: 105%;
            background-size:cover;
            background-repeat:no-repeat;
			background-position: center;
			background-attachment: fixed;
        }
        
        body{
            font-family: 'Roboto', sans-serif;
            color:var(--dunkel);
            overflow-x:hidden;
            
			
        }
        

        html, body {
            scroll-behavior:smooth;
        }

        img {
            width:100%;
        }



        a {
            text-decoration: none;
            font-weight: bold;
        }
/* spezialbereich farbe */

        #angebot_farbe a {
            color: var(--orange);
        }


/* design */


        #logo_bild {
            width: 40rem;
            top: 25rem;
            left: 15rem;
        }

/* navigation */
        nav {
            position: fixed;
            bottom:1rem;
            right: 1rem;
            display: flex;
            justify-content: flex-end;
            padding-bottom: 1rem;
            text-decoration: bold;
            z-index: 5;
        }


        nav ul {
            list-style-type: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }


        nav li {
            border:1px solid var(--weiss);
            margin: 0.5rem;
/*background: radial-gradient(circle, rgba(255,255,255,1) 10%, rgba(121,9,19,1) 20%);*/
            border-radius: 100%;
            padding: 0.5rem;
            aspect-ratio:1/1;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.6s ease-in-out;
        }

        nav a {
            color:white;
            text-decoration: none;
            
        }
        
        nav li:hover{
            transform: scale(1.2);
            transition: all 0.4s ease-in-out;
        }

li {
    list-style-type: none;
}


header {
    position: relative;
	top:3rem;
	left:5rem;
}


/* section */
section{
    position:relative;
	display:flex;
    padding: 8rem 10rem 4rem 10rem;
	margin: 5rem 10rem;
	justify-content: center;
    align-items: center;
	overflow: hidden;
}

section a {
    filter: grayscale(100);
}


section a:hover{
    filter: grayscale(0);
    transform: scale(1.05);
}

#start {
    background-color: rgba(255,255,255,0.00);
	height:110vh;
	border-color:rgba(255,255,255,0.00);
}



.breite_1 {
    align-items: center;
    justify-content: center;
}

h2{
    position: relative;
    font-size: 4rem;
    justify-content: center;
    align-items: center;
}

h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

section h2 {
    position: absolute;
    top: 8rem;
    left: 3rem;
    writing-mode:vertical-rl;
    text-orientation: upright;
    color: var(--weiss);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100%-6rem);
    
}
    

strong {
    font-family: 'Roboto' , "Gill Sans", "sans-serif";
    background: var(--weiss);
    color: var(--blau);
}



h3{
    font-size: 2rem;
    text-transform: uppercase;
}

article {
    margin: 0 auto;
    display: flex;
}

article > div{
    position: relative;
    border:10px dotted var(--weiss);
    width: 50%;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    margin: 1rem;
}

article img{
    position: absolute;
    height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: right;
}
/* text ergänzungen unter article*/
.text {
    margin: 0 auto;
    display: flex;
    overflow: hidden;
    border-radius: 2rem;
    margin-bottom: 5rem;
}

.text_inhalt {
    width: 50%;
    background-color:var(--weiss);
    border-radius: 3rem;
    padding: 2rem;
    margin: 1rem;
}

.text_2 {
    position: relative;
    display: flex;
    flex-flow: column;
    border-radius: 2rem;
    background-color:var(--weiss);
    overflow: hidden;
} 



.text_angebot_inhalt{
    padding: 2rem 2rem 1rem 2rem;
    position: relative;
    justify-content: center;
    align-items: center;
    object-position: right;
    height: 100%;
    width: 100%;
}

.text_2 img {
    display: flex;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
}

.text h3{
    z-index: 5;
    padding: 1rem;
    color:var(--blau);
}

.text_angebot_inhalt h3{
    z-index: 5;
    padding: 1rem;
    color:var(--orange);
}




/* Formular design*/

.formular {
    margin: 0 auto;
    overflow: hidden;
    display:flex;
    background-color: var(--weiss);
    border-top-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    padding: 3rem;
}


.formular_abstand {
    padding: 1rem;
    margin: 1rem;
}

.formular img {
    border-color: 1px var(--weiss);
    border-top-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
}

.links {
    width: 50%;
    position: relative;
    left: 0 auto;
}

.rechts{
    width: 50%;
    position: relative;
    right: 0 auto;
}


::placeholder {
    font-size: 1rem;
    font-family: 'Roboto','Merriweather', sans-serif;
}


input, select, textarea {
    width: 100%;
	left:0rem;
    height: 2rem;
    margin: 0.5rem 0rem 0.5rem 0rem;
	font-size:1rem;
    border:1px solid var(--gruen);
    border-top-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

textarea {
    height: 200px;
}

input[type=submit]{
	padding:0.5rem 2rem;
    height:2.5rem;
    cursor:pointer;
    transition: 0.5s ease-in-out color;
}
input[type=submit]:hover{
    background:var(--gruen);
    color:var(--weiss);
    transition: 0.3s ease-in-out color;
}


/* weitere Elemente */
cite {
    font-size: 1.4rem;
    font-family: 'Roboto','Merriweather', sans-serif;
    font-style: bold;
}

fieldset {
    border: 2px solid var(--gruen);
    border-radius:0.3rem;
    padding:1rem;
}
legend {
    background: var(--weiss);
    border: 2px solid var(--gruen);
    border-radius: 0.3rem;
    color: var(--gruen);
    padding: 0.3rem 1rem;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-style: bold;
}


.zusatzt {
    display:contents;
    justify-content: center;
    align-items: center;
}


#totop {
	border-radius: 100%;
	aspect-ratio:1/1;
	background-color: var(--rot);
	color: var(--weiss);
	margin: 0.5rem;
	padding:1rem;
	position: fixed;
	bottom: 2rem;
	left: 3rem;
	z-index: 10;
	text-align: center;
	transform: scale(1.05);
}


.bilder_kontakt {
    display: grid;
    width: 100%;

}

.bilder_kontakt img{
    border:2px solid var(--weiss);
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Hintergrund farben & Titeltext farben */
#start_farbe {
	background-color: rgba(255,255,255,0.00);
}

#ueber_mich_farbe {
    background-color:var(--blau);
    border-top-right-radius: 10rem;
    border-bottom-left-radius: 10rem;
    border: 2px solid var(--weiss);
}


#angebot_farbe {
    background-color:var(--orange);
    border-top-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
    border: 2px solid var(--weiss);
}


#bilder_farbe {
    background-color:var(--hellblau);
    border-top-right-radius: 10rem;
    border-bottom-left-radius: 10rem;
    border: 2px solid var(--weiss);
}



#kontakt_farbe {
    background-color:var(--gruen);
    border-top-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
	margin-bottom: 30rem;
    border: 2px solid var(--weiss);
}

#impressum {
	max-width: 0 auto;
	margin: 5rem 5rem;
    overflow: hidden;
    background-color:var(--weiss);
    border-top-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
    padding: 5rem;
}

#datenschutz {
	max-width: 0 auto;
    margin: 5rem 5rem;
    overflow: hidden;
    background-color:var(--weiss);
    border-top-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
    padding: 5rem;
}




/* Klassen Bilder galerie */
.bilder_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;

}

.bilder_container img{
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    object-fit: cover;
    aspect-ratio: 1/1;
}


.fancybox__container, .fancybox__backdrop {
            background:rgba(0,25,50,0.4)
        }
        /* schriftart in caption */
.fancybox__caption{
            font-size:1rem;
            font-weight:bold;
            text-transform:uppercase;
            color:black;
        }


/* rand dotted Klassen & rand Farben */

.mit_rand_dotted {
    
    --randFarbe: transparent;
    border:8px dotted var( --randFarbe );
}
.mit_rand_dotted:hover {
    --randFarbe: var(--weiss);
}

.rand_rot_dotted:hover{
    --randFarbe: var(--rot);
}

.rand_gruen_dotted:hover{
    --randFarbe: var(--gruen);
}

.rand_hellblau_dotted:hover{
    --randFarbe: var(--hellblau);
}

.rand_blau_dotted:hover{
    --randFarbe: var(--blau);
}

.rand_lavendel_dotted:hover{
    --randFarbe: var(--lavendel);
}

.rand_orange_dotted:hover{
    --randFarbe: var(--orange);
}


/* rand double Klassen & rand Farben */
.mit_rand_double {
    --randFarbe: transparent;
    border:8px double var( --randFarbe );
}
.mit_rand_double:hover {
    --randFarbe: var(--weiss);
}

.rand_rot_double:hover{
    --randFarbe: var(--rot);
}

.rand_gruen_double:hover{
    --randFarbe: var(--gruen);
}

.rand_hellblau_double:hover{
    --randFarbe: var(--hellblau);
}

.rand_lavendel_double:hover{
    --randFarbe: var(--lavendel);
}

.rand_weissl_double:hover{
    --randFarbe: var(--weiss);
}




/* farb Klassen */
.gruen{
    background-color: var(--gruen);
}

.blau{
    background-color: var(--blau);
}

.orange{
    background-color: var(--orange);
}

.lavendel{
    background-color: var(--lavendel);
}

.hellblau{
    background-color: var(--hellblau);
}

.rot{
    background-color: var(--rot);
}

.weiss{
    background-color: var(--weiss);
}



.gruen_text{
    color: var(--gruen);
}

.blau_text{
    color: var(--blau);
}

.orange_text{
    color: var(--orange);
}

.lavendel_text{
    color: var(--lavendel);
}

.hellblau_text{
    color: var(--hellblau);
}

.rot_text{
    color: var(--rot);
}

.weiss_text{
    color: var(--weiss);
}

.linksbuendig{
    top:0 auto;
    text-align: left;
}

/* fancybox */
 .fancybox__container, .fancybox__backdrop {
            background:rgba(0,25,50,0.6)
        }

    /* schriftart in caption */
        .fancybox__caption{
            font-family:Helvetica,Verdana, sans-serif;
            font-size:12pt;
            font-weight:bold;
            text-transform:uppercase;
            color:black;
        }





@media screen and (max-width: 1000px){
	
	html{
            font-size:17px;
			max-width: 1000px;
		 }
		
	#logo_bild {
            width: 30rem;
            top: 25rem;
            left: 15rem;
        }
	   
  
	
} /* ende media 1000px*/