/* Allgemeine Formate: */
h1,h2,h3,h4,p,img { margin: 0.1em; }
body { margin: 1em; font: 12pt Verdana; max-width: 100%; }
table { width: 100%; }
th,td { padding: 0.2em; }
th { text-align: left; }
input[type="text"].long { width: 99%; }
img.qr { width: 99%; } /* QR-Code */

.error { color: red; }
.alert { background-color: yellow; color: red; }
.warning { background-color: yellow; color: black; }
.success { background-color: lightgreen; }
.italic { font-style: italic; }
.bold { font-weight: bold; }
.tal { text-align: left; }
.tac { text-align: center; }
.ro {  background-color: lightgray; }
.required {  background-color: PeachPuff; }
.fixedfont { font-family: Courier New; }
.fontSmaller { font-size: 0.8em; }
.tipp { font-size: 0.8em; display: flex; }
.no-border { border: none; }
.no-wrap { 
  white-space: nowrap;  /* verhindert Umbruch an Leerzeichen */ 
  }
.mt1b0 { margin-top: 1em; margin-bottom: 0.2em; }  /* space for questions */
.wid100-45 { width: 100%; height: 100%; } /* eg. img tags default full size / half size at big screens */
.shadowed { 
        -moz-box-shadow:1px 1px 6px #a0a0a0; /* Firefox */
        -webkit-box-shadow:1px 1px 6px #a0a0a0; /* Chrome, Safari */
        -khtml-box-shadow:1px 1px 6px #a0a0a0; /* Konqueror */
        box-shadow:1px 1px 6px #a0a0a0; /* CSS3 */
      }

/* Abgerundete Ecken: */
fieldset, input, select, textarea, button, .rounded { 
  border-width: thin;
  border-radius: 0.3em; 
  }
  
div.home {
  background-image: url(image/home-background.png); 
  background-size: contain;
  background-repeat: round;
  background-color: #ffff88;
  margin: 1em auto; padding: 0.4em;
  width: 90%; max-width: 30em; max-height: 88%;
}

/* buttons at home form: */
button.home {
  margin: 0.4rem 2%; 
  width: 45%; height: 1.8rem; 
  font-size: 1.0em; font-weight: bolder; color: brown;
  background-color: transparent;
}

input.home { background-color: rgba(192,192,192,0.4); }
input.home-edit, select.home-edit { background-color: rgba(144,238,144,0.4); }
button.home-edit { background-color: rgba(144,238,144,0.4); }
select.home { background-color: rgba(144,238,144,0.4); max-width: 100%; }

/* Home button in forms except home form: */
button#home {
  width: 1.6rem; height: 1.6rem; 
  position: absolute;
  top: 0.2rem; left: 0.2rem;
}
img#home {  
  width: 1.5rem; height: 1.5rem; 
  margin-top: -0.1rem; margin-left: -0.4rem;
  border-radius: 0.2rem; 
}

p#footer { width: 100%; margin: 0em auto; }  
img.xmas-cap {
  width: 2em; height: auto; position: relative; margin: -0.2em -1.6em -0.2em -1em;   
  }
 
form > img, form > p > img { width: 100%; max-width: 100%; clear: both; float: right; }
 
fieldset > p > label { display: inline-block; width: 8em; }

