:root {
  color-scheme: light;

  /* Farbpalette (BGGI-Standard: farbpalette-design) */
  --ink: #2d3748;            /* Charcoal — Haupttext */
  --muted: #4a5568;          /* gedämpfter Text, WCAG AA auf Weiß/Off-White */
  --navy: #0b1f3a;           /* Primär — Header/Footer/dunkle Flächen */
  --blue: #1e4e8c;           /* Sekundär — Buttons/Links/Titel */
  --teal: #0f7b6c;           /* Emerald — Erfolg/wichtig */
  --gold: #d4af37;           /* Akzent — Logo/Highlights */
  --gold-text: #8c6d17;      /* dunkles Gold für Text auf hellen Flächen (WCAG AA) */
  --white: #ffffff;
  --surface: #ffffff;        /* Karten-/Panelfläche (Theme-abhängig) */
  --surface-glass: rgba(255, 255, 255, 0.94);
  --paper: #f5f7fa;          /* Off-White — Abschnitts-Hintergründe */
  --paper-mid: #eef3f8;      /* Verlaufs-Mittelton des Seitenhintergrunds */
  --line: #e5e7eb;           /* Rahmen/Trennlinien */
  --link: #1e4e8c;           /* Link-/Akzenttext (Theme-abhängig) */
  --chip: #eef5ff;           /* helle Chip-/Tag-Flächen (Theme-abhängig) */
  --shadow: 0 24px 70px rgba(11, 31, 58, 0.14);

  /* Typografie (BGGI-Standard: typografie-schriften) */
  --font-latin: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  --fw-heading-strong: 700;  /* H1 / starke Titel */
  --fw-heading: 600;         /* H2, H3, Labels */
  --fw-body: 400;
  --fw-button: 500;

  /* fluide Größen: H1 36–48, H2 24–32, H3 18–22, Body 16, Small 14, Caption 12 */
  --fs-h1: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;
  --measure: 72ch;           /* max. Zeilenlänge */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

h1, h2, h3 { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3,
:lang(fr) h1, :lang(fr) h2, :lang(fr) h3 { hyphens: auto; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-heading-strong); }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: var(--fw-heading); }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: var(--fw-heading); }
p, li { line-height: var(--lh-body); }
small, figcaption { font-size: var(--fs-caption); }

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 78px;
  padding: 14px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 27, 61, 0.92);
  color: var(--white);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #f3cc64);
  color: var(--navy);
  font-weight: var(--fw-heading-strong);
  font-size: 1.35rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-caption);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  min-height: 40px;
  padding: 11px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
}

.site-nav a:hover,
.site-nav a.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.language-switch a {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 34px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-decoration: none;
}

.language-switch a:hover,
.language-switch a.active {
  background: var(--gold);
  color: var(--navy);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: transparent;
  color: var(--white);
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

.hero-section,
.page-hero,
.project-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 72px);
}

.hero-section {
  min-height: calc(88svh - 78px);
  display: grid;
  align-items: center;
  color: var(--white);
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 27, 61, 0.85) 0%, rgba(7, 27, 61, 0.5) 42%, rgba(7, 27, 61, 0.1) 100%),
    linear-gradient(180deg, rgba(7, 27, 61, 0.04), rgba(7, 27, 61, 0.35));
}

.hero-content {
  position: relative;
  width: min(820px, 100%);
}

.eyebrow,
.section-heading .eyebrow,
.section-heading p.eyebrow {
  margin: 0 0 12px;
  color: var(--gold-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

.hero-section h1 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: var(--fw-heading-strong);
}

.hero-subtitle,
.page-hero p,
.project-hero p {
  width: min(760px, 100%);
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.page-hero {
  background:
    linear-gradient(135deg, rgba(13, 78, 166, 0.12), transparent 42%),
    var(--navy);
  color: var(--white);
}

.page-hero h1,
.project-hero h1 {
  width: min(980px, 100%);
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
  background: var(--navy);
  color: var(--white);
}

.project-hero img {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 8px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.primary-button,
.secondary-button,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 18px;
  font-size: var(--fs-body);
  font-weight: var(--fw-button);
  text-decoration: none;
  white-space: nowrap;
}

.primary-button {
  background: linear-gradient(135deg, var(--gold), #e6bd58);
  color: var(--navy);
  box-shadow: 0 14px 30px rgba(199, 154, 43, 0.26);
}

.secondary-button {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
}

.secondary-link {
  color: var(--link);
  border-color: rgba(13, 78, 166, 0.18);
  background: var(--chip);
}

.signal-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(1180px, calc(100% - 40px));
  margin: -34px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.signal-strip article {
  min-height: 110px;
  padding: 22px;
  background: var(--surface);
}

.signal-strip span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
}

.signal-strip strong {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-h3);
}

.section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(58px, 8vw, 96px) 0;
}

.section-heading {
  width: min(780px, 100%);
  margin-bottom: 28px;
}

.section-heading.compact {
  margin-bottom: 20px;
}

.section-heading h2,
.split-section h2,
.feature-copy h2,
.disclaimer-box h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
}

