html {
  --ditact-color: #009d9b; /* tuerkis */
  --ditact-color-darker: #136c6c;
  --ditact-color-lighter: #e4f2e8;
  --ditact-color-alpha: rgba(0, 157, 155, 0.5); /* --ditact-color-alpha */

  --ditact-color-2: #f68409; /* dunkles orange */
  --ditact-color-2-lighter: #fbce9d; /* orange als hintergrundfarbe */

  --ditact-color-3: #85c738; /* gruen */
  --ditact-color-3-lighter: #cee9af; /* gruen als hintergrundfarbe */

  --ditact-color-4: #f6d400; /* gelb */
  --ditact-color-4-lighter: #fff199; /* gelb als hintergrundfarbe */

  --ditact-color-5: #ba78d6; /*  lila */
  --ditact-color-5-lighter: #d7b1e7; /* lila als hintergrundfarbe */

  --ditact-color-6: #8a8a8a; /* grau */
  --ditact-color-6-lighter: #cccccc; /* grau als Hintergrundfarbe */

  --dark-background: #333333;
  --gray-foreground: rgba(255, 255, 255, 0.5);
  --ditact-callout-color: #009d9b;
  --ditact-error-color: #f68409 /* --ditact-color-2 */;

  --content-width: 1140px;
  --text-color: black;
  font-family: "Roboto Condensed", sans-serif;

  /* --ditact-callout-color: #009d9b  */
}

.ditact_farbe {
  color: #009d9b;
}

a:link {
  color: #009d9b;
}
a:visited {
  color: #136c6c;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.row_topnav {
  background-color: white;
  border-bottom: 1px #ddd solid;
}

nav#top_nav {
  max-width: 1280px /* --content-width */;
  margin: auto;
  display: flex;
  /* justify-content: flex-end; remove because ie */
  height: 55px;
  font-size: 12px;
  line-height: 70px;
}

nav#top_nav a[href] {
  color: black;
  margin-left: 1em;
}

nav#top_nav a[href].active {
  font-weight: bold;
}
nav#top_nav a:hover {
  color: rgb(93, 83, 223);
}
nav#top_nav :first-child {
  margin-right: auto;
  position: relative;
}
nav#top_nav div:first-child > span {
  background-color: #009d9b /* --ditact-callout-color */;
  color: white;
  padding: 3px;
}
nav#top_nav div:first-child > span span.when {
  padding-right: 3px;
}

nav#top_nav div:first-child > span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 34px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-bottom: 0;
  margin-left: -7px;
  margin-bottom: -7px;
  border-top-color: #009d9b /* --ditact-callout-color */;
}
nav#top_nav a[href] {
  text-decoration: none;
}