/*
 * Stylesheet der neuen deutschen Startseite (Relaunch).
 * Basiert auf style.css; EN-Seite, Impressum und Datenschutz nutzen bis zur
 * Umstellung weiterhin style.css.
 */
/************************************/
/* 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;
}

/************************************/
/* BARRIEREFREIHEIT */
.skip-link {
  position: absolute;
  top: -10em;
  left: 1em;
  z-index: 1000;
  padding: 0.75em 1.25em;
  background: #0b4f8a;
  color: #ffffff;
  font-family: 'Roboto Regular';
  border-radius: 0 0 0.5em 0.5em;
}
.skip-link:focus {
  top: 0;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0b4f8a;
  outline-offset: 3px;
}
/* Fokus auf dunklem Hintergrund */
#header .operation-wrapper a:focus-visible,
#header .operation-wrapper button:focus-visible,
#intro a:focus-visible,
#ueber-uns .philosophie a:focus-visible,
#footer a:focus-visible,
.skip-link:focus-visible {
  outline-color: #ffffff;
}
#header.non-transparent .operation-wrapper .contact a:focus-visible,
#header.non-transparent .operation-wrapper .contact button:focus-visible,
body.sub-page-navigation #header .operation-wrapper .contact a:focus-visible,
body.sub-page-navigation #header .operation-wrapper .contact button:focus-visible {
  outline-color: #0b4f8a;
}
#header .navigation-wrapper #menu a:focus-visible {
  outline-offset: -3px;
}
#header .navigation-wrapper #menuToggle:has(input:focus-visible) {
  outline: 3px solid #5ab0fb;
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .space,
  .rocket {
    -webkit-animation: none !important;
    animation: none !important;
  }
}

/************************************/
/* PLATZHALTER (vor Livegang entfernen) */
.placeholder {
  background-color: #fff176;
  color: #3d3300;
  outline: 2px dashed #c9a400;
  padding: 0 0.25em;
  font-family: 'Roboto Regular';
  letter-spacing: normal;
  text-transform: none;
  text-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: center;
}
#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;
  height: auto;
}
#header .operation-wrapper .contact.language-switcher {
  position: relative;
}
#header .operation-wrapper .language-toggle {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
#header .operation-wrapper .language-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5em;
  padding: 0.35em 0;
  list-style: none;
  background: #ffffff;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
#header .operation-wrapper .language-switcher.open .language-menu {
  display: block;
}
#header .operation-wrapper .language-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1em;
  white-space: nowrap;
  color: #0b4f8a;
  text-decoration: none;
}
#header .operation-wrapper .language-option:hover {
  background-color: #f0f0f0;
}
#header .operation-wrapper .language-option.is-current {
  font-weight: bold;
  background-color: #f5f5f5;
}
#header .operation-wrapper .language-option .language-flag {
  width: 1.5em;
}
/* 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;
  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, -3px);
  background: #ffffff;
}
#header .navigation-wrapper #menuToggle input:checked ~ span:nth-last-of-type(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#header .navigation-wrapper #menuToggle input:checked ~ span:last-of-type {
  transform: rotate(-45deg) translate(0, -2px);
}
#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 {
  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 {
  font-size: 1.3em;
}
/* altes Markup <a><li> (EN, Impressum, Datenschutz) und neues <li><a> */
#header .navigation-wrapper #menu > a > li.subnav-item,
#header .navigation-wrapper #menu > li.subnav-item > a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75em 1.5em 0.75em 0.75em;
}
/* Geschlossenes Menü aus der Tab-Reihenfolge nehmen */
#header .navigation-wrapper #menu {
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), visibility 0s 0.5s;
}
#header .navigation-wrapper #menuToggle input:checked ~ ul {
  transform: none;
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), visibility 0s;
}

