/* CSS-Datei von www.horstbu.de für INDEX */
html {background-color:#000088; background-image:linear-gradient(white,#000088);}

details{border:2px solid blue; background-color:yellow;
border-top-left-radius: 20px; border-top-right-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;}
summary {cursor:pointer;font-size:1.2rem;}

ul {text-align:left}
li {list-style-type:circle;}
h1 {color:purple;}
h2 {color:#245968;}

/* Texte */
p {color:navy; text-align:left;}
.markant {text-align:left; color:navy; font-size:1.8rem;}
.white {text-align:left; color:white !important; font-size:1.8rem;}
.wichtig {text-align:left; color:#123456; font-size:1.4rem;}
.runtext {text-align:left; color:#245968;} 

/* Box mit sehr großem Content-Bereich für 1550er Photos */
div.boulevard
{max-width: 1680px; padding: 24px; border: 10px double purple; 
background-color: #fffeee; margin: 6px; 
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px}

/* Box mit großem Content-Bereich für 1200er Photos */
div.avenida
{max-width: 1280px; padding: 20px; border: 10px double purple;
background-color: #fffeee; margin: 6px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px}

/* Box mit großem Content-Bereich für 1024er Photos */
div.avenue
{max-width: 1200px; padding: 20px; border: 10px double purple; 
background-color: #fffeee; margin: 6px; 
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px}

/* Box mit nur einem Content-Bereich, für "Piazza"-Seiten */
div.piazza 
{max-width: 860px; padding: 20px; border: 8px solid purple; 
background-color: #ffdead; margin: 20px; box-shadow: 6px 6px 6px grey;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px}

/* Box mit nur einem Content-Bereich, für Feuilleton-Seiten */
div.feuilleton 
{max-width: 600px; padding: 20px; border: 10px double green; 
background-color: #fffeee; margin: 20px; box-shadow: 6px 6px 6px grey;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px}

/* Grid-Boxen, Ganzbox mit 5 Spalten (column) und 3 Reihen (row) */
div.ganzbox 
{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; 
grid-template-rows:170px 170px 170px; gap: 10px; height:510px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teilone 
{grid-column-start:1; grid-column-end:3; grid-row-start:1; grid-row-end:4;
background-color:#fefeba; border: 5px solid purple; padding: 12px; 
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teiltwo 
{grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:4;
background-color:#fedaba; border: 5px solid purple; padding: 12px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teiltre 
{grid-column-start:4; grid-column-end:5; grid-row-start:1; grid-row-end:2;
background-color:#eefccd; border: 5px solid purple; 
padding-top: 24px; padding-right: 12px; padding-bottom: 12px;padding-left: 12px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teilfor 
{grid-column-start:5; grid-column-end:6; grid-row-start:1; grid-row-end:2;
background-color:#febaca; border: 5px solid purple;
padding-top: 24px; padding-right: 12px; padding-bottom: 12px;padding-left: 12px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teilfif 
{grid-column-start:4; grid-column-end:6; grid-row-start:2; grid-row-end:3;
background-color:#eeffff; border: 5px solid purple; 
padding-top: 28px; padding-right: 12px; padding-bottom: 22px;padding-left: 12px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

div.teilsix 
{grid-column-start:4; grid-column-end:6; grid-row-start:3; grid-row-end:4;
background-color:yellow; border: 5px solid purple; 
padding-top: 42px; padding-right: 12px; padding-bottom: 22px;padding-left: 12px;
border-top-left-radius: 30px; border-top-right-radius: 30px;
border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;}

/* -----  Navigation a la Stephan--------------------------------- */
nav
{
   margin: 0.2rem 0.5rem 0.2rem 0.5rem;
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   width: auto;
   height: auto;
   box-shadow: 0.1rem 0.1rem 0.3rem white inset, 0.2rem 0.2rem 0.2rem grey;
   border: 2px solid navy; border-radius: 20px;
}

/* Navigation Listenkopf */
nav > ul
{
/*   border: 3px solid grey; border-radius: 20 px; */
   margin: 0; 
   padding: 0;
   background: #fffeee;
   /* flex-container */
   display: flex;
   flex-flow: row wrap;  
   align-items: space-between;
   justify-content: center;
}
/* Navigation Listenelemente */
nav > ul > li
{
   flex: 0 0 10.0em;
   display: block;
   list-style: none;
   height: 3.0rem;
   width: 10.0rem;   
   border: 3px solid grey;
   margin: 0.2rem 0.2rem 0.2rem 0.2rem;
   padding: 0.2rem 0.2rem 0.2rem 0.2rem;
      border-radius: 1rem;
   background-color: yellow;
}
/* Gestalt Anker */
nav a
{
   display: block; /* makes the whole link area clickable */
   text-decoration: none;
   color: blue;
   background-color: white;
   line-height: 3.0rem;
   height: 3.0rem;
   width: 10.0rem;
   font-size: 1.5em;
   text-align: center;
   vertical-align:middle;
}

/* Farbe Anker mit der Tabulatortaste gewählt oder mit Mauszeiger berührt */
nav a:focus,
nav a:hover
{
  color: white;
  background-color: red;
}