/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 08.04.2023, 08:45:37
    Author     : andreas
*/

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
}

html {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: -10;
}

body{
  margin: 0;
  padding: 0; 
  overflow-y: scroll;
  background-color: #808080;
  height: 100%;
  scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding: 0;
  position: relative;  

}

section{
    scroll-snap-align: start;
    scroll-margin: 0;
    height: 100%;
    width: 100%;
    float:left;
      
   } 
     
#banner{
width: calc(120px + (480 - 120) / (1920 - 360) * (100vw - 360px));
height: auto;
min-width: 80px;
float:left; 
margin-left:10%

}

.bonbon {
	width: 16em;
	height: 2em;
	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
        color: #FFFFFF;    
	background-color: #8A2908;
	box-shadow: rgba(0, 0, 0, 0.7) 0px .25em 1em, inset rgba(0, 0, 0, 0.15) 0px -.5em 1em;
	border: none;
        border-radius: 1em;
	margin: 1em;
        
}
.bonbon:hover,.bonbon:focus {
	background-color: #BA5837;
        cursor: pointer;
}

.sidebar{
    height: 40vh;
    min-height: 200px;
    width: 3.2vw;
    min-width: 35px;
    position: fixed;
    top: 20vh;
    left: 0;
    background-color: #8A2908;
    overflow: hidden;
    transition: width 0.2s;
    box-shadow: 0px 20px 30px rgba(0,0,0,0.5);
    
}
a:link {
  color: white;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: white;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: white;
  text-decoration: none;
}

/* selected link */
a:active {
  color: white;
  text-decoration: none;
}



.sidebar:hover{
    width: 12vw;
    min-width: 125px;
    overflow: visible;
}

nav{
    height: 32vh;
    min-height: 150px;
    margin-top: 2.5vh;
}
ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
li a{
    width: 10vw;
    min-width: 115px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-decoration: none;
   
    font-family: 'Poppins',sans-serif;
    color: #cacaca;
}
li a:hover{
    background-image: linear-gradient(
        to right,
        #2a88e6 7px,
        rgba(255,255,255,0.1) 7px
    );
    color: #ffffff;
}

li p{
    width: 75px;
    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
    text-align: left;
    letter-spacing: 0.3px;
}
svg {
  stroke:white;
  stroke-width:10px;
  fill:none;fill-rule:nonzero;
  width: 1.2vw;
  min-width: 20px;
  height: 1.5vw;
  min-height: 25px;
  }

p{
    font-size: calc(12px + (16 - 11) * ((100vw - 320px) / (1600 - 320)));
    font-family:arial;
 
    
}

p.klein{
    font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1600 - 320)));
    font-family:arial;

 }
 
 pb{
    font-size: calc(12px + (16 - 11) * ((100vw - 320px) / (1600 - 320)));
    font-family:arial;
    font-weight: normal;
    /*color: #8A2908;*/
    color: #000000;
    text-shadow: 4px 4px 5px #FFFFFF;
    text-align: justify;
   
}
 
 

h1{
    font-size: calc(28px + (48 - 16) * ((100vw - 320px) / (1600 - 320)));
    font-family: arial;

}
h2{
    font-size: calc(24px + (36 - 14) * ((100vw - 320px) / (1600 - 320)));
    font-family: arial;

}

h3{
    font-size: calc(18px + (30 - 12) * ((100vw - 320px) / (1600 - 320)));
    font-family: arial;

}  

h4{
    font-size: calc(16px + (26 - 12) * ((100vw - 320px) / (1600 - 320)));
    font-family: arial;

}  

@media screen and (orientation: portrait){
    
body{
 
        background-image: url("Johannesengel_dunkel_504x896.jpg");
        height: 100%;
        background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
    
}
   
    
    
 #part_1{
        background-image: url("Johannesengel_dunkel_504x896.jpg");
        height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
        }
        
 #part_2{
       background-image: url("Johannesengel_504x896.jpg");
 	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
        }
                      
 #part_3{
	background: #ffffff;
        height: 100%;
 
}
#part_4{
        background-image: url("Abt_Strobel_504x896.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_5{
        background-image: url("Hochaltar_504x896.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_6{
        background-image: url("Vitus_504x896.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_7{
        background-image: url("Buch_504x896.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_8{
        background-image: url("Buch_504x896hell.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_9{
        background-image: url("Innen_504x896.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_10{
        background-image: url("Aussen_504x896.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_11{
        background-image: url("Ildefons_504x896.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_12{
        background-image: url("001V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_13{
        background-image: url("009V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_14{
        background-image: url("010V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_15{
        background-image: url("011V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_16{
        background-image: url("012V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_17{
        background-image: url("013V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_18{
        background-image: url("014V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_19{
        background-image: url("015V.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}

}


@media screen and (orientation: landscape){
    
 body{
 
        background-image: url("Johannesengel_1920x1080.jpg");
        height: 100%;
        background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
    
}

#part_1{
        background-image: url("Johannesengel_dunkel_1920x1080.jpg");
        height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_2{
        /*background-image: url("Johannesengel_dunkel_1920x1080.jpg");*/
        background-image: none;
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_3{
	background: #ffffff;
        height: 100%;

}
#part_4{
        background-image: url("Abt_Strobel_1920x1080.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_5{
        background-image: url("Hochaltar_1920x1080.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_6{
        background-image: url("Vitus_1920x1080.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_7{
        background-image: url("Buch_1920x1080.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_8{
        background-image: url("Buch_1920x1080hell.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_9{
        background-image: url("Innen_1920x1080.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_10{
        background-image: url("Aussen_1920x1080.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_11{
        background-image: url("Ildefons_1920x1080.jpg");
	height: 100%;
	background-attachment: scroll;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_12{
        background-image: url("001Q.jpg");
	height: 100%;
  	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_13{
        background-image: url("009Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_14{
        background-image: url("010Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_15{
        background-image: url("011Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */

}
#part_16{
        background-image: url("012Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_17{
        background-image: url("013Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_18{
        background-image: url("014Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_19{
        background-image: url("015Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
}

@media screen and (orientation: landscape) and (min-height:770px){

#part_1{
        background-image: url("Johannesengel_dunkel_1920x1080.jpg");
	height: 100%;
 	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_2{
        background-image: url("Johannesengel_1920x1080.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_3{
	background: #ffffff;
        height: 100%;

}
#part_4{
        background-image: url("Abt_Strobel_1920x1080.jpg");
	height: 100%;
 	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_5{
        background-image: url("Hochaltar_1920x1080.jpg");
	height: 100%;
 	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_6{
        background-image: url("Vitus_1920x1080.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_7{
        background-image: url("Buch_1920x1080.jpg");
	height: 100%;
 	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_8{
        background-image: url("Buch_1920x1080hell.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_9{
        background-image: url("Innen_1920x1080.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_10{
        background-image: url("Aussen_1920x1080.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_11{
        background-image: url("Ildefons_1920x1080.jpg");
	height: 100%;
	background-attachment: fixed;
	background-position: center; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_12{
        background-image: url("001Q.jpg");
	height: 100%;
  	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_13{
        background-image: url("009Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_14{
        background-image: url("010Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_15{
        background-image: url("011Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
#part_16{
        background-image: url("012Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_17{
        background-image: url("013Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_18{
        background-image: url("014Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
#part_19{
        background-image: url("015Q.jpg");
	height: 100%;
 	background-attachment: scroll;
	background-position: left; /* zentriert das Hintergrundbild */
	background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
	background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
 
}
}