/* general */
/* Background für die Webseite ist R,G,B, 248, 237,212 = #F8EDD4 = beige */

body {
 /*Ü font-size: 0.9em; */
  font-size: 18px;
  font-family:verdana;
  color:#285078; /* Text blau */
  background-color: #B4B4B4; /* grau */
  width: 90% !important;
  max-width: 1940px !important;
  overflow: auto !important;
  margin: 0px auto;
  padding: 0px;
}

h1 {
  font-size: 2.0em; 
}
h2 {
  font-size: 1.875em;
}
h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}
h5 {
  font-size: 1em;
}
.small {
  font-size: 80%;
}


/* der Spendenbutton */
.spende {
  background-color: #285078; /* blue */
  border: none;
  color: white;
  padding: 15px 45px 15px 45px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
  border-radius: 12px;
}

.spende:hover {background-color: #417DB9}

/* select color for background on highlight */
.highl {background-color: yellow;}
.mit-border {
	border-bottom: 1px solid gray;
}
.buttonc {
		font-size: 12px; 
		line-height: 1;
	}

/* define table options */
table.center { margin-left: auto; margin-right: auto;}
.mit-border { border-bottom: 1px solid gray;}

.tcenter {text-align: center; }
.tleft {text-align: left; }
.tright {text-align: right; height: 0.2em;}
.g_beige {background-color: #F8EDD4; }
.hr_blue {color:#285078; border-width:1px; border-style: solid; margin-left:auto; margin-right:auto;}
.hr_blue1 {color:#285078; border-width:1px; border-style:dotted; margin-left:auto; margin-right:auto;}
.highlight {background-color: yellow;}
.pl1 {padding-left: 1em;}
.txtr {text-align: right}
.titel {
    vertical-align: middle; /* optional */
    display: inline-block;
    margin-left: 20px; /* Abstand zum Logo */
}
/*
.highlight {background-color: #fff34d; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);}
*/
.grid-small {display: grid; width:100%; grid-template-columns: 40% auto;}
.grid-two {display: inline-grid; width:100%; grid-template-columns: auto auto;}
.grid-item {text-align: left; }

/* details of font size and options  */
.txttop180 {vertical-align:top; width:180px;}
.txtr {text-align:right;}
.std_txt {font-size:100%; vertical-align:top;}
.std_txtb {font-size:100%; font-weight:bold; vertical-align:top;}
.std_txtc {font-size:100%;  text-align:center; vertical-align:top;}
.std_txtcb {font-size:100%;  text-align:center; font-weight:bold; vertical-align:top;}

.txt60 {font-size:60%; vertical-align:top;}
.txt60c {font-size:60%; text-align:center; vertical-align:top;}
.txt80 {font-size:80%; vertical-align:top;}
.txt90 {font-size:90%; vertical-align:top;}
.txt80form {font-size:80%; vertical-align: middle; padding-left:20px; }
.txt80i {font-size:12px; font-style:italic; vertical-align:top;}
.txt80b {font-size:80%; font-weight:bold; vertical-align:top;}
.txt80c {font-size:80%;  text-align:center; vertical-align:top;}
.txt80cb {font-size:80%;  text-align:center; font-weight:bold; vertical-align:top;}
.txt70 {text-decoration:none; font-size:70%;}
.txt120 {text-decoration:none; font-size:120%; }
.txt130 {text-decoration:none; font-size:130%; }
.txt120c {text-decoration:none; font-size:120%; text-align:center;}
.txt120b {text-decoration:none; font-size:120%; font-weight:bold; }
.txt150 {text-decoration:none; font-size:150%; }
.txt150c {text-decoration:none; font-size:150%; text-align:center; }
.txt150b {text-decoration:none; font-size:150%; font-weight:bold;}
.txt150cb {text-decoration:none; font-size:150%; font-weight:bold; text-align:center;}
.txt200c {text-decoration:none; font-size:200%; text-align:center;}

/* define the size of images */
.bild1620 {border:none; height:16px; width:20px; text-align:left;}
.bild7030 {border:none; height:30px; width:70px; margin-left:auto; margin-right:auto;margin-top:5px; margin-bottom:5px;}
.bild10070 {border:none; height:100px; width:70px; margin-top:5px; margin-bottom:5px;}
.bild150100 {border:none; height:150px; width:100px; margin-top:5px; margin-bottom:5px;}
.bild200150 {border:none; height:200px; width:150px; margin-top:5px; margin-bottom:5px;}
.bild300200 {border:none; height:300px; width:200px; margin-top:5px; margin-bottom:5px;}
.bild300300 {border:none; height:300px; width:300px; margin-top:5px; margin-bottom:5px;}
.bild200300 {border:none; height:200px; width:300px; margin-top:5px; margin-bottom:5px;}
.bild170300 {border:none; height:170px; width:300px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild200200 {border:none; height:200px; width:200px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild70100 {border:none; height:70px; width:100px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild7070 {border:none; height:70px; width:70px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild7070m {border:none; height:70px; width:70px; vertical-align: middle;}

.bild8080 {border:none; height:80px; width:80px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild100100 {border:none; height:100px; width:100px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild150150 {border:none; height:150px; width:150px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild70150 {border:none; height:70px; width:150px; margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.bild400300 {border:none; display:block; height:300px; width:400px; margin-left:auto; margin-right:auto;}


/* define the layout of the grid for index */
#main { display: grid;
	background-color: #F8EDD4;
	/*font-size:medium;*/
	grid-template-areas: "header1_1 header1_2" "mainnav mainnav" "news content" "sub_content sub_content";
	width: 90%; 
	height: auto; 
	grid-template-rows: 11.5em 3.125em auto auto; 
	grid-template-columns: 20% 80%; 
	margin: auto auto;
	}
#header11 {grid-area: header1_1;}
#header12 {grid-area: header1_2; padding-top:1.5em; text-align:center; font-size:2.0em;}
#navrow { grid-area: mainnav; width: 100%; height:3.125em;} 
#newscol { grid-area: news; padding-top: 1em; padding-left:3px; text-align:center; font-size:0.75em;}
#mainspace { grid-area: content; height:auto;  padding-left:1em; font-size:80%; background-color: #F8EDD4;}
#subspace { grid-area: sub_content; width: 100%; font-size:80%; background-color: #F8EDD4;}
/* define the layout of the grid for the subgrid */
.contlr { display: grid; grid-template-columns: auto auto; grid-template-rows: repeat(10, auto);}

.contlist { grid-area: content; display: grid; grid-template-areas: "listl listr"; height: auto; grid-template-columns: 50% 50%; gap: 0%;}
.contlistl { grid-area: listl; display: grid;  height: auto; grid-template-columns: 25% 70%; grid-template-rows: repeat(41, 1fr); grid-gap: 0% 5%;}
.contlistr { grid-area: listr; display: grid;  height: auto; grid-template-columns: 25% 70%; grid-template-rows: repeat(41, 1fr); grid-gap: 0% 5%;}
.zwei { grid-column: span 2; }

/* define the size of the iframe */
#fr {width:100%; height:100%; border: none;}

/* some helpful details */
.float-left {float: left; padding: 3px; margin: 0 5px 5px 0;}
.float-right {float: right; padding: 3px; margin: 0 5px 5px 0;}
.sp1 {width: 200px; }
.sp2 {width: 200px; }

a:link {text-decoration: underline; color: midnightblue; }
a:visited {text-decoration: underline; color: blue; font-style: italic; }
a:hover {text-decoration: none; color: royalblue ; font-style: normal; font-weight: normal; }
a:active {text-decoration: none; text-transform: uppercase; color: red; font-weight: normal; }


#loadpage {
  width: 100%;
  background-color: #ddd;
}

#waitbar {
  width: 1%;
  height: 1.5em;
  background-color: #4CAF50;
  font-size: 0.6em;
  color: white;
}


/* kreisende Punkte - Anzeige für loading content */
.warten{ 
            color:green; 
        } 
        .gfg { 
            display: block; 
            position: absolute; 
            width: 100px; 
            height: 10px; 
            left: calc(58% - 5em); 
            transform-origin: 1px 10px; 
            animation: rotate; 
            animation-iteration-count: infinite; 
            animation-duration: 2.8s; 
        } 
  
        /* Rotation of loader dots */ 
        @keyframes rotate { 
            from { 
                transform: rotateY(50deg); 
            } 
            to { 
                transform: rotateY(360deg); 
            } 
        } 
        .g1 { 
            animation-delay: 0.1s; 
            background-color: #1D8348; 
        } 
        .g2 { 
            animation-delay: 0.2s; 
            background-color: #239B56; 
        } 
        .g3 { 
            animation-delay: 0.3s; 
            background-color: #2ECC71; 
        } 
        .g4 { 
            animation-delay: 0.4s; 
            background-color: #82E0AA ; 
        } 
        .g5 { 
            animation-delay: 0.5s; 
            background-color: #D5F5E3; 
        }