@blau: #449dc3;
@weiss: #fff;
@gray: #000000;
@duenn: 300;
@dick: 500;
@kern: 0.2em;
@kernig: 0.1em;
@eckenkante: 0px;

/* GENERELL */
body { font-family: 'Rubik', sans-serif; color: @gray; }

@media (min-width: 1200px) { .container{ max-width: 800px; } }
.rounded { border-radius: @eckenkante; }
a { color: @blau; }

/* TYPE */
h1 { font-size: 2em; font-weight: @duenn; color: @gray; padding-bottom: 30px; }
h2 { font-size: 1.1em; line-height: 1.2em; font-weight: @duenn; color: @gray; }
h3 { font-size: 1.3em; margin-bottom: 30px !important; text-transform: uppercase; letter-spacing: @kern; font-weight: @duenn; color: @gray;}
h4 { font-size: 2em; line-height: 1.5em; font-weight: @duenn; text-transform: uppercase;  letter-spacing: @kernig; }
h5 { font-size: 1.6em; letter-spacing: @kernig;  }
h6 { font-size: 1em; text-transform: uppercase; letter-spacing: @kern; font-weight: @dick; color: @gray; background-color: @gray; padding: 5px; }
p, .table{ font-size: 0.9em; line-height: 1.4em; color: @gray; font-weight: @duenn;  }

ul { font-size: 0.8em; line-height: 1em; color: @gray; font-weight: 400;  }

.display-4 { line-height: 1; }

/* BEREICHE */
.headliner { background-color: @blau; padding: 30px 0; }
.headliner h1 { color: @blau; margin-top: 30px; }
.headliner h2 { color: @gray; }
.inhalt { padding: 30px 0; }
.vierer { padding: 30px 0; background-image: url('/media/allgemein/wolken.png'); background-position: center bottom;  background-repeat: no-repeat;}
.vierer h3, .vierer p { color: @weiss; }
.fuss { background-color: @blau; padding: 30px 0; }
.fuss p { color: @blau; }

/* BUTTONS */
.btn { text-shadow: 0 0 0 rgba(0,0,0,0);  border-radius: @eckenkante; letter-spacing: @kern; text-transform: uppercase; font-weight: @dick; border: 0; }
.btn-link {  color: @weiss; text-transform: uppercase; }
.btn-link:hover { color: @blau; text-decoration: none; }
.btn-bd { color: @weiss; 
background: -webkit-linear-gradient(90deg, rgb(174, 195, 107), rgb(56, 153, 200)); background: linear-gradient(90deg, rgb(174, 195, 107), rgb(56, 153, 200)); }
.btn-bd:hover { color: @weiss; background-color: lighten(@gray, 20%); border-color: lighten(@gray, 20%); }

/* CARDS */
.card { border: 0; }
.card .bg-light { background-color: lighten(@gray, 10%);}
.card-body {  }
.card-footer {  background-color: @blau; border-top: 0; }
.card-link { color: @weiss; text-transform: uppercase; letter-spacing: @kern; }

/* BILDER FÜR WYSIWYG */
.img-responsive-links { float: left !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; width: auto; border-radius: 6px; margin-right: 15px; margin-bottom: 15px;}
.img-responsive-rechts { float: right !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; width: auto; border-radius: 6px; margin-left: 15px; margin-bottom: 15px; }
.img-50-links { float: left !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 50%; height: auto; width: auto; border-radius: 6px; margin-right: 15px; margin-bottom: 15px;}
.img-50-rechts { float: right !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 50%; height: auto; width: auto; border-radius: 6px; margin-left: 15px; margin-bottom: 15px; }
.img-33-links { float: left !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 33%; height: auto; width: auto; border-radius: 6px; margin-right: 15px; margin-bottom: 15px;}
.img-33-rechts { float: right !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 33%; height: auto; width: auto; border-radius: 6px; margin-left: 15px; margin-bottom: 15px; }
.img-25-links { float: left !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 25%; height: auto; width: auto; border-radius: 6px; margin-right: 15px; margin-bottom: 15px;}
.img-25-rechts { float: right !important; border: 0; -ms-interpolation-mode: bicubic; max-width: 25%; height: auto; width: auto; border-radius: 6px; margin-left: 15px; margin-bottom: 15px; }