/* CSS Document */
/* ========================================
		Bilder  -  Titel
========================================= */
figure {
  padding: 2px;
  float: left;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

figure img {
  border-radius: 3px 3px 0 0;
}

figure figcaption {
  padding: 2px 4px 2px 4px;
  background-color: #636363;
  color: #FFFFFF;
  font-style: italic;
  font-size:12px;
  border-radius: 0 0 3px 3px;
}


.Bildrechts { 
	float:right; margin: 
	2px 2px 2px 2px; 
	padding: 2px; 
}

 .Bildlinks { 
	float:left; 
	margin: 2px 2px 2px 2px; 
	padding: 2px; 
}

div.figure {
  float: left;
  width: 20%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
img.scaled {
  width: 100%;
}

/*============================================
          bild bildunterschrift 
==============================================*/
dl.bildunterschrift {
	float: left;
	margin:5px 5px 5px 0;
	text-align: center;
	border: 1px solid #666666;
	width: auto;
	
}
dl.bildunterschrift dd {
	margin:0; font-size:12px;
	font-style: italic;
	border: top 1px solid #666666;
}

/*============================================
          bild style 
==============================================*/ 

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.3%;
  padding: 2px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

/*============================================
	         rauf Button
==============================================*/

.scrollicon{
text-align: center;
text-decoration:none;
z-index:1;

width:50px;
height:50px;
border-radius:100%;

background:#999999;
opacity:0.5;

position:fixed;
bottom:85px;
right:1px;
display:none;
border:1px solid #333;

}
.scrollicon div{
font-weight:bolder;
font-size:28px;
color:#333;
padding-top:12px;
}

/*============================================
	         bildgallerie leiste
==============================================*/

div.gallery {
  margin: 4px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover1 {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  font-style: italic;
  font-size:12px;
}

div.gallery1 {
  margin: 4px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

/* ========================================
		Modal - Box
========================================= */

.modal-window {
  position: fixed;
  background-color: rgba(60, 60, 60, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 310px;
  position: relative;
  margin: 12% auto;
  padding: 1rem;
  background: #fff;
  color: #2C2C2C;
  border:1px solid #c40;
  border-radius: 3px 15px 5px 30px;
}

.modal-window header {
	font-weight: bold;
	color: #CA8800;
}

.modal-close {
  color: #aaa;
  line-height: 20px;
  font-size: 100%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
	margin: 0 0 15px;
}

.modal-window a {
	margin: 0 0 15px;
	text-decoration: none;
}

.modal-window hr
{
	height: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border: 0;
	border-top: 1px solid #ddd;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* =======================================================
  				 Text Farben
   ======================================================= */

.rot {
	color: red;
	font-weight: lighter;
}

.rot_1 {
	color: #FF0000;
	font-weight: bold;
}


.blau {
	font-weight: lighter;
	color: #0275d8;
	font-size: 1em;
}

.blau_1 {
	font-weight: lighter;
	color: blue;
	font-size: 1em;
}

.gruen {
	color: #339933;
	color: #009565;
	font-weight: lighter;
}

.gelb {
	color: #CEA500;
	font-weight: lighter;
}

.gelb_1 {
	color: #CEA500;
	font-weight: bold;
}

.weis {
	color: #FFFFFF;
	font-weight: lighter;
}

.schwarz_1 {
	color: black;
	font-weight: bold;
}

 sonderzeichen-
.b ⤵;{
	font-weight: bold;
}

/* ========================================
		Zoom - Bilder
========================================= */

.zoom {
  padding: 10px;
  transition: transform .2s; /* Animation */
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/*============================================
	         DIV Nebeneinander für media
==============================================*/

.flex-container {
  display: flex;
}

.flex-item {
  background-color: white;
  width: 50%;
  margin: 5px;
  text-align: left;
}

/*======
<div class="flex-conttainer">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
  <div class="flex-child">Flex Child 2</div>
</div>
=========*/

/*============================================
	         DIV Nebeneinander
==============================================*/

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
	background-color:#FFFFFF;
}
/*======
<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
  <div class="flex-child">Flex Child 2</div>
</div>
=========*/

/*============================================
	         Suchen
==============================================*/

main {
	background: white;
}

#suche {
	width: 20em;
	border: 2px solid #999;
	border-radius: 0.5em;
	font-size: 1.2em;
	transition: width 0.5s ease-in-out;
}

#suche:focus {
	font-size: 1em;
	width: 50%;
}


strong {
	font-size: 16px;
	color: #0000FF;
}

/*============================================
	         Modal für Wienerlied Texte
==============================================*/

.modalDialog {
 position: Fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
}

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}

.modalDialog > div {
 width: 530px;
 position: relative;
 margin: 5% Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background-color: #FFFFFF;
 background: linear-gradient(#FFFFFF);
 cursor: Default;
}

.close {
 background-color: #606061;
 color: #FFFFFF;
 line-height: 20px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}

.close:hover {
 background-color: #00D9FF;
}

/*------ openModal-----------------------------------------------------------
<a href="#openModal-1">Titel</a>
<div id="openModal" class="modalDialog">
 <div>
  <a href="#close" title="Schließen" class="close">X</a>
  <h2>Modal-Fenster</h2>
  <p>Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.</p>
 </div>
</div>
------------------------------------------------------------------------------*/

/*============================================
	        Tabellen Verse
==============================================*/
.verse
{
  vertical-align: top;
  text-align: left;
  padding-bottom: 1em;
  page-break-inside: avoid;
  line-height: 1.2;
}

.vnr
{
	vertical-align: top;
	text-align: left;
	padding-left: 0.5em;
	font-weight: bolder;
	width:5%;;
}

/*============================================
	        Info Box
==============================================*/

  a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#c30; background:white;}
  a.infobox span { visibility:hidden; position:absolute; left:-99em; width:320px;
    margin-top:1.5em; padding:1em; text-decoration:none; 
}

a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:1em;
    border:1px solid #ccc; 
	color:black; 
	background:white; 
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2); padding: 0 1.31em 0 0;
	visibility:visible; left:1em; 
}
a.infobox img { 
	position: relative; 
	height: auto; 
	display: block; 
	float: left; 
	margin-right: 1em;
}

/*============================================
	        Dichter/Komponisten
==============================================*/

.accordion-container{
  position: relative;
  max-width: auto;
  height: auto;
  margin: 10px auto;
}
.accordion-container > h2{
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
  
}
.set > a i{
  float: right;
  margin-top: 2px;
}
.set > a.active{
  background-color:#DDDDDD;
  color: #000000;
}
.content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}

/* ======================================

			 Volkslieder Akkorde css
=========================================*/
.chordWrap{
	background: #E0E0E0;
	color: #000000;
	padding: 0px 0px;
	margin-left: 1px;
	margin-right: 1px;
	border-radius: 2%;
	margin-top: 25px;
	position: relative;
	top: -20px;
	left: -0px;
	margin-right: -20px;
	min-width: 20px;
	text-align: center;
	font-size: 12px;
	font-style: italic;
}
.chordbtn-group.chordbtn-group-justified{
	margin-top:0px;
	margin-bottom:0px;
}
.chordbtn{
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	border-radius: 6px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}


p {
 margin-top:20px;
}

em {
	font-size: 12px;
}

div.gallery {
  margin: 2px;
  border: 1px solid #ccc;
  float: left;
  width: 150px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 2px;
  text-align: center;
}

/* ---- 
		Volkslieder Akkorde Kurzform--------*/
		
p {
 margin-top:20px;
}


div.gallery1 {
  margin: 1px;
  border: 1px solid #ccc;
  float: left;
  width: 80px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery1 img {
  width: 100%;
  height: auto;
}