body { width:100%; max-width:1200px; margin:auto; }

.feld1 { grid-area: uebung1; }
.feld2 { grid-area: uebung2; }
.feld3 { grid-area: uebung3; }
.feld4 { grid-area: uebung4; }

.gridseite {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: 
  "uebung1"
  "uebung2"
  "uebung3"
  "uebung4";
  grid-gap: 2px;
  background-color: #ffffff;
  padding: 0px;
  max-width:1200px;
  margin:auto;
}

@media only screen and (min-width: 400px)
{
body { background-color: #ffffff; }

.gridseite
  {
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: 
  "uebung1"
  "uebung2"
  "uebung3"
  "uebung4";
  grid-gap: 2px;
  background-color: #ffffff;
  padding: 0px;
  max-width:800px;
  margin:auto;
  }
}

@media only screen and (min-width: 800px)
{
body { background-color: #ffffff; }

.gridseite {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: 
  "uebung1"
  "uebung2"
  "uebung3"
  "uebung4";

  grid-gap: 2px;
  background-color: #ffffff;
  padding: 0px;
  max-width:1200px;
  margin:auto;
  }
}

.gridfeld {
background-color: #ffffff;
text-align: center;
height: auto;
border:5px solid #ffffff;
}

.rahmen {
border:5px solid #ffffff;
border-radius:5px;
margin:5px;
margin-top:30px;
}

.papier {
border:3px solid #ffffff;
border-radius:5px;
background:#ffffff;
padding:5px;
margin:20px;
}

.infotext
{
font-family:Comic Relief LRS,Comic Sans MS;
color:#000000; 
font-size:18px;
text-align:center;
}

.softlernli
{
font-family: Taylor Sans Bold LRS, Arial;
font-weight:bold; 
text-shadow: 2px 2px 5px #406090; 
color:#000000; 
font-size:48px;
letter-spacing:3px;
text-align:left;
}

.softlernre
{
font-family: Taylor Sans Bold LRS, Arial;
font-weight:bold; 
text-shadow: 2px 2px 3px #406090; 
color:#000000; 
font-size:24px;
letter-spacing:2px;
text-align:right;
}

.wbild
{
width:150px; 
height:150px;
text-align:center; 
margin:5px;
cursor:pointer;
}

.zbild
{
width:100px; 
height:100px;
text-align:center; 
margin:5px;
cursor:pointer;
}

.zwort
{
width:130px; 
height:50px;
font-family: Comic Relief LRS, Comic Sans MS;
font-size:24px; 
color:#000000; 
text-align:center; 
border:2px solid #406090;
border-radius:5px; 
box-shadow:2px 2px #888;
background-color:#ffffff;
letter-spacing:2px;
margin:2px;
}

.diktat
{
width:100%; 
background-color:#406090; 
font-family:Comic Relief LRS,Comic Sans MS; 
font-size:32px; 
color:#ffffff; 
text-align:center; 
border:0px solid #406090; 
height:auto;
}

.swort
{
width:90%; 
background-color:#406090; 
font-family:Comic Relief LRS,Comic Sans MS; 
font-size:40px; 
color:#000000; 
text-align:center; 
border:0px solid #406090; 
height:auto;
letter-spacing:5px;
}