.section-heading p,
.split-section p,
.feature-copy p,
.disclaimer-box p,
.legal-copy p {
  color: var(--muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.platform-grid,
.district-grid,
.cards-four,
.route-grid,
.field-list {
  display: grid;
  gap: 16px;
}

.platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.district-grid,
.field-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-four,
.route-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-card,
.cards-four article,
.district-grid article,
.field-list article,
.project-card,
.contact-card,
.contact-form,
.disclaimer-box,
.legal-copy,
.route-grid a,
.info-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(7, 27, 61, 0.07);
}

.platform-card,
.cards-four article,
.district-grid article,
.field-list article {
  min-height: 180px;
  padding: 22px;
}

.highlight-card {
  border-top: 5px solid var(--gold);
}

.card-number {
  color: var(--gold-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
}

.platform-card h3,
.cards-four strong,
.district-grid strong,
.field-list strong {
  display: block;
  margin: 12px 0 8px;
  font-size: var(--fs-h3);
}

.platform-card p,
.cards-four span,
.district-grid span,
.field-list span {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.split-section,
.project-feature,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}

.project-feature {
  align-items: center;
}

.project-feature img {
  min-height: 360px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.info-list {
  display: grid;
  gap: 12px;
}

.info-list article {
  padding: 18px;
}

.info-list strong {
  display: block;
  margin-bottom: 6px;
}

.info-list span {
  color: var(--muted);
  line-height: 1.55;
}

.project-card-list {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 26px;
}

.project-card.featured {
  background:
    linear-gradient(135deg, rgba(13, 78, 166, 0.1), transparent 45%),
    var(--surface);
}

.project-card h2 {
  margin: 0;
  font-size: var(--fs-h2);
}

.project-card p {
  color: var(--muted);
  line-height: 1.6;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.meta-grid span {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}

.meta-grid strong {
  display: block;
  color: var(--gold);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.disclaimer-box,
.legal-copy {
  padding: 28px;
}

.route-grid a {
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 16px;
  color: var(--link);
  font-weight: var(--fw-heading);
  text-decoration: none;
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: var(--fw-heading);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
}

.contact-card {
  padding: 24px;
}

.legal-copy h2 {
  margin: 22px 0 8px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px clamp(18px, 4vw, 56px);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.76);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
  font-weight: var(--fw-heading);
}

@media (max-width: 980px) {
  .site-header {
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 16px;
    right: 16px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(7, 27, 61, 0.98);
    box-shadow: var(--shadow);
  }

  .site-nav.open {
    display: grid;
  }

  .project-hero,
  .split-section,
  .project-feature,
  .contact-grid,
  .language-layout,
  .project-card-list {
    grid-template-columns: 1fr;
  }

  .signal-strip,
  .platform-grid,
  .district-grid,
  .field-list,
  .cards-four,
  .route-grid,
  .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .brand small {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .signal-strip,
  .platform-grid,
  .district-grid,
  .field-list,
  .cards-four,
  .route-grid,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .section,
  .signal-strip {
    width: min(100% - 28px, 1180px);
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header {
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    min-height: 0;
  }

  .brand {
    flex: 1 1 auto;
    margin-right: auto;
  }

  .theme-toggle {
    order: 2;
    width: 38px;
    min-height: 38px;
  }

  .menu-toggle {
    order: 3;
    margin: 0;
  }

  .language-switch {
    order: 4;
    flex: 1 1 100%;
    align-self: stretch;
    justify-content: stretch;
    padding: 3px;
  }

  .language-switch a {
    flex: 1;
    min-height: 32px;
  }
}

/* V33.0 premium corporate experience */
:root {
  --deep: #04101f;
  --steel: #e8edf4;
  --aqua: #35a5a2;
  --copper: #b98332;
  --green: #1f7a4f;
}

body {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-mid) 48%, var(--paper) 100%);
}

.premium-header {
  min-height: 76px;
  background:
    linear-gradient(90deg, rgba(4, 16, 31, 0.96), rgba(7, 27, 61, 0.92));
}

.premium-page-hero {
  background:
    linear-gradient(135deg, rgba(199, 154, 43, 0.14), transparent 36%),
    linear-gradient(90deg, rgba(7, 27, 61, 0.98), rgba(13, 78, 166, 0.86)),
    var(--navy);
}

.premium-project-hero {
  background:
    linear-gradient(135deg, rgba(53, 165, 162, 0.12), transparent 42%),
    var(--navy);
}

.premium-hero {
  min-height: calc(100svh - 76px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(72px, 10vw, 130px);
}

.premium-overlay {
  background:
    linear-gradient(90deg, rgba(4, 16, 31, 0.72) 0%, rgba(4, 16, 31, 0.32) 48%, rgba(4, 16, 31, 0) 72%),
    linear-gradient(180deg, rgba(4, 16, 31, 0), rgba(4, 16, 31, 0.35));
}

.hero-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-motion span {
  position: absolute;
  width: 1px;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(199, 154, 43, 0.78), transparent);
  animation: dataRain 8s linear infinite;
}

.hero-motion span:nth-child(1) {
  left: 16%;
  animation-delay: -1.2s;
}

.hero-motion span:nth-child(2) {
  left: 42%;
  animation-delay: -4s;
}

.hero-motion span:nth-child(3) {
  left: 68%;
  animation-delay: -2.7s;
}

.hero-motion span:nth-child(4) {
  left: 86%;
  animation-delay: -6s;
}

@keyframes dataRain {
  0% {
    transform: translateY(-130%);
    opacity: 0;
  }
  18%,
  72% {
    opacity: 1;
  }
  100% {
    transform: translateY(340%);
    opacity: 0;
  }
}

.premium-hero-content {
  align-self: center;
  width: min(900px, 100%);
}

.premium-hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  max-width: 18ch;
}

.hero-kicker {
  width: min(780px, 100%);
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.hero-command-panel {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 16, 31, 0.72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.command-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--fw-heading);
}

.command-header strong {
  color: var(--gold);
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-grid article {
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.metric-value {
  display: block;
  color: #f4c65a;
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading-strong);
}

.command-grid p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.video-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(199, 154, 43, 0.22), rgba(53, 165, 162, 0.12));
}

.play-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
  flex: 0 0 auto;
}

.play-mark::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  border-left: 13px solid var(--navy);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.video-placeholder strong,
.video-placeholder small {
  display: block;
}

.video-placeholder small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
}

.premium-signals {
  box-shadow: 0 22px 80px rgba(7, 27, 61, 0.14);
}

.story-section,
.sectors-section,
.portfolio-section,
.ecosystem-section,
.global-section,
.trust-section,
.multilingual-section {
  position: relative;
}

.reveal-section {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.story-grid,
.sector-grid,
.trust-grid,
.language-panels {
  display: grid;
  gap: 16px;
}

.story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.story-grid article,
.sector-card,
.portfolio-lanes article,
.trust-grid article,
.language-panels article,
.market-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 18px 52px rgba(7, 27, 61, 0.08);
}

.story-grid article {
  min-height: 250px;
  padding: 26px;
}

.story-grid span,
.sector-card > span,
.trust-grid span {
  color: var(--gold-text);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  font-size: var(--fs-caption);
}

.story-grid h3,
.sector-card h3,
.portfolio-flagship h3,
.market-panel h3,
.trust-grid h3 {
  margin: 14px 0 10px;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.story-grid p,
.sector-card p,
.portfolio-flagship p,
.portfolio-lanes span,
.market-panel p,
.trust-grid p,
.language-panels span {
  color: var(--muted);
  line-height: 1.58;
}

.sector-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sector-card {
  min-height: 430px;
  padding: 24px;
}

.sector-card p {
  margin: 13px 0 0;
}

.sector-card .secondary-link {
  margin-top: 18px;
}

.sector-card strong {
  color: var(--ink);
}

.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
  align-items: stretch;
}

.portfolio-flagship {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow);
}

.portfolio-flagship img {
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.portfolio-flagship > div {
  padding: clamp(28px, 5vw, 54px);
}

.portfolio-flagship p {
  color: rgba(255, 255, 255, 0.78);
}

.portfolio-flagship .primary-button {
  margin-top: 18px;
}

.portfolio-lanes {
  display: grid;
  gap: 12px;
}

.portfolio-lanes article {
  padding: 20px;
}

.portfolio-lanes strong {
  display: block;
  margin-bottom: 7px;
}

.ecosystem-map {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(7, 27, 61, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 27, 61, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 27, 61, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(53, 165, 162, 0.17), transparent 34%),
    #ffffff;
  background-size: 52px 52px, 52px 52px, auto, auto;
  box-shadow: 0 22px 70px rgba(7, 27, 61, 0.1);
}

.ecosystem-map::before,
.ecosystem-map::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(7, 27, 61, 0.1);
  border-radius: 50%;
}

