/* CSS-Datei für www.ziggie.de */
html {background-color:orange; background-image:linear-gradient(white,orange);}
table {background-color:#ffdead;}

/* Texte */
h1 {color:purple;}
p {color:navy;text-align:left; font-size:0.9rem;}
.wichtig {color:#123456;text-align:left;}
.redebeiz {color:navy; font-size:1.8rem; text-align:left;}

/* Box mit nur einem Content-Bereich 800er comics */
div.comic
{max-width: 820px; padding: 20px; border: 8px solid 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 800er Photos */
div.piazza
{max-width: 860px; padding: 20px; border: 8px solid 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 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}

/* Grid-Boxen, Ganzbox mit 3 Spalten (column) und 6 Reihen (row) */
.photobox 
{
display:grid;
grid-template-columns: repeat(1, 1fr); 
grid-template-rows: repeat(18, 1fr);
gap: 10px; 
border-radius: 2 rem;
border: 0.5 rem purple;
width: 100%;
}

/* grid nebeneinander */
@media (min-width: 20rem)
{
   .photobox
   {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows:    repeat(9, 1fr);
   }
}

@media (min-width: 35rem)
{
   .photobox
   {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows:    repeat(6, 1fr);
   }
}

@media (min-width: 50rem)
{
   .photobox
   {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows:    repeat(3, 1fr);

      max-width: 90rem; /* nicht zu breit werden */
   }
}

.photopage
/*{grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;*/
{
grid-column: span 1;
grid-row: span 1;
background-color:#fefeba;
border: 0.3rem solid purple;
margin: 0.05rem;
padding: 1.0rem 0.5rem 0.5rem 0.5rem ; 
border-radius: 1rem;
}

.photopage span
{
	font-size: 1.2rem;
}
.photopage img
{
	border: 0.15rem solid blue;
	width: 90%;
}