@media screen and (min-width: 768px) /*Media-Query---------------*/
{

nav ul
{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}

header
{
box-shadow: 0px 5px 19px brown;
border-radius: 2.8rem;
padding: 2rem;
border: 0.23rem solid brown;
}

nav
{
display: inline-block;
background-color: rgb(255, 255, 255, 0.5);
border-radius: 1rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
//box-shadow: 5px 6px 25px rgb(5, 5, 7, 0.9);
box-shadow: 5px 6px 25px rgb(113, 125, 89, 0.5);
}

.nav_überMich
{
display: inline-block;
background-color: white;
border-radius: 1rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
//box-shadow: 5px 6px 25px rgb(5, 5, 7, 0.9);
box-shadow: 5px 6px 25px pink;
}

.aktuell
{
color: white;
background-color: rgb(0, 0, 255, 0.4);
text-decoration: underline;
}

nav a
{
display: block;
color: rgb(0, 0, 255, 0.4);
text-decoration: none;
padding: 1rem;
font-size: 1.2rem;
font-family: courier new;
font-weight: bold;
}

/*Ende Navigation == Anfang Hero-Hintergrund-Section========================*/

#hero-section
{
border-radius: 2.5rem;
box-shadow: 0px 5px 19px pink;
position: relative;
height: 87vh;
width: 100%;
overflow: hidden;
display: flex;
}

#hero-section_überMich
{
border-radius: 2.5rem;
box-shadow: 0px 5px 19px pink;
border: 1.3rem solid pink;
position: relative;
height: 82vh;
width: 96%;
overflow: hidden;
display: flex;
}

.video-background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.video-background_überMich
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}


.video-background_überMich video
{
margin-right: 5rem;
min-width: 50%;
min-height: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}

.video-background video
{
margin-right: 5rem;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
}

/*Ende Hero-Hintergrund-Section == Anfang Hero-Text========================*/

.overlay
{
position: absolute;
top: 0;
left: 0;
width: 43%;
height: 100%;
background: rgb(135, 25, 27,0.7);
box-shadow: 6px 0px 20px rgb(135, 25, 27,0.9);
z-index: 2;
}

.content /*Container für Navigationsleiste*/
{
display: inline-block;
position: relative;
z-index: 3;
top: 0;
margin-top: 2.1rem;
margin-left: 0.7rem;
}

.content2 /* großer Hero-Text*/
{
z-index: 3;
width: 66%;
border-radius: 1rem;
border: 1rem;
border-color: ;
padding:0.7rem;
margin-left: 2rem;
margin-top: 10rem;
font-size: 4.5rem;
font-family: zapfino;
color: white;
line-height:6.8rem;
}

.content2Galerie
{
color: rgb(133, 25, 27, 0.9);
font-size: 3.4rem;
margin-left: 3rem;
}

.content3 /*Namensschriftzug JoshMizusawa*/
{
display: inline-block;
position: relative;
z-index: 3;
padding-top: 0.4rem;
padding-bottom: 0;
padding-left: 1rem;
padding-right: 1.5rem;
top: 0;
width: 58%;
margin-right: 5rem;
margin-bottom: 37rem;
color: white;
margin-top: 1rem;
margin-left: 0rem;

font-size: 1.4rem;
}

.content2_überMich
{
z-index: 6;
width: 66%;
border-radius: 1rem;
border: 1rem;
border-color: ;
padding:0.7rem;
margin-left: 2rem;
margin-top: 10rem;
font-size: 3.8rem;
font-family: zapfino;
color: white;
line-height:6.4rem;
}

/*Ende Hero-Text == Anfang der Hero-Sction-Bilder auf galerie.html==========*/

.HeroBild1
{
border-radius: 13rem;
display: inline-block;
position: absolute;
z-index: 5;
width: 30%;
height: auto;
right: 0;
margin-right: 1rem;
bottom: 0;
margin-bottom: 5rem;
}

.HeroBild2
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 6;
width: 20%;
height: auto;
right: 0;
margin-right: 8rem;
bottom: 0;
margin-bottom: 2rem;
}

.HeroBild3
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 8;
width: 20%;
height: auto;
right: 0;
margin-right: 6rem;
bottom: 0;
margin-bottom: 16rem;
}

.HeroBild4
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 10;
width: 20%;
height: auto;
margin-right: 10rem;
right: 0;
margin-right: 17rem;
bottom: 0;
margin-bottom: 8rem;
}

/*Ende der Hero-Bilder auf galerie.html == Anfang Grids im Content-bereich*/

.hero_Josh
{
border-radius: 2rem;
display: inline-block;
position: absolute;
z-index: 10;
width: 30%;
height: auto;
margin-right: 10rem;
right: 0;
margin-right: 7rem;
bottom: 0;
margin-bottom: 8rem;
}

