@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ==========================================================================
   Custom properties
   ========================================================================== */

:root {
  --ge-ink:            #0f172a;
  --ge-navy:           #2d4c70;
  --ge-blue:           #025cdb;
  --ge-link:           #006cff;
  --ge-pale:           #d9e6f9;
  --ge-pale-active:    #ccdef7;
  --ge-red:            #e2001a;
  --dark-blue-arrow:   #345e90;
  --ge-muted:          #626774;
  --ge-line:           #e0e0e0;
  --tailwind-colors-base-black:#000;
  --tailwind-colors-gray-900:#111827;
  --tailwind-colors-slate-500:#64748B;
  --tailwind-colors-slate-900:#0F172A;
  --font-sans:         Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-font-sans:    var(--font-sans);
  --text-base-font-size:16px;
  --text-base-line-height:24px;
  --text-lg-font-size: 18px;
  --text-lg-line-height:28px;
  --text-size:         16px;
  --font-weight-medium:500;
  --line-height:       24px;
  --card-width:        824px;
  --card-radius:       14px;
  --titlebar-accent-bg:#fff;
  --titlebar-logo-zone:238px;
  --header-height:     56px;
  --footer-height:     40px;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

.block { display: block; }

html {
  min-width: 320px;
  color-scheme: light;
  background: #fff;
}

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
  overflow-x: hidden;
  background: #fff;
  color: var(--ge-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(2, 92, 219, .28);
  outline-offset: 3px;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 30;
  height: var(--header-height);
  border-bottom: 1px solid #dedede;
  background:
    linear-gradient(
      to right,
      #fff 0,
      #fff var(--titlebar-logo-zone),
      var(--titlebar-accent-bg) var(--titlebar-logo-zone),
      var(--titlebar-accent-bg) 100%
    );
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header-logo-section {
  display: flex;
  width: var(--titlebar-logo-zone);
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  padding-right: 17.5px;
  background: #fff;
}

.brand-logo {
  display: block;
  width: 116px;
  height: auto;
  flex: 0 0 auto;
}

.header-spacer {
  display: flex;
  flex: 1 0 0;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  padding-left: 28px;
  padding-right: 26px;
  min-width: 0;
}

.system-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
}

.system-meta__primary {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.system-meta__name {
  color: var(--tailwind-colors-slate-900, #0F172A);
  font-family: var(--font-font-sans, Geist);
  font-size: var(--text-lg-font-size, 18px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--text-lg-line-height, 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.system-meta__version {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(45, 76, 112, .10);
  color: var(--ge-navy);
  font-family: var(--font-font-sans, Geist);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.system-meta__details {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  color: var(--tailwind-colors-slate-500, #64748B);
  font-family: var(--font-font-sans, Geist);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.system-meta__sep {
  color: inherit;
  flex-shrink: 0;
}

.system-meta__sep--name { display: none; }

.system-meta__build-link {
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
}

.system-meta__build-link:hover {
  color: var(--ge-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Language switcher
   ========================================================================== */

.language {
  position: relative;
  flex-shrink: 0;
}

.language__button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 0 5px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--tailwind-colors-base-black, #000);
  cursor: pointer;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.language__button:hover { color: var(--tailwind-colors-base-black, #000); }

/* Flag icons (SVG data icons, no external library) */
.flag-icon {
  display: inline-block;
  width: 21.985px;
  height: 21.985px;
  flex: 0 0 21.985px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.flag-icon--de {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cg clip-path='url(%23clip0_de)'%3E%3Cpath d='M0 16.4887C0 17.1365 0.25736 17.7578 0.715463 18.2159C1.17357 18.674 1.79489 18.9314 2.44274 18.9314H19.542C20.1898 18.9314 20.8111 18.674 21.2692 18.2159C21.7273 17.7578 21.9847 17.1365 21.9847 16.4887V14.0459H0V16.4887Z' fill='%23FFCD05'/%3E%3Cpath d='M0 8.54956H21.9847V14.0458H0V8.54956Z' fill='%23FF5757'/%3E%3Cpath d='M19.542 3.05347H2.44274C1.79489 3.05347 1.17357 3.31083 0.715463 3.76893C0.25736 4.22704 0 4.84836 0 5.49622L0 8.54966H21.9847V5.49622C21.9847 4.84836 21.7273 4.22704 21.2692 3.76893C20.8111 3.31083 20.1898 3.05347 19.542 3.05347Z' fill='%23141414'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_de'%3E%3Crect width='21.9846' height='21.9848' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.flag-icon--gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23012169'/%3E%3Cpath d='M0 0 60 36M60 0 0 36' stroke='%23fff' stroke-width='8'/%3E%3Cpath d='M0 0 60 36M60 0 0 36' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M30 0v36M0 18h60' stroke='%23c8102e' stroke-width='7'/%3E%3C/svg%3E");
}

.language__menu {
  position: absolute;
  top: calc(100% + 5px);
  right: -9px;
  width: 142px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.language__menu[hidden] { display: none; }

.language__option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  color: var(--tailwind-colors-base-black, #000);
  cursor: pointer;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.language__option:hover { background: #f8fafc; }

/* ==========================================================================
   Main content area
   ========================================================================== */

.page-main {
  width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  flex: 1 0 auto;
  padding: 0 16px 72px;
}

.workflow-stage {
  width: min(100%, var(--card-width));
  margin: 0 auto;
  padding-top: 158px;
}

/* Hero */
.hero-copy { text-align: center; }

.hero-title {
  margin: 0;
  color: var(--ge-navy);
  font-family: var(--font-sans);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  align-self: stretch;
}
.hero-subtitle {
  margin: 19px 0 0;
  color: var(--ge-navy);
  font-family: var(--font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  align-self: stretch;
}

/* Migration notice */
.migration-notice {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px solid #f59e0b;
  border-left: 6px solid #f59e0b;
  border-radius: 14px;
  background: #fffbeb;
  box-shadow:
    0  4px  6px -1px rgba(0, 0, 0, .08),
    0  2px  4px -2px rgba(0, 0, 0, .08);
  color: #78350f;
}

.migration-notice__icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.migration-notice__content {
  min-width: 0;
}

.migration-notice__title {
  margin: 0;
  color: #78350f;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.migration-notice__copy {
  margin: 6px 0 0;
  color: #78350f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.migration-notice__link {
  display: inline-block;
  margin-top: 8px;
  color: #025cdb;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.migration-notice__link:hover { color: #004eb8; }

/* ==========================================================================
   Cards
   ========================================================================== */

.cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 44px;
}

.card {
  position: relative;
  width: 100%;
  border-radius: var(--card-radius);
  background: #fff;
}

/* AppStart card – Figma specs */
.app-card {
  min-height: 208px;
  border-top:    1px solid var(--ge-navy);
  border-right:  1px solid var(--ge-navy);
  border-bottom: 1px solid var(--ge-navy);
  border-left:   6px solid var(--ge-navy);
  border-radius: 14px;
  box-shadow:
    0  4px  6px -1px rgba(0, 0, 0, .10),
    0  2px  4px -2px rgba(0, 0, 0, .10);
  transition: box-shadow 180ms ease;
}

.app-card.is-menu-open { z-index: 5; }

.app-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 24px 24px 40px;
}

/* Figma: Text Container inside AppStart card */
.app-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 725px;
  max-width: 100%;
  flex-shrink: 0;
}

.card-title {
  margin: 0;
  align-self: stretch;
  color: var(--tailwind-colors-gray-900, #111827);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.card-copy {
  margin: 0;
  align-self: stretch;
  color: var(--tailwind-colors-slate-900, #0F172A);
  font-family: Inter;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  line-height: normal;
}

/* ==========================================================================
   Split-button / variant picker
   ========================================================================== */

.app-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding-top: 2px;
}

.split-button {
  position: relative;
  z-index: 3;
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: stretch;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(15, 23, 42, .25);
}

.split-button.is-open {
  border-radius: 8px 8px 0 0;
  box-shadow:
    -3px 0   6px -2px rgba(15, 23, 42, .20),
     3px 0   6px -2px rgba(15, 23, 42, .20),
     0  -3px 6px -2px rgba(15, 23, 42, .20);
}

.download-button,
.menu-button,
.ows-download {
  border: 0;
  color: #FFF;
  cursor: pointer;
  font-family: var(--font-font-sans, Geist);
  font-size: var(--text-base-font-size, 16px);
  font-style: normal;
  font-weight: 450;
  line-height: var(--text-base-line-height, 24px);
  text-align: center;
}

.download-button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 45px;
  border-radius: 8px 0 0 8px;
  background: var(--ge-navy);
  white-space: nowrap;
}

.menu-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-left: 1px solid #fff;
  border-radius: 0 8px 8px 0;
  background: var(--dark-blue-arrow);
}

.split-button.is-open .menu-button { border-radius: 0 8px 0 0; }

.download-button:hover,
.menu-button:hover,
.menu-button.is-open,
.ows-download:hover,
.ows-download:active {
  background: var(--ge-blue);
}

.chevron {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  aspect-ratio: 1 / 1;
  transition: transform 150ms ease;
}

.menu-button.is-open .chevron { transform: rotate(180deg); }

/* Variant dropdown */
.app-menu {
  position: absolute;
  z-index: 2;
  top: 36px;
  right: 0;
  left: 0;
  min-width: 210px;
  max-height: 228px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
  background: #fff;
  box-shadow:
    -3px 4px 7px -2px rgba(15, 23, 42, .22),
     3px 4px 7px -2px rgba(15, 23, 42, .22),
     0   5px 7px -1px rgba(15, 23, 42, .22);
  animation: menu-in 120ms ease-out both;
}

.app-menu[hidden] { display: none; }

/* The menu always inherits the split-button's width; rounded corners live on
   the container so hover areas reach the edge without white gaps. */
.app-menu__item {
  display: flex;
  width: 100%;
  min-width: 210px;
  height: 36px;
  align-items: center;
  justify-content: flex-start;
  gap: 43px;
  padding: 6px 13px 6px 40px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ge-navy);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
}

.app-menu__label { min-width: 0; }

.app-menu__default-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef4fc;
  color: var(--ge-navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.app-menu__item:hover,
.app-menu__item[aria-selected="true"],
.app-menu__item:active {
  background:
    linear-gradient(0deg, rgba(2, 92, 219, .15) 0%, rgba(2, 92, 219, .15) 100%),
    #fff;
  color: var(--ge-navy);
}

/* AppStart info link */
.app-info {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 2px auto 0;
  color: #3B82F6;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.app-info:hover { color: #2563eb; }

/* ==========================================================================
   OpenWebStart card
   ========================================================================== */

/* OpenWebStart card – Figma specs */
.ows-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0  4px  6px -1px rgba(0, 0, 0, .10),
    0  2px  4px -2px rgba(0, 0, 0, .10);
}

/* OWS text container: fluid width inside the toggle */
.ows-toggle__text .app-card__text {
  width: 100%;
  align-items: flex-start;
}

/* Figma inner Container: height 96px, padding 15px 71px 6px 32px,
   justify-content center, align-items center, gap 24px, border-radius 10px */
.ows-toggle {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 71px 20px 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.ows-toggle__text {
  flex: 1 1 0;
  min-width: 0;
}

.ows-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  place-items: center;
  background: none;
  border-radius: 0;
  transition: transform 200ms ease;
}

.ows-icon svg {
  width: 36px;
  height: 36px;
}

.ows-toggle:hover .ows-icon { transform: rotate(90deg); }

/* Open: rotate(-90deg) */
.ows-card.is-open .ows-icon { transform: rotate(-90deg); }

/* Open + Hover: bleibt bei -90deg, SVG zeigt weiter open-Icon */
.ows-card.is-open .ows-toggle:hover .ows-icon { transform: rotate(-90deg); }

.ows-panel {
  padding: 0 0 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  animation: panel-in 160ms ease-out both;
}

.ows-panel[hidden] { display: none; }

.ows-control { padding-top: 0; }

.ows-card.is-menu-open { z-index: 5; }

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  display: flex;
  min-height: var(--footer-height);
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  background: #fff;
  color: #A4A4A4;
}

.site-footer__inner {
  width: 100%;
  margin: 0;
}

.site-footer__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ge-line);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #A4A4A4;
}

.site-footer__rights {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.site-footer__c-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  aspect-ratio: 1 / 1;
}

.site-footer__links a {
  color: #A4A4A4;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: #626774;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Toast notification
   ========================================================================== */

.toast {
  position: fixed;
  z-index: 60;
  bottom: 24px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: var(--ge-ink);
  box-shadow: 0 10px 25px rgba(15, 23, 42, .22);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.toast[hidden] { display: none; }

/* No-JS fallback (progressive enhancement) */
.noscript-notice {
  width: min(100%, var(--card-width));
  margin: 24px auto 0;
  padding: 12px 16px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 14px;
  line-height: 20px;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Responsive – tablet (≤ 1040 px)
   ========================================================================== */

@media (max-width: 1040px) {
  :root {
    --titlebar-logo-zone: 200px;
  }

  .header-spacer { padding-left: 20px; }
  .workflow-stage { padding-top: 120px; }
}

/* ==========================================================================
   Responsive – mobile (≤ 760 px)
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --header-height: 48px;
    --titlebar-logo-zone: 160px;
  }
  .header-logo-section { padding-right: 12px; }
  .header-spacer { padding-left: 16px; padding-right: 16px; }
  .brand-logo { width: 96px; }
  .system-meta { display: none; }
  .page-main { padding: 0 14px 48px; }
  .workflow-stage { padding-top: 64px; }
  .hero-title { font-size: 32px; line-height: 39px; }
  .hero-subtitle { margin-top: 7px; font-size: 18px; line-height: 24px; }
  .migration-notice { gap: 12px; margin-top: 28px; padding: 16px 18px; }
  .migration-notice__title { font-size: 17px; line-height: 23px; }
  .migration-notice__copy,
  .migration-notice__link { font-size: 14px; line-height: 20px; }
  .cards { margin-top: 34px; gap: 18px !important; }
  .app-card { min-height: 0; }
  .app-card__content { padding: 28px 20px 24px 24px; }
  .app-control { width: min(100%, 360px); margin-top: 8px; }
  .split-button { width: 100%; }
  .download-button { flex: 1 1 auto; padding-right: 16px; padding-left: 16px; }
  .ows-toggle { padding: 16px 20px; }
  .ows-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .site-footer { padding-right: 20px; padding-left: 20px; }
}

/* ==========================================================================
   Responsive – small mobile (≤ 430 px)
   ========================================================================== */

@media (max-width: 430px) {
  .language__button > .language__label { display: none; }
  .hero-title { font-size: 29px; }
  .hero-subtitle { font-size: 17px; }
  .card-copy br { display: none; }
  .ows-toggle { gap: 18px; }
  .ows-icon { width: 32px; height: 32px; flex-basis: 32px; }
}