/************************************/
/* FONTS */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/font/Montserrat.woff') format('woff'),
       url('../assets/font/Montserrat.svg') format('svg'),
       url('../assets/font/Montserrat.eot'),
       url('../assets/font/Montserrat.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat Bold';
  src: url('../assets/font/Montserrat-Bold.woff') format('woff'),
       url('../assets/font/Montserrat-Bold.svg') format('svg'),
       url('../assets/font/Montserrat-Bold.eot'),
       url('../assets/font/Montserrat-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Light';
  src: url('../assets/font/Roboto-Light.woff') format('woff'),
       url('../assets/font/Roboto-Light.svg') format('svg'),
       url('../assets/font/Roboto-Light.eot'),
       url('../assets/font/Roboto-Light.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Regular';
  src: url('../assets/font/Roboto-Regular.woff') format('woff'),
       url('../assets/font/Roboto-Regular.svg') format('svg'),
       url('../assets/font/Roboto-Regular.eot'),
       url('../assets/font/Roboto-Regular.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Bold';
  src: url('../assets/font/Roboto-Bold.woff') format('woff'),
       url('../assets/font/Roboto-Bold.svg') format('svg'),
       url('../assets/font/Roboto-Bold.eot'),
       url('../assets/font/Roboto-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Source Code Pro Medium';
  src: url('../assets/font/SourceCodePro-Medium.woff') format('woff'),
       url('../assets/font/SourceCodePro-Medium.svg') format('svg'),
       url('../assets/font/SourceCodePro-Medium.eot'),
       url('../assets/font/SourceCodePro-Medium.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Source Code Pro Medium Italic';
  src: url('../assets/font/SourceCodePro-MediumItalic.woff') format('woff'),
       url('../assets/font/SourceCodePro-MediumItalic.svg') format('svg'),
       url('../assets/font/SourceCodePro-MediumItalic.eot'),
       url('../assets/font/SourceCodePro-MediumItalic.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/************************************/
/* RESET (Ersatz für Bootstrap-Reboot) */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: #343434;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}
img,
svg {
  vertical-align: middle;
}
h1,
h3 {
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
p {
  margin-top: 0;
}
button {
  font: inherit;
  background: none;
  cursor: pointer;
  padding: 0;
}

/************************************/
/* GLOBALS */
h1,
h2 {
  margin-top: 0;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0b4f8a;
}
h2 {
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
p {
  font-family: 'Roboto Light';
  font-size: 1.2em;
  letter-spacing: 0.1em;
  margin-bottom: 1.2em;
}
a {
  text-decoration: none;
}
button,
.button {
  border: none;
  box-shadow: none;
}

/************************************/
/* LAYOUT */
#page {
  width: 100%;
}
#page .page-content {
  width: 100%;
}

/************************************/
/* HEADER */
#header {
  padding: 1.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
#header .header-row {
  display: flex;
  justify-content: space-between;
}
#header.transparent {
  background-color: transparent;
  transition: background-color 0.3s;
}
#header.non-transparent {
  background-color: #ffffff;
  transition: background-color 0.3s;
  -webkit-box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.1);
  box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.1);
}
#header.non-transparent .navigation-wrapper #menuToggle span {
  background: #0b4f8a;
}
#header.non-transparent .operation-wrapper .contact .mail-icon {
  fill: #0b4f8a;
}
/* LOGO */
#header .logo-wrapper {
  display: block;
}
#header .logo-wrapper .logo {
  width: 8em;
}
/* OPERATIONS */
#header .operation-wrapper {
  display: flex;
  order: 2;
  align-items: flex-start;
}
#header .operation-wrapper .contact {
  margin-right: 1em;
}
#header .operation-wrapper .contact .mail-icon {
  fill: #fff;
  width: 1.6em;
  height: 2em;
  margin-right: 1em;
}
#header .operation-wrapper .contact .language-flag {
  width: 2.2em;
  margin-right: 0.25em;
}
/* NAVIGATION */
#header .navigation-wrapper {
  cursor: pointer;
  order: 2;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
}
#header .navigation-wrapper #menuToggle {
  display: block;
  position: relative;
  top: 0.5em;
  right: 0;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#header .navigation-wrapper #menuToggle a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
  transition: background-color 0.3s;
}
#header .navigation-wrapper #menuToggle input {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -7px;
  left: -9px;
  cursor: pointer;
  opacity: 0; /* hide this */
  -webkit-touch-callout: none;
  z-index: 2;
}
#header .navigation-wrapper #menuToggle span {
  display: block;
  width: 27px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  z-index: 1;
}
#header .navigation-wrapper #menuToggle span:first-of-type {
  transform-origin: 0% 0%;
}
#header .navigation-wrapper #menuToggle span:nth-last-of-type(2) {
  transform-origin: 0% 100%;
}
#header .navigation-wrapper #menuToggle span:last-of-type {
  margin-bottom: 0 !important;
}
#header .navigation-wrapper #menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #ffffff;
}
#header .navigation-wrapper #menuToggle input:checked ~ span:nth-last-of-type(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#header .navigation-wrapper #menuToggle input:checked ~ span:nth-last-of-type(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
#header .navigation-wrapper #menu {
  position: absolute;
  width: 300px;
  height: 106vh;
  margin: -3.8em 0 0 -248px;
  padding-top: 72px;
  color: #ffffff;
  background: #0b4f8a;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  opacity: 1;
  -webkit-box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.25);
  box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.25);
  font-family: 'Source Code Pro Medium';
  padding-left: 0;
}
#header .navigation-wrapper #menu a {
  color: #ffffff !important;
}
#header .navigation-wrapper #menu a:hover {
  color: #ffffff !important;
}
#header .navigation-wrapper #menu li {
  padding: 0.75em 0.75em;
  font-size: 1.25em;
  color: #ffffff;
  text-transform: uppercase;
}
#header .navigation-wrapper #menu li:hover {
  background-color: #052b4d;
}
#header .navigation-wrapper #menu li.subnav-item {
  display: flex;
  align-items: center;
  font-size: 1.3em;
  justify-content: flex-end;
  padding-right: 1.5em;
}
#header .navigation-wrapper #menuToggle input:checked ~ ul {
  transform: none;
}