/************************************/
/* 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;
}

/************************************/
/* BUTTONS */
.button {
  display: inline-block;
  padding: 1em 1.5em;
  border-radius: 0.5em;
  font-family: 'Roboto Regular';
  font-size: 1em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.button-primary {
  background-color: #dde2f2;
  color: #0b4f8a;
}
.button-primary:hover {
  background-color: #3f6e9a;
  color: #ffffff;
}
.button-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.button-secondary:hover {
  background-color: #ffffff;
  color: #0b4f8a;
}

/************************************/
/* ABSCHNITTE (gemeinsam) */
main section[id] {
  scroll-margin-top: 5em;
}
main:focus {
  outline: none;
}
.section {
  padding: 5em 5em;
}
.section-head {
  padding: 5em 5em 2em;
}
.section .section-head {
  padding: 0 0 2em;
}
.section-head h2 {
  font-size: 2em;
  margin-bottom: 0.75em;
}
.section-head p:last-child {
  margin-bottom: 0;
}

/************************************/
/* SECTION: INTRO */
#intro {
  position: relative;
  display: flex;
  width: 100%;
  text-align: right;
}
#intro.space {
  height: auto;
  min-height: 42em;
}
#intro .rocket {
  flex-shrink: 0;
  height: auto;
}
#intro .theme-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8em 5em 4em 2em;
}
#intro .theme-text > div {
  max-width: 44em;
}
#intro .theme-text h1 {
  font-family: 'Montserrat Bold';
  font-size: 2.4em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
#intro .theme-text .subline {
  margin: 1em 0 2em;
  font-family: 'Roboto Light';
  font-size: 1.3em;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
#intro .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1em;
}
#intro .trust {
  margin: 1.5em 0 0;
  font-size: 1em;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* 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: 35em;
}
.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;
  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: clamp(12px, 4.8px + 1.6vw, 18px);
  font-family: 'Roboto Regular';
  letter-spacing: 0.2em;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
#leistungen .leistungen-navigation .nav-item .leistung.active,
#leistungen .leistungen-navigation .nav-item .leistung:hover {
  background-color: #3f6e9a;
  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 h3,
#leistungen .leistung-content h4 {
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0b4f8a;
  line-height: 1.2;
}
#leistungen .leistung-content h3 {
  font-size: 1.6em;
  margin: 0 0 0.75em;
}
#leistungen .leistung-content h4 {
  font-size: 1.3em;
  margin: 1.6em 0 0.75em;
}
#leistungen .leistung-content .leistungen-uebersicht {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
#leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
  border: 3px dotted #4a7ca9;
  min-height: 6em;
  padding: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Roboto Regular';
  color: #3f6e9a;
  font-size: 1.1em;
  background-color: #f6f8ff;
  overflow-wrap: break-word;
  hyphens: auto;
}
#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; }

/************************************/
/* KARTEN (Angebote, Erfolgsbeispiele) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.karten {
  display: grid;
  gap: 1.5em;
}
.karten-4 {
  grid-template-columns: repeat(4, 1fr);
}
.karten-3 {
  grid-template-columns: repeat(3, 1fr);
}
.karten-2 {
  grid-template-columns: repeat(2, 1fr);
}
.karte {
  display: flex;
  flex-direction: column;
  padding: 1.75em 1.5em;
  border: 3px dotted #4a7ca9;
  background-color: #f6f8ff;
}
.karte h3 {
  margin: 0 0 0.75em;
  font-family: 'Montserrat Bold';
  font-size: 1.15em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b4f8a;
  overflow-wrap: break-word;
  hyphens: auto;
}
.karte p {
  font-size: 1em;
  letter-spacing: 0.05em;
}
.karte .karte-label {
  margin-bottom: 0.75em;
  font-family: 'Source Code Pro Medium';
  font-size: 0.85em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3f6e9a;
}
.karte-fakten {
  margin: auto 0 0;
  padding-top: 1em;
  border-top: 1px solid #dde2f2;
  font-family: 'Roboto Regular';
  color: #0b4f8a;
}
.karte-fakten > div {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.25em;
}
.karte-fakten dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85em;
}
.karte-fakten dd {
  margin: 0;
  text-align: right;
}
.karte-details {
  margin: 0;
}
.karte-details dt {
  margin-top: 0.75em;
  font-family: 'Roboto Bold';
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b4f8a;
}
.karte-details dd {
  margin: 0.25em 0 0;
  font-family: 'Roboto Light';
  letter-spacing: 0.05em;
}
.karte-details dd p {
  margin-bottom: 0.6em;
}
.karte-details dd p:last-child {
  margin-bottom: 0;
}
.hinweis {
  margin-top: 2em;
  padding: 1.5em 2em;
  border-left: 6px solid #0b4f8a;
  background-color: #dde2f2;
}
.hinweis p {
  font-size: 1em;
  margin-bottom: 0.75em;
}
.hinweis strong {
  font-family: 'Roboto Bold';
  font-weight: normal;
  color: #0b4f8a;
}
.hinweis a {
  font-family: 'Roboto Regular';
  color: #0b4f8a;
  text-decoration: underline;
}
.hinweis a:hover {
  color: #052b4d;
}

/************************************/
/* SECTION: ÜBER UNS */
#ueber-uns .fuerth {
  width: 100%;
}
#ueber-uns .fuerth img {
  width: 100%;
  height: auto;
}
#ueber-uns .ueber-uns-content {
  padding: 4em 5em;
}
#ueber-uns .ueber-uns-content h2 {
  margin-bottom: 0.75em;
  font-size: 2em;
}
#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 p {
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
#ueber-uns .philosophie .philosophie-label {
  margin-bottom: 0.5rem;
  font-family: 'Montserrat';
  font-size: 1.75rem;
  line-height: 1.2;
}
#ueber-uns .philosophie .philosophie-text {
  font-family: 'Montserrat Bold';
  font-size: 2rem;
  line-height: 1.2;
}

