/* Farben
 blau = #203379 = hsl(232, 31%, 43%)
 grün = #4C9055 = hsl(128,31%,43%)
 blassgelb = hsl(60, 100%, 98%)
*/


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Grundlagen */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
*{
 margin: 0; padding: 0; border: 0;
 box-sizing: border-box;
}

div, p, h1, h2, h3, ul, ol, td, th, span, li{
 font-family: Constantia,Cambria,Georgia,Times New Roman,Times,Arial,Calibri,Sans;
 font-size: 18px;
 line-height: 1.4;
 text-align: left;
 color: #000;
}

body{
 padding: 4%;
 text-align: center; /* für die alten IEs */
 background-color: #FFF;
 background-image: url(../bilder/hgr_bto1.jpg);
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 overflow-y: scroll;
}

p, li, td, dd{
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
}

img{
 max-width: 100%;
 max-height: 100%;
 vertical-align: top;
}
li img{margin-top: 0.5rem;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* DIVS */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#Gesamt{
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 text-align: center;
 background-color: hsla(60, 100%, 98%, 0.95);
 box-shadow: 0 0 10px #AAA;
 border-radius: 5px 5px 0 0;
}

#Kopf{padding: 5%;}
#Logo{
 float: left;
 width: 55%;
 padding-bottom:5%;
}
#Adresse{
 float: left;
 width: 45%;
 padding-top: 8%;
 padding-left:8%;
 padding-bottom:5%;
}
#AdresseS{display: none;}

#Foto{
 width: 100%;
}

#Navi_oben{
 width: 100%;
 margin-bottom: 2rem;
 text-align: left;
 background-color: hsl(128,31%,43%);
}
#Navi_oben:after{
 content: "";
 display: table;
 clear: both;
}
#Navi_oben p, #Navi_links p{
 margin-top: 0;
}
#Navi_links{
 display: table-cell;
 width: 15%;
 text-align: left;
}

#Inhalt{
 display: table-cell;
 width: 70%;
 padding: 0 4rem 2rem 2rem;
 text-align: left;
}

#Fuss{
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 0.5rem 0;
 background-color: hsla(0,0%,100%,0.5);
 border-radius: 0 0 5px 5px;
}
#Fuss p{
 margin-top: 0;
 font-size: 0.9rem;
 text-align: center;
}

iframe{
 width: 100%;
 height: 500px;
 margin: 1.5rem 0 0 0;
 border: solid 1px #AAA;
}

.rechts{
 float: right;
 width: 30%;
 margin: 0.5rem 0 0.5rem 1.5rem;
}

.hervorhebung{
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
 padding: 0.5rem;
 padding-top: 0.2rem;
 border: solid 2px hsl(232,31%,43%);
 border-radius: 10px;
 box-shadow: 0 0 10px #AAA;
}
.hervorhebung p{
 text-align: center;
}
.gross{
 font-weight: bold;
 font-size: 1.2rem;
 color: hsl(232,31%,43%);
}
.balken{
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
 padding-left: 0.5rem;
 border-left: solid 10px hsl(128,31%,43%);
}