/************************************/
/* SUB-PAGE HEADER (Impressum / Datenschutz) */
body.sub-page-navigation #header,
body.sub-page-navigation #header.transparent {
  background-color: #ffffff !important;
  transition: background-color 0.3s !important;
  -webkit-box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.1) !important;
  box-shadow: -4px 0px 15px 2px rgba(0, 0, 0, 0.1) !important;
}
body.sub-page-navigation #header .navigation-wrapper #menuToggle span {
  background: #0b4f8a !important;
}
body.sub-page-navigation #header .contact .mail-icon {
  fill: #0b4f8a !important;
}

/************************************/
/* SECTION: INTRO */
#intro {
  display: flex;
  position: relative;
  text-align: right;
  width: 100%;
  left: 0;
}
#intro .theme-text {
  width: 53%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  top: 10em;
  right: 5em;
  z-index: 20;
}
#intro .theme-text h1 {
  font-family: 'Montserrat Bold';
  font-size: 2.3em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
}
#intro .theme-text h2.subline {
  font-family: 'Roboto Light';
  font-size: 1.35em;
  letter-spacing: 0.2em;
  color: #ffffff;
}
/* ANIMATION */
.space {
  background: url(../assets/img/space.webp) center top;
  background-size: auto contain;
  -webkit-animation: velocity 0.5s linear 0s infinite normal forwards;
  animation: velocity 0.6s linear 0s infinite normal forwards;
  height: 30em;
}
.rocket {
  background: url(../assets/img/rocket.webp) no-repeat center bottom;
  -webkit-animation: flying 1.5s ease-in-out 0s infinite normal;
  animation: flying 1.5s ease-in-out 0s infinite normal;
  height: 100%;
  width: 35em;
  margin: 0;
}
@-webkit-keyframes flying {
  0%   { background-position: center 60%; }
  50%  { background-position: center 50%; }
  100% { background-position: center 60%; }
}
@keyframes flying {
  0%   { background-position: center 60%; }
  50%  { background-position: center 50%; }
  100% { background-position: center 60%; }
}
@-webkit-keyframes velocity {
  0%   { background-position: center bottom; }
  50%  { background-position: center center; }
  100% { background-position: center top; }
}
@keyframes velocity {
  0%   { background-position: center bottom; }
  50%  { background-position: center center; }
  100% { background-position: center top; }
}

