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

* { padding:0; margin:0; text-decoration:none; border:0; box-sizing: border-box; font-family: Montserrat, Century Gothic, Arial, sans-serif; font-weight:400; }

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

/* FLEXBOX */


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

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

.menu     { display: flex; justify-content: center; }
     .me  { flex-basis: 20%; }

.text { display: flex; flex-direction: row; }
     .bild_li { order: 1; flex-basis: 30%; }
     .text_re { order: 2; flex-basis: 70%; }

footer { display: flex; flex-direction: row; justify-content: center; }
.foo  { flex-basis: 30%; }

.bild     { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; }
.box      { flex-basis: 15%; }

.bild_aktion     { display: flex; flex-wrap: wrap; flex-direction: row; }
.box_aktion      { flex-basis: 15%; }

.bild_kl     { display: flex; flex-wrap: wrap; flex-direction: row; }
.bild_k { flex-basis: 20%; }

.lin     { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
.l1 { flex-basis: 45%; }
.l2 { flex-basis: 10%; }
.l3 { flex-basis: 45%; }

}

/* ----------------------
   Basisformatierung
   ----------------------  */
body      { background: #e1d9cc; background: url(img/bg8.jpg) fixed center top; background-size: cover; width:100%; color:#303030; margin: 0 auto; }
header    { width:100%; height:auto; background:#62626d; }
.text  { margin: 0 auto; max-width: 1200px; background-image: radial-gradient(#c8c1b2,#b2aa9a); padding:10px; margin-top:20px; }

.logo     { width:230px; height:230px; margin:10px; }

h1,h2,h3  { font-family: 'Cabin', Comic Sans, sans-serif; font-weight:500; }
p,a,td    { font-family: Montserrat, Century Gothic, Arial, sans-serif; font-weight:400;  }

p         { font-size:18px; line-height: 26px; color:#373531; padding:10px 5px 20px 20px; }
h1        { font-size:44px; line-height: 44px; color:#545462; padding:25px 5px 5px 20px; }
h2        { font-size:44px; line-height: 44px; color:#545462; padding:15px 5px 5px 20px; }
h3        { font-size:32px; line-height: 34px; color:#545462; padding:20px 5px 5px 20px; }
h4        { font-size:18px; line-height: 18px; color:#545462; padding:10px 5px 5px 20px; }
h5        { font-size:1.1em; line-height: 1.7em; color:#cb0a1d; font-weight:100; }
b         { color:#872835;  }
.klein    { font-size:14px; line-height:19px; color:#303030; }

.center   { text-align:center; }

li        { font-size:14px; line-height:19px; color:#303030; margin-left:40px; list-style-type: square; }

nav            { background: #665f59; width:100%; height:auto; }
.menu          { margin: 0 auto; padding:0; text-align:center; max-width:1200px; }
.me            { display: block; }
.me a          { font-size:20px; font-weight:400; color:#fff; line-height:30px; text-align:center; display: block; padding:20px 2px; }
.me a:hover    { color:#ffffff; background-color:#4a443a; transition:background 0.5s; }
.dropdown      { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background: #88807a; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
               z-index: 1; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a          { font-size:20px; font-weight:400; color:#000; line-height:20px; text-align:center; display: block; padding:12px 2px; }


i { color: #fff; font-size:27px; padding: 20px 8px; }
.fa:hover { background: #ebe9e7; }

navbar-inverse  { background: #665f59; width:100%; height:auto; }


.logo { height:50px; width:auto; float: left; padding-right:10px; }

.verlauf { background-image: linear-gradient(to top, #978d86 0%, #b5aca6 80%); }

.oben    { text-align: right; padding-right:20px; color:#efefef; }
.oben a   { font-size:60px; line-height:50px; }
.oben a:hover   { color:#4a4842; transition: 0.4s; }

a.stil1:link    { color:#5f5a50; font-size:18px; }
a.stil1:visited { color:#5f5a50; }
a.stil1:hover   { color:#545462; }
a.stil1:active  { color:#545462; }

a.stil2:link    { background:#f5f5f5; display:block; width:100%; height:auto; color:#a02f3e; font-size:1.1em; padding:0.4em 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:#a02f3e; color:#fff; border-bottom: 1px solid #9a9a9a; transition: 0.5s; }
a.stil2:active  { background:#f5f5f5; color:#cb0a1d; border-bottom: 1px solid #9a9a9a; }

a.klein:link    { color:#fff8f2; font-size:14px; }
a.klein:visited { color:#fff8f2; }
a.klein:hover   { color:#fff; }
a.klein:active  { color:#fff8f2; }


.linie    { margin-top: 40px; margin-bottom: 40px; background: url(img/balken.jpg) center top; background-size: cover; width:100%; height:auto; }
.lin      {  display: block; }
.lin a    { font-family: 'Cabin', Comic Sans, sans-serif; font-weight:500; font-size:40px; color:#5b594e; line-height:40px;
          text-align:center; display: block; padding:25px 15px; }
.lin a:hover { color:#ffffff; background: url(img/balken1.jpg) center top; transition:background 0.5s; }

.bild_li  { margin:10px; }
.text_re  { margin:10px; background: #e1d9cc; }


.text_gr         { margin:20px auto; background: #e1d9cc; max-width:1200px; }

.bild     { padding-top:0.8em; }
.box { border: 1px solid #c0c0c0; padding:0.4em; margin:10px; background:#ede2d9; }
.box p    { font-size:14px; line-height:20px; color:#535353; padding:0; margin-top:5px; margin-bottom:8px; }
.box p span   { color:#abb0b6; }

.bild_aktion     { padding-top:0.8em; padding-left:15px; }
.box_aktion { padding:5px;  }
.box_aktion p    { font-size:12px; line-height:18px; color:#535353; padding:0; margin-bottom:8px; }
.box_aktion p span   { color:#abb0b6; }

.bild_k     { margin:4px 8px 4px 0px; }

iframe { width:560px; height:315px; border:0; padding:20px; }

footer { background:#a0917c; width:100%; height:auto; color: #fff; padding:1em; margin-top:1em; }
footer p   { font-size:18px; line-height:22px; color:#2c2c2c; padding:0; margin-bottom:8px; }
a.footer:link    { color:#e2ded8; font-size:18px; font-weight:100; line-height:22px; }
a.footer:visited { color:#fff; }
a.footer:hover   { color:#fff; }
a.footer:active  { color:#fff; }



@media all and (max-width: 450px) {
        .holz { display:none; }
        .linie { display:none; }
        .box { width:100%; height:auto; margin:10px 0 10px 0; }
        .logo { margin:0 auto; }
        h1 { font-size:20px; text-align:center; margin:0; padding:0; }
        .bild_li    { width:100%; margin:0; padding:0.4em; }
        .text_re    { width:100%; margin:0; padding:0.4em; }
        .me a { margin:0 auto; }
        .item     { width:100%; height:auto; }


}