/* Local additions to the exported MyWebsite layout. */
:root {
  color-scheme: dark;
  --site-surface: #141e29;
  --site-surface-alt: #1a2734;
  --site-navigation: #0c141d;
  --site-text: #d7e2ec;
  --site-heading: #edf4fa;
  --site-link: #acd5f0;
  --site-border: #53677a;
}

html,
body,
.page-root {
  background-color: var(--site-surface);
  color: var(--site-text);
}

.page-root {
  --page-background-color: var(--site-surface) !important;
}

/* The exporter writes these variables inline on each content module. */
.section-root,
.text-root {
  --text-container-color: var(--site-text) !important;
  --text-container-anchor-color: var(--site-link) !important;
}

.heading-root {
  --heading-color-h1: var(--site-heading) !important;
  --heading-color-h2: var(--site-heading) !important;
  --heading-color-h3: var(--site-heading) !important;
  --heading-color-h4: var(--site-heading) !important;
  --heading-color-h5: var(--site-heading) !important;
  --heading-color-h6: var(--site-text) !important;
}

.navigation-root {
  --navigation-background-color: var(--site-navigation) !important;
  --navigation-background-color-active: #20384b !important;
  --navigation-background-color-active-second: #182c3d !important;
  --navigation-color: var(--site-text) !important;
  --navigation-active-color: var(--site-link) !important;
  --navigation-contrast-color: var(--site-heading) !important;
}

.navigation-root-footer {
  background-color: transparent;
}

.site-header-row {
  gap: 8px;
}

.site-header-row > .site-header-badge {
  flex: 0 0 auto;
  max-width: none;
}

.site-header-row > .site-header-navigation {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.site-header-language {
  flex: 0 0 auto;
  padding: 8px 4px;
  position: relative;
  z-index: 305;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #3a4c5b;
  border-radius: 8px;
  background: #111e2a;
  font: 400 12px/1.5 Arial, sans-serif;
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 5px;
  color: #b4c5d2;
  text-decoration: none;
}

.language-switch a[aria-current="page"] {
  color: #f1f6fa;
  background: #2b4153;
}

.language-switch a:hover {
  color: #fff;
  background: #243746;
}

.language-flag {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 12px;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #344b43;
  border-radius: 999px;
  background: #14251f;
  color: #c7d9cf;
  font: 400 13px/1.5 Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.availability-badge:hover {
  border-color: #648573;
  color: #edf4fa;
}

.availability-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cbd92;
}

.current-role {
  margin: 8px 0 20px;
  color: var(--site-text);
  font: 400 18px/1.6 Arial, sans-serif;
}

.current-role a {
  color: var(--site-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keep the diagonal edges, but shorten the header and skyline transitions. */
[data-zone-type="header"].section-geometry-slanted,
.site-hero.section-geometry-slanted {
  padding-bottom: 40px;
}

[data-zone-type="header"].section-geometry-slanted + .section > .section-inner,
.site-hero.section-geometry-slanted + .section > .section-inner {
  top: -40px;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}

.site-hero > .section-content > .grid-row-top-level {
  min-height: 240px;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.site-hero > .section-inner {
  background-image: linear-gradient(rgba(8, 21, 34, 0.52), rgba(8, 21, 34, 0.42)), url("frankfurt-skyline.png") !important;
  background-position: 50% 65% !important;
}

.site-hero .heading-root h1 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.25;
  margin: 0 0 16px;
}

.site-hero .social-media-container {
  margin-top: 4px;
}

::selection {
  background: #41657e;
  color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--site-link);
  outline-offset: 4px;
}

.navigation-menu-toggle-trigger:focus-visible + .navigation-mobile-icons {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.contact-form {
  font-family: Arial, sans-serif;
  color: var(--site-text);
}

.contact-form .form-label {
  color: var(--site-text);
}

.contact-form .form-input {
  width: 100%;
  box-sizing: border-box;
  color: var(--site-heading);
  background: #0e1822;
  border: 1px solid var(--site-border);
  border-radius: 4px;
}

.contact-form .form-input:focus-visible {
  outline: 3px solid var(--site-link);
  outline-offset: 3px;
}

.contact-form .form-input:autofill {
  box-shadow: 0 0 0 1000px #172d3f inset;
  -webkit-text-fill-color: var(--site-heading);
}

.contact-form textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form .contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
  margin: 20px 0;
}

.contact-consent input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: #acd5f0;
}

.contact-consent label {
  cursor: pointer;
}

.contact-form .form-button {
  color: #fff;
  background: #285674;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
}

.contact-form .form-button:hover:not(:disabled) {
  background: #346c90;
}

.contact-form .form-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.contact-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-status {
  margin: 16px 0;
  line-height: 1.5;
  color: #a6dbb8;
}

.contact-status:empty {
  margin: 0;
}

.contact-status-error {
  color: #ffb4ab;
}

.contact-alternative,
.contact-note {
  font-size: 16px;
  line-height: 1.5;
}

.contact-alternative a,
.contact-consent a {
  color: var(--site-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

#contact-retry {
  padding: 8px 12px;
  margin-bottom: 12px;
  color: var(--site-text);
  background: #20384b;
  border: 1px solid var(--site-border);
  border-radius: 4px;
}

@media (max-width: 767px) {
  .site-header-row {
    gap: 6px;
  }

  .site-header-row > .grid-column-root,
  .site-header-language {
    padding-left: 0;
    padding-right: 0;
  }

  .availability-badge {
    font-size: 12px;
    padding: 7px 9px;
    gap: 6px;
  }

  .language-switch a {
    gap: 4px;
    padding: 5px;
  }

  .site-hero > .section-content > .grid-row-top-level {
    min-height: 220px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .site-hero .heading-root h1 {
    max-width: 330px;
    margin: 0 auto 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}