/************************************/
/* SECTION: LEISTUNGEN */
#leistungen .leistungen-navigation {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -2em;
  padding: 0 5em;
  margin: 0;
  list-style: none;
}
#leistungen .leistungen-navigation .nav-item {
  width: 32%;
}
#leistungen .leistungen-navigation .nav-item .leistung {
  width: 100%;
  padding: 2em 1em;
  min-height: 14em;
  border-radius: 1em;
  background-color: #dde2f2;
  transition: background-color 0.5s;
  color: #0b4f8a;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
}
#leistungen .leistungen-navigation .nav-item .leistung .icon {
  display: flex;
  justify-content: center;
}
#leistungen .leistungen-navigation .nav-item .leistung .icon svg {
  fill: #0b4f8a;
}
#leistungen .leistungen-navigation .nav-item .leistung .icon svg.entwicklung {
  width: 4em;
  margin-bottom: 0;
}
#leistungen .leistungen-navigation .nav-item .leistung .icon svg.beratung {
  width: 3em;
  margin-bottom: 0.5em;
}
#leistungen .leistungen-navigation .nav-item .leistung .icon svg.schulung {
  width: 3em;
  margin-bottom: 0.5em;
}
#leistungen .leistungen-navigation .nav-item .leistung .name {
  font-size: 1.5em;
  font-family: 'Roboto Regular';
  letter-spacing: 0.2em;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}
#leistungen .leistungen-navigation .nav-item .leistung.active,
#leistungen .leistungen-navigation .nav-item .leistung:hover {
  background-color: #4a7ca9;
  transition: background-color 0.5s;
  font-family: 'Roboto Regular';
  letter-spacing: 0.2em;
}
#leistungen .leistungen-navigation .nav-item .leistung.active .name,
#leistungen .leistungen-navigation .nav-item .leistung:hover .name {
  color: #ffffff;
  transition: color 0.9s;
}
#leistungen .leistungen-navigation .nav-item .leistung.active .icon svg,
#leistungen .leistungen-navigation .nav-item .leistung:hover .icon svg {
  fill: #ffffff;
  transition: fill 0.9s;
}
/* TABS */
#leistungen .tab-pane {
  display: none;
}
#leistungen .tab-pane.active {
  display: block;
}
/* CONTENT */
#leistungen .leistung-content {
  padding: 2em 5em;
}
#leistungen .leistung-content h1 {
  font-size: 2em;
  margin-bottom: 0.75em;
}
#leistungen .leistung-content h2 {
  font-size: 1.6em;
  margin-bottom: 0.75em;
  margin-top: 1.6em;
}
#leistungen .leistung-content .leistungen-uebersicht {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}
#leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
  border: 3px dotted #4a7ca9;
  height: 6em;
  width: 32%;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Roboto Regular';
  color: #4a7ca9;
  font-size: 1.25em;
  background-color: #f6f8ff;
}
#leistungen .leistung-content .philosophie {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4em 0;
  border: 3px dotted #4a7ca9;
  text-align: center;
  background-color: #f6f8ff;
}
#leistungen .leistung-content .philosophie h3 {
  color: #0b4f8a;
  font-family: 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
#leistungen .leistung-content .philosophie h2 {
  color: #0b4f8a;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 1em;
}
#leistungen .leistung-content .philosophie a.button {
  background-color: #dde2f2;
  padding: 1.5em;
  border-radius: 0.5em;
  transition: background-color 0.3s ease-in;
  width: 100%;
  display: block;
  font-size: 1.1em;
  font-family: 'Roboto Regular';
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0b4f8a;
}
#leistungen .leistung-content .philosophie a.button:hover {
  transition: background-color 0.3s ease-in;
  background-color: #4a7ca9;
  color: #ffffff;
}
#leistungen .tech-overview {
  background-color: #dde2f2;
  display: flex;
  padding: 1.5em 5em;
  justify-content: space-between;
  align-items: center;
}
#leistungen .tech-overview .tech .angular { width: 6em; }
#leistungen .tech-overview .tech .node    { width: 7em; }
#leistungen .tech-overview .tech .nest    { width: 6em; }
#leistungen .tech-overview .tech .net     { width: 6em; }
#leistungen .tech-overview .tech .ruby    { width: 9em; }
#leistungen .tech-overview .tech .flutter { width: 9em; }

/************************************/
/* SECTION: ÜBER UNS */
#ueber-uns .fuerth {
  width: 100%;
}
#ueber-uns .fuerth img {
  width: 100%;
}
#ueber-uns .ueber-uns-content {
  padding: 4em 5em;
}
#ueber-uns .ueber-uns-content h1 {
  margin-bottom: 0.75em;
  font-size: 2em;
}
#ueber-uns .ueber-uns-content p:last-child {
  margin-bottom: 0;
}
#ueber-uns .philosophie {
  background-color: #0b4f8a;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4em 0;
  text-align: center;
}
#ueber-uns .philosophie h3 {
  color: #ffffff;
  font-family: 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
#ueber-uns .philosophie h2 {
  color: #ffffff;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/************************************/