.ecosystem-map::after {
  inset: 31%;
}

.ecosystem-center,
.eco-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
}

.ecosystem-center {
  left: 50%;
  top: 50%;
  width: 210px;
  min-height: 120px;
  padding: 20px;
  transform: translate(-50%, -50%);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 22px 60px rgba(7, 27, 61, 0.24);
}

.ecosystem-center strong {
  font-size: var(--fs-h2);
}

.ecosystem-center span,
.eco-node span {
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.eco-node {
  width: min(210px, 30%);
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0f2a4f;
  color: var(--white);
  box-shadow: 0 16px 44px rgba(7, 27, 61, 0.2);
  transition: transform 180ms ease, background 180ms ease;
}

.eco-node:hover {
  transform: translateY(-4px);
  background: #123968;
}

.eco-node strong {
  display: block;
  margin-bottom: 5px;
}

.node-orbix {
  left: 7%;
  top: 10%;
  background: var(--blue);
}

.node-data {
  right: 8%;
  top: 12%;
}

.node-gov {
  right: 5%;
  top: 42%;
  background: var(--teal);
}

.node-investor {
  right: 14%;
  bottom: 10%;
}

.node-odos {
  left: 9%;
  bottom: 12%;
  background: #16415f;
}

.node-future {
  left: 6%;
  top: 42%;
  background: var(--green);
}

.ecosystem-rule {
  margin-top: 20px;
}

.global-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
}

.global-map {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(7, 27, 61, 0.12);
  background:
    linear-gradient(180deg, rgba(4, 16, 31, 0.18), rgba(4, 16, 31, 0.72)),
    url("/assets/web/bggi-hero-command-room.jpg") center / cover;
  box-shadow: var(--shadow);
}

.global-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, 0.1) 11.2%, transparent 11.5%),
    linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.1) 18.2%, transparent 18.5%);
  background-size: 90px 90px;
}

.map-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(199, 154, 43, 0.2);
  cursor: pointer;
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  animation: pulseRing 2.4s ease-out infinite;
}

.map-pin.active {
  background: var(--aqua);
  box-shadow: 0 0 0 12px rgba(53, 165, 162, 0.2);
}

.map-pin span {
  position: absolute;
  left: 24px;
  top: -8px;
  min-width: max-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(4, 16, 31, 0.88);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  white-space: nowrap;
}

.pin-germany {
  left: 48%;
  top: 35%;
}

.pin-iraq {
  left: 60%;
  top: 49%;
}

.pin-kurdistan {
  left: 62%;
  top: 45%;
}

.pin-future {
  left: 75%;
  top: 34%;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.7);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.market-panel {
  min-height: 360px;
  padding: 28px;
}

.market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.market-tags span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--link);
  font-weight: var(--fw-heading);
  font-size: var(--fs-small);
}

.trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-grid article {
  min-height: 250px;
  padding: 24px;
  border-top: 5px solid var(--gold);
}

.multilingual-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}

.language-panels {
  grid-template-columns: 1fr;
}

.language-panels article {
  padding: 18px;
}

.language-panels strong,
.language-panels span {
  display: block;
}

.language-panels strong {
  margin-bottom: 6px;
}

[dir="rtl"] {
  text-align: right;
}

.contact-focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.contact-focus-list span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--link);
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
}

.language-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.language-hero h1 {
  width: min(1120px, 100%);
}

.language-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
  gap: 24px;
  align-items: start;
}

.multilingual-sector-grid .sector-card {
  min-height: 330px;
}

.contact-detail-card {
  display: grid;
  gap: 10px;
}

.contact-detail-card strong,
.contact-detail-card span {
  display: block;
}

.contact-detail-card span {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--link);
  font-weight: var(--fw-heading);
}

html[dir="rtl"] body {
  font-family: var(--font-arabic);
}

html[dir="rtl"] .site-header,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .language-action-row,
html[dir="rtl"] .contact-focus-list {
  direction: rtl;
}

html[dir="rtl"] .platform-status-board article,
html[dir="rtl"] .classification-table article {
  text-align: right;
}

.template-fields .field-list article {
  min-height: 150px;
}

.platform-command-section,
.digital-command-section,
.portfolio-control-section,
.inquiry-lanes {
  position: relative;
}

.platform-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 24px;
  align-items: start;
}

.platform-status-board {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(53, 165, 162, 0.12), transparent 48%),
    var(--deep);
  color: var(--white);
  box-shadow: var(--shadow);
}

.board-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.board-title span,
.platform-status-board article span {
  color: var(--gold);
}

