/* ===== header ===== */

header1.banner {
  background: var(--me-color0);
  color: var(--me-color2);
  margin-top: 0.2em;
	padding: .5em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 1em;
  letter-spacing: 0.3em;
}
header1 h1 {font-size:2.2em;}
header1 h2 {font-size:1.5em;}
header1 h3 {font-size:1.2em;}
header1 h4 {font-size:1.0em;}

header2.subtitle {
	background: var(--me-color2);
  color: var(--me-color0);
  margin-top: 0.2em;
	padding: 0.1em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 1em;
  letter-spacing: 0.2em;
}
header2.subtitle a {color:var(--me-color0);}
header2.subtitle a:hover {color:red;}



.fussnote  { 
  text-align:center;
  font-size:0.7em; 
  color: var(--me-color0);
}
  
  div#button-container {margin:1.5em;}
  div#button-container button  {    
      font-size:0.8em;
      letter-spacing: 0.05em;
      padding: 8px 10px;
      width: 75px;
      border: 1px solid var(--me-color3);
      background:  var(--me-color1) linear-gradient( var(--me-color3), var(--me-color2), var(--me-color1));
      border-radius: 4px 4px 4px 4px; 
      text-shadow: 0 -1px 1px #333; 
      
      cursor: pointer;
    }
  div#button-container button img    { height:18px; border:none;  }
  div#button-container button:hover  { background:linear-gradient(rgba(255,0,0,0.4),rgba(255,0,0,0.6),rgba(255,0,0,0.8),red,rgba(255,0,0,0.8)); }
  
  table#singen   { border-collapse: collapse; }
  table#singen caption {
           min-width:25em;
           font-size:2.5em; 
           letter-spacing:0.3em; 
           font-weight:bold;
           color:var(--me-color3); 
           text-shadow: 2px 2px 5px var(--me-color2);
           padding:0.8em 0;
           text-align:left;
           }
  .head1 {font-size:1.5em; letter-spacing:0.1em;}
  .head2 {font-size:1.1em; letter-spacing:0.1em;}
  .head3 {font-size:0.8em; letter-spacing:0.05em; font-weight:bold; text-aling:left;}
  location {font-style:italic;}
  
  table#singen th {vertical-align:middle; }
  table#singen td {vertical-align:top;}
  
  table#programm { border-collapse: collapse; margin-right:1em;}
  table#programm caption  {font-size:0.9em;}
  table#programm th {font-size:0.8em; letter-spacing:0; font-style:italic;  text-align:right;  vertical-align:middle; padding-right:1em;}   
  table#programm td {font-size:0.7em; text-align:left; vertical-align:middle; }
  
  a:link {text-decoration:none;}
  a:focus {color:red;}
  a:hover {color:red;}
  
    
  figure,
    figcaption {
      margin: 0;
      padding:0;
    }
    figure.einzel {
      display: inline-block;
      position: relative;
    }
    figure img {
	    display: block;
      width:100%;
    }
    figure:before { 					
      content: "?"; 
      position: absolute; 
      bottom: 3.5em;
      left: 2em;
      background: white; 
      color: black;
      opacity: 0.5;
      width: 1.5em;
      height: 1.5em;
      border-radius: 1em;
      text-align: center;
      font-size: 1.5em;
      line-height: 1.5em;
      transition: all 1s ease;
    }
    figure:hover:before {
      opacity: 0;
    }
    figcaption {
      opacity: 0;
      transition: all 1s ease;
	    position: absolute;
      width: 100%;
	    bottom: -2.0em;
	    text-align: center;
	    line-height: 1.5em;
      font-size: 0.8em;
	    color: white;
	    background: rgba(0, 0, 0, 0.5);
    }
    figure:hover figcaption {
      opacity: 1;
      bottom: -2.0em;
    }
    .gesamt {
	    position: relative;
	    color: black;
	    background:0;
    }
    

    
/* ===== responsives Layout ===== */

.container-singen {
    max-width:60em;
    display: grid;
    grid-gap:0.1em;
    grid-template-areas: 
        "header1"
        "header2"
        "header3"
        "inhalt"
        "sidebar"
        "footer"
        "footer2"
    ;
}

@media screen and (min-width: 30.001em) {

    .container-singen {
        grid-gap:1em;
        grid-template-rows: 6em auto;
        grid-template-columns: auto repeat(5, 1fr);
        grid-template-areas: 
            "header1 header1 header1 header1 header1 header1"
            "header2 header2 header2 header2 header2 header2"
            "header3 header3 header3 header3 header3 header3"
            "inhalt sidebar sidebar sidebar sidebar sidebar"
            "footer footer footer footer footer footer"
            "footer2 footer2 footer2 footer2 footer2 footer2"
        ;
    }

}

header1 {
    grid-area: header1;
}

header2 {
    grid-area: header2;
}
header3 {
    grid-area: header3;
}
article {
    grid-area: inhalt;
}

bildbereich {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}
footer2 {
    grid-area: footer2;
    margin-bottom:1em;
}
sidebar img {
  width:100px;
  padding:1px;
}
inhalt {
}


}