#iefix { width: 98%; padding-top: 33%; position: relative; }
  #iefix > svg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
  #global input, #selber input { max-width: 6rem; text-align:right; }

  #logo { width:80%; margin:auto; display: block;}
  #settings { width:3rem; float:right; }

  #society, #result { display: none; }

  #society > table td { text-align:right; }
  #society > table td.h { text-align:left;font-weight:bold; }
  #society > table { margin-top:1rem;float:left; }
  #society input { max-width:3.5rem;margin:0px;text-align:right;padding:1px;border-width:2px;}
  td.minus {color:red;}

  body {
    max-width: 100rem;
    margin:auto;

    padding: 0px;

    background-color: #333333;

    font-family: Tahoma, Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  @media only screen and (min-width: 40rem) {
    body {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: auto auto auto;
      -ms-grid-rows: auto auto auto auto;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto auto;

    }

      .container#selber {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        grid-column: 1;
        grid-row: 1;
      }
      .container#global {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        grid-column: 2;
        grid-row: 1;
      }
      .container#presets {
        grid-area: presets;
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
        grid-row: 2;
      }
      .container#graph {
        grid-area: graph;
        -ms-grid-column: 1;
        -ms-grid-row: 3;
        -ms-grid-column-span: 3;
        grid-column: 1/4;
        grid-row: 3;
      }
      .container#society {
        grid-area: society;
        -ms-grid-column: 1;
        -ms-grid-row: 4;
        -ms-grid-column-span: 3;
        grid-column: 1/4;
        grid-row: 4;
      }
      .container#stats {
        grid-area: stats;
        -ms-grid-column: 3;
        -ms-grid-row: 1;
        grid-column: 3;
        grid-row: 1;
      }
    
      .container#result {
        grid-area: result;
        -ms-grid-column: 3;
        -ms-grid-row: 2;
        grid-column: 3;
        grid-row: 2;
      }
  }
  @media only screen and (min-width: 72rem) {
    body {
      -ms-grid-rows: auto auto auto;
      grid-template-rows: auto auto auto;
    }
    
    .container#selber {
      -ms-grid-column: 1;
      -ms-grid-row: 1;
      grid-column: 1;
      grid-row: 1;
    }
    .container#global {
      -ms-grid-column: 1;
      -ms-grid-row: 2;
      grid-column: 1;
      grid-row: 2;
    }
    .container#presets {
      -ms-grid-column: 2;
      -ms-grid-row: 1;
      -ms-grid-column-span: 1;
      grid-column: 2;
      grid-row: 1;
    }
    .container#graph {
      -ms-grid-column: 2;
      -ms-grid-row: 2;
      -ms-grid-column-span: 2;
      grid-column: 2 / 4;
      grid-row: 2;
    }
    .container#society {
      -ms-grid-column: 2;
      -ms-grid-row: 3;
      -ms-grid-column-span: 2;
      grid-column: 2/4;
      grid-row: 3;
    }
    .container#stats {
      -ms-grid-column: 3;
      -ms-grid-row: 1;
      grid-column: 3;
      grid-row: 1;
    }
  
    .container#result {
      -ms-grid-column: 1;
      -ms-grid-row: 3;
      grid-column: 1;
      grid-row: 3;
    }
    
  }

  .container {
    margin: 5px;
    padding: 8px;

    background-color: #eeeeee;

    border: 2px solid #666666;
    border-radius: 10px;

    color: #222222;
  }
  .container * {
    margin: 5px;
  }
  h2 {
    margin: 10px;

    font-size: 1.5em;
    font-weight: bold;
  }
  .container .input-label{
    margin-top: 10px;

    font-weight: bold;
  }

.input-label{
    display: grid;
    grid-template-columns: auto auto 1fr;
}
  
  .output-text {
    display: inline-block;

    padding: 2px 5px 2px 5px;

    background-color: #dddddd;
  }
  .output-text .output-saldo {
    display: inline-block;
    margin: 0px;
  }
  .output-text .positive {
    color: green;
  }
  .output-text .negative {
    color: red;
  }

  .help {
    display: inline-block;
    /* position: absolute; */

    height: 25px;
    margin: 0px;
    margin-left: 5px;

    overflow: hidden;

    border: 1px solid #333333;
    border-radius: 5px;

    background-color: #3366ff;
    color: #eeeeee;
    font-weight: bold;
  }
  .help:hover {
    overflow: visible;
    cursor: help;
  }
  .help .text {
    /*position: fixed;
    bottom: 10px;
    right: 10px;*/
    position: absolute;

    width: 250px;

    visibility: hidden;
    z-index: 1000;

    margin: 0px;
    padding: 3px;

    border: 1px solid #333333;
    border-radius: 7px;

    background-color: #eeeeee;
    color: #222222;
  }
  .help:hover .text {
    visibility: visible;
  }

  .legende-color {
    display: inline-block;

    margin: 5px;
    padding: 8px;

    background-color: #eeeeee;

    border: 2px solid #666666;
    border-radius: 10px;

    color: #222222;
  }
  .legende-color .colorBox {
    display: inline-block;

    margin: 0px;
    margin-right: 5px;

    width: 1em;
    height: 1em;

    border-radius: 5px
  }