/*
visit-format.css Zusammenfassung allgemein gültiger Formatangaben
Letzte Änderung am 16.11.2020

Schriftgrößen
.fra_aussen
.fra_aussen:before graues Hintergrundbild
.flex_container_uebersicht
.kopfzeile
.fusszeile
.fra_btn_hor
.fra_btn_ver
.btn_link_l, btn_link_m
.btn_link_l a, btn_link_m a
.btn_link_l a:hover, btn_link_m a:hover


*/
 @import url(visit_const.css);

  html, body {
    height: 100%;
  }


.testclass{
  color:blue;
  background-color: grey;
}

/*Formatangaben für Bildschirmgröße Mobiltelefon*/
  h1, h2, h3, h4, p, a {
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02, Arial, Helvetica, Sans-serif);
color: #114B5F;
    color: var(--col_txt; #009900);
  }

  h1 {
    font-size: 1.5em;
    line-height: 100%;
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1em;
font-weight: normal;
  }

  h4 {
    font-size: 0.9em;
font-weight: normal;
  }

  p, a {
    font-size: 0.9em;
    line-height: 140%;
  }

  header .logo {
    margin-top: -2.5em;
    width: 7em;
  }

  .hide_on_small {
    display: none;
/*    position: absolute;
    top: auto;
    left: -30000px;*/
}