.architecture-card span,
.operating-model span,
.control-strip span {
  color: var(--gold-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

.board-title strong {
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
}

.platform-status-board article {
  display: grid;
  grid-template-columns: 0.72fr 0.72fr 1.25fr;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-status-board article:last-child {
  border-bottom: 0;
}

.platform-status-board article strong {
  color: #ffffff;
}

.platform-status-board article em {
  color: rgba(255, 255, 255, 0.68);
  font-style: normal;
  line-height: 1.45;
}

.architecture-grid,
.operating-model,
.control-strip {
  display: grid;
  gap: 16px;
}

.architecture-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
}

.architecture-card,
.operating-model article,
.control-strip article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 18px 48px rgba(7, 27, 61, 0.08);
}

.architecture-card {
  min-height: 260px;
  padding: 24px;
}

.architecture-card.primary-layer {
  background:
    linear-gradient(135deg, rgba(7, 27, 61, 0.94), rgba(13, 78, 166, 0.84)),
    var(--navy);
  color: var(--white);
}

.architecture-card h3 {
  margin: 16px 0 10px;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.architecture-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.architecture-card.primary-layer p {
  color: rgba(255, 255, 255, 0.76);
}

.operating-model {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.operating-model article {
  min-height: 230px;
  padding: 22px;
  position: relative;
}

.operating-model article::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 42px;
  width: 18px;
  height: 2px;
  background: rgba(13, 78, 166, 0.28);
}

.operating-model article:last-child::after {
  display: none;
}

.operating-model strong,
.control-strip strong {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.operating-model p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.control-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.control-strip article {
  min-height: 132px;
  padding: 20px;
  border-top: 4px solid var(--gold);
}

.route-grid a {
  display: grid;
  align-content: center;
  gap: 4px;
}

.route-grid a span {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
}

.route-grid a strong {
  color: var(--link);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.contact-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  background: var(--surface);
  color: var(--ink);
}

.form-status {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.platform-route-hero h1 {
  width: min(1060px, 100%);
}

.stakeholder-matrix,
.roadmap-grid {
  display: grid;
  gap: 16px;
}

.stakeholder-matrix {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stakeholder-matrix article,
.roadmap-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 18px 48px rgba(7, 27, 61, 0.08);
}

.stakeholder-matrix article {
  min-height: 320px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.stakeholder-matrix span,
.roadmap-card span {
  color: var(--gold-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

.stakeholder-matrix strong,
.roadmap-card h3 {
  display: block;
  margin: 14px 0 10px;
  color: var(--ink);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.stakeholder-matrix p,
.roadmap-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.stakeholder-matrix em {
  display: block;
  margin-top: auto;
  padding-top: 18px;
  color: var(--link);
  font-style: normal;
  font-weight: var(--fw-heading);
  line-height: 1.35;
}

.roadmap-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roadmap-card {
  min-height: 260px;
  padding: 26px;
}

.roadmap-card.active {
  background:
    linear-gradient(135deg, rgba(7, 27, 61, 0.94), rgba(13, 78, 166, 0.82)),
    var(--navy);
  color: var(--white);
}

.roadmap-card.active h3 {
  color: var(--white);
}

.roadmap-card.active p {
  color: rgba(255, 255, 255, 0.74);
}

.governance-grid,
.review-package-grid,
.document-library {
  display: grid;
  gap: 16px;
}

.governance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.governance-grid article,
.classification-table article,
.review-package-grid article,
.document-library a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 18px 48px rgba(7, 27, 61, 0.08);
}

.governance-grid article {
  min-height: 240px;
  padding: 24px;
}

.governance-grid span,
.classification-table span,
.review-package-grid span,
.document-library span {
  color: var(--gold-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

.governance-grid h3,
.review-package-grid h3 {
  margin: 14px 0 10px;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.governance-grid p,
.classification-table p,
.review-package-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.classification-table {
  display: grid;
  gap: 10px;
}

.classification-table article {
  display: grid;
  grid-template-columns: 0.32fr 0.42fr 1fr;
  gap: 16px;
  align-items: center;
  min-height: 94px;
  padding: 18px 20px;
}

.classification-table strong {
  color: var(--ink);
  line-height: 1.25;
}

.review-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-package-grid article {
  min-height: 360px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.document-link-list {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}

.document-link-list a,
.document-library a {
  color: var(--link);
  font-weight: var(--fw-heading);
  text-decoration: none;
}

.document-link-list a {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--chip);
}

.document-link-list a:hover,
.document-library a:hover {
  text-decoration: underline;
}

.document-library {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-library a {
  min-height: 128px;
  padding: 18px;
}

.document-library strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  line-height: 1.28;
}

/* V35.0 ORBIX premium visual experience */
.orbix-experience-intro {
  position: relative;
}

.experience-signal-grid,
.journey-card-grid,
.climate-review-grid,
.hotel-experience-grid {
  display: grid;
  gap: 16px;
}

.experience-signal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.experience-signal-grid article,
.journey-card-grid article,
.climate-review-grid article,
.hotel-experience-grid article,
.experience-sequence article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 18px 46px rgba(7, 27, 61, 0.08);
}

.experience-signal-grid article,
.journey-card-grid article,
.climate-review-grid article,
.hotel-experience-grid article {
  min-height: 160px;
  padding: 22px;
}

.experience-signal-grid strong,
.journey-card-grid strong,
.climate-review-grid strong,
.hotel-experience-grid strong,
.park-node strong,
.experience-sequence strong {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-h3);
}

.experience-signal-grid span,
.journey-card-grid span,
.climate-review-grid span,
.hotel-experience-grid span,
.park-node span,
.experience-sequence p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.city-motion-stage {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(7, 27, 61, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
    linear-gradient(120deg, rgba(53, 165, 162, 0.16), transparent 36%),
    linear-gradient(180deg, #eef5f4, #f8fafc);
  box-shadow: var(--shadow);
}

.city-motion-stage::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 22px solid rgba(7, 27, 61, 0.09);
  border-radius: 42%;
  transform: rotate(-8deg);
}

.city-motion-stage::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 17%;
  width: 32%;
  height: 54%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 78, 166, 0.16), rgba(13, 78, 166, 0.04)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(7, 27, 61, 0.07) 22px 24px);
  box-shadow: inset 0 0 0 1px rgba(7, 27, 61, 0.09);
}

.motion-road {
  position: absolute;
  background: rgba(7, 27, 61, 0.16);
}

.road-main {
  left: -8%;
  right: -8%;
  top: 58%;
  height: 48px;
  transform: rotate(-5deg);
}

.road-loop {
  left: 18%;
  top: 18%;
  width: 64%;
  height: 58%;
  border: 28px solid rgba(7, 27, 61, 0.12);
  border-radius: 46%;
  background: transparent;
}

.vehicle,
.pedestrian {
  position: absolute;
  z-index: 3;
}

.vehicle {
  width: 38px;
  height: 16px;
  border-radius: 5px;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(7, 27, 61, 0.16);
  animation: vehicleMove 10s linear infinite;
}

.vehicle-shuttle {
  width: 62px;
  height: 21px;
  background: var(--gold);
}

.vehicle-one {
  left: 2%;
  top: 55%;
}

.vehicle-two {
  left: 62%;
  top: 62%;
  animation-delay: -5s;
}

.vehicle-three {
  left: 18%;
  top: 35%;
  animation: shuttleLoop 12s linear infinite;
}

.vehicle-four {
  left: 68%;
  top: 30%;
  animation: shuttleLoop 12s linear infinite reverse;
}

@keyframes vehicleMove {
  0% {
    transform: translateX(-80px) rotate(-5deg);
  }
  100% {
    transform: translateX(1120px) rotate(-5deg);
  }
}

@keyframes shuttleLoop {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(260px, -40px);
  }
  50% {
    transform: translate(420px, 110px);
  }
  75% {
    transform: translate(120px, 180px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.pedestrian {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 18px 6px 0 rgba(31, 122, 79, 0.75), 36px 0 0 rgba(31, 122, 79, 0.55);
  animation: pedestrianFlow 7s ease-in-out infinite alternate;
}

.pedestrian-one {
  left: 32%;
  top: 42%;
}

.pedestrian-two {
  left: 48%;
  top: 68%;
  animation-delay: -2s;
}

.pedestrian-three {
  left: 58%;
  top: 42%;
  animation-delay: -4s;
}

.pedestrian-family {
  left: 25%;
  top: 68%;
  background: var(--copper);
  box-shadow: 16px 5px 0 rgba(185, 131, 50, 0.75), 32px -2px 0 rgba(185, 131, 50, 0.58), 48px 6px 0 rgba(185, 131, 50, 0.45);
}

@keyframes pedestrianFlow {
  from {
    transform: translateX(-18px);
  }
  to {
    transform: translateX(46px);
  }
}

.arrival-hub,
.event-hub {
  position: absolute;
  z-index: 4;
  width: min(270px, 42%);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: rgba(4, 16, 31, 0.86);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(7, 27, 61, 0.18);
}

.arrival-hub {
  right: 5%;
  top: 12%;
}

.event-hub {
  left: 5%;
  bottom: 10%;
}

.arrival-hub strong,
.arrival-hub span,
.event-hub strong,
.event-hub span {
  display: block;
}

.arrival-hub span,
.event-hub span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
}

.journey-card-grid,
.climate-review-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.journey-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dome-mode-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.45fr);
  gap: 18px;
  align-items: stretch;
}

.dome-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #87c7ec, #eef8ff 56%, #d8eee8);
  box-shadow: var(--shadow);
  transition: background 260ms ease;
}

.dome-visual.mode-sunset {
  background: linear-gradient(180deg, #ffb56c, #e97755 54%, #f5dfbe);
}

.dome-visual.mode-night {
  background: linear-gradient(180deg, #07111f, #123968 58%, #182b3e);
}

.dome-visual.mode-cloud {
  background: linear-gradient(180deg, #d7e3ec, #aebfc9 56%, #e7ecef);
}

.dome-visual.mode-artificial {
  background: linear-gradient(180deg, #52b8da, #d7f3ff 54%, #f2f8fb);
}

.dome-visual.mode-festival {
  background: linear-gradient(180deg, #160c2e, #0d4ea6 44%, #f2b84b 100%);
}

.dome-shell {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 17%;
  height: 62%;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.22) 12.4% 12.8%, transparent 13%),
    linear-gradient(90deg, transparent 0 32%, rgba(255, 255, 255, 0.2) 32.4% 32.8%, transparent 33%),
    linear-gradient(90deg, transparent 0 52%, rgba(255, 255, 255, 0.2) 52.4% 52.8%, transparent 53%),
    linear-gradient(90deg, transparent 0 72%, rgba(255, 255, 255, 0.2) 72.4% 72.8%, transparent 73%),
    rgba(255, 255, 255, 0.14);
}

.dome-sky {
  position: absolute;
  left: 18%;
  top: 14%;
  width: 18%;
  height: 12%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow:
    170px 48px 0 rgba(255, 255, 255, 0.42),
    320px 18px 0 rgba(255, 255, 255, 0.38);
}

.dome-cityline {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 17%;
  height: 24%;
  background:
    linear-gradient(180deg, transparent 0 22%, rgba(7, 27, 61, 0.78) 22% 100%);
  clip-path: polygon(0 100%, 0 60%, 8% 60%, 8% 36%, 14% 36%, 14% 66%, 22% 66%, 22% 28%, 30% 28%, 30% 76%, 38% 76%, 38% 48%, 46% 48%, 46% 18%, 54% 18%, 54% 62%, 62% 62%, 62% 34%, 70% 34%, 70% 70%, 78% 70%, 78% 45%, 86% 45%, 86% 65%, 100% 65%, 100% 100%);
}

.dome-temperature {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: min(430px, calc(100% - 56px));
  padding: 18px;
  border-radius: 8px;
  background: rgba(4, 16, 31, 0.84);
  color: var(--white);
}

.dome-temperature strong,
.dome-temperature span {
  display: block;
}

.dome-temperature span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.52;
}

.dome-control-panel {
  display: grid;
  gap: 10px;
}

.dome-mode-button,
.visitor-tab,
.district-hotspot {
  min-height: 48px;
  border: 1px solid rgba(7, 27, 61, 0.14);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-heading-strong);
  cursor: pointer;
}

.dome-mode-button.active,
.visitor-tab.active,
.district-hotspot.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.park-experience-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.36)),
    linear-gradient(135deg, rgba(31, 122, 79, 0.18), rgba(53, 165, 162, 0.12)),
    #f6fbf5;
  box-shadow: var(--shadow);
}

.park-route {
  position: absolute;
  border: 12px solid rgba(199, 154, 43, 0.38);
  border-radius: 50%;
}

.route-a {
  left: 16%;
  top: 18%;
  width: 58%;
  height: 56%;
  transform: rotate(-12deg);
}

.route-b {
  right: 10%;
  bottom: 12%;
  width: 38%;
  height: 34%;
  transform: rotate(18deg);
}

.water-feature {
  position: absolute;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(53, 165, 162, 0.9), rgba(13, 78, 166, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.water-one {
  left: 38%;
  top: 32%;
  width: 24%;
  height: 16%;
}

.water-two {
  right: 17%;
  top: 57%;
  width: 20%;
  height: 12%;
}

.park-node {
  position: absolute;
  width: min(260px, 42%);
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(7, 27, 61, 0.11);
  border-radius: 8px;
  background: var(--surface-glass);
  box-shadow: 0 16px 40px rgba(7, 27, 61, 0.12);
}

.node-family {
  left: 6%;
  top: 10%;
}

.node-food {
  right: 6%;
  top: 12%;
}

.node-event {
  right: 8%;
  bottom: 8%;
}

.node-walk {
  left: 8%;
  bottom: 10%;
}

.experience-sequence {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.experience-sequence article {
  min-height: 260px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(13, 78, 166, 0.06), transparent 46%),
    var(--surface);
}

.experience-sequence span {
  display: block;
  margin-bottom: 16px;
  color: var(--gold-text);
  font-weight: var(--fw-heading);
}

.hotel-experience-grid {
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
}

.hotel-card.large {
  background:
    linear-gradient(135deg, rgba(7, 27, 61, 0.94), rgba(13, 78, 166, 0.82)),
    var(--navy);
  color: var(--white);
}

.hotel-card.large span {
  color: rgba(255, 255, 255, 0.76);
}

.night-stage {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(4, 16, 31, 0.1), rgba(4, 16, 31, 0.74)),
    linear-gradient(135deg, #07111f, #102a4a 58%, #2a1b33);
  box-shadow: var(--shadow);
}

.night-dome {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 18%;
  height: 60%;
  border: 2px solid rgba(244, 198, 90, 0.72);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(90deg, rgba(53, 165, 162, 0.12), rgba(199, 154, 43, 0.14), rgba(13, 78, 166, 0.16));
}

.night-tower {
  position: absolute;
  left: 49%;
  bottom: 18%;
  width: 46px;
  height: 66%;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(244, 198, 90, 0.72), rgba(255, 255, 255, 0.08));
  clip-path: polygon(38% 0, 62% 0, 78% 100%, 22% 100%);
}

.fountain-show {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 13%;
  height: 70px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(53, 165, 162, 0.8), rgba(53, 165, 162, 0.1)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 255, 255, 0.75) 24px 27px);
  animation: fountainPulse 2.6s ease-in-out infinite;
}

.festival-crowd {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 16px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 5px, transparent 5px 13px);
}