.spkarte{
 float: left;
 width: 45%;
 min-width: 15%;
 margin-right: 10%;
}
.oRand{margin: 0;}
.gruen{
 color: hsl(128,31%,43%);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Formate */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1, h2, h3{
 font-weight: bold;
 font-size: 1.4rem;
 color: hsl(232,31%,43%);
}

h2, h3{
 font-size: 1.2rem;
 font-variant: small-caps;
 margin: 2.5rem 0 0 0;
 color: hsl(128,31%,43%);
}
h1+h2, div.spkarte>h2{
 margin: 2rem 0 0 0;
}
h3{
 margin: 1rem 0 0 0;
 font-size: 1.1rem;
 font-weight: normal;
}
h3+p{
 margin-top: 0.2rem;
}

p{margin-top: 0.8rem;}
p.oA {margin-top:0;}
.rechts p.leg{font-size: 0.9rem; color: hsl(128,31%,43%);}
ul,ol{margin-top: 5px;}
li, dd{margin-left: 1rem;}

li b, p b, td b, th b, li strong, p strong, td strong, th strong{
 font-weight: bold;
 color: hsl(232,31%,43%);
}
.balken p b{
 color: hsl(128,31%,43%);
}

li u, p u, td u, th u{
 text-decoration:none;
 color: hsl(128,31%,43%);
}

dt{
 margin-top: 0.4rem;
 font-weight: bold;
 line-height: 1.1;
}

dd {
 margin-top: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Links Grundausstattung */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a{color: hsl(232,31%,43%);}
a:link{text-decoration: none;}
a:visited{text-decoration: none;}
a:hover{text-decoration: underline; color: hsl(232,31%,43%);}
a:active{text-decoration: none;}

/*Navigationsmenü*/
a.spklmo, a.spklmoaktiv{
 float: left;
 display: inline-block;
 padding: 0.3rem 1.5rem;
 text-align: center;
 text-decoration: none;
 color: hsl(60, 100%, 98%);
 border-right: solid 3px hsl(60, 100%, 98%);
 -webkit-transition: all 0.6s ease-in;
 transition: all 0.6s ease-in;
}
a.spklmo:link{background-color: hsl(128,31%,43%);}
a.spklmo:visited{background-color: hsl(128,31%,43%); color:hsl(60, 100%, 98%);}
a.spklmo:hover{
 text-decoration: none;
 background-color: hsl(60, 100%, 98%);
 color: hsl(128,31%,43%);
}
a.spklmo:active{background-color: hsl(128,31%,43%);}

a.spklmoaktiv{background-color: hsl(60, 100%, 98%); color: hsl(128,31%,43%);}

a.spklml, a.spklmlaktiv{
 display: block;
 width: 98%;
 text-decoration: none;
 padding: 3px 3px 3px 20%;
 border-bottom: solid 1px hsl(232,31%,43%);
 text-align: left;
 color: hsl(232,31%,43%);
 -webkit-transition: all 0.6s ease-in;
 transition: all 0.6s ease-in;
}
a.spklml:link{background-color: hsl(60, 100%, 98%);}
a.spklml:visited{background-color: hsl(60, 100%, 98%); color:hsl(232,31%,43%);}
a.spklml:hover{
 text-decoration: none;
 background-color: hsl(232,31%,43%);
 color: hsl(60, 100%, 98%);
}
a.spklml:active{background-color: hsl(232,31%,43%); color:hsl(60, 100%, 98%);}

a.spklmlaktiv{background-color: hsl(232, 31%, 43%); color: hsl(60, 100%, 98%);}

.LinieOben{
 border-top: solid 1px hsl(232,31%,43%);
}

/* Tabellenformate */
table{
 width: 100%;
 border: solid 0;
 margin-top: 0.5rem;
 border-collapse: separate;
 border-spacing: 0;
 empty-cells: show;
}

table th{
 vertical-align: top;
 text-align: left;
 color: hsl(128,31%,43%);
}

table td{
 padding: 0.5rem 1rem 0 0;
 vertical-align: bottom;
 text-align: left;
}
table td:last-child{padding-right:0;}
table td.preis{
 text-align: right;
}
table td.preis::before{
 content: ". . .  ";
 white-space: nowrap;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Anpassungen */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 680px) {
#Logo{
 float: none;
 margin: 0 auto;
 width: 80%;
}
#Adresse{display:none;}
#AdresseS{
 display: inherit;
 clear: both;
 text-align: center;
}
#Inhalt{
 padding: 0 2rem 2rem 2rem;
}
}
@media screen and (max-width: 560px) {
#Navi_oben{
 text-align: center;
}

a.spklmo, a.spklmoaktiv{
 float: none;
 width: 100%;
 padding: 0.3rem 1.5rem;
 border-right: solid 0 hsl(60, 100%, 98%);
 border-bottom: solid 2px hsl(60, 100%, 98%);
 text-align: center;
}
a.spklmoaktiv{
 border-bottom: solid 2px hsl(128,31%,43%);
}

#Navi_links{
 display: none;
}
#Inhalt{
 width: 100%;
}
.spkarte{
 float: none;
 width: 90%;
 min-width: 15%;
 margin-right: 0;
}

}