/* CSS Document */



/* CSS reset --------------------------------- */

        
 
        
 @font-face {
            font-family:'Gotham-Bold';
            src:url('fonts/Gotham-Bold.otf');  
        }
 @font-face {
            font-family:'Gotham-Medium';
            src:url('fonts/Gotham-Medium.otf');  
        }
 @font-face {
            font-family:'Gotham-Book';
            src:url('fonts/Gotham-Book.otf');  
        }
 @font-face {
            font-family:'Gotham-Light';
            src:url('fonts/Gotham-Light.otf');  
        }

        

 *{
            /* box-sizing: damit padding und border nicht dazugerechnet werden*/
            box-sizing:border-box;
            margin:0;
            padding:0;
        }
/* Grundelemente --------------------------------- */

:root {
    --boleblau:#001A70;
}



html{/* Basis Grundgrösse aller Schriften*/
    background-image:url("bilder/background/bild_2.jpg");
	background-size: cover;
	background-attachment: fixed;
    font-family: 'Gotham-Medium', sans-serif;
    font-size:16px; /* Standard 16px */
        }
        
html,body {
            scroll-behavior:smooth;
        }


header {
    padding: 2rem;
    align-items: center;
}

header img {
    width: 400px;
}


body {
    color: rgba(0,26,112,1.00);
    font-size:1rem;
	max-width: 1200px;
	margin:0 auto;
	line-height: normal;
}

footer {
    margin: 2rem 0rem -3rem 0rem;
    padding: 1rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    background-color: rgba(255,255,255,0.4);
    color: var(--boleweiss);
    z-index: inherit;
    width: 100%;
}


h1{
	font-size:2rem;
	text-align: center;
    margin:2rem 0rem;
	color: rgba(0,26,112,1.00);
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.4rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}

.zentriert {
    margin: 1rem;
    display: flex;
    justify-content: center;
    
}

        
#position_obenrechts {
            border:3px solid rgba(0,26,112,1.00);
            position: fixed;
            top:0rem;
            right:0rem;
            z-index:666;
        }


background {
	background-attachment: fixed;
}


video {
    margin: 0rem 0rem 3rem 0rem ;
    border-radius: 2rem;
    overflow: hidden;
}
iframe {
    margin: 0rem 0rem 3rem 0rem ;
    border-radius: 2rem;
    overlfow:hidden;
    width: 100%;
}



/* Navigation --------------------------------- */
        
        nav {
            background-color: rgba(255,255,255,0.69);
			margin:2rem 2rem;
            border-radius: 1rem;
            position:fixed;
            z-index: 999;
        }
        
        nav ul {
            display:list-item;
            
            text-align: center;
            list-style-type: none;
            justify-content: center;
            border-radius: 2px solid white;
            z-index: auto;
        }
        
        nav li {
			padding:1rem;
        }


		nav a:link {
            text-decoration: none;
            margin: 0.5rem;
}


/* Menü --------------------------------- */
        #hamburger {
            height: 10rem;
            width: 10rem;
            
            position: fixed;
            top:2rem;
            right: 2rem;
            
            z-index: 100;
        }


      .nav_rein {
            transform: translateX(0%)
        }



/* links definieren --------------------------------- */

		a:link {
     		color:rgba(0,26,112,1.00);
	 		font-size:16px;
			z-index:50;
        }
        
        a:visited {
            color:rgba(0,26,112,1.00);
			z-index:50;
        }
        
        a:hover {
            color:rgba(0,26,112,1.00);
			z-index:50;
        }
        
        a:active {
            color:rgba(0,26,112,1.00);
			z-index:50;
        }


/* Farben --------------------------------- */

.boleblau{
	color:#001A70;
}

.weiss{
	color:white;
}

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            height:80vh;
            width:100%;
            display:grid;
            grid-template-areas:
                "grid_element_1 grid_element_1 grid_element_2 grid_element_6 grid_element_11"
				"grid_element_1 grid_element_1 grid_element_2 grid_element_6 grid_element_4"
				"grid_element_1 grid_element_1 grid_element_12 grid_element_3 grid_element_4"
				"grid_element_8 grid_element_10 grid_element_9 grid_element_3 grid_element_5"
				"grid_element_8 grid_element_10 grid_element_9 grid_element_7 grid_element_5"
            ;
            grid-auto-rows: 20%;
            grid-auto-columns: 20%;
			overflow:hidden;
        }

