@font-face {
font-family: FagoNo;
src: url("../fonts/FagoNoBlack_LFRoman.ttf");
src: url("../fonts/FagoNoBold_LFRoman.ttf");
src: url("../fonts/FagoNoRegular_LFRoman.ttf");
}
@font-face {
font-family: gothic_bold;
src: url('../fonts/gothic.ttf')
format("truetype");
}
@font-face {
font-family: gothic_bold;
src: url('../fonts/gothic-bold.ttf')
format("truetype");
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, sub, sup, b, u, i, center, ol, ul, li, table, tbody, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
position: relative;
box-sizing: border-box;
}
@-ms-viewport { width: device-width; }
body {
font-family: Lato, Arial, Helvetica, sans-serif;
background: #FFF;
line-height: 23px;
font-size: 15px; /* Datenbank */
color: #333;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
}
html, body{height: 100%;}
div { box-sizing: border-box; }
.clear { clear: both; }
p { margin: 0px; }
.vollebreite{ max-width: 100%!important; }
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 768px) {
.mobilvollebreite{ max-width: 100%!important; }
}
/* -------- MEDIA QUERIES ENDE -------- */
a {
color: inherit;
opacity: 1;
text-decoration: none!important;
}
a:hover { opacity: 0.8; }
.logo a:hover { opacity: 1; }
/* =========================== Allgemeine Formatierung ============================== */
/* ===================== Hyphens ===================== */
body, h1, h2, h3, h4, h5, h6, ul, li{
-moz-hyphens: manual;
-o-hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
a{
-moz-hyphens: none!important;
-o-hyphens: none!important;
-webkit-hyphens: none!important;
-ms-hyphens: none!important;
hyphens: none!important;
}
.hyphensauto{
-moz-hyphens: auto!important;
-o-hyphens: auto!important;
-webkit-hyphens: auto!important;
-ms-hyphens: auto!important;
hyphens: auto!important;
}
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 624px) {
body {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
/* -------- MEDIA QUERIES ENDE -------- */
/* =================== Hyphens ENDE ================== */
/* ==================== Schriften ==================== */
.uppercase{ text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
h1, h2, h3, h4, h5, h6{ line-height: normal; }
.h2bold{
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 27px;
text-align: left;
font-weight: 700;
} /* Datenbank */
.textbold{
font-family: Lato, Arial, Helvetica, sans-serif;
font-weight: 700;
} /* Datenbank */
/* ================== Schriften ENDE ================== */
/* ===================== anordnen ===================== */
.center{ text-align: center!important; }
.alignleft{ text-align: left!important; }
.alignright{ text-align: right!important; }
.vcenter{ /* Vertikal zentriert */
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
justify-content:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
}
.flexbox {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.left, .right {
float: left;
width: 48%;
}
.left { margin-right: 4%; }
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 624px) {
.left, .right {
float: none;
width: 100%;
}
.left { margin-right: 0%; }
.right{ margin-top: 20px; }
.mobilcenter { text-align: center!important; }
}
/* -------- MEDIA QUERIES ENDE -------- */
/* =================== anordnen ENDE ================== */
/* ===================== Abstände ===================== */
.padding{ padding: 30px; }
.margin{ margin: 30px!important; }
.ptop-1x { padding-top: 10px; }
.pbottom-1x { padding-bottom: 10px; }
.pleft-1x { padding-left: 10px; }
.pright-1x { padding-right: 10px; }
.ptop-2x { padding-top: 20px; }
.pbottom-2x { padding-bottom: 20px; }
.pleft-2x { padding-left: 20px; }
.pright-2x { padding-right: 20px; }
.ptop-3x { padding-top: 30px; }
.pbottom-3x { padding-bottom: 30px; }
.pleft-3x { padding-left: 30px; }
.pright-3x { padding-right: 30px; }
.ptop-4x { padding-top: 40px; }
.pbottom-4x { padding-bottom: 40px; }
.pleft-4x { padding-left: 40px; }
.pright-4x { padding-right: 40px; }
.ptop-5x { padding-top: 50px; }
.pbottom-5x { padding-bottom: 50px; }
.pleft-5x { padding-left: 50px; }
.pright-5x { padding-right: 50px; }
.mtop-1x { margin-top: 10px!important; }
.mbottom-1x { margin-bottom: 10px!important; }
.mleft-1x { margin-left: 10px!important; }
.mright-1x { margin-right: 10px!important; }
.mtop-2x { margin-top: 20px!important; }
.mbottom-2x { margin-bottom: 20px!important; }
.mleft-2x { margin-left: 20px!important; }
.mright-2x { margin-right: 20px!important; }
.mtop-3x { margin-top: 30px!important; }
.mbottom-3x { margin-bottom: 30px!important; }
.mleft-3x { margin-left: 30px!important; }
.mright-3x { margin-right: 30px!important; }
.mtop-4x { margin-top: 40px!important; }
.mbottom-4x { margin-bottom: 40px!important; }
.mleft-4x { margin-left: 40px!important; }
.mright-4x { margin-right: 40px!important; }
.gap{ padding-top: 10px; }
/* =================== Abstände ENDE ================== */
.container {
background-color: none;
width: 1024px!important;
margin: 0px auto!important;
max-width: calc(100% - 60px)!important;
}
/* ====================== Listen ====================== */
ul { list-style: none; }
ul li::before {
content: "\25CF";
color: #000;
font-weight: bold;
margin-left: -1.5em; /* dieser Wert bestimmt den Abstand zwischen bullet und Text */
position: absolute;
}
li {
padding-left: 20px; /* mit diesem Wert wird die Liste eingerückt */
margin-left: 0px;
padding-bottom: 6px;
padding-right: 5px;
}
li:hover{
margin-left: 5px;
padding-right: 0px;
}
/* ==================== Listen ENDE =================== */
/* ========================= Allgemeine Formatierung Ende ============================ */
/* =========================== Spezifische Formatierung ============================== */
/* ====================== Farben ====================== */
.weiss{ color: #FFF; }
.schwarz{ color: #333; }
.grau{ color: #666; }
.bgschwarz{ background: #000000; }
.bgweiss{ background: #FFF; }
.bggrau{ background: #333333; }
.bgfarbe01{ background: rgb(58,127,138,1); }
.farbe01{ color: rgb(58,127,138,1); }
.javrot{color:#E20E18}
/* ==================== Farben ENDE =================== */
/* ====================== Buttons ===================== */
.button1{
border: 1px solid #333;
text-align: center;
padding: 20px;
}
.button1:hover{ background: rgb(51,51,51,1);}
.button2{ margin-top: 40px; }
.button2 a{
width: 210px;
border: 2px solid #FFF;
border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 10px 25px;
text-transform: uppercase;
}
.button2 a:hover{ background: #333; opacity: 1; }
/* =================== Buttons ENDE =================== */
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 988px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}
/* -------- MEDIA QUERIES ENDE -------- */
.menumargintop{margin-top: 135px;}
.menupaddingtop{padding-top: 250px;}
.weissraum_oben{margin-top: 70px!important;}
.weissraum_oben_2{margin-top: 70px!important;}
.weissraum_unten{margin-bottom: 70px!important;}
.weissraum_oben_ohne_header{margin-top: 150px!important;}
.weissraum_unten_ohne_header{margin-bottom: 204px!important;}
.header_ueberschrift_ges{font-size:50px!important;}
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 988px) {.header_ueberschrift_ges{font-size:40px!important;}}
@media screen and (max-width: 768px) {.header_ueberschrift_ges{font-size:35px!important;}}
@media screen and (max-width: 480px) {.header_ueberschrift_ges{font-size:30px!important; text-align:center;}}
/* -------- MEDIA QUERIES ENDE -------- */
.abstand_menu_n{ padding-top: 224.5px;}
.inhalt_n{
min-height: calc(100% - 493px)!important;
padding: 70px 20px!important;
}
/* ---------- MEDIA QUERIES ---------- */
@media screen and (max-width: 1100px) {}
@media screen and (max-width: 988px) {
.inhalt_n{ min-height: calc(100% - 583px)!important; }
}
@media screen and (max-width: 910px) {}
@media screen and (max-width: 820px) {
.abstand_menu_n{ padding-top: 194.5px;}
.inhalt_n{ min-height: calc(100% - 553.4px)!important; }
}
@media screen and (max-width: 768px) {
.abstand_menu_n{ padding-top: 171px;}
.inhalt_n{ min-height: auto; }
}
@media screen and (max-width: 600px) {
.inhalt_n{ min-height: calc(100% - 776.8px)!important; }
}
/* -------- MEDIA QUERIES ENDE -------- */