/*
gfrr_format.css Zusammenfassung allgemein gültiger Formatangaben
Letzte Änderung am 28.10.2021

Schriftgrößen
.bild_text
body
.btn_gf_auswahl
.btn_gf_close
.btn_link_l, btn_link_m
.btn_link_l a, btn_link_m a
.btn_link_l a:hover, btn_link_m a:hover
.div_klein_hoch
.div_klein_quer
.div_schalter
.flex_container_uebersicht
.fra_aussen
.fra_aussen:before graues Hintergrundbild
.fra_bild_text
.fra_btn_hor
.fra_btn_ver
.fra_gf_auswahl
.fra_img_detail
.fra_menu
.fra_passbild_text
.fra_seitl
.fra_txt_img
.fusszeile_2
.fusszeile_3
gf_ausgabe das ist das DIV, in dem die Liste der Gästeführer dargestellt wird
.header .logo
.header .titelbild
.kopfzeile
.passbild_text
.sel_spr
.sel_spr_titel
.tbl_gf


.flex_container_uebersicht
.fusszeile
*/

@import url(gfrr_const.css);

  html, body {
    height: 100%;
  }

/*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 {
    position: absolute;
    left: 0;
/*    margin-top: -2em;
    width: 7em;*/
    margin-top: -2.1em;
    width: 2.8em;
  }

  .hide_on_small {
    display: none;
  }

  .div_klein_hoch_1, .div_klein_hoch_2, .div_klein_quer_1, .div_klein_quer_2 {
    margin-top: 0.4em;
    height: auto;
  }

  .div_klein_hoch_1 {
    width: 6em;
  }

  .div_klein_quer_1 {
    width: 8em;
  }

  .div_klein_hoch_2 {
    width: 4.5em;
  }

  .div_klein_quer_2 {
    width: 6em;
  }

/*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: -2.5em;
      width: 9.5em;*/
      margin-top: -2.6em;
      width: 3.5em;
    }

    .div_klein_hoch_1, .div_klein_hoch_2, .div_klein_quer_1, .div_klein_quer_2 {
      margin-top: 0.4em;
      height: auto;
    }

    .div_klein_hoch_1 {
      width: 7em;
    }

    .div_klein_quer_1 {
      width: 10em;
    }

    .div_klein_hoch_2 {
      width: 7em;
    }

    .div_klein_quer_2 {
      width: 10em;
    }
  }
