/* 
    Created on : 11.01.2024, 23:11:18
    Author     : ulrich
*/

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-size: medium;
  font-family: 'Ubuntu';
  width: 100%;
}

body {
  display: flex;
  flex-flow: column;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

p, li {
  margin: 0;
  padding: 0.6em 0 0 0;
  font-family: 'UbuntuLight';
}

a {
  text-decoration: none;
}

a:hover {
  color: #0099FF;
}

h4 {
  margin: 0;
  padding: 1.2em 0 0 0;
  font-family: 'UbuntuLight';
}

.oben {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5em;
  padding-left: 0.5em;
  /*font-size: 0.8em;*/
}

/*.zentrum {
  display: flex;
  flex-flow: row;
  height: 100%;
  overflow: hidden; 
}*/

.mitte {
  height: 100%;
  /*display: flex;
  flex-flow: column;*/
  overflow-y: auto;
  padding-left: 8em;
  padding-right: 8em;
  /*width: 100%;*/
}

.kopf {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5em;
  padding-left: 0.5em;
  /*font-size: 0.8em;*/
}

.section-link {
  border-radius: 8px;
  background-color: #d9e6fe;
  color: inherit;
  text-decoration: none;
  font-family: 'UbuntuLight';
  height: 0.8em;
  width: 4em;
  padding: 0.4em 0.5em 0.4em 0.5em;
  margin-right: 0.8em;
}

.section-link:hover {
  background-color: #0006b1;
  color: white;
}

.me-box {
  display: flex;
  flex-flow: row;
  align-items: center;
}

.top-intro {
  padding-left: 0.5em;  
  font-family: 'UbuntuLight';
  font-size: smaller;
}

.top-name {
  font-family: 'UbuntuBold';
  font-size: medium;
}

.logo-box {
  display: flex;
  flex-flow: row;
  align-items: center;  
  padding-right: 0.5em;
}

.logo-link {
  text-decoration: none;
}

.logo-link {
  filter: invert(100%) sepia(0%) saturate(7336%) hue-rotate(51deg) brightness(117%) contrast(73%);
  cursor: pointer;
}

.logo-link:hover {
  filter: invert(93%) sepia(34%) saturate(7062%) hue-rotate(178deg) brightness(102%) contrast(105%);
  cursor: pointer;
}

.email-link-text {
  font-size: 1.6em;
  font-family: UbuntuBold;
  color: #dddddd;
  margin: -0.4em 0 0 0.3em;
  padding: 0;
}

.email-link-text:hover {
  color: #d9e6fe;
  cursor: pointer;
}

.rund {
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
}

.ueber-box {
  display: flex;
  flex-flow: row;
  justify-content: center;
  padding: 0 6em 0 0;
}
.ueber-text {
  font-family: 'UbuntuLight';
  /*font-size: medium;*/
  width: 90%;
  padding: 0 0.5em 0 0.5em;
  margin-top: 1em;
}

.inhalt-kacheln {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  padding-top: 3em;
}
.inhalt-kachel {
  display: flex;
  flex-flow: row;
  width: 16em;
  padding: 1.8em 1em 1.4em 1em;
}

.inhalt-kachel-rechts {
  display: flex;
  flex-flow: column;
  padding-left: 0.7em;
}

.inhalt-kachel-titel {
  font-family: 'UbuntuBold';
  font-size: 1em;
}

.inhalt-kachel-text {
  font-family: 'UbuntuLight';
  font-size: medium;
  padding-top: 0.4em;
}

.inhalt-kachel-link {
  text-decoration: none;
  color: inherit;
}

.fuss {
  font-family: 'UbuntuLight';
  font-size: smaller;
  text-align: center;
  padding: 0.3em 0 0.8em 0;
}

a.fuss {
  text-decoration: none;
}

/* Dropdown Menu ------------------------------------------------------------ */

/* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  width: 3em;
  padding: 0;
  font-size: medium;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 12em;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0;
  font-size: medium;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 0.5em 0.8em;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #33C3F0; /* #3e8e41; */
  color: white;
  border: none;
}

/* Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'UbuntuBold';
  src: url('fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'UbuntuLight';
  src: url('fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype');
}

/* Media Queries ---------------------------------------------------------- */

/* ab 1200 px Breite */
@media (min-width: 1200px) {
  .mitte {
    font-size: larger;
    /* width: 50em; */
    padding-left: 10em;
    padding-right: 10em;
  }  
  .kopf {
    padding-left: 10em;
    padding-right: 10em;
  }
  .dropdown {
    display: none;
  }
  .main-sections {
    display: block;
  }
}

/* ab 800 px Breite */
@media (min-width: 850px) and (max-width: 1199px) {
  .mitte {
    /* width: 50em;*/
    padding-left: 6em;
    padding-right: 6em;
  }  
  .kopf {
    padding-left: 4em;
    padding-right: 4em;
  }
  .dropdown {
    display: none;
  }
  .main-sections {
    display: block;
  }
}

/* bis 549px Breite */
@media (max-width: 849px) {
  h1 {
    font-size: 1.6em;
  }
  .mitte
  {
    /*width: 95%;*/
    padding-left: 1em;
    padding-right: 1em;
  }  
  .ueber-text {
    font-size: medium;
  }
  .kopf {
    padding-left: 1em;
    padding-right: 1em;
  }
  .dropdown {
    display: block;
  }
  .main-sections {
    display: none;
  }
  .ueber-box {
    padding: 0 2em 0 0;
  }
}

/* Fontello ------------------------------------------------------- */

@font-face {
  font-family: 'fontello';
  src: url('fonts/Fontello/fontello.ttf?1855238') 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: 'fontello';
    src: url('../font/fontello.svg?1855238#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  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-down-dir:before { content: '\e800'; } /* '' */
.icon-cog:before { content: '\e801'; } /* '' */
.icon-mail:before { content: '\e802'; } /* '' */
.icon-cogs:before { content: '\e803'; } /* '' */
.icon-cloud:before { content: '\e804'; } /* '' */
.icon-download-cloud:before { content: '\f0ed'; } /* '' */
.icon-doc-text:before { content: '\f0f6'; } /* '' */
.icon-info:before { content: '\f129'; } /* '' */