.grid_element_1{
				grid-area:grid_element_1;
                border-radius: 2rem;
				text-align: center;
				position:relative;
				border:5px solid white;

				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_2{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_2;
				text-align: center;
				position:relative;

				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_3{
				border:5px solid white;
				border-radius: 2rem;
                grid-area:grid_element_3;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_4{
				border:5px solid white;
				border-radius: 2rem;
                grid-area:grid_element_4;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_5{
				border:5px solid white;
				border-radius: 2rem;
                grid-area:grid_element_5;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_6{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_6;
				text-align:contain;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_7{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_7;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_8{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_8;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_9{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_9;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_10{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_10;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_11{
                border-radius: 2rem;
				border:5px solid white;
				grid-area:grid_element_11;
				text-align: center;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}
.grid_element_12{
                border-radius: 2rem;
				background-size:contain; 
				border:5px solid white;
				grid-area:grid_element_12;
				position:relative;
				/* voll zentriert 3-er päckli */
				display: flex;
				align-items: center;
				justify-content: center;
				overflow:hidden;
				width:100%;
			}

.grid_element_1 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_2 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_3 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_4 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_5 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_6 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_7 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_8 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_9 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_10 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_11 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }
.grid_element_12 img {
            width:100%;
            object-fit:cover;
            height:100%;
            transition:all ease-in-out 0.5s;
        }

.bildlegende {
            background:rgba(255,255,255,0.90);
            backdrop-filter:blur(15px);
            
            color:#001A70;
            line-height:normal;
            text-align:center;
			opacity: 0.9;
            
            position:absolute;
            bottom:-10rem;
            
            width:100%;
            transition:all ease-in-out 0.5s;
			z-index:300;
        }
        
        /* rollover über container und steuer der bildlegende*/
.grid_element_1:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_2:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_1:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_2:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_3:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_4:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_5:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_6:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_7:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_8:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_9:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_10:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_11:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }
.grid_element_12:hover .bildlegende{
            bottom:1rem;
            transition:all ease-in-out 0.3s;
        }

   /* aufgabe rollover effekt bei bilder grösser und transparenter */
        
.grid_element_1:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_2:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_3:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_4:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_5:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_6:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_7:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_8:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_9:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_10:hover img {
			opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_11:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }
.grid_element_12:hover img {
            opacity: 0.9;
            transform:scale(1.1);
            transition:all ease-in-out 0.3s;
        }


.info {
    background-color: rgba(255,255,255,0.6);
    padding: 1rem;
    border-radius: 2rem;
    margin: 0.5rem;
}

.info_text {
    font-family: 'Gotham-Book', sans-serif;
}

.info img {
    width: 100%;
    align-items: center;
}


.info_wichtig {
    background-color:rgba(0,26,112,1.00);
    color: white;
    padding: 1rem;
    border-radius: 2rem;
    margin: 0.5rem;
    z-index: 70;
}

.sectionbox_container{
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    width: 100%;
    margin: 0rem 0rem 3rem 0rem ;
}


.box {
    display: flex;
}



.kontakt {
	background:rgba(255,255,255,0.6);
    border-top-left-radius: 1rem;
	position:absolute;
    position: fixed;
	right: 0rem;
	bottom: 0rem;
    padding: 1.5rem;
}

        article {
            height: 0 auto;
            color: var(--boleweiss);
            max-width:1200px;
            margin:0 auto;
            display: flex;
            overflow: hidden;
            border-radius: 2rem;
            
            
        }
        
        article .article_01{
            width: 50%;
            padding: 1rem;
            display: block;
            align-items: center;
            text-align:end;
        }

        article .article_02{
            width: 50%;
            padding:1rem;
            display:block;
            align-items: center;
        }



.karte {
    border-radius: 2rem;
	padding-top:2rem;
	width: 100%;
}

.unterline{
	text-decoration:underline;
    padding-bottom: 0.5rem;
}


@media screen and (max-width:1300px){
 body {
	max-width: 900px;
}

h1{
	font-size:1.5rem;
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.2rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:1.2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            height:80vh;
            width:100%;
            display:grid;
            grid-template-areas:
                "grid_element_1 grid_element_1 grid_element_3 grid_element_4"
                "grid_element_1 grid_element_1 grid_element_3 grid_element_4"
                "grid_element_2 grid_element_5 grid_element_6 grid_element_9"
                "grid_element_2 grid_element_5 grid_element_6 grid_element_9"
                "grid_element_8 grid_element_7 grid_element_10 grid_element_11"
                "grid_element_8 grid_element_7 grid_element_10 grid_element_11"
            ;
            grid-auto-rows: 16.66666%;
            grid-auto-columns: 25%;
			overflow:hidden;
        }


   
}

@media screen and (max-width:1000px){
     body {
	max-width: 700px;
}

    header img {
    width: 300px;
}
    
h1{
	font-size:1.5rem;
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.2rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:1.2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}
    
 

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            height:80vh;
            width:100%;
            display:grid;
            grid-template-areas:
                "grid_element_1 grid_element_1 grid_element_3 grid_element_4"
                "grid_element_1 grid_element_1 grid_element_3 grid_element_4"
                "grid_element_2 grid_element_5 grid_element_6 grid_element_9"
                "grid_element_2 grid_element_5 grid_element_6 grid_element_9"
                "grid_element_8 grid_element_7 grid_element_10 grid_element_11"
                "grid_element_8 grid_element_7 grid_element_10 grid_element_11"
            ;
            grid-auto-rows: 16.66666%;
            grid-auto-columns: 25%;
			overflow:hidden;
        }
    
.sectionbox_container{
    display: contents;
    flex-direction:row;
    column-gap: normal;
    width: 100%;
    margin: 0rem 0rem 3rem 0rem ;
}
    
.box {
    flex-direction: column;
}
   

}

@media screen and (max-width:800px){

    body {
	max-width: 500px;
}

    
header img {
    width: 250px;
}    
    
h1{
	font-size:1.5rem;
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.2rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:1.2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}

iframe {
    margin: 0rem 0rem 3rem 0rem ;
    border-radius: 2rem;
    overlfow:hidden;
    width: 100%;
    height: 30vh;
}
 

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            height:100vh;
            width:100%;
            display:grid;
            grid-template-areas:
                "grid_element_1 grid_element_2"
                "grid_element_3 grid_element_4"
                "grid_element_5 grid_element_6"
                "grid_element_7 grid_element_8"
                "grid_element_9 grid_element_10"
                "grid_element_11 grid_element_12"
            ;
            grid-auto-rows: 16.666666%;
            grid-auto-columns: 50%;
			overflow:hidden;
        }
    
.bildlegende h3 {
        font-size: 1rem;
    }
    
.bildlegende h4 {
        font-size: 0.7rem;
    }
.bildlegende h5 {
        font-size: 0.7rem;
    }
    
.bildlegende p {
        font-size: 0.6rem;
    }
    
.sectionbox_container{
    display: contents;
    flex-direction:row;
    column-gap: normal;
    width: 100%;
    margin: 0rem 0rem 3rem 0rem ;
}
    
.box {
    flex-direction: column;
}
   

}


@media screen and (max-width:500px){

    body {
	max-width: 350px;
}

    
header img {
    width: 250px;
}    
    
h1{
	font-size:1.5rem;
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.2rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:1.2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}

iframe {
    margin: 0rem 0rem 3rem 0rem ;
    border-radius: 2rem;
    overlfow:hidden;
    width: 100%;
    height: 30vh;
}

    footer p {
        font-size: 0.7rem;
    }    
    
    footer a {
        font-size: 0.7rem;
    }

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            width:100%;
            display:grid;
            grid-template-areas:
               "grid_element_1 grid_element_2"
                "grid_element_3 grid_element_4"
                "grid_element_5 grid_element_6"
                "grid_element_7 grid_element_8"
                "grid_element_9 grid_element_10"
                "grid_element_11 grid_element_12"
            ;
            grid-auto-rows: 16.666%;
            grid-auto-columns: 50%;
			overflow:hidden;
        }
    
.bildlegende h3 {
        font-size: 1rem;
    }
    
.bildlegende h4 {
        font-size: 0.7rem;
    }
.bildlegende h5 {
        font-size: 0.7rem;
    }
    
.bildlegende p {
        font-size: 0.6rem;
    }
    
.sectionbox_container{
    display: contents;
    flex-direction:row;
    column-gap: normal;
    width: 100%;
    margin: 0rem 0rem 3rem 0rem ;
}
    
.box {
    flex-direction: column;
}


}




@media screen and (max-width:300px){

    body {
	max-width: 200px;
}

    
header img {
    width: 100px;
}    
    
h1{
	font-size:1.5rem;
}

h2{
    margin:3rem 0rem 2rem 0rem;
	color: rgba(0,26,112,1.00);
	font-size:2rem;
}

h3{
	color: rgba(0,26,112,1.00);
	font-size:1.2rem;
	text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

h4{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h5{
	color: rgba(0,26,112,1.00);
	font-size:1rem;
	text-align: center;
}

h6{
	margin-top:0.3rem;
	font-size:1.2rem;
	text-align: center;
}

p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: normal;
}

iframe {
    margin: 0rem 0rem 3rem 0rem ;
    border-radius: 2rem;
    overlfow:hidden;
    width: 100%;
    height: 30vh;
}

    footer p {
        font-size: 0.7rem;
    }    
    
    footer a {
        font-size: 0.7rem;
    }

/* Grid Design --------------------------------- */
.grid_container{
			margin-top: 1rem;
			margin-bottom:1rem;
            border-radius: 2rem;
            width:100%;
            display:grid;
            grid-template-areas:
               "grid_element_1 grid_element_2"
                "grid_element_3 grid_element_4"
                "grid_element_5 grid_element_6"
                "grid_element_7 grid_element_8"
                "grid_element_9 grid_element_10"
                "grid_element_11 grid_element_12"
            ;
            grid-auto-rows: 16.666%;
            grid-auto-columns: 50%;
			overflow:hidden;
        }
    
.bildlegende h3 {
        font-size: 1rem;
    }
    
.bildlegende h4 {
        font-size: 0.7rem;
    }
.bildlegende h5 {
        font-size: 0.7rem;
    }
    
.bildlegende p {
        font-size: 0.6rem;
    }
    
.sectionbox_container{
    display: contents;
    flex-direction:row;
    column-gap: normal;
    width: 100%;
    margin: 0rem 0rem 3rem 0rem ;
}
    
.box {
    flex-direction: column;
}


}