/*Rekreation*/

a {
  color:black;
  text-decoration: none;}
a:hover {
  text-decoration: underline;}
ul{
  list-style: none;}
ul.liste {
  list-style: circle;}
nav ol {
  font-style:italic;
  font-size: 0.9em;}
nav ul ul {
  font-style:italic;
  font-size: 0.9em;}
/*ul.buchnummer {
  list-style: upper-alpha;}
ul.buchnummer li:before {
  content: ")";}*/
a.llink {
  color: #22C;
  text-decoration: underline;}

main {
  display: block;
  grid-column: 2 /-2;
  grid-row:    4 /-2;
  min-height: 40em;
  background-image: linear-gradient(180deg, rgb(245,250,255), rgb(240,255,250), rgb(245,250,255));
  padding: 2em 1em 3em 1em;
  z-index:2;}
section {
  display: block;
  margin-bottom: 8.0em;}
.prosa {
  text-align: justify;
  text-align-last: left;
  line-height: 1.2em;
  color:#000;}
.lyrik {
  text-align: center;
  color:#000;}
.lyrik p {
  margin-top: 1.9em;}
#random {
  display: block;
  grid-column:-2 /-1;
  grid-row:    3 /-2;
  min-width: 15em;
  padding: 1em 0;
  background-color: rgb(210,255,210, 0.7);
  text-align: left;
  z-index:2;}
#random p {
  text-align: left;
  margin: 1em;}
/*#autor {
  position: fixed;
  right:1em;
  bottom: 0.5em;
  text-align: right;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: #F010A0;
  color: #F010A0;
  font-size: 1.5vh;
  z-index:3;}
#autor:hover {
  text-decoration: none;
  background-color: rgb(0,0,0,0.9);}*/
body >* {box-shadow: 1px 2px 1px 1px #337;}
body {
  display: grid;
  grid-template-columns: 3fr 7.5fr 7fr 4fr;
  grid-template-rows: 2.9em 5em 10em 1fr 2fr auto;
  grid-row-gap: 0.4em; 
  grid-column-gap: 0.4em;
  background-color: rgb(180,250,200);
  font-size: 1.2em;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0.5em;
  max-width: 130em;
  min-width: 70em;
  z-index:2;}
#firstleft {
  grid-column: 2 / 3;
  grid-row:    3 / 4;
  text-align: center;
  font-size: 1.2em;
  background-image: linear-gradient(90deg, transparent, #CED 50%, transparent);/*DED*/
  z-index:2;
  box-shadow: none;}
#firstright {
  grid-column: 3 /-2;
  grid-row:    3 / 4;
  text-align: center;
  font-size: 1.1em;
  font-family: sans-serif;
  background-image: linear-gradient(90deg, transparent, #CED 45%, #CED 55%, transparent);/*DED*/
  z-index:2;
  box-shadow: none;}
footer {
  grid-column: 1 /-1;
  grid-row:   -2 /-1;
  padding: 0;
  font-size: 0.7em;
  width: 100%;
  background-image: linear-gradient(150deg, rgb(140, 90, 50, 0.9), rgb(140, 90, 50, 0.8), rgb(140, 90, 50, 0.9), rgb(140, 90, 50, 0.8), rgb(140, 90, 50, 0.9));
  z-index:2;}
footer ul {
  padding-left:0px;}
footer li {
  display: inline;
  width: 8.33%;
  height: 2em;
  float: left;
  text-align: center;
  padding-left: 0px;
  list-style: none;}
#sml1, #sml2 {width: 7%;}
#big {width: 11%;}
h1 {
  font-size: 1.8em;
  color: #303;/*315*/
  text-decoration: underline; }
h2 {
  color:#212;
  text-align: center;}
h3 {
  font-size: 1.4em;
  color: rgb(50, 0, 100);
  text-align: center;}
h4, main article .ueberschrift4 {
  display: block;
  font-size: 1.15em;
  font-weight: bold;
  margin: 0;
  padding: 0.5em 0;
  text-align: center;}
main h4 {
  font-size: 1.3em;}
main h5 {
  font-size: 1.6em;
  color: rgb(230, 220, 215);
  text-decoration: underline;
  text-decoration-style: dashed;
  -webkit-text-decoration-style: dashed;
  text-align: left;
  line-height: 0em;}
main h5::before {
  content: "Bildergalerie ";}
h6, main article .ueberschrift {
  display: block;
  font-size: 1.1em;
  font-family: sans-serif;
  font-weight: normal;
  text-decoration: underline;}
.prosa h6 {
	line-height: 1em;
	margin: 0em;
}
.kopfkomm {
  width: 5em;
  right: 0;
  float: right;
  text-align: right;
  font-style: italic;
  font-size: 0.9em;
  padding-top: 0.6em;}
.helpleft {
  width: 5em;
  border-radius: 50%;
  text-align: center;
  float: left;
  left: 0;
  font-style: italic;
  font-size: 0.9em;
  margin-top: 0.4em;
  padding: 0.2em 0;
  background-image: linear-gradient(90deg, rgb(100,100,100,0.1), #777 50%, rgb(100,100,100,0.1));
  color: #FFF;}
.unterueber {/*
    font-style: italic;
    font-size: 0.9em;*/
    font-family: monospace;
    margin: 0.5em 0 1.5em 0;
}
header {
  background-image: linear-gradient(90deg, #FCFFFF, rgb(210,255,225) 15%, #FCFFFF 25%, #FCFFFF 75%, rgb(210,255,225) 83%, #FCFFFF);
  z-index:2;
  grid-column: 1 /-1;
  grid-row:    2 / 3;
  display: grid;
  grid-template-columns: 5em 1fr 5em;}
#menu {
  z-index:2;
  grid-column: 1 / 2;
  grid-row:    3 /-2;
  display:block;
  min-width: 10em;
  background-color: #F3FFF3;
  opacity: 0.85;
  padding: 1em 0.5em 0em 1em;
  overflow: hidden;
  list-style: none;
  font-family: sans-serif;
}
#menu div > ul > li {
  margin-top: 0.4em;
}
#menu ul ul > li {
  margin-left: -1.5em;
  margin-top: 0.2em;
}
/*#footleft {
  grid-column: 2 / 3;
  grid-row:    1 / 2;
  padding-left: 2em;
  text-align: left;}
#footright {
  grid-column: 4 / 5;
  grid-row:    1 / 2;
  padding-left: 2em;
  text-align: left;}/*
td {width: 9%;}*/
table {
  margin: 1em 0;}
td {
	padding: 0.2em 0.7em;
}
hr{
    position:relative;
    border: none;
    border-top: 2px solid  #111;
    font:20px sans-serif;
    margin: -0.2em 0 2.5em 0;
	text-align: center;
}
hr::after {
    position:relative;
    top:-9px;/*
    left:50%;
    margin-left: -2.18em;/*-56px;*/
    opacity: 0.8;
    content:"༺⁜࿇⁜༻"; 
}
/*hr::before {
    position:absolute;
    left:50%;
    margin-left:-1px;
    top:22px;
    color:#999;  
    content:"|";
  
}*/

#banner:hover, #logo:hover, #ich:hover {
  opacity: 0.8;
}
#hintergrund {
  display:none;
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
}
#hintergrund1 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: 0.85;
  top: 0;
  left: 0;
  z-index:1;
}
#banner_m {
  display:none;
}
#banner {
  grid-column: 2 / -2;
  margin: 0 auto;
  padding: 0;
  height: 5em;
  width: 50em;
  position: center;}
