@font-face { font-family: 'Montserrat'; src: url('font/Montserrat-Regular.ttf'); }
@font-face { font-family: 'Montfett'; src: url('font/Montserrat-Black.ttf'); }
@font-face { font-family: 'Montsemi'; src: url('font/Montserrat-SemiBold.ttf'); }


* { margin: 0; padding: 0; box-sizing: border-box; text-decoration:none; border:0; }

body {  background: linear-gradient(to bottom, #f8f8f8 0%, #a4a4a4 100%) fixed; color:#0f2944;
        min-height: 100vh; font-family: Montserrat, Century Gothic, Verdana, sans-serif; font-size:100%; font-weight:400; }


img {   max-width:100%; height:auto; border:0; }


/*FLEXBOX*/
@media screen and (min-width: 768px) {

/*FLEXBOX KOPF*/
.flex-head { margin:auto; display: flex; }
.logo {   flex: 1 1 15%; order: 1; }
.navi {   flex: 1 1 85%; order: 2; }

/*FLEXBOX NAVI*/
nav ul { display: flex; justify-content: flex-end; }
nav ul li   { flex: 1 1; }


main      { display: flex; }
.li       { flex: 1 1 15%; order: 1; position: fixed; }
.re       { flex: 1 1 85%; order: 2; }

.inhalt      { display: flex; }
.text       { flex: 1 1 95%; order: 1; }
.oben       { flex: 1 1 5%; order: 2; }

.bild           { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-content: flex-start;}
.box { flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: 15%; }

.bild           { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-content: flex-start;}
.boxt { flex: 0 0 auto; flex-grow: 0; flex-shrink: 0; flex-basis: 15%; }

footer           { display: flex; }
.foo  { flex: 1 1 auto; }



header { order: 1; margin-bottom: 1em; }

}

h1   { font-size:30px; line-height:28px; color:#ffffff; }
h2   { font-size:35px; line-height:28px; color:#ffffff; font-family: Montsemi; }
h3   { font-size:30px; line-height:30px; color:#920d0d; padding:20px 40px 10px 20px; }
h4   { font-size:20px; line-height:25px; color:#305272; }
h5   { font-size:55px; line-height:42px; font-family: Montfett, Century Gothic, Verdana, sans-serif; color:#e3e3e3; text-align:right; letter-spacing:2px;}
p    { font-size:18px; line-height:29px; color:#2e2e2e; padding:10px 40px 20px 20px; }
.klein   { margin-left:20px; font-size:14px; line-height:18px; }

b       { font-weight:800; }




header { text-align:center; background: #8e8e8e; display:none; padding:10px; }


.kontakt { background: #920d0d; text-align:center; aspect-ratio: 1; width:100%; padding:20px 5px; width:250px; height:250px; }
a.kont:link    {color:#ffffff; font-size:18px; line-height:35px; }
a.kont:visited {color:#ffffff; }
a.kont:hover   {color:#d7d7d7; }
a.kont:active  {color:#ffffff; }

a.stil1:link    {color:#920d0d; font-size:18px; line-height:35px; }
a.stil1:visited {color:#920d0d; }
a.stil1:hover   {color:#8c8c8c; }
a.stil1:active  {color:#920d0d; }

.inhalt {  margin-bottom:20px;  }

/* Navigation */

/* Pfeil nach unten */
nav { margin-top:150px; }
nav span:after     { width: 0; height: 0; border: 0.313em solid transparent;
                    border-bottom: none; border-top-color: #12396d; content: '';
                    vertical-align: middle; display: inline-block; position: relative; right: -0.313em; }
/* first level */
nav > ul > li      { position: relative; }
nav > ul > li > a  { display:block; background-color:#fff; color:#000; font-size:1.15em; line-height:3em; text-align:center; }
nav > ul > li:hover > a,
nav > ul:not( :hover ) > li.active > a { background-color: #4773a4; transition: 0.5s; }

/* second level */
nav li ul          { background-color: #8ac059; font-size: 0; z-index: -1;  /* Unternavi ausblenden */ position: absolute; top: 100%; }
nav li:hover ul    { display: block; left: 0; right: 0; transition: 0.5s; font: inherit; z-index: 1; /*  Unternavigation einblenden */ }
nav li ul a        { font-size: 1em; color: #fff; display: block; border-top: 1px solid #1c4e90; line-height: 2.5em; text-align: center; }
nav li ul li a:hover,
nav li ul:not( :hover ) li.active a { background-color: #76a848; transition: 0.5s; }


/* Content Area */



.text      { background: #f0f0f0 no-repeat bottom right; }

.bild      { padding:10px; }


/* quadratische Box mit Bild*/

.box { background: #d3d3d3; margin: 8px; aspect-ratio: 1; width:100%; padding:8px; }
.box:hover { background:#920d0d; color:#ffffff; }
.box p { font-size: 14px; line-height:14px; color:#920d0d; transition: 0.2s; }
a.bx { font-size: 14px; line-height:14px; color:#920d0d; transition: 0.2s; }
a.bx:hover  {  color:#ffffff; }
.bx_text { font-size: 16px; line-height:21px; color:#920d0d; transition: 0.2s; margin:6px; }
.bx_text:hover  {  color:#ffffff; }


/* quadratische Box mit Text*/
.boxt { background: #920d0d; margin: 8px; aspect-ratio: 1; width:100%; padding:8px; }
.boxt:hover { background:#858585; color:#ffffff; }
.boxt p { font-size: 14px; line-height:22px; color:#fff; transition: 0.2s; padding: 20px 10px;}
a.bxt { font-size: 14px; line-height:22px; color:#fff; transition: 0.2s; padding: 10px;}
a.bxt:hover  {  color:#fff; }
.bx_text { font-size: 16px; line-height:21px; color:#920d0d; transition: 0.2s; margin:6px; }
.bx_text:hover  {  color:#ffffff; }

.re       { margin-left:275px; margin-top:265px; }

ul { list-style-image:url(img/but1.png); padding-bottom:25px; }
li    { font-size:18px; line-height:29px; color:#2e2e2e; margin-left:65px; padding-left:1px; }


.oben { align-self: flex-end; }
.obe { background:#920d0d; display:block; width:40px; height:40px; text-align:center; }
a.ob { font-size: 55px; line-height:30px; color:#000000; transition: 0.2s; color:#e7e7e7; padding:0; }
a.ob:hover {  color:#fff; transition: 0.2s; }
.obe:hover  { background:#d32c2c; color:#ffffff; transition: 0.2s; }



.icon { background:#920d0d; display: inline-block; width:40px; height:40px; text-align:center; }
.icon:hover  { background:#d32c2c; color:#ffffff; transition: 0.2s; }
a.ic { font-size: 25px; line-height:35px; color:#e7e7e7; padding:0; text-align:center; }
a.ic:hover {  color:#fff; transition: 0.2s; }



/* Tabelle */
table { border-collapse: collapse; background:#e7eff7; overflow-x:auto; width:100%; }
tr:nth-child(even) { background-color: #f0f5fa; }
td {    font-size:0.9em; line-height:1.4em; color:#1f467b; padding:0.4em; vertical-align:top; border: 1px solid #ffffff; }
th {    font-size:1.3em; line-height:2.2em; color:#ffffff; background:#89a9c6; border: 1px solid #ffffff; vertical-align:top; }

.r {    text-align:right; }
.c {    text-align:center; }




/* Footer */
footer { background:#858585; margin:20px 0; padding:20px; }
footer p    { color:#fff; font-size:16px; line-height:22px; color:#fff; padding:10px; }
a.fo:link    { color:#fff; font-size:16px; line-height:22px; color:#fff; }
a.fo:visited  { color:#fff; }
a.fo:hover   { color:#920d0d; }



@media screen and (max-width: 768px) {
.re      { width:100%; margin:0; padding:0; }
.inhalt  { margin:0; padding:0; }
.box  { padding:10px; margin:20px 0; }
.text      { width:100%; margin:0; }
p        { font-size:16px; line-height:25px; margin:0;}
li       { font-size:16px; line-height:25px; margin-left:48px;}

img   { margin:0; width:100%; height:auto; }
.text img    { width:100%; margin:0; height:auto; }
header { text-align:center; background: #8e8e8e; display:block; }
#logo { display:none; }
h5 { display:none; }
}
@media screen and (max-width:550px) {


}