body{
	margin : 0px;
	padding : 0px;
	text-align : center;
	background-color : #C0FFC0;
	color : #270284;
	 font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
.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: 4px;
	margin:5px;
	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;
		ffont-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);
}
p.anz{
	text-align : left;
	font-family: "Amiko", sans-serif;
	font-size: clamp(12px, 2.8vw, 16px);
}
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;
	
}




.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;
}






 @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: 100%; /* sichert, dass sie beide Spalten füllt */
    }
  }