body{
	margin : 0px;
	padding : 0px;
	margin-top:10px;
	text-align : center;
	background-color : #C0FFC0;
	color : #270284;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
input{
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);	
	width:96%;
	margin-bottom:5px;
}

textarea{
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);	
	width:96%;
	min-height:200px;
}
select{
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);	
	width:96%;
	margin-bottom:5px;
}
.container {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    grid-template-areas: "links mitte rechts";
    min-height: 100vh;
  }
  img{
		max-width:100%;
		height: auto;
  }

  .links   
  { 
	grid-area: links;
	background: #e0e0e0;
	padding: 4px;
	margin:5px;
	border: 1px solid black;
	overflow: visible;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-align: center;
	font-weight: normal;
	background-color: transparent;
	color: #270284;
}
  .mitte 
  { 
	grid-area: mitte; 
	background-color: transparent;
	padding: 3px;
	margin:3px;
	border: 0px solid yellow;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	
  }
  .rechts  
  { 
	grid-area: rechts;  
	background: transparent;
	padding: 4px;
	margin:5px;
	text-align: center;
	color: #270284;
	border: 1px solid black;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}

h1, h2, h3, h4, h5, h6, p {
	margin : 0;
	padding : 0;
}

h1 {
color : #270284;
	padding : 0 0 8px 0;
	font-family: "Amiko", sans-serif;
	font-size: clamp(14px, 2.8vw, 28px);
	text-align : center;
}

h2 {
	padding : 0 0 8px 0;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 24px);
	color : #270284;
}

h3 {
	padding : 8px 0 8px 0;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 20px);
	color : #270284;
}

h4 {
	padding : 0 0 4px 0;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-align : left;
	color : Silver;
}

p {
	text-align: left;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	margin:3px;
	width:98%;
	padding: 2px;
}
p.anz{
	text-align : left;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
ul{
	width: 98%;
	margin:3px;
	padding:2px;
	
}
li{
	width: 96%;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-align: left;
	margin-left:1%;
}
a {
	color : #4E09FF;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
a.links {
	color : #4E09FF;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-decoration: none;
	width: 80%;
	background-color: red;
	display: block;
	border-radius: 30px;
}
a.news{
	color : #4E09FF;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
a.gb{
	color : #4E09FF;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	color : #8D8EFF;
}
a.bilder {
	color : #4E09FF;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
.uebersicht{
	background-color:#bfb292;
	width: 96%;
	display: block;
	margin: 3px;
	padding: 3px;
	text-decoration: none;
	border-radius: 30px;
}
.spalte-links{
	float: left;
	width:25%;
	text-align: left;
	font-family: "Amiko", sans-serif;
	 font-size: clamp(10px, 2.8vw, 14px);
}
.spalte-rechts{
	float: left;
	width:25%;
	font-family: "Amiko", sans-serif;
	 font-size: clamp(11px, 2.8vw, 14 px);
}
.spalte-mitte{
	float: left;
	width:45%;
	font-family: "Amiko", sans-serif;
	 font-size: clamp(1 px, 2.8vw, 16 px);
}
.clear{
	clear: both;
	
}
.dreiviertel{
	float: left;
	width: 60%;
	margin-bottom:7px;
	margin-right: 4px;
}
.einviertel{
	float: left;
	width: 38%;
	padding:3px;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-align:left;
}


.overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}
.overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}
.overlay:target {
  display: flex;
}
.close {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 2em;
  color: white;
  text-decoration: none;
}
.tabelle-links{
	width: 45%;
	text-align :right;
	float: left;
	margin-bottom:5px;
}
.tabelle-rechts{
	width: 45%;
	text-align :left;
	float: left;
	padding-left:5px;
	margin-bottom:5px;
}
.liste{
	background-color:#EAC772;
	display:block;
	width:100%;
	margin-bottom: 5px;
}


 @media (max-width: 800px) {
    .container {
      grid-template-columns: 1fr 1fr; /* zwei gleich breite Spalten */
      grid-template-areas:
        "mitte mitte"  /* mittlere Spalte über beide */
        "links rechts";    /* linke & rechte nebeneinander */
    }

    .mitte {
      width: 96%; /* sichert, dass sie beide Spalten füllt */
    }
  }
  
  @media (max-width: 520px) {
	 .dreiviertel{
	float: none;
	width: 100%;
	margin-bottom:7px;
	margin-right: 4px;
}
.einviertel{
	float: none;
	width: 100%;
	padding:3px;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
	text-align:left;
	margin-bottom:7px;
}
	  
	  
	  
	  
  }