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

* { padding: 0; margin: 0; border:0; box-sizing: border-box; list-style-type:none; font-family: 'Montserrat'; }

a { text-decoration:none;  }

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

/* FLEXBOX */

/* Großer Viewport */
@media screen and (min-width: 768px) {

header  { display: flex; justify-content: center; align-items: center; }

#stapel1  {
    order: 1;
    flex: 1 0 80%; }

#titel  {
    order: 2;
    flex: 1 1 20%; }

main {
     display: flex;
     flex-direction: row; }

     .info1 {
     order: 2;
     flex-basis: 15%; }

     article {
     order: 2;
     flex-basis: 70%; }

     .info2 {
     order: 3;
     flex-basis: 15%;
  }

.portraet      { display: flex; }
.portraet_bild { flex-basis: 18%; }
.portraet_text { flex-basis: 82%; }

.map      { display: flex; }
.map_bild { flex-basis: 40%; }
.map_text { flex-basis: 60%; }


.film { display:flex; }
.video {flex-basis: 50%; }

.bild {
     display: flex;
     flex-direction: row; }

.box { flex-basis: 40%; }

.impr { display:flex; }
.impr1 { flex-basis: 50%; }

footer { display:flex; justify-content: center; }
.footbox1 { flex-basis: 40%; }
.footbox2 { flex-basis: 60%; }
}

/* ----------------------
   Basisformatierung
   ----------------------  */
