@charset "utf-8"; /* CSS Document */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Basis  -  Layout */
/*===============================================================================================================================================*/

*,*:before,*:after  {box-sizing:inherit}
html, td, th, *     {padding: 0; margin: 0; box-sizing: border-box;
html                {-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section     {display:block}
summary                                                                         {display:list-item}
audio,canvas,progress,video                                                     {display:inline-block}
/*===============================================================================================================================================*/
body, td, th		{font-family: "Times New Roman", Times, serif, Arial, Helvetica, sans-serif; color: rgba(0,102,0,1); font-size: 1rem;
             	 	 -webkit-word-break: break-normal; word-break: break-normal;
                     -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
/*===============================================================================================================================================*/
body		        {margin: 0 auto; height: 100vh;
                     display: grid; grid-template-rows: auto auto 1fr auto; grid-template-areas: "header" "nav" "main" "footer";}

header              {width: 100%;}

nav				    {text-align: center; margin: 5px auto; border-radius: 15px; width: 90%;}

main                {margin: 0 auto; width: 90%;}

footer              {text-align: center; font-size: .8rem; padding: 10px;}
/*===============================================================================================================================================*/
img				    {max-width: 100%; height: auto; border: none;}
.img-border         {border: solid rgba(80, 129, 241, 1) 2px; border-radius: 20px;}
/*===============================================================================================================================================*/
.kein-trennen		{-moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none;}
/*===============================================================================================================================================*/
.float-rechts	    {float: right;}		    .float-links	{float: left;}		 .clear-all	  {clear: both;}
.text-rechts	    {text-align: right;}	.text-links		{text-align: left;}	 .text-center {text-align: center;}
.padding-1rem      {padding: 1rem;}
/*===============================================================================================================================================*/
#menu-01 a			{font-size: 1rem; color: #FFFFFF;}
#menu-01 a:link	    {text-decoration: none; color: #FFFFFF;}
#menu-01 a:hover	{text-decoration: underline; color: rgba(255,0,0,1);}
/*==========================================================================================================================================*/
#a 				    {font-size: .9rem;}
#a:link 		    {text-decoration: none; color: rgba(0,0,255,1);}
#a:visited		    {text-decoration: none; color: rgba(0,0,255,1);}
#a:hover 	        {text-decoration: underline; color: rgba(255,0,0,1);}
#a:active 		    {text-decoration: none; color: rgba(0,0,255,1);}
/*==========================================================================================================================================*/
.hr-01 			                {background: rgba(0,0,255,1); border: none; color: rgba(0,0,255,1); height: 1px; width: 85%; margin-top: 1rem; margin-bottom: 1rem;}
.hr-02 			                {background: rgba(0,0,255,1); border: none; color: rgba(0,0,255,1); height: 1px; width: 98%; margin: 1% auto;}
.hr-03 			                {border: none; margin-top: 1rem; margin-bottom: 1rem; visibility: hidden;}

.h1                             {font-size: 35px; margin-bottom: 60px;}
.h2                             {margin-bottom: 16px;}

.objekt-center	                {margin: 0 auto;}
.abst-unten-01                  {margin-bottom: 15px;}
.apoliste                       {text-align: center; font-size: .8rem; margin: 5px 0 10px;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Objekte -  Layout */
/*===============================================================================================================================================*/

.button, .button-zoom		{border: 2px #FFFFFF solid; padding: 8px 30px; border-radius: 30px; text-decoration: none; curser: }
.button-player  		    {background-color: #4CAF50; border: 2px solid rgba(253, 53, 18, 1.0); border-radius: 5px; color: white; padding: 5px 15px;
    		                 text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 2px 5px; cursor: pointer;}
.button-player:hover		{background-color: rgba(104, 143, 232, 1);}
.button-zoom   			    {margin: 300px 50px;}
/*===============================================================================================================================================*/

 .stil-01           {font-size: 1.2rem; font-weight: bold; color: #036D0A; padding: 1rem; margin-top: 1rem;}
 .stil-02           {font-size: 1.1rem; font-weight: normal; color: #036D0A; padding: 1rem 2rem;}

.margin-img-01      {margin: 0rem 1.7rem .2rem 0rem;}
.weite-90           {max-width: 95%; margin: 0 auto;}
.weite-80           {max-width: 85%; margin: 0 auto;}
.hoehe-3zeilen      {line-height: 3;}
/*=======================================================================================================================================================
                              Layout      Formulare
=======================================================================================================================================================*/

.form							{width: 100%; background-color: whitesmoke; margin: 0 auto; padding: .2rem; border-radius: 20px; text-align: center;}
.form textarea					{font-family:  sans-serif;}
.form label						{font-size: .9rem; color: darkslategrey; padding-left: 3px;}
.form input, form textarea		{width: 80%; font-size: 1rem; padding: 4px; font-family: inherit; font-weight: lighter; border:1px solid gray;
                                 outline: none; border-radius: 0.3rem;}
.form input:focus, .form textarea:focus			                {border:1px solid orange;}
.form input[type=submit], .form input[type=reset] 		        {background-color: limegreen; cursor: pointer; padding: .5rem 0; border-radius: 0.8rem; width: 70%;}
.form input[type=submit]:hover, .form input[type=reset]:hover	{background-color: yellow; box-shadow: 2px 2px 2px grey; width: 70%;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Rahmen -  Layout */
/*===============================================================================================================================================*/

.rahmen-01	{border-radius: 3rem; border: rgba(0,0,255,1) solid 1px; overflow: hidden; box-shadow: 8px -10px 5px -2px rgba(0,0,255,1); padding: 1rem;}

.rahmen-02	{border-radius: 25px; border: rgba(0,0,255,1) solid 2px; overflow: hidden; box-shadow: 8px 10px 5px -2px rgba(0,0,255,1); padding: 1rem;}

.rahmen-03	{border-radius: 2rem; border: rgba(170,0,0,1) solid 1px; overflow: hidden; box-shadow: 8px -10px 5px -2px rgba(204,102,51,1); padding: 1rem;}

.rahmen-04	{border-radius: 1rem; border: rgba(153,51,0,1) solid 2px; overflow: hidden; box-shadow: inset 0 0 15px rgba(153,51,51,1); padding: 1rem;}

.rahmen-05	{border: rgba(153,51,0,1) 1px solid; border-radius: .8rem; padding: 1rem;}

.rahmen-06	{border: hidden 1px solid; border-radius: .8rem; min-height: 50px; padding: 10px 20px; text-align: center;}

.rahmen-07	{border: rgba(255,0,0,1) 2px solid; border-radius: .8rem; padding: 1rem;}

.rahmen-08	{border-radius: 20px 20px 0px 0px;}

.rahmen-09	{border-left: 1px solid rgba(153,51,0,1);}

.rahmen-10	{border-radius: 20px;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Grafik  -  Layout */
/*===============================================================================================================================================*/

.we-love-music-left		    {float: left; padding: 5px; margin: 5px 15px;}
.we-love-music-right        {float: right; padding: 5px; margin: 5px 15px;}
.titel-header-home         	{float: left; margin: 30px auto}
.logo-notdienst-left		{float: left; margin: 5px 15px;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Background  -  Layout */
/*===============================================================================================================================================*/

.bg-body-home, .bg-body-aktuelles, .bg-body-charts, .bg-body-impressum, .bg-header-home
                            {background-position: center; background-size: cover; background-repeat: no-repeat;}

.bg-body-home               {background-image: url(../assets/backgrounds/bg_05.png); background-attachment: fixed;}
.bg-body-aktuelles          {background-image: url(../assets/backgrounds/bg_04.png); background-attachment: fixed;}
.bg-body-charts             {background-image: url(../assets/backgrounds/bg_09.png); background-attachment: fixed;}
.bg-body-impressum          {background-image: url(../assets/backgrounds/bg_06.png); background-attachment: fixed;}

.bg-header-home            {background-image: url(../assets/banner/banner_2500.png); min-height: 130px;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Tabellen  -  Layout */
/*===============================================================================================================================================*/

.td-vert-01, .td-vert-02, .td-vert-03 {padding: .2rem;}
.table-vert	        {margin: 0 auto; table-layout: auto; width: 100%;}
.td-vert-01         {font-size:  1.1rem; color: #F00; font-weight: bold;}
.td-vert-02         {font-size: .9rem; color: #03C;}
.td-vert-03         {font-size: .8rem;}

.einzug-2rem        {margin-left: 2rem;  padding-top: 1rem;}

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

.notdienst-region	        {width: 85%; margin: 0 auto; overflow: auto; text-align: center; font-size: .85rem; max-height: 600px;}

.menu_notdienst a	        {font-size: .8rem; color: #0856CC;}
.menu_notdienst a:hover	    {text-decoration: underline; color: rgba(255,0,0,1);}

.tbl-notdienst-01	        {display: none; padding-bottom: 1rem;}
.tbl-notdienst-02	        {display: block; max-width: 99%; margin: 0 auto; padding-bottom: 1rem;}

@media only screen and (max-width: 800px){
.tbl-notdienst-01	        {display: block; margin: 0 auto; text-align: center;}
.tbl-notdienst-02       	{display: none;}
}
@media only screen and (max-width: 1130px){
.tbl-notdienst-01	        {display: block; margin: 0 auto; text-align: center;}
.tbl-notdienst-02       	{display: none;}
}

.box-fle-02			{margin: .8rem auto;}

@media only screen and (min-width: 1600px){
.flexbox-notdienst	{display: flex; flex-wrap: wrap;}
.box-fle-01			{flex: 5;}
.box-fle-02			{flex: 2; margin: 0 1rem;}
.box-fle-03			{flex: 3;}
}

@media only screen and (max-width: 800px){
.tbl-notdienst-01	{display: block; margin: 0 auto; text-align: center;}
.tbl-notdienst-02	{display: none;}
}

/*========  Ausklappbox  =====================================================================================================================================================*/
#notfall {margin:0 auto; text-align:center; width: 98%;}
/* für die Boxen*/
.dbox, .dboxTab, .TabKopfzeile, p.linkleiste, .linkleiste a:link, .linkleiste a:visited, .linkleiste a:hover
{font-family:Verdana,Arial,Helvetica,sans-serif; font-size:0.87em; text-align:center; }
.dbox{font-weight:normal; color: #2F2F2F; background-color:#FFFFFF; line-height:130%; margin: 5px 0px 10px 0px; border-bottom:1px dotted #00468C; padding:10px; text-align:center;}
.dboxTab{color: #2F2F2F; background-color:#FFFFFF; line-height:130%; margin-top: 10px;}
.dboxTab td{text-align:left; vertical-align:top; color: #2F2F2F; padding:5px;}
.TabKopfzeile td{padding:4px; color: #00468C; border-top:1px solid #00468C; border-bottom:1px solid #00468C; line-height:130%;}
.FotoLinks{float:left; margin:0px 15px 15px 0px; border:6px solid #BFBFBF;}
/* für die Linkleisten untereinander*/
.linkleiste  {text-align: left;}
p.linkleiste {width:100%; padding:3px; color:#00468C; font-weight:normal; background-color:#A6CAD6; border-bottom:1px solid #838C19; margin:0px 0px 2px 0px;}
.linkleiste a:link {color:#00468C; font-weight:normal; text-decoration:none; text-transform:none;}
.linkleiste a:visited {color:#00468C; font-weight:normal; text-decoration:none; text-transform:none;}
.linkleiste a:hover{color:#FFFFFF; text-decoration:none; text-transform:none;}
.ausklappen_info {font-size:0.80em; text-align:left; padding-left:5%; margin-bottom:1.5%;}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Responsiv  -  Layout */
/*===============================================================================================================================================*/

.grid-container	    {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); grid-gap: 1rem;}
 /*==========================================================================================================================================*/

.info-box-01, .info-box-02, .info-box-03, .info-box-04, .info-box-05, .info-box-06    {margin: 2px 4px; padding: 15px; text-align: center; border-radius: 20px;}
.info-box-01                {min-height: 120px;}
.info-box-02                {min-height: 60px;}
.info-box-03                {min-height: 60px;}
.info-box-04                {min-height: 60px;}
.info-box-05                {min-height: 60px;}
.info-box-06                {min-height: 60px;}

.tan                        {background-color: rgba(144, 249, 247, 1); color: rgba(255, 41, 41, 1);}
.dark                       {background-color: rgba(173, 250, 190, 1); color: rgba(255, 41, 41, 1);}

.col                        {width: 100%;}
.row:before, .row:after     {content: ""; display: table;}
.row:after                  {clear: both;}
@media (min-width: 768px){
.col                         {float: left; padding: .1rem;}
.col-md-one-half             {width: 50%;}
.col-md-one-half-02          {width: 70%;}
.col-md-one-half-03          {width: 30%;}
}
@media (min-width: 1024px){
.col-lg-one-fourth           {width: 25%;}
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Animation  -  Layout */
/*===============================================================================================================================================*/

.curser-zoom-in         {cursor: zoom-in;}
.curser-zoom-out        {cursor: zoom-out;}
/*===============================================================================================================================================*/
.imageLine-01           {border-style: outset; border-radius: 25px; background-size: cover; background-repeat: no-repeat; background-position: center;
                         max-width: 96%; height: 250px; margin: auto;}
.untertitel-01	        {font-size: 0.8rem; font-style: italic; font-family: Georgia; margin-top: 0.5rem; text-align: center;  padding-bottom: .5%;}
/*===============================================================================================================================================*/
progress                                {vertical-align:baseline}
.opacity,.hover-opacity:hover           {opacity:0.60}
.opacity-off,.hover-opacity-off:hover   {opacity:1}
.opacity-max                            {opacity:0.25}
.opacity-min                            {opacity:0.75}
.modal                                  {z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;
                                         background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content                          {margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.red,.hover-red:hover                   {color:#fff!important;background-color:#f44336!important}
.xlarge                                 {font-size:24px!important}
.xxlarge                                {font-size:36px!important}
.xxxlarge                               {font-size:48px!important}
.jumbo                                  {font-size:64px!important}
.display-topleft                        {position:absolute;left:0;top:0}
.display-topright                       {position:absolute;right:0;top:0}
.display-bottomleft                     {position:absolute;left:0;bottom:0}.
.display-bottomright                    {position:absolute;right:0;bottom:0}
.display-middle                         {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.display-left                           {position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right                          {position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.display-topmiddle                      {position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-bottommiddle                   {position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-container:hover,
.display-container:hover span,
.display-hover                          {display:inline-block}
.display-hover                          {display:none}
.display-position                       {position:absolute}
@media (max-width:600px)  {
.modal-content                          {margin: 0 10px; width:auto !important}
.modal                                  {padding-top: 30px}
}
.animate-zoom                           {animation: animatezoom 0.6s}
@keyframes animatezoom                  {from {transform: scale(0)} to {transform: scale(1)}}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
        /* Hamburger Menü  -  Layout */
/*===============================================================================================================================================*/

.top-nav                    {display: flex; flex-direction: row; align-items: center;
                             justify-content: space-between; background-color:  rgba(0,102,255,1);
                             background: linear-gradient(to right, #00A0CC  ,#FFF );

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                             color: rgba(255,0,0,1); height: 55px; padding: .5rem 1rem;}

.menu                       {display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0;
                             color: rgba(255,0,0,1); font-size: .9rem;}

.menu > li                  {margin: 0 1rem; overflow: hidden;}

.menu-button-container      {display: none; height: 100%; width: 40px; cursor: pointer;
                             flex-direction: column; justify-content: center; align-items: center;}

#menu-toggle                {display: none;}
.menu-button,
.menu-button::before,
.menu-button::after         {display: block; background-color: #fff; position: absolute; height: 4px; width: 40px;
                             transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 5px;}

.menu-button::before        {content: ''; margin-top: -8px;}
.menu-button::after         {content: ''; margin-top: 8px;}

#menu-toggle:checked + .menu-button-container .menu-button::before  {margin-top: 0px; transform: rotate(405deg);}
#menu-toggle:checked + .menu-button-container .menu-button          {background: rgba(255, 255, 255, 0);}
#menu-toggle:checked + .menu-button-container .menu-button::after   {margin-top: 0px; transform: rotate(-405deg);}


@media (max-width: 900px) {

.menu-button-container              {display: flex;}
.menu                               {position: absolute; top: 0; margin-top: 135px; right: 0; flex-direction: column; width: 60%;
                                     justify-content: center; align-items: center;}
#menu-toggle ~ .menu li             {height: 0; margin: 0; padding: 0; border: 0; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
#menu-toggle:checked ~ .menu li     {border: 1px solid #333; height: 2.5rem; padding: 0.5rem;
                                     transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
.menu > li                          {display: flex; justify-content: center; margin: 0; padding: 0.5rem 0; width: 80%;
                                     color: white; background-color: #00B8F5;}
.menu > li:not(:last-child)         {border-bottom: 1px solid #444;}

}

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

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