#logo {
  grid-column: 1 / 2;
  margin: 0;
  padding:0;
  height: 100%;
  width: 100%;}
#ich {
  grid-column: -2 / -1;
  margin: 0;
  padding:0;
  height: 100%;
  width: 100%;}
.flexgalerie {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;}
.randimg {
  width: 87%;
  margin-bottom: 2em;
  box-shadow: 1px 2px 3px 4px #336;}
.textbild, .textklein, .textgross {
  width: 48%;
  float: right;
  margin: 0.8em 0.2em 0.8em 1.3em;
  padding: 0;
  right: 0;
  box-shadow: 1px 2px 1px 2px #889;}
.textklein {
  width: 30%;
  clear: both;
  margin: 0em 5em 1em 4em;}
.textgross {
  width: 80%;
  float: none;
  margin: 2em 10%;}
.lyrikbild {
  width: 50%;
  float: left;
  margin: 0em 1.5em 1em 0;
  padding: 0;
  left: 0;
  box-shadow: 1px 2px 2px 3px #334;}
.galerie {
/*  width: 15em;
/*  display:inline-block;*/
  height: 10em;
  margin: 0.9em;
  padding: 0;
  box-shadow: 1px 2px 2px 3px #336;}
.galerielink {
  position: relative;
  top: 0em;
  width: 8em;
  margin: 0.7em;
  box-shadow: 1px 2px 2px 3px #336;}
.galerie:focus, .galerie:active {
  width: 90%;
  max-width: 90%;
  height: auto;
  max-height: 110vh;
  box-shadow: 1px 3px 4px 5px #1A2030;
  margin: 2.0em;}
.galerie:hover {
  box-shadow: 1px 2px 2px 3px #446;}
.galerie:focus:hover, .galerie:active:hover {
  box-shadow: 1px 3px 4px 5px #1A2030;}
/*main .galeriehoch:focus, main .galeriehoch:active {
  height: 80vh;
  width: auto;}
/*.galerie:hover {
  width: 17em;
  margin: 0em;
  transition: all 0.5s;}
*/

input.hackbox {
  display:none;}
/* default-Zustand */
ul.volltext {
  display:none;}
label.mehr_lesen, label.mehr_lesen a {
  font-size: 1.05em;
  color:#000050;}
label.mehr_lesen::before {
  content:"\002795";
  color:#101010;}
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ ul.volltext {
  display:block;
  height: auto;
  padding-left:2em;} 
input.mehr_lesen:checked ~ label.mehr_lesen::before {
  content:"\002796";
  color:#0091D2;}

#drop a {
  text-decoration:none;
  font-family: sans-serif;
  display: block;
  height: 1.3em;
  text-align: center;
  white-space: nowrap;
  padding-left:0;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:0;
  background: rgb(225, 240, 250);
  color: rgb(20, 15, 15);}
#drop a:hover {
  text-decoration: underline;
  background: rgb(210, 245, 245);
  color: black;}
#drop li ul li a {
  background: rgb(230, 235, 250);
  color: rgb(20, 20, 20);}
#drop {
  width: 100%;
  grid-column: 1 /-1;
  grid-row:    1 / 2;
  background: #113/*rgb(145, 135, 100)/*rgb(100, 35, 45)*/;
  z-index: 3;
  list-style: none;
  margin:0 auto;
  padding: 0;}
#drop > li {
  display:inline;
  width:12.5%;
  float: left;
  margin-right: 0 auto;
  padding: 5px 0px;
  background: rgb(190,255,190);
  list-style: none;}
#drop > li > ul, #drop > li > ul > li > ul, #drop > li > ul > li > ul > li > ul {
  display: none;}
#drop li:hover > ul {/*
  grid-column: 1 /-1;
  grid-row:    1 / 2;*/
  display: block;
  width:100%;
  padding:0;
  list-style: none;}
#drop > li > ul > li {
  position: relative;
  padding:0;}
#drop > li > ul > li:hover > ul, #drop > li > ul > li > ul > li:hover > ul {
  display: block;
  width: 100%;
  position: absolute;
  padding:0;
  list-style: none;
  left: 100%;
  top: 0;}
.pfeil {float:right; margin-right:0.5em; color: #999;}
.gegenpfeil {float:left; margin-left:0.5em; color:rgb(2,2,20);}

@media (max-width:70em){
.galerie:focus, .galerie:active {
  width: 90%;
  margin: 1.2em 0;
  height: auto;
}
body {
	font-size: 1.1em;
}
}

@media (max-width:35em){
.galerie {
  width: 90%;
  height: auto;}
.kopfkomm, .helpleft {
  display: none;}
}

@media (max-width:50em){
main > h5 {font-size: 1.4em;}
h1 {font-size: 1.35em;}
#banner {
  display: none;}
#banner_m {
  display: block;
  grid-column: 2 / -2;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  width: 100%;}
/*header {display:none;}*/
header {
  height: 4em;
  grid-row:    1 / 2;
  display: grid;
  grid-template-columns: 4em 1fr 4em;}
#drop {
  grid-row:    2 / 3;}