/* SECTION: KUNDEN */
#kunden .kunden-content {
  padding: 8em 5em;
  text-align: center;
}
#kunden .kunden-content h1 {
  margin-bottom: 2em;
  font-size: 1.8em;
}
#kunden .kunden-content .gallery .gallery-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
}
#kunden .kunden-content .gallery .gallery-row .kundenlogo {
  width: 20%;
  height: 100%;
}
#kunden .kunden-content .gallery .gallery-row .kundenlogo.gfk     { width: 7%; }
#kunden .kunden-content .gallery .gallery-row .kundenlogo.airport { width: 12%; }
#kunden .kunden-content .gallery .gallery-row .kundenlogo.eon     { width: 12%; }
#kunden .kunden-content .gallery .gallery-row .kundenlogo.siemens { width: 12%; }

/************************************/
/* FOOTER */
#footer {
  background-color: #052b4d;
  color: #ffffff;
  font-family: 'Source Code Pro Medium';
}
#footer .footer-content {
  padding: 4em 5em;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
#footer .footer-content a {
  color: #5ab0fb;
  letter-spacing: 0.2em;
}
#footer .footer-content a:hover {
  color: #ffffff;
}
#footer .footer-content a.impressum {
  margin-right: 2em;
}

/************************************/
/* SUB-PAGE (Impressum / Datenschutz) */
.sub-page {
  padding: 10em 2em;
}
.sub-page h1 {
  margin-bottom: 0.5em;
}
.sub-page h3 {
  margin-bottom: 1em;
}
.sub-page p {
  line-height: 1.4em;
}

/*****************************/
/*****************************/
/* TABLET */
/*****************************/
@media (max-width: 1100px) {
  p {
    font-size: 1.1em;
  }
  #intro .theme-text {
    width: 65%;
    top: 10em;
    right: 2em;
  }
  #intro .theme-text h1 {
    font-size: 2em;
  }
  #intro .theme-text h2.subline {
    font-size: 1.3em;
  }
  #leistungen .leistungen-navigation {
    padding: 0 2em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung {
    padding: 1em 0.5em;
    min-height: 12em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.entwicklung {
    width: 3.5em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.beratung,
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.schulung {
    width: 2.5em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .name {
    font-size: 1.4em;
  }
  #leistungen .leistung-content {
    padding: 2em 2em;
  }
  #leistungen .leistung-content h1 {
    font-size: 1.8em;
  }
  #leistungen .leistung-content h2 {
    font-size: 1.4em;
  }
  #leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
    font-size: 1.1em;
  }
}

/*****************************/
/*****************************/
/* MOBILE */
/*****************************/
@media (max-width: 860px) {
  #intro {
    display: block;
    left: 0;
  }
  #intro .theme-text {
    width: 75%;
    top: 9em;
    right: 1em;
  }
  #intro .theme-text h1,
  #intro .theme-text h2.subline {
    text-shadow: 0 1px 10px rgba(5, 43, 77, 0.85);
  }
  #intro .theme-text h1 {
    font-size: 1.5em;
  }
  #intro .theme-text h1 br {
    display: none;
  }
  #intro .theme-text h2.subline {
    font-size: 1.1em;
  }
  .rocket {
    width: 12em;
    height: 32em;
  }
  #leistungen .leistungen-navigation {
    padding: 0 1em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung {
    padding: 0.5em 0.25em;
    min-height: 10em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.entwicklung {
    width: 2.75em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.beratung,
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.schulung {
    width: 2em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .name {
    font-size: 1em;
    letter-spacing: 0.1em;
  }
  #leistungen .leistung-content {
    padding: 1em 1em !important;
  }
  #leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
    width: 49% !important;
    font-size: 1.25em;
  }
  #leistungen .tech-overview {
    padding: 1.5em 1em !important;
    flex-wrap: wrap !important;
  }
  #leistungen .tech-overview .tech .angular { width: 4em !important; }
  #leistungen .tech-overview .tech .node    { width: 6em !important; }
  #leistungen .tech-overview .tech .nest    { width: 3em !important; }
  #leistungen .tech-overview .tech .net     { width: 3em !important; }
  #leistungen .tech-overview .tech .ruby    { width: 5em !important; }
  #leistungen .tech-overview .tech .flutter { width: 6em !important; }
  #kunden .kunden-content {
    padding: 2em 0.5em;
  }
  #kunden .kunden-content h1 {
    font-size: 1.4em;
    margin-bottom: 1.6em;
  }
  #kunden .kunden-content .gallery .gallery-row {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1em;
  }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo {
    width: 25% !important;
    margin: 0 1em 2em 1em;
  }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo.gfk     { width: 10% !important; }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo.airport { width: 20% !important; }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo.eon     { width: 14% !important; }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo.siemens { width: 20% !important; }
}