/* Achtung: Viewport-Weiche unten begrenzt body auf 60em! */
.fc > legend, .fc > p > label { font-size: 0.8em; }

  /* Spezielle Flexbox-Formate: */
    .fc, .fc > p, .fc > p > label { 
      margin: 0em; padding: 0.1em; 
    }

    .fc {
      /* Formate des Flex-Containers der Klasse fc (hier des fieldset-Tags), 
         direkte Kind-Elemente (p-Tags) werden Flex-Items
         und (mobile first) vertikal angeordnet
      */
      font-size: 16px; /* Normalisierung für em-Nutzung; Standard: normal 16px Times New Roman */
      box-sizing: border-box; 
      display: flex;  /* ist ein Flex-Container */
      flex-direction: column;  /* vertikale Anordnung der Flex-Items */
    }

    fieldset.fc {
      margin: 1em 0em;
    }  
    fieldset.fc > legend {
      padding: 0em 0.5em;
    }  

    .fc > p { 
      /* Formate der Flex-Items (p-Tags) des Flex-Containers der Klasse fc, 
         zusätzlich sind p-Tags auch selbst Flex-Container 
      */
      /* clear: both;  falls zuvor img-Tag */
      display: flex; /* p-Tags sind nun selbst Flex-Container (für label/input) */
      flex-wrap: wrap; /* Flex-Item Label bei wenig Platz oberhalb der Eingabe */
      flex-direction: row;  /* vertikale Anordnung der Flex-Items */
      /* justify-content: flex-start; linksbündige Darstellung der Items im FlexContainer .fc */
      /* margin: 0.1em 0.2em; 0.1em oben/unten 0.2em links/rechts */
      /* align-items: baseline;  nötig wegen .flexShort */
    }
    
    .fc > p.flexShort {
    }  
    .fc > p.flexLong {
      width: 100%;  /* maximal breiter Flex-Container; immer einspaltig */
    }  
    
    .fc > p > label { 
      flex: 1 0 6em;  /* Mindestbreite nur des label-Tags */
      max-width: 8em;  /* Höchstbreite nur des label-Tags; ggf. nur input-tag breiter */
      text-align: left;
    }
    
    .fc > p > label + * {
      flex: 1 0 99%;  /* Mindestbreite nur des input-Tags ; alt: 1 0 16em */
    }
    
    .fc > p.flexShort > label + * {
      flex: 1 0 6em;  /* Mindestbreite nur des kurzen input-Tags */
      max-width: max-content;  /* Höchstbreite nur des kurzen input-Tags */
    }
    
    .fc > p.flexLong > label + * {
      width: 90%;  /* Eingabe eines maximal breiten Flex-Items */
    }
    
    @media all and (min-width: 30em) {
      .ml2 { margin-left: 1.8em; }  /* space for answers in a row up 30em of width! */
      .ti2 { text-indent: -1.8em; padding-left: 1.8em; }  /* negative indent for first line of paragraph up 30em of width! */ 
      form > img, form > p > img { width: 12em; }
      .flexOne { flex-direction: column; }  
      .fc > p {
        flex-direction: row;  /* horizontale Anordnung der Flex-Items */
        flex-wrap: nowrap; /* abschalten: Flex-Item Label bei wenig Platz oberhalb der Eingabe */
      }
      .fc > p > label { 
        flex: 1 0 8em;  /* Mindestbreite nur des label-Tags */
        max-width: 8em;  /* Höchstbreite nur des label-Tags; ggf. nur input-tag breiter */
        margin-right: 0.3em;  /* Abstand, falls rechtsbündig am Item dargestellt */
        text-align: right;
      }
      .fc > p > label.short { 
        flex: 1 0 4em;  /* Mindestbreite nur des label-Tags */
        max-width: 4em;  /* Höchstbreite nur des label-Tags; ggf. nur input-tag breiter */
        text-align: left;
      }  
      .fc > p > label + * {
        flex: 1 0 16em;  /* Mindestbreite nur des input-Tags */
      }
      .fc > p > label + input {
        height: fit-content;
      }  
      p#footer { width: 90%; min-width: 28rem; max-width: 40rem; }  
    }

    @media all and (min-width: 50em) {
      img.qr { width: 15em; } /* QR-Code */
      form > img, form > p > img { max-width: 50%; }
      form > img.small, form > p > img.small { width: 9em; }
      form > img.verysmall, form > p > img.verysmall { width: 6em; }
      /* inner window width at least 30em = 30*16px = 480px */
      div.home { max-width: 40em; }
      /* buttons at home form: */
      button.home { 
        max-width: 30%; margin: 0.4em 1%;
      }
      /* Home button in forms except home form: */
      button#home {
        left: auto;
      }
     .fc {
        flex-direction: row; /* p-Tags nun auch nebeneinander */
        flex-wrap: wrap; /* 2 oder 3 p-Tags nebeneinander */
      }  
      .fc > p { 
        justify-content: flex-start; /* Item linksbündig neben Label platzieren, z.B. kurzes Select in li.flexLong */
        width: 48%; /* ermöglicht maximal zwei p-Tags nebeneinander */
      }
      .max2cols > p {
        width: 48%; /* weiterhin maximal zwei p-Tags nebeneinander */
      }  
      .flexOne { flex-direction: column; }  
      .flexOne > p { 
        justify-content: flex-start; /* Item linksbündig neben Label platzieren, z.B. kurzes Select in li.flexLong */
        width: 96%; /* ermöglicht maximal ein p-Tag nebeneinander */
      }
      .wid100-45 { width: 45%; height: 45%; margin: 1em 0.2em; }
    }

    @media all and (min-width: 64em) {
      /* inner window width at least 64em = 64*16px = 1024px */
      body { 
        max-width: 62em;
        padding: 1em;
        margin: 1em auto;  
      }
      body.border-shadow { 
        -moz-box-shadow:1px 1px 6px #a0a0a0; /* Firefox */
        -webkit-box-shadow:1px 1px 6px #a0a0a0; /* Chrome, Safari */
        -khtml-box-shadow:1px 1px 6px #a0a0a0; /* Konqueror */
        box-shadow:1px 1px 6px #a0a0a0; /* CSS3 */
      }
      div.home { max-width: 60em; }
      .fc > p { 
        width: 31%; margin-right: 1em; /* ermöglicht drei Flex-Items (p-Tags) nebeneinander */
      }
      img.qr { width: 13em; } /* QR-Code */
      .max2cols > p {
        width: 48%; /* weiterhin maximal zwei p-Tags nebeneinander */
      }  
      .flexOne > p { width: 96%; } 
      .fc > p.flexFour { 
        width: 24%; /* ermöglicht vier Flex-Items (p-Tags) nebeneinander */
      }
    }

    @media print {
      body { width: 100%; margin: 0em; }
      .noprint { display: none; }
      .page-bia { page-break-inside: avoid; } /* on print media only */
      .fc {
        flex-direction: row; /* p-Tags nun auch nebeneinander */
        flex-wrap: wrap; /* 2 oder 3 p-Tags nebeneinander */
      } 
      
      form > img, form > p > img { width: 20%; }
    }