#Indexbild1
{
max-width: 80%;
height: auto;
padding: 2rem;
padding-left: 2rem;
border-radius: 5rem;
margin-bottom: 2rem;
box-shadow: 0px 0px 20px steelblue;
}

#IndexBild2
{
width: 80%;
height: auto;
padding: 2rem;
padding-right: 2rem;
border-radius: 5rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen /*Regal*/
{
margin-top: 2rem;
border: 0.2rem solid steelblue;
border-radius: 2rem;
margin-left: 5rem;
margin-right: 5rem;
padding: 1rem;
box-shadow: 0px 0px 20px steelblue;
}

.box /*Fach für Text*/
{
//background-color: #78CAFF44;
border-radius: 5rem;
}

.box1 /*Fach für Bilder*/
{
background-color: #78CAFF21;
border-radius: 2rem;
padding: 2rem;
color: steelblue;
font-size: 1.2rem;
font-family: Playfair Display;
}

.boxen > .inside /*Grid für Info, 2 nebeneinander*/
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}

html, body {
    scroll-behavior: smooth;
}

.box1_überMich
{
background-color: #78CAFF31;
border-radius: 2rem;
padding: 2rem;
color: steelblue;
font-size: 1.2rem;
font-weight: bold;
font-family: courier new;
}

#Startbild_überMich
{
max-width: 80%;
height: auto;
padding: 1.4rem;
//border-radius: 5rem;
margin-bottom: 1.5rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen_überMich
{
margin-top: 2rem;
border-radius: 2rem;
margin-left: 5rem;
margin-right: 5rem;
padding: 1rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen_überMich_ohneRand
{
margin-top: 2rem;
border-radius: 2rem;
margin-left: 5rem;
margin-right: 5rem;
padding: 1rem;
}

.boxen_überMich > .inside
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}

}/*Ende Media-Query*/

/*Beginn der Grid-Regeln für galerie.html*/

.Spalte1
{
border-radius: 1rem;
padding: 1.5rem;
text-align: center;
}


.Spalte2
{
border-radius: 1rem;
padding: 1.5rem;
text-align: center;
}

.Regal > .inside
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}

#BildKlein_klein
{
width: 50%;
height: auto;
border-radius: 1rem;
padding: 0.4rem;
box-shadow: 0px 0px 20px rgb(134, 30, 30, 0.8);
}

#BildKlein_groß
{
margin-top: 2rem;
width: 80%;
height: auto;
border-radius: 1rem;
padding: 0.4rem;
box-shadow: 0px 0px 20px rgb(134, 30, 30, 0.8);
}

@media screen and (min-width: 768px) /*Media-Query---------------*/
{
#BildGroß
{
width: auto;
height: auto;
border-radius: 1rem;
padding: 0.2rem;
box-shadow: 0px 0px 20px rgb(134, 30, 30, 0.8);
margin-left: 0.1rem
}}

.Einleitungstext_galerie
{
background-color: rgb(134, 36, 35, 0.8);
margin-top: 3rem;
margin-bottom: 1.4rem;
padding: 1.6rem;
}

@media screen and (min-width: 768px) /*Media-Query---------------*/
{
.Willkommen_in_Galerie /*Schriftzug*/
{
background-color: white;
border-radius: 2rem;
color: rgb(133, 25, 27, 0.9);
font-family: zapfino;
font-weight: bold;
padding: 1.2rem;
}

.MehrEindrücke
{
margin-left: 7rem;
margin-top: 4rem;
color: white;
font-family: zapfino;
font-size: 1.5rem;
}}

.Field_für_Galerie
{
margin-top: 0;
border: 0.4rem solid rgb(134, 36, 35, 0.6);
}

/*Social-Media-Icons für Footer*/

.SocialMedia-Icon
{
left: 0;
display: inline-block;
margin-top: 1.2rem;
margin-left: 1.3rem;
padding-right: 2.7rem;
width: 50%;
height: auto;
}

.intro
{
width: 100%;
height: 100%;
}


@media screen and (min-width: 768px)
{
.Icons
{
width: 10%;
height: auto;
border-radius: 5rem;
}

.formular
{
width: 80%;
height: auto;
margin-left: 5rem;
margin-top: 3rem;
}
}