@keyframes fountainPulse {
  0%,
  100% {
    transform: scaleY(0.82);
    opacity: 0.72;
  }
  50% {
    transform: scaleY(1.18);
    opacity: 1;
  }
}

.district-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
}

.district-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(7, 27, 61, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 27, 61, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(53, 165, 162, 0.16), rgba(199, 154, 43, 0.12)),
    var(--surface);
  background-size: 48px 48px, 48px 48px, auto, auto;
  box-shadow: var(--shadow);
}

.district-map::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 14%;
  width: 68%;
  height: 64%;
  border: 22px solid rgba(7, 27, 61, 0.12);
  border-radius: 45%;
  transform: rotate(-10deg);
}

.district-hotspot {
  position: absolute;
  z-index: 2;
  padding: 0 14px;
  box-shadow: 0 12px 28px rgba(7, 27, 61, 0.1);
}

.district-hotspot[data-district="sky-dome"] {
  left: 38%;
  top: 18%;
}

.district-hotspot[data-district="central-park"] {
  left: 34%;
  top: 48%;
}

.district-hotspot[data-district="ocean-world"] {
  left: 10%;
  top: 34%;
}

.district-hotspot[data-district="hotel-district"] {
  right: 10%;
  top: 36%;
}

.district-hotspot[data-district="night-zone"] {
  left: 39%;
  bottom: 14%;
}