/*Formatangaben für Bildschirmgröße Tablet*/
  @media only screen and (min-width: 376px) and (max-width: 800px) {
    h1, h2, h3, h4, p, a {
font-family: Arial, Helvetica, sans-serif;
      font-family: var(--font_fam_02, Arial, Helvetica, Sans-serif);
color: #114B5F;
      color: var(--col_txt; #009900);
    }

    h1 {
      font-size: 1.7em;
    }

    h2 {
      font-size: 1.2em;
    }

    h3 {
      font-size: 1.1em;
    }

    h4 {
      font-size: 0.8em;
    }

    p, a {
      font-size: 0.9em;
      line-height: 140%;
    }

    header .logo {
      margin-top: -4em;
      width: 9.5em;
    }

  }

/*Formatangaben für Bildschirmgröße Desktop*/
  @media only screen and (min-width: 801px) {
    h1, h2, h3, h4, p, a {
font-family: Arial, Helvetica, sans-serif;
      font-family: var(--font_fam_02, Arial, Helvetica, Sans-serif);
color: #114B5F;
      color: var(--col_txt; #009900);
    }

    h1 {
      font-size: 2em;
    }

    h2 {
      font-size: 1.5em;
    }

    h3 {
      font-size: 1.2em;
    }

    h4 {
      font-size: 1em;
    }

    p, a, td {
      font-size: 1em;
      line-height: 140%;
    }

    header .logo {
      margin-top: -5em;
      width: 12.5em;
    }

    .hide_on_large {
      position: absolute;
      top: auto;
      left: -30000px;
    }

    .hide_on_small {
      display: inline;
    }

  }

    .fra_txt_img {
background-color: #FBF7EE;
    background-color: var(--bkcol_body, #FFFFFF);
    }

    .fra_txt_img a:link {
      color: blue;
    }

    .fra_txt_img a:visited:focus {
      color: purple;
    }

  .fra_aussen {
    position: relative;
    max-width: 960px;
    height: auto;
    margin: 0 auto 0 auto;
background-color: #FBF7EE;
    background-color: var(--bkcol_body, #FFFFFF);
border: #FBF7EE 4px solid;
    border: var(--bkcol_body, #FFFFFF) 4px solid;
  }

@media screen and (min-width: 40em) {
  .fra_aussen:before { /*graues Hintergrundbild*/
    content: "";
    position: fixed;
    top: -5%;
    left: -5%;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    background-image: url(../img/body_01.jpg);
    background-size: cover;
    width: 110%;
    height: 110%;
-ms-filter: grayscale(100%);
    filter: grayscale(100%);
  }
}

/*Hauptbereich für die Bilder in den Seiten stadt_de.php und region_de.php*/
  .flex_container_uebersicht {
display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
    max-width: 100%;
    margin-top: 1em;
    padding-top: 0.2em;
   }

/*Textbereich für alle Seiten außer stadt_de.php und region_de.php*/
  .fra_txt_img {
    margin: 1em auto 1em auto;
    max-width: 42em;
    min-height: 100%;
    height: auto;
color: #114B5F;
    color: var(--col_txt, #333);
background-color: #FFFFFF;
    background-color: var(--bkcol_txt, #FFFFFF);
    padding: 0.1em;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02);
    line-height: 140%;
  }

  .kopfzeile {
    height: 2.5em;
display: -ms-flex-box;
    display: flex;
    justify-content: space-between;
background-color: #1A936F;
    background-color: var(--bkcol_kopf, #DDDDDD);
  }

  .fusszeile_2 {
    height: 3.5em;
display: -ms-flex-box;
    display: flex;
    justify-content: space-between;
background-color: #1A936F;
    background-color: var(--bkcol_kopf, #DDDDDD);
  }

  .fusszeile_3 {
    height: 5em;
display: -ms-flex-box;
    display: flex;
    justify-content: space-between;
background-color: #1A936F;
    background-color: var(--bkcol_kopf, #DDDDDD);
  }

  .fra_btn_hor {
      height: 100%;
      display: flex;
      justify-content: space-between;
    }

  .fra_btn_ver {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

  .btn_link_l, .btn_link_m {
    height: 100%;
    margin: 0 0.1em 0 0.1em;
    display: table-cell;
display: -ms-flex-box;
    display: flex;
    justify-content: center;
background-color: #1A936F;
    background-color: var(--bkcol_kopf, #DDDDDD);
  }

  .btn_link_l {
    width: 100%;
    margin: 0.1em 0 0.1em 0;
  }

  .btn_link_l a, .btn_link_m a {
display: -ms-flex-box;
    display: flex;
-ms-align-items: center;
    align-items: center;
    height: 100%;
    width: 100%;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_01, Arial, Helvetica, sans-serif);
    font-size: 1em;
color: #FFFFFF;
    color: var(--col_link, #FFFFFF);
    text-decoration: none;
  }

 .btn_link_l a {
   text-align: left;
 }

 .btn_link_l a:hover, .btn_link_m a:hover {
background-color: #FBF7EE;
    background-color: var(--bkcol_btn, #FFFFFF);
color: #009900;
    color: var(--col_txt, #009900);
  }

/*Rahmen für die Passbilder der beiden Chefinnen und zugehörigen Text für die Seiten heome_de.php, home_it.php, home_en.php*/
  .fra_passbild_text {
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
    width:10em;
    text-align: center;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02);
    font-size: 1em;
    margin: 0.1em 2em 0.3em 2em;
    padding-bottom: 0.5em;
  }

  .fra_passbild_text a {
    color: var(--bkcol_kopf, #009900);
    text-decoration: none;
  }

/*Bereichder Passbilder der beiden Chefinnen für die Seiten heome_de.php, home_it.php, home_en.php*/
  .passbild_text {
    background-size: contain;
    max-width: 100%;
    display: block;
    margin: 0.1em auto 0.1em auto;
    height: auto;
    line-height: 140%;
  }

  body {
    height: 100%;
padding: 1em;
    padding: 0em;
background-color: #DDDDDD;
    background-color: var(--bkcol_screen, #DDDDDD);
/*    font-size: 16px;*/
  }

  .fra_menu {
/*    background-color: #FFFFFF;*/
    position: -webkit-sticky;
    position: sticky;
    top: 00;
    z-index: 999;
  }

  .flex-container_detail {
    justify-content: center;
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
color: #114B5F;
    color: var(--col_txt, #333);
    width: 100%;
    margin-top: 1em;
    margin-left: 0.1em;
    padding-top: 1em;
   }

  header .titelbild {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 0px;
    display: block;
    z-index: 0;
  }

  header .logo {
    position: absolute;
    left: 0;
/*    margin-top: -5em;
    width: 12.5em;*/
    z-index: 1;
  }

  .fhrg_de {
    max-width: 80%;
    height: auto;
    margin: 0 auto 0 auto;
    padding: 0.1em 0.1em 0.1em 0.5em;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02);
    line-height: 140%;
  }

  .fra_bild_text {
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
/*  width wird in der einzelnen Datei eingestellt, je nachdem ob es sich um ein- oder zweispaltige Darstellung handelt */
    margin: 1em;
    text-align: left;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02);
    font-size: 1em;
    padding-bottom: 1em;
  }

/*Container für ein einzelnes Foto*/
  .bild_text {
    background-size: contain;
    max-width: 100%;
    display: block;
    margin: 0.1em auto 0.1em auto;
    height: auto;
    line-height: 140%;
  }

.Xfra_body {
position: relative;
max-width: 960px;
width: 100%;
height: auto;
margin: 0 auto 0 auto;
font-size: 12;
background: var(--bkcol_body, #FFFFFF);
border: var(--bkcol_body, #FFFFFF) 4px solid;
}

@media screen and (min-width: 40em) {
.Xfra_body:before { /*graues Hintergrundbild*/
content: "";
position: fixed;
top: -5%;
left: -5%;
right: 0;
bottom: 0;
z-index: -1;
display: block;
background-image: url(../img/body_01.JPG);
background-size: cover;
width: 110%;
height: 110%;
filter: grayscale(100%);
}
}