@media (max-width: 800px) {
  #ueber-uns .ueber-uns-content {
    padding: 2em 1em;
  }
  #ueber-uns .ueber-uns-content h1 {
    font-size: 1.8em;
  }
  #ueber-uns .philosophie {
    padding: 3em 0;
  }
  #ueber-uns .philosophie h3 {
    font-size: 1.2em;
  }
  #ueber-uns .philosophie h2 {
    font-size: 1.4em;
  }
  #footer .footer-content {
    padding: 3em 1em;
    display: block;
  }
  #footer .footer-content a {
    font-size: 0.9em;
  }
  #footer .footer-content a.mail-link {
    display: block;
    margin-bottom: 1em;
  }
}

/*****************************/
@media (max-width: 600px) {
  #header {
    padding: 1em;
  }
  #header .logo-wrapper .logo {
    width: 6em;
  }
  #header .operation-wrapper .contact {
    margin-right: 0.5em;
  }
  #header .operation-wrapper .contact .mail-icon {
    width: 1.5em;
    height: 2em;
    margin-right: 0.75em;
  }
  #header .operation-wrapper .contact .language-flag {
    width: 1.8em;
    margin-right: 0;
  }
  #header .navigation-wrapper #menu {
    width: 250px;
    margin: -3.8em 0 0 -200px;
  }
  #header .navigation-wrapper #menu li {
    font-size: 1em !important;
    padding-right: 1.8em !important;
  }
  #intro .theme-text {
    width: 80%;
    top: 8em;
    right: 0.75em;
  }
  #intro .theme-text h1 {
    font-size: 1.3em;
  }
  #intro .theme-text h2.subline {
    font-size: 1em;
  }
  .rocket {
    width: 12em;
    height: 30em;
  }
  #leistungen .leistungen-navigation {
    top: -3em;
    padding: 0 0.15em;
  }
  #leistungen .leistungen-navigation .nav-item {
    width: 33%;
  }
  #leistungen .leistungen-navigation .nav-item .leistung {
    padding: 0.25em 0.25em;
    min-height: 7em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.entwicklung {
    width: 2em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.beratung,
  #leistungen .leistungen-navigation .nav-item .leistung .icon svg.schulung {
    width: 1.35em;
  }
  #leistungen .leistungen-navigation .nav-item .leistung .name {
    font-size: 0.8em;
    letter-spacing: 0.05em;
  }
  #leistungen .leistung-content {
    padding: 0 0.5em 1em 1em !important;
  }
  #leistungen .leistung-content h1 {
    font-size: 1.4em;
  }
  #leistungen .leistung-content h2 {
    font-size: 1.2em;
  }
  #leistungen .leistung-content p {
    font-size: 0.9em;
  }
  #leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
    border: 1px dotted #4a7ca9;
    width: 49% !important;
    font-size: 1em;
  }
  #leistungen .leistung-content .philosophie {
    padding: 2em 0;
    border: 1px dotted #4a7ca9;
  }
  #leistungen .leistung-content .philosophie h3 {
    font-size: 1.1em;
  }
  #leistungen .leistung-content .philosophie h2 {
    font-size: 1.1em;
    margin-top: 1em;
  }
  #leistungen .leistung-content .philosophie a.button {
    padding: 1em;
    width: 80%;
    font-size: 0.9em;
    margin: 0 auto;
  }
  #leistungen .tech-overview .tech .angular { width: 2.5em !important; }
  #leistungen .tech-overview .tech .node    { width: 4em !important; }
  #leistungen .tech-overview .tech .nest    { width: 2em !important; }
  #leistungen .tech-overview .tech .net     { width: 2em !important; }
  #leistungen .tech-overview .tech .ruby    { width: 4em !important; }
  #leistungen .tech-overview .tech .flutter { width: 4em !important; }
  #ueber-uns .ueber-uns-content h1 {
    font-size: 1.4em;
  }
  #ueber-uns .ueber-uns-content p {
    font-size: 0.9em;
  }
  #ueber-uns .philosophie {
    padding: 3em 0.5em;
  }
  #ueber-uns .philosophie h3 {
    font-size: 1.1em;
  }
  #ueber-uns .philosophie h2 {
    font-size: 1.2em;
  }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo {
    width: 40%;
  }
}