@charset "UTF-8";
@import url('normalize.css');
@import url('fonts.css');
@import url('all.css');
@import url('all.min.css');
@import url('brands.css');
@import url('brands.min.css');
@import url('fontawesome.css');
@import url('fontawesome.min.css');
@import url('regular.css');
@import url('regular.min.css');
@import url('solid.css');
@import url('solid.min.css');
@import url('svg-with-js.css');
@import url('svg-with-js..min.css');
@import url('v4-shims.css');
@import url('v4-shims.min.css');
/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/
:root {
    --font-family: 'nunito', helvetica,arial, sans-serif;
}
@media (prefers-color-scheme: light) {
    :root {
        --font-color: #1d2731;        /* Ivory Black*/
        --background-color: #fff;
        --body-color: #ddd;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --font-color: #fff;
        --background-color: #1d2731;
        --body-color: #081e3d;
    }
    .container {
        --background-color: #295e6f;        
    }
    .article {
        --background-color: #081e3d;        
    }
    img {
        opacity: 0.8;
        transition: opacity ease-in-out 0.25s;
    }
    img:hover {
        opacity: 1;
        transition: opacity ease-in-out 0.25s;
    }
}
html {
    box-sizing: border-box;
    background-color:  var(--background-color, #ddd);
}
*, *::before, *::after {
  box-sizing: inherit; 
}
.wrapper {
   background-color: var(--background-color, #ddd);
}
body {
/*---------------------------------------------------------------
        Änderungen für Light oder Dark Scheme
---------------------------------------------------------------*/
    font-family: var(--font-family);
    background-color: var(--background-color, #ddd);
    color: var(--font-color, #000);
    /*---------------------------------------------------------*/
    font-size: 1.25rem;
    line-height: 125%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', Helvetica, arial, sans-serif;
}
h1 {
    font-size: 2.5rem;
    padding-bottom: 0.2em;    
}
h2 {
    font-size: 1.5rem;    
}
h3 {font-size: 1.25rem;}
h4 {font-size: 1.0rem; font-weight: bold; /*padding-bottom: -1em*/}
hr {
    color: var(--font-color,#1d2731);
    font-weight: bold;
    margin-top: 1em;
}
p {font-size: 1.0rem;}
ul {padding: 0;}
/* ------------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
.header {
    text-align: center;
    padding: 0.25em 1em;
    color: white;
    background-image: url(../images/fofv_sp.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #295e6f;    
}
.header a:link, .header a:visited {
    text-decoration: none;
    color: #efefef;
}
.header:active {
    text-decoration: none;
    color: #efefef;
}
/*Navigation ---------------------------------------------------------*/
nav {
    background-color: #081e3d;
    color: white;
    border-top:  1px solid white;
    border-bottom:  1px solid white;
}
.nav-ul {
    margin: 0;    
}
.nav-li {
    list-style: none;
    margin-left: 0;
    border-bottom:  1px solid white;
}
.nav-li-a  {
    padding: 0.6em 2rem;
    display: block;
}
.nav-ul a:link {
    text-decoration: none; 
}
.nav-ul a:link, .nav-ul a:visited {
   color: #fff; /* white*/
}
.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active {
   background-color:#295e6f;
   color: #efefef; /* Neutral */
}
.nav-active {
    color: white;
    background-color: #295e6f;
    font-weight: bold;
}
.nav-li-last {
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}
a.header-nav {
    text-decoration: none;
	color: white;
}
a.header-nav:link,
a.header-nav:visited {
    color: white;
}
a.header-nav:hover,
a.header-nav:focus {
    /*color: white;
    transition: all 0.2s ease-out;*/
}
a.header-nav {
    text-decoration: none;
	color: white;
}
/* ----------------------------------------------------------------------
     Auf- und zuklappbares Menü (Hamburger-Menü)
-----------------------------------------------------------------------*/
.menubutton {
    padding: 0.6em 2rem;
    background-color: #081e3d;
    text-decoration: none;
}
.menubutton a:link {
    text-decoration: none;
}
.menubutton .menu-active {
    display: none;
    color: white;    
}
.menubutton .menu-inactive {
    color: white;
}
#menu:target .menu-inactive {
    display: none;   
}
#menu:target .menu-active {
    display: block;
}
nav { /*Navigationsmenu ausblenden*/
    transition: 0.25s;
    max-height: 0;
    display: none;
}
#menu:target nav {
    max-height: 25rem;
    display: block;
}
/* Inhalt-----------------------------------------------------------------*/
.aside {
    display: table-cell;
    padding: 0 1em;
}
.container {
    background-color: var(--background-color, #fff);
    color: var(--font-color, #1d2731/*Ivory Black*/);
}
.article {
    display: table-cell;
    padding: 0 1em;
}
.article a:link {
    color: var(--font-color,#000);
}
.article a:hover, a:focus, a:visited {
    font-weight: bold;
}
.article-ul {
    list-style: none;
}
.article-li {
    font-size: 0.9rem;
    margin-left: 1.8em;
    margin-bottom: 1.5em;
    padding-left: 1.8em; /*Abstand Icon -> Text*/
}
.article-li a:link, .article-li a:visited {
    text-decoration: none;
    color: var(--font-color,#000);
    padding: 8px 8px;
    border-radius: 5px;
    background-color: var(--body-color, #ddd) ;
    opacity: 0.8;
}
.article-li a:hover, .article-li a:focus {
    color: var(--font-color,#000);
    font-weight: bold;
    border: 1px solid var(--font-color, #000);
}
.article-half {
    padding: 0 1rem 0 1rem;
    /*clear: both;*/
}
.row {
    clear: both;
}
/*--------------------------------------------------------------------------
    Icons als Listenzeichen
--------------------------------------------------------------------------*/
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: -1.8em; /*gleich padding-left von li*/
    width: 1.8em; /*gleich padding-left von li*/
}
.phone::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f87b";
    font-weight: 900;
    }
.envelope::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f0e0";
    font-weight: 900;
}
.addresscard::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f2bb";
    font-weight: 900;
    }
.arrow-right::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f35a";
    font-weight: 900;
}
.arrow-left::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f359";
    font-weight: 900;
}
.fax::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f1ac";
    font-weight: 900;
}
/* Schalter "Nach Oben"----------------------------------------------------*/
#up {
    position: fixed;
    bottom: 80px;
    right: 10px;
    padding: 0.75em;
    border: darkgrey 2px solid;
    border-radius: 60px;
    background-color: #081e3d;
    opacity: 0.8;
    box-shadow: 2px, 2px, 1px, 1px gray;
    text-decoration: none;
    color: #efefef;
    text-align: center;
    display: none;
}
#up:hover, #up:focus {
    bottom: 5.5rem;
    background-color: #295e6f;
    transition: all 0.2s ease-out;
}
/*Fusszeile---------------------------------------------------------------*/
.footer {
    background-color: #081e3d;
    color: #efefef;
    padding: 0.5em;
    text-align: center;
    border-top: 1px solid #efefef;
}
.div_footer {
    width: 95%;
    font-size: 1rem;
    padding: 0.2em;    
}
.div_footer a:link, .div_footer a:visited{
    color: #efefef;
    text-decoration: none;
}
.div_footer a:hover, .div_footer a:focus {
    background-color: #295e6f;    
    border-radius: 0.3em;
    padding: 0.5em 1.5em;
    font-weight: bold;
}
/* Aufzählung Kontakt-----------------------------------------------------*/
.contact-p {
    font-size: .65rem;    
    padding-left: .5em;
}
/* Bilder-----------------------------------------------------------------*/
img {
    max-width: 50%;
    height: auto;
}
img.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 8px;
}
img.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 8px;
}
img.fullwidth {
    max-width: 100%;
    height: auto;
}
figure {
    width: 50%;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    margin: 0.5em;
    padding: 0.5em;
}
figure img {
    max-width: 100%;
}
figure.figure_left {
    float: left;
}
figure.figure_right {
    float: right;
}
figure.figure_center {
    float: inherit;
}
figure.figure_fullsize {
    width: 100%;
}
img.img_scaled {
    width: 100%;
}
figcaption {
    background-color: lightgray;
}