/*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: -3.5em;
      width: 12.5em;*/
      margin-top: -4.5em;
      width: 6em;
    }

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

    .hide_on_small {
      display: inline;
    }

    .div_klein_hoch_1, .div_klein_hoch_2, .div_klein_quer_1, .div_klein_quer_2 {
      margin-top: 0.4em;
      height: auto;
    }

    .div_klein_hoch_1 {
      width: 8em;
    }

    .div_klein_quer_1 {
      width: 12em;
    }

    .div_klein_hoch_2 {
      width: 6em;
    }

    .div_klein_quer_2 {
      width: 9em;
    }

  }

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

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

  .btn_gf_auswahl {
    width: 100%;
    display: inline;
    border: 2px solid var(--col_3, #DDDDDD);
border: 2px solid var(--col_3, #FFFFFF);
    border-radius: 0.3em;
/*    margin: 0.1em;*/
    margin: 0.2em 0 0 0;
    padding: 0.1em;
    font-size: 0.9em;
    height: 2.5em;
    background-color:#FFFFFF;
  }

  .btn_gf_auswahl:hover {
background-color: #1A936F;
      background-color: var(--bkcol_btn_hover, #009900);
color: #FBF7EE;
      color: var(--col_btn_hover, #FFFFFF);
  }

  .btn_gf_close {
    padding:  0.3em 0.8em;
border: 1px solid #114B5F;
    border: 1px solid var(--col_1, #DDDDDD);
    background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent);
    background-color: #C00;
    border-radius: 0.2em;
    box-shadow: 0 0.05em 0.25em rgba(0,0,0,0.5);
    color: white;
    text-shadow: 0 -0.05em 0.05em rgba(0,0,0,0.5);
    font-size: 125%;
    line-height: 1.5;
/*    width: auto;
    height:2em;*/
    float: right;
  }

  .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);
  }

  .div_schalter {
    width: 6em;
    height: auto;
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin: 0.4em 0.4em 0 0;
    float: left;
    border: 1px solid var(--col_2, #3A519A);
    border-radius: 0.2em;
    color: var(--col_txt, #114B5F);
    background-color: #57AB55;
  }

/*Hauptbereich für die Bilder in der Seite fhrg_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;
   }

  .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%);
  }
}

  .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;
  }

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

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

  .fra_gf_auswahl {
display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
/*    position: relative;*/
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
    max-width: 100%;
    margin-top: 0;
    padding-top: 0.2em;
  }

  .fra_gf_tab {
      display: none;
      background-color: #FFFFFF;
      position: absolute;
border: 2px solid #114B5F;
      border: 2px solid var(--col_2, #DDDDDD);
      border-radius: 0.3em;
      text-align: left;
      padding: 0.5em;
      width: auto;
      height: auto;
color: #114B5F;
      color: var(--col_txt; #009900);
  }

  .fra_hinweis_1 {
    width: 100;
    height: auto;
    border: 2px solid #FF0000;
    border-radius: 0.3em;
    padding: 0.5em;
    color: #0000FF;
    background-color: #FFFFFF;
    font-size: 90%;
    line-height: 110%;
  }

  .fra_img_detail {
    max-width:500px;
    margin: 0 auto 1em auto;
  }

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

  .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;
  }

/*Textbereich für alle Seiten, außer solche, die nur Bilder enthalten*/
  .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: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
    padding: 0.1em;
font-family: Arial, Helvetica, sans-serif;
    font-family: var(--font_fam_02);
    line-height: 140%;
  }

  .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);
  }

  .gf_ausgabe {
    width: 100;
    height: auto;
    position: absolute;
background-color: #FBF7EE;
    background-color: var(--bkcol_txt, #FFFFFF);
    display:none;
  }

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

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

/*Bereich der Passbilder der beiden Chefinnen für die Seiten home_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%;
  }

  .sel_spr {
    color: var(--col_txt, #114B5F);
    background-color: #FFFFFF;
    font-size: 0.9em;
    height: 2em;
    width: 100%;
    margin: 0;
    padding: 0.2em;
    border: 2px solid var(--col_3, #DDDDDD);
    border-top: 2px solid #ffffff;
    border-radius: 0.2em;
  }

  .sel_spr_titel {
    width: auto;
    border: 2px solid var(--col_3, #DDDDDD);
    font-family: var(--font_fam_02, Arial, Helvetica, Sans-serif);
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: underline;
    margin: 0 0 -0.2em 0;
    padding: 0 0 0 0.4em;
    background-color: var(--col_3, #DDDDDD);
    color: #FFFFFF;
  }

  .tbl_gf {
    display: table;
    border: 2px solid #57AB55;
    border-collapse: collapse;
    width: 100%;
    min-width: 70%;
    min-height: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0.9em;
    color: #333;
    background-color: #FFFFFF;
    text-decoration: none;
    z-index: 1;
  }

  .tbl_gf tr, .tbl_gf tr td {
    border-bottom: 2px solid #57AB55;
    vertical-align: top;
    padding: 0.2em;
  }

  .tbl_gf tr td:nth-of-type(1) {
    width: 100px;
  }




  .tbl_gf tr td .div_href {
    display: inline-block;
    height: 1.6em;
    margin: 0.2em 0 0.2em 0;
  }

  .tbl_gf tr td .btn_pseudo_mob, .btn_pseudo_mmm, .btn_pseudo_www {
    border: 0px solid green;
    border-radius: 2px;
    color: #3A519A;
    background-color: rgba(87, 171, 85, 0.2);
    float: left;
    height: 100%;
    width: 1.5em;
    margin-right: 0.2em;
    text-decoration: none;
    font-size: 1.5em;
    text-align: center;
  }

  .tbl_gf tr td .btn_pseudo_mob {
    font-size: 1.4em;
  }

  .tbl_gf tr td .btn_pseudo_mmm {
    font-size: 1.5em;
    float: right;
  }

  .tbl_gf tr td .btn_pseudo_www {
    font-size: 1.4em;
    padding-left: 0.1em;
    padding-right: 0.1em;
  }

  .tbl_gf tr td .btn_pseudo_mob:hover, .btn_pseudo_mmm:hover, .btn_pseudo_www:hover {
    color: #FFFFFF;
    background-color: rgba(87, 171, 85, 1);
  }





  .tbl_gf_alt {
    display: table;
    border: 2px solid #57AB55;
    border-collapse: collapse;
    width: 100%;
    min-height: 100%;
    height: auto;
    margin: 0 auto 0 auto;
    font-size: 0.9em;
    color: #333;
    background-color: #FFFFFF;
    text-decoration: none;
    z-index: 1;
  }

  .tbl_gf_alt tr, .tbl_gf_alt tr td {
    border: 1px solid #57AB55;
    border-width: 2px 1px 2px 1px;
    border-collapse: collapse;
    vertical-align: top;
    padding: 0.2em;
  }

  .tbl_gf_alt tr td:nth-of-type(1) {
    width: 100px;
  }

  .tbl_gf_alt tr td:nth-of-type(2) {
    line-height: 130%;
    text-decoration: none;
  }

  .tbl_gf_alt tr td:nth-of-type(3) {
    width: 45%;
    line-height: 100%;
    text-decoration: none;
  }