html {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-family: sans-serif;
}
body {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  width: 100%;
  min-height: 0; /* Anmerkung 1 */
  display: flex;
  flex-flow: column;
  /* margin: 0 auto 0 auto; */

  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.3;
  color: #292b2c;
  background-color: #fff;
  overflow: hidden;
}
.inhalt {
  display: flex;
  flex-flow: row;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
}
.nord {
  background-color: lightgray;
}
.sued {
  background-color: #efefef;
  text-align: center;
  font-size: smaller;
  color: #5a5a5a;
}
.zentrum {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-flow: column;
}

a {
  text-decoration: none;
  color: #00b2f9;
}

a:hover {
  color: #6cd5ff;  
}

.kalender-kopf {
  padding: 0.2em 0 0 0.1em;
}

.kalender {
  margin: 0;
  padding: 0.5em 0.3em 0 0.3em;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-content: center;
}

.monat-elem {
  display: flex;
  flex-flow: column;
  width: 9em;
  /*padding-left: 2em;*/
  padding-right: 1em;
}

.dialog {
  margin: 0;
  padding: 0;
  height: 0;
  background-color: #effaff;
  font-size: small; 
  display: flex;
  flex-flow: column;  
}

.dlg-row {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  padding-top: 0.2em;
}

.dlg-top {
   justify-content: space-between;
   padding-bottom: 0.5em;
}

.dlg-open {
  height: 10em;
  padding: 0.2em 0.2em 0.2em 0.4em;
}

.heute-btn {
  padding-left: 0.3em;
}

.ekat {
  padding-left: 0.3em;
}

.kalenderblatt {
  /* margin: 0.3em;*/
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: #fffff4;
  /* width: 90%; */
  flex-grow: 10;
}

.icon-cancel {
  flex-grow: 0.1;
  cursor: pointer;
}

.kbl-open {
  height: 9em;
  padding: 0.2em 0.2em 0.2em 0.4em;
  display: block;
}

.kbl-datum {
  font-weight: bolder;
}

.dialog p {
  margin: 0;
  padding: 0.2em 0 0 0;
}

.jahr-eingabe {
  width: 4em;
}

.btn {
  cursor: pointer;
}

.cls-btn {
   float: right;
}

/* Media-Queries */

/* ab 800 px Breite */
@media (min-width: 800px) {
  body {
    font-size: larger;
  }
  .seite {
    width: 2em;
  }
  .inhalt
  {
    width: 50em;
  }  
}

/* bis 799px Breite */
@media (max-width: 799px) {
  body {
    font-size: 14pt;
  }
  h1 {
    font-size: 1.6em;
  }
  h1.archiv {
    font-size: 1.2em;
  }
  .seite {
    width: 0.3em;
  }
  .inhalt
  {
    width: 100%;
  }  
}

/* bis 799px Breite */
@media (max-width: 549px) {
  body {
    font-size: 14pt;
  }
  .seite {
    width: 0;
  }
  .inhalt
  {
    width: 100%;
  }  
  .monat-elem {
    width: 8em;
    /*padding-left: 2em;*/
    padding-right: 1.2em;
  }
}




/* Fontello */

@font-face {
  font-family: 'pikto';
  src: url('fonts/pikto/pikto.ttf?9911062') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'pikto';
    src: url('../font/pikto.svg?9911062#pikto') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "pikto";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-left-dir:before { content: '\e800'; } /* '' */
.icon-right-dir:before { content: '\e801'; } /* '' */
.icon-cancel:before { content: '\e802'; } /* '' */
.icon-down-dir:before { content: '\e803'; } /* '' */
.icon-up-dir:before { content: '\e804'; } /* '' */
.icon-undo:before { content: '\e805'; } /* '' */
.icon-ellipsis-vert:before { content: '\f142'; } /* '' */