#drop > li {
  width:25.0%;}
#drop li:hover ul {
  display: none;}
body {
  grid-template-rows: 3.9em auto 7em repeat(4,auto);
  grid-row-gap: 0.3em; 
  grid-column-gap: 0em;
  padding: 0.3em;
  min-width: 21em;
  font-size: 1em;}
main {
  grid-column: 1/-1;
  grid-row:    5/ 6;}
#firstleft {
  grid-row:    3/ 4;
  grid-column: 1/ 3;}
#firstright {
  grid-row:    3/ 4;
  grid-column: 3/-1;
  font-size: 0.7em;}
#menu {
  grid-column: 1/-1;
  grid-row:    4/ 5;}
#menu .nec {display: none;}
#random {
  grid-column: 1/-1;
  grid-row:    -3/-2;
  background-color: rgb(200,200,255, 0.5);}
.randimg {
  width: 18em;
  margin: 1em;
  display: inline-block;}
main .textbild {
  margin: 0 0 0.8em 0.8em;}
main .lyrikbild {
  margin: 0 0.8em 0.8em 0;}
footer {
  grid-row:    -2/-1;
  font-size: 0.5em;}
footer li {
  width: 16.5%;
  margin-bottom:0.7em;
  margin-top:0.7em;}
#sml1 {width: 16.5%;}
#sml2 {width: 15%;}
#big {width: 18.2%;}

input.hackbox {
  display:none;}
/* default-Zustand */
ul.volltext {
  display:block;
  height: auto;
  padding-left:2em;}
label.mehr_lesen {
  color:#000500;}
label.mehr_lesen::before {
  content:"\002796";
  color:#101010;}
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ ul.volltext {
  display:none;} 
input.mehr_lesen:checked ~ label.mehr_lesen::before {
  content:"\002795";
  color:#0091D2;}
}