body      { background:#123346; font-family: 'Montserrat', sans-serif; font-weight:300; color:#f9b345; margin: 0 auto; }
main  { margin-top: 0.5em; }
header    { width:100%; height:auto; background: #123346; }
#titel {  display:none;  }
#titelzeile {   background:#414453; margin: 3em auto; }
#titelzeile h1 {   text-align:center; letter-spacing:2px; margin:0; padding:0; text-shadow: 5px 5px 10px #000;}

h1,h2,h3,h4,h5,p,a,li { font-family: 'Montserrat', sans-serif; font-weight:300;  }

h1        { font-size:1.6em; line-height: 1.6em; color:#fa9a04; padding:0 0 0.5em 0; text-shadow: 5px 5px 10px #000; }
h2        { font-size:1.5em; line-height: 1.4em; color:#fa9a04; padding: 2em 0 0.5em 0; }
h3        { font-size:1.3em; line-height: 1.2em; color:#fff; font-weight:100; text-align:center; letter-spacing:1px;  margin:0; padding:0; }
h4        { font-size:1em; line-height: 1.7em; color:#cb0a1d; font-weight:100; }
h5        { font-size:1.1em; line-height: 1.7em; color:#cb0a1d; font-weight:100; }
p         { font-size:1em; line-height: 1.7em; color:#f9b345; margin-bottom:12px; }
b         { font-weight:800; }
.klein    { font-size:0.7em; line-height: 1.2em; }

nav { }
nav ul li a { font-size:1.3em; line-height:1em; color:#ffffff; display:block; padding:1em; text-shadow: 5px 5px 10px #000; background:#ed9f39; }
nav ul li a:active { color: white; }
nav ul li a:hover, nav a:focus {  color:#fff; transition: 0.5s; }

.menu    { margin: 0 auto; text-align:center; background:#ed9f39; margin:0.7em; }
.menu a { font-size:1em; font-weight:500; color:#241c0e; display: block;
         line-height:0.9em; text-align:center; padding:1.2em 0em; }
.menu a:hover { color:#ffffff; background:#2d607e; transition:background 0.4s; -webkit-transition:background 0.4s; }

.portraet           { background: #2b4a5c; padding: 6px; margin-top:12px; margin-bottom:12px;}
.portraet_bild      { margin: 6px; }
.portraet_bild img  { height: auto;  }
.portraet_text      { background: #0c2635; margin: 6px 6px 0 6px; }
.portraet_text p    { padding: 12px 12px 0 12px; }
.portraet_text h2   { display:block; background: #ed9f39; height: 35px; width:auto; padding: 12px; color:#372719; line-height: 0.4em;}

.map          { background: #2b4a5c; padding: 6px; margin-top:12px; margin-bottom:12px;}
.map_bild      { margin: 6px; }
.map_bild img  { max-width:100%; }
.map_text      { background: #0c2635; margin: 6px 6px 0 6px; }
.map_text p    { padding: 12px 12px 0 12px; }
.map_text h2   { display:block; background: #ed9f39; height: 35px; width:auto; padding: 12px; color:#372719; line-height: 0.4em;}

a.stil1:link    { color:#ffdfac; font-size:1em; line-height:1.4em; }
a.stil1:visited { color:#ffdfac; }
a.stil1:hover   { color:#fff8ed; }
a.stil1:active  { color:#ffdfac; }

a.stil2:link    { background:#f5f5f5; display:block; width:100%; height:auto; color:#cb0a1d; font-size:1.1em; padding:0.8em 0; ;
                text-align:center; border-bottom: 1px solid #9a9a9a; letter-spacing:1px; }
a.stil2:visited { background:#f5f5f5; color:#cb0a1d; border-bottom: 1px solid #9a9a9a; }
a.stil2:hover   { background:#cb0a1d; color:#fff; border-bottom: 1px solid #9a9a9a; transition: 0.5s; }
a.stil2:active  { background:#f5f5f5; color:#cb0a1d; border-bottom: 1px solid #9a9a9a; }

a.stil3:link    { color:#404040; font-size:1.1em; line-height:1.4em; padding:0.7em; }
a.stil3:visited { color:#cb0a1d; }
a.stil3:hover   { color:#8d8d8d; }
a.stil3:active  { color:#cb0a1d; }

article         { margin:0.7em }
aside.info1     { }
aside.info2     {  }

/* SLIDESHOW */
#stapel1 { max-width: 1280px; height:598px; margin:auto; }
#stapel1 img { position: absolute; opacity: 0; }
#stapel1 img:nth-of-type(1) { -webkit-animation: fade 20s ease-in-out infinite; animation: fade 20s ease-in-out infinite; }
#stapel1 img:nth-of-type(2) { -webkit-animation:  fade 20s 4s ease-in-out infinite; animation: fade 20s 4s ease-in-out infinite; }
#stapel1 img:nth-of-type(3) { -webkit-animation: fade 20s 8s ease-in-out infinite; animation: fade 20s 8s ease-in-out infinite; }
#stapel1 img:nth-of-type(4) { -webkit-animation:  fade 20s 12s ease-in-out infinite; animation: fade 20s 12s ease-in-out infinite; }
#stapel1 img:nth-of-type(5) { -webkit-animation:  fade 20s 16s ease-in-out infinite; animation: fade 20s 16s ease-in-out infinite; }
@keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}




/* RESPONSIVE TABELLE */
table  {  border-collapse: separate; border-spacing: 5px; width: 100%; max-width:1400px; background: #20485f; }
th, td {  border: none; padding: 10px; font-size:1em; font-weight:300; color:#f9b345;  }
tr  { vertical-align: top; background: #102531; }

span { color:#f9b345; font-weight:800; }

video  { width:450px; height:338px; overflow:hidden; }
iframe  { width:450px; height:338px; overflow:hidden; }

.abst_o     { padding-top:0.8em; }
.abst_u     { padding-bottom:0.8em; }
.box { border: 1px solid #1c1e29; padding:0.4em; margin:0 0.8em 0 0; background:#282a38; }
.box p    { font-size:0.75em; line-height: 1.1em; color:#828d9b;  }
.box p span   { color:#abb0b6;  }

footer { width:100%; background: #0c2534; border-top: 1px solid #fa9a04; margin-top:1em; padding: 10px; }
.footbox1 { margin: 10px; text-align:right; }
.footbox2 { margin: 10px; }
.foot { font-size:13px; color: #f9b345; line-height:21px; }
a.footer:link    { color:#ffd799; font-size:13px; font-weight:100; line-height:21px; }
a.footer:visited { color:#ffd799; }
a.footer:hover   { color:#ffe6bf; }
a.footer:active  { color:#ffd799; }

footer ul   { padding-left:3em; font-size:13px; line-height: 21px; color:#f9b345; }
footer ul li { list-style:square; }

.smartbild    { display:none; }

.oben    { text-align: right; padding-right:10px; vertical-align: text-bottom; }
.oben a   { font-size:1.8em; color:#fa9a04; line-height:1.5em; }
.oben a:hover   { color:#fff; transition: 0.4s; }

.rechts { text-align:right; }

@media all and (max-width: 800px) {
        #titel1    { display:none; }
        #titel { display:block; max-width: 70%; height:auto; text-align: center; margin: 0 auto; }

        .portraet_text h2, .map_text h2{ width:100%; padding:10px; margin:0; }
        .portraet_text p { width:100%; padding:10px; margin:0; }
        h3 { font-size:1em; text-align:center; padding:0; color:#fff; line-height:1em; }
        #titelzeile { margin: 1.3em auto; }
        article        { width:100%; padding:0; margin:0; }
        .portraet_bild, .portraet_text, .map_bild, .map_text   { width:100%; padding:0; margin:0; }
        .portraet { padding:15px 0; margin:0; }
        .map        { width:100%; padding:0; margin:0; }
        p, h2    { margin:0.4em; }
        table        { width:100%; border-spacing: 2px; margin:0;}
        nav a { padding:1em 0.5em 1em 0.5em;  }

        .item     { width:100%; height:auto; }

        header  { padding:0; text-align:center; height:auto; }
        .kontakt  { font-size:1em; line-height: 1.15em; text-align:center; }
        .menu { display:none;  }
        nav { text-align:center; }
        .box { margin:0 0 0 0; padding:0; }
        footer { border:0; }
        .footbox1 { margin: 6px; text-align:left; }
     }