.wrapper {max-width: 1200px;
         margin: 0px auto;
	    padding: 0 20px;
		border:0px solid #00ff00;
        }
		
		
		
.wrapperwide {max-width: 100%;
        margin: 0px auto;
	    padding: 0 20px;
		border:0px solid #00ff00;
        }


.content {max-width: 1200px;
            margin: 00px auto;
            padding: 0px;
																border:0px solid #ff00FF;
        }



.grid-container {
  gap: 20px;
  max-width: 1200px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


.grid-container_4 {
  gap: 20px;
  max-width: 1800px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin:0 auto;
}


.tile {font-size: 1.0rem;}
.content-custom .text {font-size: 0.8rem;}

.slider {height: 90vh}



/* Texte in Sliderbildern */
.overline { font-size: 1.2em; }
.headline {font-size: 7em; line-height:100%;}
.underline {font-size: 1.4em;}
.subline {font-size: 1em;}



.goto-button {max-width:400px; height:400px; font-size: 0.9rem;}

h1 {font-size:500%; 	margin-left:0%; margin-bottom:30px;  text-align:center;}
h2 {font-size:500%;}
h3 {font-size:260%;}
h4 {font-size:150%;}
p {font-size:170%; line-height:150%;}
.pexplain {font-size:120%; line-height:150%; }
.todopoint {font-size:120%; line-height:140%;}
.small {font-size: 0.8em;line-height:130%; margin-top:7px;}

.examplehead {font-size:120%; line-height:130%; }
.bigger {font-size:150%;}
.example {font-size:100%; line-height:130%; }


.collapsible,
.collapsible_last {font-size: 140%;}
.innertext {font-size: 120%;}


.img70 {width:70%; margin-left:15%; margin-bottom:15px;}
.img50 {width:50%; margin-left:25%; margin-bottom:15px;}



/* =================================== mid ===================== */

@media (max-width: 1450px) {

.wrapper {max-width: 900px;
         margin: 0px auto;
	    padding: 0 20px;
        }



.content {max-width: 900px;
            margin: 0px auto;
            padding: 0 20px;
        }

.grid-container {
  gap: 20px;
  max-width: 900px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.grid-container_4 {
  gap: 20px;
  max-width: 1400px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  
}


.tile {font-size: 0.7rem;}
.content-custom .text {font-size: 0.7rem;}


.slider {height: 90vh}

/* Texte in Sliderbildern */
.overline { font-size: 0.8em; }
.headline {font-size: 5em;}
.underline {font-size: 1.1em;}
.subline {font-size: 0.9em;}




.goto-button {max-width:400px; height:400px; font-size: 0.8rem;}

h1 {font-size:350%; text-align:center;}
h2 {font-size:300%;}
h3 {font-size:170%;}
h4 {font-size:110%;}
p {font-size:130%; line-height:135%}
.pexplain {font-size:100%; line-height:150%;}
.todopoint {font-size:100%; line-height:140%;}
.small {font-size: 0.8em;}

.examplehead {font-size:100%; line-height:130%; }
.example {font-size:90%; line-height:130%; }

.collapsible,
.collapsible_last {font-size: 120%;}
.innertext {font-size: 100%;}

.img70 {width:70%; margin-left:15%; margin-bottom:15px;}
.img50 {width:50%, margin-left:25%;}

}




/* =================================== small ===================== */

@media (max-width: 768px) {

.wrapper {max-width: 760px;
         margin: 0px auto;
	    padding: 0 20px;
        }



.content {max-width: 760px;
            margin: 00px auto;
            padding: 0 20px;

        }

.grid-container {
  gap: 10px;
  max-width: 760px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.grid-container_4 {
  gap: 10px;
  max-width: 760px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tile {font-size: 0.7rem;}
.content-custom .text {font-size: 0.6rem;}


.goto-button {width:200px; height:200px; font-size: 0.7rem;}

.slider {height: 50vh}

/* Texte in Sliderbildern */
.overline { font-size: 0.8em; }
.headline {font-size: 2.5em;}
.underline {font-size: 0.9em; margin-top:28px;}
.subline {font-size: 0.8em;}

.video-container {height: 70vh;}
#background-video {height: 60vh;}


h1 {font-size:200%; text-align:center;}
h2 {font-size:220%;}
h3 {font-size:170%; text-align:center;}
h4 {font-size:140%;}
p {font-size:90%;}
.pexplain {font-size:90%;}
.todo {font-size:120%; line-height:140%; text-align:left; margin:0 0 0 15px;}
.todopoint {font-size:90%; line-height:140%; text-align:left; margin:0 0 0 30px;}
.small {font-size: 0.7em;}

.examplehead {font-size:90%;}
.example {font-size:80%; }

.collapsible,
.collapsible_last {font-size: 100%;}
.innertext {font-size: 90%;}


.img70 {width:70%; margin-left:15%; margin-bottom:15px;}
.img50 {width:50%, margin-left:25%;}

}