/************************************/
/* SECTION: KUNDEN */
#kunden .kunden-content {
  padding: 8em 5em;
  text-align: center;
}
#kunden .kunden-content h2 {
  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;
  gap: 2.5em;
  margin-bottom: 2em;
}
#kunden .kunden-content .gallery .gallery-row .kundenlogo {
  width: 20%;
  height: 100%;
  min-width: 0;
}
#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%; }
#kunden .kunden-content .gallery .gallery-row .kundenlogo.yougov  { width: 12%; }

/************************************/
/* SECTION: SO ARBEITEN WIR */
#vorgehen {
  background-color: #f6f8ff;
}
#vorgehen .schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
#vorgehen .schritte li {
  counter-increment: schritt;
}
#vorgehen .schritte li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 1em;
  border-radius: 50%;
  background-color: #0b4f8a;
  color: #ffffff;
  font-family: 'Montserrat Bold';
  font-size: 1.2em;
}
#vorgehen .schritte h3 {
  font-family: 'Montserrat Bold';
  font-size: 1.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0b4f8a;
}
#vorgehen .schritte p {
  font-size: 1em;
  margin-bottom: 0;
}

/************************************/
/* SECTION: KONTAKT */
#kontakt {
  background-color: #dde2f2;
}
#kontakt .kontakt-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
}
#kontakt address {
  font-style: normal;
}
#kontakt address p {
  margin-bottom: 0.25em;
}
#kontakt .ansprechpartner-name {
  font-family: 'Montserrat Bold';
  font-size: 1.4em;
  letter-spacing: 0.1em;
  color: #0b4f8a;
}
#kontakt .ansprechpartner-rolle {
  margin-bottom: 1em !important;
}
#kontakt address a,
#kontakt .termin a {
  font-family: 'Roboto Regular';
  color: #0b4f8a;
  text-decoration: underline;
}
#kontakt .kontakt-aktionen {
  max-width: 28em;
}
#kontakt .kontakt-aktionen .button-primary {
  background-color: #0b4f8a;
  color: #ffffff;
}
#kontakt .kontakt-aktionen .button-primary:hover {
  background-color: #052b4d;
}
#kontakt .termin {
  margin: 1.5em 0 0;
  font-size: 1em;
}

/************************************/
/* 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;
}

@media (max-width: 1300px) {
  .karten-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*****************************/
/*****************************/
/* TABLET */
/*****************************/
@media (max-width: 1100px) {
  p {
    font-size: 1.1em;
  }
  .section {
    padding: 4em 2em;
  }
  .section-head {
    padding: 4em 2em 2em;
  }
  #intro .rocket {
    width: 24em;
  }
  #intro .theme-text {
    padding: 8em 2em 4em 1em;
  }
  #intro .theme-text h1 {
    font-size: 2em;
  }
  #intro .theme-text .subline {
    font-size: 1.2em;
  }
  #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 .leistung-content {
    padding: 2em 2em;
  }
  #leistungen .leistung-content h3 {
    font-size: 1.4em;
  }
  #leistungen .leistung-content h4 {
    font-size: 1.2em;
  }
  #leistungen .leistung-content .leistungen-uebersicht {
    grid-template-columns: repeat(2, 1fr);
  }
  .karten-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  #vorgehen .schritte {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
}