.district-panel {
  min-height: 560px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 27, 61, 0.06), transparent 48%),
    var(--surface);
  box-shadow: 0 18px 52px rgba(7, 27, 61, 0.08);
}

.district-panel > span {
  color: var(--gold-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

.district-panel h3 {
  margin: 14px 0 12px;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.district-panel p {
  color: var(--muted);
  line-height: 1.6;
}

.visitor-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}

.visitor-flow-panel {
  min-height: 138px;
  margin-top: 12px;
  padding: 18px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--link);
  font-weight: var(--fw-heading);
  line-height: 1.55;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal-section {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .premium-hero {
    grid-template-columns: 1fr;
  }

  .hero-command-panel {
    align-self: start;
    width: min(620px, 100%);
  }

  .sector-grid,
  .trust-grid,
  .stakeholder-matrix,
  .roadmap-grid,
  .governance-grid,
  .review-package-grid,
  .document-library,
  .experience-signal-grid,
  .journey-card-grid,
  .climate-review-grid,
  .hotel-experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .story-grid,
  .portfolio-layout,
  .portfolio-flagship,
  .global-layout,
  .multilingual-section,
  .platform-command-layout,
  .dome-mode-layout,
  .district-explorer {
    grid-template-columns: 1fr;
  }

  .architecture-grid,
  .operating-model,
  .control-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operating-model article::after {
    display: none;
  }

  .district-map,
  .district-panel {
    min-height: 440px;
  }

  .park-node,
  .arrival-hub,
  .event-hub {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin: 12px;
  }

  .experience-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-map {
    display: grid;
    gap: 12px;
    min-height: auto;
    padding: 18px;
  }

  .ecosystem-map::before,
  .ecosystem-map::after {
    display: none;
  }

  .ecosystem-center,
  .eco-node {
    position: static;
    width: 100%;
    min-height: 92px;
    transform: none;
  }

  .eco-node:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .premium-hero {
    min-height: auto;
    padding-top: 62px;
  }

  .command-grid,
  .sector-grid,
  .trust-grid,
  .architecture-grid,
  .operating-model,
  .control-strip,
  .stakeholder-matrix,
  .roadmap-grid,
  .governance-grid,
  .review-package-grid,
  .document-library,
  .experience-signal-grid,
  .journey-card-grid,
  .climate-review-grid,
  .hotel-experience-grid,
  .experience-sequence,
  .visitor-tabs {
    grid-template-columns: 1fr;
  }

  .sector-card {
    min-height: auto;
  }

  .platform-status-board article {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .classification-table article {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .board-title {
    flex-direction: column;
  }

  .board-title strong {
    text-align: left;
  }

  .global-map {
    min-height: 410px;
  }

  .map-pin span {
    left: auto;
    right: 24px;
  }

  .pin-germany {
    left: 42%;
  }

  .pin-future {
    left: 68%;
  }

  .district-map {
    display: grid;
    gap: 10px;
    min-height: auto;
    padding: 16px;
  }

  .district-map::before {
    display: none;
  }

  .district-hotspot {
    position: static;
    width: 100%;
  }

  .city-motion-stage::before,
  .city-motion-stage::after,
  .road-loop,
  .vehicle,
  .pedestrian {
    animation: none;
  }
}

/* ORBIX concept rendering gallery */
.orbix-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.orbix-gallery figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow);
}

.orbix-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.orbix-gallery figure:hover img {
  transform: scale(1.03);
}

.orbix-gallery figcaption {
  padding: 10px 14px;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--white);
}

/* Legal pages */
.legal-copy h2 {
  margin-top: 32px;
}

.legal-copy p,
.legal-copy li {
  max-width: 72ch;
  line-height: 1.6;
}

.legal-copy ul {
  padding-left: 20px;
}

.footer-legal {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-small);
  opacity: 0.8;
}


/* ── Arabische Typografie: ~12 % kleiner, höhere Zeilenhöhe (typografie-schriften) ── */
:lang(ar),
[dir="rtl"] {
  font-family: var(--font-arabic);
}

html:lang(ar) {
  --fs-h1: clamp(2rem, 1.6rem + 1.7vw, 2.625rem);      /* 32–42px */
  --fs-h2: clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem); /* 22–28px */
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17–20px */
  --fs-lead: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --lh-heading: 1.35;
  --lh-body: 1.85;
}

html:lang(ar) .eyebrow,
html:lang(ar) .language-switch a,
html:lang(ar) .site-nav a {
  letter-spacing: 0;
}

/* Eingebettete arabische Panels auf lateinischen Seiten */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 {
  line-height: 1.35;
}
:lang(ar) p, :lang(ar) span, :lang(ar) li {
  line-height: 1.85;
}
/* Zahlen, lateinische Namen und E-Mails laufen als LTR-Inseln */
:lang(ar) [dir="ltr"], [dir="rtl"] [dir="ltr"] {
  unicode-bidi: isolate;
  direction: ltr;
}


/* Eyebrows auf dunklen Flächen behalten helles Gold (Kontrast auf Navy) */
.page-hero .eyebrow,
.project-hero .eyebrow,
.hero-content .eyebrow,
.portfolio-flagship .eyebrow,
.info-list .eyebrow {
  color: var(--gold);
}


/* ═══ Konzept-Figuren & Render-Platzhalter (ORBIX) ═══ */
.concept-figure {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(11, 31, 58, 0.08);
}