/* ------------------------------------------------------------------------
     Formulare und Schaltflächen                                           
------------------------------------------------------------------------- */
form {
    padding: 10px;
}
fieldset {
    padding: 10px;
    border: 0;
}
input, textarea {
    border: 1px solid #CCCCCC;
    border-radius: 0.5em;
    padding: 0.5rem;
    line-height: 1.3;
    max-width: 24em;
    min-width: 12em;
    font-family: 'nunito', sans-serif;
    font-size: 1rem;
}
input:hover, textarea:hover {
    border: 2px solid var(--font-color, #1d2731);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }
input[type="submit"], input[type="reset"] {
    max-width: 12em;
    min-width: 10em;
    border-radius: 0.5em;
}
input[type="submit"]:hover, input[type="submit"]:focus {
    background:#66cc00;
    border: 2px solid #6c6c6c; 
  }  
input[type="reset"]:hover, input[type="reset"]:focus {
    background: #EC663A;
    border: 2px solid #6c6c6c;
}
input[type="submit"]:active, input[type="reset"]:active {
    background:#8f8f8f;
  }
label {
    font-weight: bold;    
}
legend {
    font-size: 1.75rem;
    font-weight: bold;
}
.label {
    margin-top: 1em;
}
input:required + label::after {
    color: red;
}
textarea:required + label::after {
    color: red;
}
/*---------------------------------------------------------------------------   
     Tabletversion ab 640 Pixel                          
       640px / 16px/em = 40em  
       + 2 Spalten
         - Header und Navigation oben untereinander
		 - Hautpinhalt und Seitenleiste nebeneinander
		 - Fußleiste unten
----------------------------------------------------------------------------*/
@media screen and (min-width: 40em) {
    .header {
      background-image: url(../images/fofv_tb.svg);
      background-size: 100% auto;
      background-position: center;
      background-repeat: no-repeat;
      padding: .35em 1.5em .35em 1.5em;
      text-align: left;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .div_header {
        width: 50%;
    }
    .header_left {
        text-align: left;
    }
    .header_right {
        text-align: right;
        padding-top: 4em;
    }
    .container {
        display: block;
        overflow: auto;
        padding: 1rem 0;
    }
    .content {
        float: inherit;
        width: 80%;
        padding: 0 2rem 0 1rem;
        margin: 0 auto;
    }
    .nav-ul {
        padding: 0 2rem;
        overflow: hidden;
    }
    .nav-li {
        float: left;
        display: inline-block;
        border: none;
        width: auto;
    }
    .nav-li-a{
        padding: 0.7em 1.2rem;
        display: inline-block;
    }
    nav {
        max-height: 25rem;
        display: block;
    }
    .menubutton {
        display: none;
    }
    .footer {
        padding: 1em;
        text-align: center;
        background-color: #081e3d;
        color: white;
        border-top: 1px solid white;
        clear: both;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .div_footer {
        width: 33.33%;
        font-size: 1rem;
        padding: 0.2em;
    }
    textarea {
        width: 30em;
    }
}
/*--------------------------------------------------
Bildschrime ab 1.024 Pixel
----------------------------------------------------*/
@media screen and (min-width: 64em) {
    html {
        background-color: var(--body-color, #fff);
    }
    body {
        padding: 1.5em;
    }
    .wrapper {
        margin: 0 auto;
    }
    .header {
    background-image: url(../images/fofv_dt.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    }
    .article-half {
        display: block;
        width: 50%;
        float: left;
        clear: none;
    }
}
/* ------------------------------------------------
Große Bildschirme >1.280 Pixel
---------------------------------------------------*/
@media screen and (min-width: 80em) {
    .wrapper {
        margin: 0 auto;
        max-width: 80em;        
    }
}