/*****************************/
/*****************************/
/* MOBILE */
/*****************************/
@media (max-width: 860px) {
  .section {
    padding: 3em 1em;
  }
  .section-head {
    padding: 3em 1em 1.5em;
  }
  .section-head h2 {
    font-size: 1.5em;
  }
  .karten-3,
  .karten-2 {
    grid-template-columns: 1fr;
  }
  #intro {
    display: block;
  }
  #intro .rocket {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12em;
    height: auto;
  }
  #intro .theme-text {
    position: relative;
    padding: 7em 1em 3em 5em;
  }
  #intro .theme-text h1 {
    font-size: 1.7em;
  }
  #intro .theme-text .subline {
    font-size: 1.1em;
  }
  #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 .leistung-content {
    padding: 1em 1em !important;
  }
  #leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
    font-size: 1em;
  }
  #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 h2 {
    font-size: 1.4em;
    margin-bottom: 1.6em;
  }
  #kunden .kunden-content .gallery .gallery-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    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.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; }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo.yougov  { width: 20% !important; }
}

@media (max-width: 800px) {
  #ueber-uns .ueber-uns-content {
    padding: 2em 1em;
  }
  #ueber-uns .ueber-uns-content h2 {
    font-size: 1.5em;
  }
  #ueber-uns .philosophie {
    padding: 3em 0;
  }
  #ueber-uns .philosophie .philosophie-label {
    font-size: 1.2em;
  }
  #ueber-uns .philosophie .philosophie-text {
    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;
  }
  #header .navigation-wrapper #menu {
    width: 250px;
    margin: -3.8em 0 0 -200px;
  }
  #header .navigation-wrapper #menu li {
    font-size: 1em !important;
  }
  #header .navigation-wrapper #menu > a > li.subnav-item,
  #header .navigation-wrapper #menu > li.subnav-item > a {
    padding-right: 1.8em;
  }
  #intro.space {
    min-height: 0;
  }
  #intro .rocket {
    width: 8em;
    opacity: 0.6;
  }
  #intro .theme-text {
    padding: 6.5em 1em 2.5em 2em;
  }
  #intro .theme-text h1 {
    font-size: 1.4em;
    letter-spacing: 0.08em;
  }
  #intro .theme-text .subline {
    font-size: 1em;
    letter-spacing: 0.05em;
  }
  #intro .trust {
    font-size: 0.9em;
  }
  .button {
    padding: 0.9em 1.1em;
    font-size: 0.85em;
    letter-spacing: 0.1em;
  }
  #leistungen .leistungen-navigation {
    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 .leistung-content {
    padding: 0 0.5em 1em 1em !important;
  }
  #leistungen .leistung-content {
    padding-top: 1.5em !important;
  }
  #leistungen .leistung-content h3 {
    font-size: 1.2em;
    letter-spacing: 0.1em;
  }
  #leistungen .leistung-content h4 {
    font-size: 1.05em;
    letter-spacing: 0.1em;
  }
  #leistungen .leistung-content p {
    font-size: 0.9em;
  }
  #leistungen .leistung-content .leistungen-uebersicht {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
  .karten-4,
  .karten-3,
  .karten-2 {
    grid-template-columns: 1fr;
  }
  .karte {
    border-width: 1px;
    padding: 1.25em 1em;
  }
  .hinweis {
    padding: 1.25em 1em;
  }
  #leistungen .leistung-content .leistungen-uebersicht .einzelleistung {
    border: 1px dotted #4a7ca9;
    min-height: 3.5em;
  }
  #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 h2 {
    font-size: 1.3em;
    letter-spacing: 0.1em;
  }
  #ueber-uns .ueber-uns-content p {
    font-size: 0.9em;
  }
  #ueber-uns .philosophie {
    padding: 3em 0.5em;
  }
  #ueber-uns .philosophie .philosophie-label {
    font-size: 1.1em;
  }
  #ueber-uns .philosophie .philosophie-text {
    font-size: 1.2em;
  }
  #kunden .kunden-content .gallery .gallery-row .kundenlogo {
    width: 40%;
  }
}