.concept-figure .figure-media {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.concept-figure.ratio-16x9 .figure-media { aspect-ratio: 16 / 9; }
.concept-figure.ratio-4x3 .figure-media { aspect-ratio: 4 / 3; }

.concept-figure .figure-media > svg,
.concept-figure .figure-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.concept-figure .figure-media > img { object-fit: cover; }

.concept-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.figure-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
  color: var(--ink);
}

.figure-note {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.figure-note::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--gold-text);
  vertical-align: 1px;
}

.figure-source {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--muted);
  opacity: 0.85;
}

/* Dome-Figur: Overlay-Karte bleibt im Bild */
.concept-figure .dome-visual {
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.dome-mode-layout > .concept-figure { margin-top: 0; }

/* ═══ Sky-Dome-SVG: Modus-Farbwelten über Custom Properties ═══ */
.dome-visual {
  --sd-sky-top: #7fb4e6; --sd-sky-bot: #eaf4fc;
  --sd-sun: #f7d774; --sd-sun-op: 1; --sd-halo: #f7d774; --sd-halo-op: 0.5;
  --sd-stars: 0;
  --sd-glass-mid: rgba(255, 255, 255, 0.10); --sd-glass-edge: rgba(30, 78, 140, 0.30);
  --sd-shell: rgba(255, 255, 255, 0.92);
  --sd-ground-top: #e3ddcd; --sd-ground-bot: #cfc9b8;
  --sd-water: #a8cadd;
  --sd-city: #31435e; --sd-far: #6d84a3;
  --sd-glow: #0f7b6c; --sd-glow-op: 0;
  --sd-beacon-op: 0;
  --sd-label: #2d3748; --sd-leader: #7c8aa0; --sd-veg-op: 1;
  transition: none;
}

.dome-visual.mode-sunset {
  --sd-sky-top: #d97747; --sd-sky-bot: #f6d9ae;
  --sd-sun: #f4a34d; --sd-halo: #f4a34d; --sd-halo-op: 0.6;
  --sd-glass-edge: rgba(150, 82, 40, 0.28);
  --sd-ground-top: #d9c7a5; --sd-ground-bot: #c2ac8a; --sd-water: #cda684;
  --sd-city: #4a3a4a; --sd-far: #8a6a68;
}

.dome-visual.mode-night {
  --sd-sky-top: #060d1f; --sd-sky-bot: #1d3354;
  --sd-sun: #dfe7f2; --sd-sun-op: 0.9; --sd-halo: #dfe7f2; --sd-halo-op: 0.25;
  --sd-stars: 1;
  --sd-glass-mid: rgba(63, 194, 178, 0.10); --sd-glass-edge: rgba(15, 123, 108, 0.35);
  --sd-shell: rgba(255, 255, 255, 0.55);
  --sd-ground-top: #2a3550; --sd-ground-bot: #1b2740; --sd-water: #24354f;
  --sd-city: #0d1a30; --sd-far: #1c2c47;
  --sd-glow: #3fc2b2; --sd-glow-op: 0.4;
  --sd-beacon-op: 1;
  --sd-label: #d8e1ee; --sd-leader: #6e7f99; --sd-veg-op: 0.5;
}

.dome-visual.mode-cloud {
  --sd-sky-top: #8e9aa9; --sd-sky-bot: #d3d9df;
  --sd-sun-op: 0.14; --sd-halo-op: 0.1;
  --sd-glass-mid: rgba(45, 55, 72, 0.08); --sd-glass-edge: rgba(45, 55, 72, 0.30);
  --sd-ground-top: #c8c4b8; --sd-ground-bot: #b2aea2; --sd-water: #93a7b4;
  --sd-city: #3c4a5e; --sd-far: #75818f;
}

.dome-visual.mode-artificial {
  --sd-sky-top: #12657a; --sd-sky-bot: #9fd4dc;
  --sd-sun-op: 0; --sd-halo-op: 0;
  --sd-glass-mid: rgba(63, 194, 201, 0.14); --sd-glass-edge: rgba(18, 101, 122, 0.32);
  --sd-ground-top: #d3dad6; --sd-ground-bot: #bcc6c0; --sd-water: #8fc6cc;
  --sd-city: #274456; --sd-far: #4e7887;
  --sd-glow: #35c1c9; --sd-glow-op: 0.32; --sd-beacon-op: 0.4;
}

.dome-visual.mode-festival {
  --sd-sky-top: #241040; --sd-sky-bot: #543176;
  --sd-sun-op: 0; --sd-halo-op: 0; --sd-stars: 1;
  --sd-glass-mid: rgba(212, 175, 55, 0.12); --sd-glass-edge: rgba(212, 175, 55, 0.38);
  --sd-shell: rgba(255, 220, 140, 0.8);
  --sd-ground-top: #33294a; --sd-ground-bot: #241d38; --sd-water: #3a2f57;
  --sd-city: #170f2c; --sd-far: #33244d;
  --sd-glow: #d4af37; --sd-glow-op: 0.5;
  --sd-beacon-op: 1;
  --sd-label: #efe4fb; --sd-leader: #8a7aa8; --sd-veg-op: 0.45;
}

.sd .sd-stop-sky-top { stop-color: var(--sd-sky-top); transition: stop-color 300ms ease; }
.sd .sd-stop-sky-bot { stop-color: var(--sd-sky-bot); transition: stop-color 300ms ease; }
.sd .sd-stop-ground-top { stop-color: var(--sd-ground-top); transition: stop-color 300ms ease; }
.sd .sd-stop-ground-bot { stop-color: var(--sd-ground-bot); transition: stop-color 300ms ease; }
.sd .sd-stop-glass-mid { stop-color: rgb(255 255 255); stop-color: var(--sd-glass-mid); }
.sd .sd-stop-glass-edge { stop-color: rgb(30 78 140); stop-color: var(--sd-glass-edge); }
.sd .sd-sun { fill: var(--sd-sun); opacity: var(--sd-sun-op); transition: opacity 300ms ease, fill 300ms ease; }
.sd .sd-sun-halo { fill: var(--sd-halo); opacity: var(--sd-halo-op); transition: opacity 300ms ease; }
.sd .sd-stars { opacity: var(--sd-stars); transition: opacity 300ms ease; }
.sd .sd-water { fill: var(--sd-water); transition: fill 300ms ease; }
.sd .sd-cityg { fill: var(--sd-city); transition: fill 300ms ease; }
.sd .sd-far { fill: var(--sd-far); opacity: 0.55; transition: fill 300ms ease; }
.sd .sd-shellline { stroke: var(--sd-shell); }
.sd .sd-glow { fill: var(--sd-glow); opacity: var(--sd-glow-op); transition: opacity 300ms ease; }
.sd .sd-tower path, .sd .sd-tower ellipse { fill: #22324a; stroke: var(--sd-shell); stroke-width: 1; }
.sd .sd-tower line { stroke: #22324a; }
.sd .sd-beacon { fill: #ffe9a8; opacity: var(--sd-beacon-op); transition: opacity 300ms ease; }
.sd .sd-beacon-halo { fill: #ffe9a8; opacity: calc(var(--sd-beacon-op) * 0.5); transition: opacity 300ms ease; }
.sd .sd-label text { fill: var(--sd-label); transition: fill 300ms ease; }
.sd .sd-label .sd-leader, .sd .sd-label line { stroke: var(--sd-leader); stroke-width: 1; }
.sd .sd-dim { opacity: 0.75; }
.sd .sd-veg line { stroke: #5c6b52; opacity: var(--sd-veg-op); }
.sd .sd-veg circle { fill: #7b8f6d; opacity: var(--sd-veg-op); transition: opacity 300ms ease; }

/* ═══ Rechts-Sektion auf Projektseiten ═══ */
.legal-strip {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(11, 31, 58, 0.07);
}

.legal-strip h2 {
  margin: 0 0 10px;
}

.legal-strip p {
  max-width: var(--measure);
  color: var(--muted);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--link);
  font-size: var(--fs-small);
  font-weight: var(--fw-button);
  text-decoration: none;
}

.legal-links a:hover {
  border-color: var(--link);
  background: var(--surface);
}


/* ═══ Animierter BGGI-Globus (Hero) ═══ */
.hero-globe {
  position: absolute;
  top: 50%;
  right: clamp(280px, 30vw, 460px);
  width: clamp(340px, 34vw, 540px);
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

.hero-content,
.hero-command-panel {
  position: relative;
  z-index: 2;
}

.hero-globe svg { width: 100%; height: auto; display: block; }

.hg-line { fill: none; stroke: rgba(212, 175, 55, 0.5); stroke-width: 1; }
.hg-line--soft { stroke: rgba(148, 190, 230, 0.35); }
.hg-sphere { fill: none; stroke: rgba(212, 175, 55, 0.65); stroke-width: 1.3; }

.hg-meridians ellipse {
  transform-origin: 200px 200px;
  animation: hg-spin 14s linear infinite;
}
.hg-meridians .m2 { animation-delay: -3.5s; }
.hg-meridians .m3 { animation-delay: -7s; }
.hg-meridians .m4 { animation-delay: -10.5s; }

@keyframes hg-spin {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0.04); }
  100% { transform: scaleX(1); }
}

.hg-dots circle { fill: rgba(255, 255, 255, 0.85); }
.hg-dots .d-gold { fill: rgba(212, 175, 55, 0.9); }
.hg-dots { animation: hg-drift 26s linear infinite; transform-origin: 200px 200px; }
@keyframes hg-drift { to { transform: rotate(360deg); } }

.hg-orbit-group { transform: rotate(-14deg); transform-origin: 200px 200px; }
.hg-orbit { fill: none; stroke: rgba(63, 194, 178, 0.45); stroke-width: 1; stroke-dasharray: 3 7; }

.hg-ball {
  fill: #d4af37;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.9));
  offset-path: path("M 15 200 A 185 64 0 1 0 385 200 A 185 64 0 1 0 15 200");
  offset-rotate: 0deg;
  animation: hg-orbit-run 12s linear infinite;
}
@keyframes hg-orbit-run { to { offset-distance: 100%; } }


@media (prefers-reduced-motion: reduce) {
  .hg-meridians ellipse, .hg-dots, .hg-ball { animation: none; }
}


/* ═══ Dunkelmodus ═══ */
html[data-theme="dark"] {
  color-scheme: dark;
  --link: #85b5ea;
  --chip: #1c3050;
  --paper: #0a1424;
  --paper-mid: #0e1c31;
  --surface: #12233c;
  --surface-glass: rgba(18, 35, 60, 0.94);
  --ink: #e7edf7;
  --muted: #a3b2c7;
  --line: #273b59;
  --gold-text: #d4af37;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .concept-figure .figure-media { background: #0e1b30; }
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea {
  background: #0e1b30;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .legal-links a { background: #0e1b30; }
html[data-theme="dark"] .legal-links a:hover { background: var(--surface); }
html[data-theme="dark"] img { opacity: 0.94; }

/* Theme-Umschalter */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.theme-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.tt-moon path { fill: currentColor; }
.tt-sun circle, .tt-sun path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }


/* Navy-Karten behalten helles Gold als Labelfarbe (beide Themes) */
.architecture-card.primary-layer span,
.roadmap-card.active span {
  color: var(--gold);
}


/* ═══ Marken-Logos ═══ */
.logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 14px 22px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(4, 16, 31, 0.35);
}

.logo-plate img {
  display: block;
  width: 220px;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.card-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 6px 0 10px;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px;
  border: 1px solid var(--line);
}

html[data-theme="dark"] .logo-plate,
html[data-theme="dark"] .card-logo {
  background: #f4f6fa;
}


/* ═══ Mobile Bildanpassung: volle Motive statt harter Beschnitt ═══ */
@media (max-width: 760px) {
  .project-hero img,
  .project-feature img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .portfolio-flagship img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .logo-plate img {
    width: 180px;
  }

  .hero-globe {
    display: none;
  }
}


/* ═══ Hero auf Mobil/Tablet: Bild vollständig und unverdeckt, Text darunter ═══ */
@media (max-width: 980px) {
  .premium-hero {
    display: block;
    min-height: 0;
    padding: 0 0 28px;
    background: var(--navy);
  }

  .premium-hero .hero-image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }

  .premium-hero .hero-overlay,
  .premium-hero .premium-overlay,
  .premium-hero .hero-motion {
    display: none;
  }

  .premium-hero {
    position: relative;
  }

  .premium-hero .hero-globe {
    display: block;
    top: 20vw;
    left: 46vw;
    right: auto;
    width: min(34vw, 220px);
    transform: none;
    opacity: 1;
  }

  /* Kräftigere Farben auf dem Handy, damit die Kugel klar sichtbar ist */
  .premium-hero .hero-globe .hg-sphere { stroke: rgba(212, 175, 55, 1); stroke-width: 1.8; }
  .premium-hero .hero-globe .hg-line { stroke: rgba(212, 175, 55, 0.9); stroke-width: 1.3; }
  .premium-hero .hero-globe .hg-line--soft { stroke: rgba(255, 219, 130, 0.7); }
  .premium-hero .hero-globe .hg-orbit { stroke: rgba(63, 194, 178, 0.85); stroke-width: 1.4; }
  .premium-hero .hero-globe .hg-dots circle { fill: rgba(255, 255, 255, 1); }
  .premium-hero .hero-globe .hg-ball { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 1)); }

  .premium-hero .hero-content {
    width: auto;
    padding: 26px 18px 0;
  }

  .premium-hero .hero-command-panel {
    margin: 26px 18px 0;
    width: auto;
    max-width: none;
  }
}