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.flexDefault {
      width: auto;  /* Standard-Breite, falls für alle Items eine spezielle Breite definiert wird */
    }  
    .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;
      }  
    }

    @media all and (min-width: 40em) {
      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%;
      }
     .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: 60em) {
      /* 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: 30%; margin-right: 1em; /* ermöglicht drei Flex-Items (p-Tags) nebeneinander */
      }
      .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%; }
    }