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

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

body      { background-image:linear-gradient(to left, #a0afb1, #314b5c); font-family: 'Montserrat', sans-serif; font-weight:100; }
main  {  }
img {   max-width:100%; height:auto; border:0; }

/* FLEXBOX */

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

header  {  }

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

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

main {  }

nav ul    { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
nav ul li { flex: 1 1 190px; }

.box      { display: flex; flex-direction: row; }
.box_li   { order: 1; flex-basis: 50%; }
.box_re   { order: 2; flex-basis: 50%; }

.boxfr    { display: flex; flex-direction: row; }
.boxfr_li { order: 1; flex-basis: 5%; }
.boxfr_re { order: 2; flex-basis: 95%; }

.boxfakt  { display: flex; flex-direction: row; }
.boxfa    { flex-basis: 33%; }

.box1_3    { display: flex; flex-direction: row; align-items: flex-start; }
.box1 { order: 1; flex-basis: 8%; }
.box2 { order: 2; flex-basis: 18%; }
.box3 { order: 3; flex-basis: 74%; }

.box1_2    { display: flex; flex-direction: row; align-items: flex-start; }
.box_a { order: 1; flex-basis: 75%; }
.box_b { order: 2; flex-basis: 25%; }


.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; }


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

footer { display:flex; }
.footbox1 { order: 1; flex-basis: 40%; }
.footbox2 { order: 2; flex-basis: 60%; }


}

/* ----------------------
   Basisformatierung
   ----------------------  */


header    { width:100%; height:auto; }


#titelzeile {   display:none;}
#titelzeile h1 {  font-family: 'Julius', sans-serif; text-align:center; letter-spacing:2px; text-shadow: 5px 5px 10px #000;}

td,h3,h4,p,a,li { font-family: 'Montserrat', sans-serif; font-weight:100; }

h1        { font-family: 'Julius', sans-serif; font-size:35px; line-height:1.6em; color:#fff; letter-spacing: 2px; text-shadow: 3px 3px 7px #253947; padding: 0 0 0.5em 0; }
h2        { font-family: 'Julius', sans-serif; font-size:25px; line-height:1.4em; color:#fff; letter-spacing: 2px; padding: 0 0 0.5em 0; padding-top:20px; }
h3        { font-family: 'Montserrat', sans-serif; font-size:27px; line-height:1.4em; color:#fff; padding: 0 0 0.5em 0; }
h4        { font-size:1em; line-height: 1.7em; color:#cb0a1d; font-weight:100; }
h5        { font-family: 'Julius', sans-serif; font-size:33px; line-height:44px; color:#6e889a; font-weight:100; background:#fff; display:block;
          border-radius: 50%; width:45px; height:45px; text-align: center; padding:0px; }
p         { font-size:18px; line-height:28px; color:#fff; }
b         { font-weight:800; }
.klein    { font-size:0.7em; line-height: 1.2em; }

.menubar { display:none; }
.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #fff; margin: 6px; transition: 0.4s; }
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px);
               transform: rotate(-45deg) translate(-9px, 6px); }
.change .bar2 { opacity: 0; }
.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px);
               transform: rotate(45deg) translate(-8px, -8px); }


nav    { background:#f1ebe5; }
.menu    { margin: 0 auto; padding:0; text-align:center; max-width: 1200px; }
.menu li { }
.menu a { font-family: 'Julius', sans-serif; font-size:16px; font-weight:500; color:#3a4f5f; display: block; letter-spacing: 2px;
         line-height:16px; text-align:center; padding:1.2em 0.3em; }
.menu a:hover { color:#384956; background-color:#d9d3ce; transition:background 0.4s; }

.box { max-width:1200px; margin:0 auto; padding-top: 20px; padding-bottom: 20px; }
.box p    { font-size:16px; line-height:28px; color:#fff;  }
.box p span   { color:#abb0b6;  }
.box_li    { padding: 4px; margin:4px; }
.box_re    { padding: 4px; margin:4px; }

.boxfr     { padding-bottom: 20px; }
.boxfr_li   { margin:10px; }

.box1_3  {  max-width:1200px; background: #c3c8cb; border-bottom: 2px solid #314b5c; padding-top: 8px; padding-bottom: 8px;}
.box1,box2,box3 {  }
.box1_3 p {  margin: 8px; font-size:16px; font-weight:300; color:#1e384e;  }

.box_b     { background: #55798c; padding: 6px; }

.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: 30px; width:auto; padding: 12px; color:#372719; line-height: 0.4em;}

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

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         { max-width: 1200px; margin:0 auto; }
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) { animation: fade 20s ease-in-out infinite; }
#stapel1 img:nth-of-type(2) { animation: fade 20s 4s ease-in-out infinite; }
#stapel1 img:nth-of-type(3) { animation: fade 20s 8s ease-in-out infinite; }
#stapel1 img:nth-of-type(4) { animation: fade 20s 12s ease-in-out infinite; }
#stapel1 img:nth-of-type(5) { 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: 2px; width: 100%; max-width:1200px; background: #a0afb1; }
th, td {  border: none; padding: 8px; font-size:1em; font-weight:300; color:#fff;  }
tr  { vertical-align: top; background: #314b5c; }

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; }


footer { width:100%; background: #a0afb1; padding: 10px; }
.footbox1 { margin: 10px; text-align:right; }
.footbox2 { margin: 10px; }
.foot { font-size:15px; color: #fff; line-height:23px; }
a.footer:link    { color:#fff; font-size:15px; font-weight:100; line-height:21px; }
a.footer:visited { color:#fff; }
a.footer:hover   { color:#fff; font-weight:800; }
a.footer:active  { color:#fff; }

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

.smartbild    { display:none; }

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

.rechts { text-align:right; }

@media all and (max-width: 600px) {

        #titel {  display:none; }
        #titelzeile { display:block; margin: 1.3em auto; }
        article        { width:100%; padding:0; margin:0; }
        .map_bild, .map_text   { width:100%; padding:0; margin:0; }
        .map        { width:100%; padding:0; margin:0; }
        p, h2    { margin:6px; }
        table        { width:100%; border-spacing: 2px; margin:0;}
        nav a { padding:1em 0.5em 1em 0.5em;  }
        .box_re    { padding: 0; margin:0; }
        .item     { width:100%; height:auto; }

        header  { padding:0; text-align:center; height:auto; }
        .kontakt  { font-size:1em; line-height: 1.15em; text-align:center; }

        nav { text-align:center; }
        .box { margin:0; padding:0; }

        .footbox1 { margin: 6px; text-align:left; width:100%; }
        .footbox2 { margin: 6px; text-align:left; width:100%; }

     }