@media screen and (max-width: 767px) /* für Handy, kleiner Viewport#######*/
{

.formular
{
width: 60%;
height: auto;
margin-left: 1.5rem;
margin-top: 3rem;
}

#hero-section
{
border-radius: 2.5rem;
box-shadow: 0px 5px 19px pink;
position: relative;
height: 87vh;
width: 100%;
overflow: hidden;
display: flex;
}

#hero-section_überMich
{
border-radius: 2.5rem;
box-shadow: 0px 5px 19px pink;
border: 0.5rem solid pink;
position: relative;
height: 82vh;
width: 96%;
overflow: hidden;
display: flex;
}

nav ul
{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}

header
{
box-shadow: 0px 5px 19px pink;
border-radius: 2.8rem;
padding: 2rem;
border: 0.23rem solid pink;
}

nav
{
display: inline-block;
background-color: white;
border-radius: 1rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
//box-shadow: 5px 6px 25px rgb(5, 5, 7, 0.9);
box-shadow: 5px 6px 25px rgb(113, 125, 89, 0.5);
}

.nav_überMich
{
display: inline-block;
background-color: white;
border-radius: 1rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
//box-shadow: 5px 6px 25px rgb(5, 5, 7, 0.9);
box-shadow: 5px 6px 25px pink;
}

.aktuell
{
color: white;
background-color: steelblue;
text-decoration: underline;
}

nav a
{
display: block;
color: rgb(133, 25, 27, 0.9);
text-decoration: none;
padding: 0.4rem;
font-size: 1rem;
font-family: courier new;
}

.content nav/*Container für Navigationsleiste*/
{
display: inline-block;
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 60%;
height: auto;
margin-top: 2.1rem;
margin-left: 0.7rem;
}


.content2 /* großer Hero-Text*/
{
z-index: 3;
width: 30%;
padding:0.7rem;
margin-left: 1.5rem;
margin-top: 7rem;
font-size: 1.4rem;
font-family: zapfino;
color: rgb(133, 25, 27, 0.9);
line-height: 1.6rem;
}

.content3 /*Namensschriftzug JoshMizusawa*/
{
display: inline-block;
position: relative;
z-index: 3;
padding-top: 0.4rem;
padding-bottom: 0;
padding-left: 1rem;
padding-right: 1.5rem;

bottom: 0;
left: 0;

width: 40%;
margin-left: 0.2rem;
margin-bottom: 0.5rem;
color: white;
font-size: 0.7rem;
}

.HeroBild1
{
border-radius: 15rem;
display: inline-block;
position: absolute;
z-index: 5;
width: 35%;
height: auto;
left: 0;
margin-left: 2rem;
top: 0;
margin-top: 13rem;
}

.HeroBild2
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 6;
width: 40%;
height: auto;
left: 0;
margin-left: 7rem;
top: 0;
margin-top: 16rem;
}

.HeroBild3
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 8;
width: 30%;
height: auto;
left: 0;
margin-left: 2rem;
top: 0;
margin-top: 21rem;
}

.HeroBild4
{
border-radius: 1.5rem;
display: inline-block;
position: absolute;
z-index: 10;
width: 30%;
height: auto;
left: 0;
margin-left: 6rem;
top: 0;
margin-top: 23rem;
}

.Icons
{
width: 20%;
height: auto;
border-radius: 5rem;
}

#BildGroß
{
width: 60%;
height: auto;
border-radius: 1rem;
padding: 0.4rem;
box-shadow: 0px 0px 20px rgb(134, 30, 30, 0.8);
}

.Willkommen_in_Galerie /*Schriftzug*/
{
background-color: white;
border-radius: 2rem;
color: rgb(133, 25, 27, 0.9);
font-family: zapfino;
font-weight: bold;
padding: 0.7rem;
}

.MehrEindrücke
{
color: white;
font-family: zapfino;
font-size: 1.2rem;
}

#Indexbild1
{
width: 70%;
height: auto;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0px 0px 20px steelblue;
}

#IndexBild2
{
width: 70%;
height: auto;
padding: .5rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen /*Regal*/
{
margin-top: 1.5rem;
border: 0.2rem solid steelblue;
border-radius: 2rem;
margin-left: 0.4rem;
margin-right: 0.4rem;
padding: 1rem;
box-shadow: 0px 0px 20px steelblue;
}

.box /*Fach für Bilder*/
{
//background-color: #78CAFF44;
text-align: center;
}

.box1 /*Fach für Text*/
{
background-color: #78CAFF21;
padding: 2rem;
color: steelblue;
font-size: 1.2rem;
font-family: courier new;
}

.boxen > .inside /*Grid für Info, 2 nebeneinander*/
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}

.box1_überMich
{
background-color: #78CAFF31;
border-radius: 2rem;
padding: 2rem;
color: steelblue;
font-size: 1.2rem;
font-family: courier new;
}

#Startbild_überMich
{
max-width: 80%;
height: auto;
padding: 1.4rem;
//border-radius: 5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen_überMich
{
margin-top: 2rem;
border-radius: 2rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
padding: 1rem;
box-shadow: 0px 0px 20px steelblue;
}

.boxen_überMich_ohneRand
{
margin-top: 2rem;
border-radius: 2rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
padding: 1rem;
}

.boxen_überMich > .inside
{
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.4rem;
margin-bottom: 1.2rem;
}

.video-background
{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
z-index: 1;
}

.video-background_überMich
{
position: absolute;
left: -6rem;
width: 100%;
height: 100%;
z-index: 1;
}

.video-background_überMich video
{
width: 100%;
height: 100%;
object-fit: cover;
}

.video-background video
{
width: 50%;
height: 100%;
object-fit: cover;
}

}