body {
        
    background-color: #ffffe1;  background-size: cover; 
    margin: 0em 0.2em; 
    }  /* lightyellow */
  button { margin: 0.1em; }
  .pl { padding-left: 0rem; }
  .icon { width: 3em; height: 3em; margin: 0em 0em 0.2em 0.2em; background-color: lightgray; }
  .tinyicon { width: 1.2em; height: 1.2em; background-color: lightgray; margin: 0.1em; margin-bottom: 0; }
  .tacTal, .tacTar, .tacTal70, .tacTar30 { text-align: center; }

  .controlBar { display: inline-block; vertical-align: middle; margin-bottom: 0.4em; } 
  .controlBar > span { 
    display: inline-block;
    height: 2.2em; background-color: #ffa500;  /* orange */
    border: thin solid #ffa500; border-radius: 1em;   /* orange */
    padding: 0.4em; margin: 0.1em; 
    white-space: nowrap;
    padding-top: 0.3em;
    }  
  .controlBar > span > label { color: white; }    
  .controlBar > span > .tinyicon { width: 1.5em; height: 1.5em; margin-bottom: -0.3em; }
  /* .controlBar > span > input["image"] { margin-bottom: -0.2em; } */    

  .fc > li > label + * { height: 3em; }  
  .fc > li > label + span {  display: inline-flex; }
  .fc > li > span > input[type="text"] { width: 100%; height: 3em; padding: 0.2em; }
  .fc > h3, .fc > p {  width: 100%; } 
  
  .login { width: 100%; margin: 1em auto; }
  .login > p > label { display: inline-block; width: 6em; height: 3rem; text-align: right; padding-right: 0.5em; }
  .login > p > input[type="text"], 
    .login > p > input[type="password"], 
    .login > p > select,  
    .login > p > button,  
    .login > p > span > input,  
    .login > p > span > button  
    { height: 3em; }
  .login > p > input[type="text"],
    .login > p > input[type="password"]
    { width: 65%; padding: 0.2em; }
  .login > p > span > input[type="text"]
    { width: 55%; padding: 0.2em; }
  
  table.tt {	border-collapse: collapse; margin: 0 auto 1em; min-width: 38rem; }
  table.ttDay { min-width: 10rem;  width: 100%; max-width: 20rem; }
  .tt > thead > tr > th { padding: 0.2em; margin: 1rem auto; }
  .tt > thead > tr > th:first-child { width: 3rem; } 
  .tt > thead > tr > th.title { text-align: left; } 
  .ttDay > thead > tr > th.title { text-align: center; position: relative;} 
  .tt > thead > tr > th > p { min-width: max-content; text-align: center; }
  .tt > tbody > tr > th,td { 
    padding: 0.2em; 
    text-align: center; 
    vertical-align: top; 
    white-space: nowrap; 
    }
  .tt > tbody > tr > td { 
    background-color: lightyellow; 
    border: 1px solid #ffa500; 
    }
  .tt > thead > tr:first-child { 
    background-color: #ffa500; 
    color: white; 
    }

/* Viewports ab 30em mit Label links statt oben: */
@media all and (min-width: 30em) {
  .fc > li > label { position: relative; top: 0.5em; }
}

/* Viewports ab 40em mit zweispaltiger Ansicht: */
@media all and (min-width: 40em) {
  .login { width: 30em; margin: 1em auto; }
  .icon { width: 1.5rem; height: 1.5rem; }
  .pl { padding-left: 2rem; }
  .fc > h3, .fc > p {  width: 50%; }
  .fc > .tacTal70 { width: 70%; }
  .fc > .tacTar30 { width: 30%; }
  .fc > .tacTal, .fc > .tacTal70 { text-align: left; }  
  .fc > .tacTar, .fc > .tacTar30 { text-align: right; }  
  .choose { max-width: 50rem; margin: 1em auto; }
  .fc > li > label + * { height: 1.5em; }  
  .fc > li > span > input[type="text"], 
    .fc > li > select,
    .fc > li > button
    { height: 2rem; }
  .fc > li > span > input[type="image"] { width: 2rem; height: 2rem; } 
  .tt > thead > tr > th.title { text-align: center; position: relative;}
}  
/* große Viewports ab ca. 1000px (Monitore ab 15"; 1000/16 = 62) */
@media all and (min-width: 66em) {
  body { max-width: 64em; margin: 0em auto; } 
  .pl { padding-left: 2rem; }
  .tt { width: 100%; table-layout: fixed; }
  .fs11 { font-size: 11pt; }  /* pupils schedules only on large screens */
  .ttDay { table-layout: auto; }
}  
@media print {
  body     { width: 100%; margin: 0em; padding: 0em; } 
  table.tt { width: 100%; margin: 1em 0em; table-layout: fixed; }
  .tt > thead > tr > th.title { text-align: center; }
  .tt > th,td {  padding: 0.2em 0em; font-size: 8pt; }
  .tt > tbody > tr { page-break-inside: avoid; }
  .controlBar { display: none; }
}