/************************************/
/* TECH-UPDATE (Blog) */
.tech-update .section {
  padding-top: 9em;
}
.tech-update .section-head h1 {
  font-size: 2em;
  margin-bottom: 0.75em;
}
.beitrag-karte h2,
.beitrag-karte h3 {
  margin: 0 0 0.75em;
  font-family: 'Montserrat Bold';
  font-size: 1.15em;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #0b4f8a;
  overflow-wrap: break-word;
  hyphens: auto;
}
.beitrag-karte h2 a,
.beitrag-karte h3 a {
  color: inherit;
}
.beitrag-karte h2 a:hover,
.beitrag-karte h3 a:hover {
  text-decoration: underline;
}
.beitrag-karte .beitrag-karte-mehr {
  margin: auto 0 0;
}
.beitrag-karte .beitrag-karte-mehr a {
  font-family: 'Roboto Regular';
  color: #0b4f8a;
}
.tech-update-alle {
  margin: 2em 0 0;
  text-align: center;
}
.beitrag {
  max-width: 48em;
  margin: 0 auto;
  padding: 9em 2em 5em;
}
.beitrag-kopf {
  margin-bottom: 2.5em;
}
.beitrag-serie {
  margin-bottom: 1em;
  font-family: 'Source Code Pro Medium';
  font-size: 0.85em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3f6e9a;
}
.beitrag-serie a {
  color: inherit;
  text-decoration: underline;
}
.beitrag-kopf h1 {
  font-size: 1.8em;
  letter-spacing: 0.1em;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}
.beitrag-text p,
.beitrag-text li {
  font-family: 'Roboto Light';
  font-size: 1.1em;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.beitrag-text p {
  margin-bottom: 1.1em;
}
.beitrag-text .beitrag-zwischentitel {
  margin: 1.8em 0 0.6em;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.beitrag-text .beitrag-punkt {
  margin: 1.4em 0 0.3em;
  font-family: 'Roboto Bold';
  font-weight: normal;
  font-size: 1.1em;
  letter-spacing: 0.03em;
  color: #0b4f8a;
}
.beitrag-text .beitrag-punkt + p {
  margin-top: 0;
}
.beitrag-text .beitrag-liste {
  margin: -0.4em 0 1.1em;
  padding-left: 0;
  list-style: none;
}
.beitrag-text .beitrag-liste li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.3em;
}
.beitrag-text .beitrag-liste li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #0b4f8a;
}
.beitrag-text code {
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
  background-color: #dde2f2;
  color: #0b4f8a;
  font-family: 'Source Code Pro Medium', monospace;
  font-size: 0.9em;
  letter-spacing: 0;
}
.beitrag-text pre {
  margin: 0 0 1.2em;
  padding: 1em 1.25em;
  overflow-x: auto;
  border-radius: 0.5em;
  background-color: #052b4d;
}
.beitrag-text pre code {
  padding: 0;
  background: none;
  color: #ffffff;
  font-size: 1em;
  line-height: 1.6;
}
.beitrag-text a,
.beitrag-zurueck a {
  font-family: 'Roboto Regular';
  color: #0b4f8a;
  text-decoration: underline;
}
.beitrag-cta {
  margin-top: 3em;
}
.beitrag-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  margin-top: 3em;
}
.beitrag-nav a {
  flex: 1 1 0;
  padding: 1em 1.25em;
  border: 1px dotted #4a7ca9;
  background-color: #f6f8ff;
  font-family: 'Roboto Regular';
  color: #0b4f8a;
}
.beitrag-nav a:hover {
  background-color: #dde2f2;
}
.beitrag-nav a span {
  display: block;
  margin-bottom: 0.3em;
  font-family: 'Source Code Pro Medium';
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3f6e9a;
}
.beitrag-nav .beitrag-nav-neuer {
  text-align: right;
}
.beitrag-nav .beitrag-nav-neuer:only-child {
  margin-left: auto;
  max-width: 50%;
}
.beitrag-nav .beitrag-nav-aelter:only-child {
  max-width: 50%;
}
.beitrag-zurueck {
  margin-top: 2em;
}

@media (max-width: 860px) {
  .tech-update .section {
    padding-top: 7em;
  }
  .tech-update .section-head h1 {
    font-size: 1.5em;
  }
  .beitrag {
    padding: 7em 1em 3em;
  }
  .beitrag-kopf h1 {
    font-size: 1.4em;
  }
}

@media (max-width: 600px) {
  .beitrag-kopf h1 {
    font-size: 1.2em;
    letter-spacing: 0.06em;
  }
  .beitrag-text p,
  .beitrag-text li {
    font-size: 1em;
  }
  .beitrag-nav {
    flex-direction: column;
  }
  .beitrag-nav .beitrag-nav-aelter:only-child,
  .beitrag-nav .beitrag-nav-neuer:only-child {
    max-width: none;
  }
}
.section-head .linkedin-profil {
  color: #0b4f8a;
  text-decoration: underline;
}
.section-head .linkedin-profil:hover {
  color: #052b4d;
}