:root {
  color-scheme: dark;
  --background: #010A16;
  --ink: #f4f7fb;
  --blue: #65b8ff;
  --gold: #ffc66b;
  /* Die vier Bilder lassen sich hier unabhängig skalieren und verschieben. */
  --start-scene-height: min(calc(34.4vw + 20px), 60svh);
  --scene-height: var(--start-scene-height);
  --edge-gap: clamp(10px, 1vw, 24px);
  --start-map-size: min(34.4vw, calc(var(--start-scene-height) - 20px));
  --continent-size: var(--start-map-size);
  --europe-width: var(--continent-size);
  --europe-x: var(--edge-gap);
  --europe-y: 8px;
  --china-width: var(--continent-size);
  --china-x: var(--edge-gap);
  --china-y: 8px;
  /* Gemeinsame Anker halten die Brücke auch beim Browserzoom an den Karten. */
  --bridge-x: calc(var(--edge-gap) + var(--continent-size) * .55);
  --bridge-width: calc(100% - var(--bridge-x) * 2);
  --bridge-height: calc(var(--continent-size) * .56);
  --bridge-y: calc(8px + var(--continent-size) * .202);
  --floor-width: 100%;
  --floor-x: 0px;
  --floor-y: 0px;
  --menu-width: clamp(280px, 27vw, 380px);
  --menu-inset: var(--edge-gap);
  --menu-top: calc(var(--start-scene-height) * .25);
  --menu-row-height: 54px;
}
* { box-sizing: border-box; }
html { background: var(--background); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
body {
  margin: 0;
  position: relative;
  min-height: 100svh;
  scrollbar-width: none;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans SC", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent, var(--blue)); outline-offset: 5px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 50; color: white; padding: 12px; background: #15304a; }
.skip-link:focus { top: 16px; }
.page-shell { min-height: calc(100svh - 60px); display: flex; flex-direction: column; position: relative; z-index: 2; isolation: isolate; }
body { overflow-x: clip; }
.landscape { position: sticky; top: 0; z-index: 10; flex: none; width: 100%; height: var(--scene-height); isolation: isolate; background: var(--background); }
.visual-frame { position: absolute; inset: 0; overflow: clip; background: var(--background); }
.landscape::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--background); pointer-events: none; }
/* Nur bei zu hohen geöffneten Menüs: Menüs im Seitenfluss, Motiv weiter fixiert. */
.landscape.menus-tall { position: relative; height: var(--expanded-header-height, var(--scene-height)); }
.landscape.menus-tall .visual-frame { position: fixed; inset: 0 0 auto; height: var(--scene-height); }
.landscape-image { position: absolute; height: auto; pointer-events: none; user-select: none; }
.europe-image { width: var(--europe-width); left: var(--europe-x); top: var(--europe-y); }
.china-image { width: var(--china-width); right: var(--china-x); top: var(--china-y); }
/* Freigestellte WebP-Karten: keine zusätzliche Maske, die Lichtpunkte beschneidet. */
.bridge-image { width: var(--bridge-width); height: var(--bridge-height); left: var(--bridge-x); top: var(--bridge-y); z-index: 1; object-fit: contain; opacity: 0; }
.brand {
  position: absolute; z-index: 2; top: 22px; left: 50%; transform: translateX(-50%);
  width: min(38%, 560px); color: var(--ink); text-align: center; text-decoration: none;
}
/* Originales ECAS/Bridge-Logo aus index_bridge.html, unveränderte Typografie. */
.brand h1 {
  margin: 0; font-size: clamp(3.4rem, 9vw, 7rem); font-weight: 280;
  letter-spacing: .17em; line-height: .95; text-indent: .17em;
  text-shadow: 0 2px 28px rgba(29,135,255,.28);
}
.bridge-row { width: min(100%, 560px); margin: 14px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.bridge-line { height: 1px; }
.bridge-line-left { background: linear-gradient(90deg, var(--blue), rgba(255,255,255,.8)); }
.bridge-line-right { background: linear-gradient(90deg, rgba(255,255,255,.8), var(--gold)); }
.bridge-text { color: rgba(255,255,255,.94); font-size: clamp(1.15rem, 2.5vw, 1.65rem); font-weight: 360; letter-spacing: .13em; line-height: 1; text-transform: uppercase; }
.menu-zone { position: absolute; z-index: 4; width: var(--menu-width); top: var(--menu-top); --accent: var(--blue); }
.europe-zone { left: var(--menu-inset); }
.china-zone { right: var(--menu-inset); --accent: var(--gold); }
.target { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 5px; color: var(--ink); background: rgba(1,10,22,.7); cursor: pointer; }
.target-label { font-size: .875rem; letter-spacing: .035em; }
.target-mark { position: relative; display: block; width: 27px; height: 27px; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); }
.target-mark::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--accent); border-radius: 50%; }
.target-mark::after { content: ""; position: absolute; width: 5px; height: 5px; top: 10px; left: 10px; border-radius: 50%; background: var(--accent); }
.target[aria-expanded="true"] .target-mark { box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent); }
.menu-panel { margin-top: 8px; padding: 10px 12px 12px; border: 1px solid rgba(215,232,251,.24); border-radius: 10px; background: rgba(5,18,34,.88); backdrop-filter: blur(16px); box-shadow: 0 14px 44px rgba(0,0,0,.26); }
.menu-heading { min-height: 66px; display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; border-bottom: 1px solid rgba(231,241,255,.13); }
.menu-region { display: block; color: var(--accent); font-size: .875rem; letter-spacing: .11em; text-transform: uppercase; }
.menu-audience { display: block; margin-top: 5px; font-size: .875rem; color: rgba(235,242,253,.78); }
.pin { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: rgba(238,245,255,.75); cursor: pointer; }
.pin svg { width: 22px; height: 22px; transform: rotate(35deg); transition: transform .15s; }
.pin:hover, .pin[aria-pressed="true"] { border-color: rgba(235,242,255,.3); background: rgba(235,242,255,.08); color: var(--accent); }
.pin[aria-pressed="true"] svg { transform: rotate(0); }
.menu-items { list-style: none; padding: 8px 0 0; margin: 0; display: grid; grid-template-rows: repeat(6, var(--menu-row-height)); gap: 3px; }
.menu-items li { min-width: 0; }
.menu-link { height: 100%; display: flex; gap: 12px; align-items: center; padding: 9px 10px; border: 1px solid transparent; border-radius: 5px; font-size: 1rem; line-height: 1.3; color: rgba(245,248,255,.94); text-decoration: none; }
.menu-number { flex: none; font-size: .875rem; color: var(--accent); font-variant-numeric: tabular-nums; opacity: .7; }
.menu-link:hover { background: rgba(241,247,255,.055); }
.menu-link[aria-current="page"] { background: rgba(236,244,255,.12); border-color: rgba(236,244,255,.38); color: white; }
.menu-link[aria-current="page"] .menu-number { opacity: 1; }
.content-region { flex: 1 0 auto; width: min(1080px, calc(100% - 80px)); margin: var(--menu-overhang, 0px) auto 0; min-height: 24px; position: relative; z-index: 2; outline: none; scroll-margin-top: calc(var(--scene-height) + 12px); }
.content-article { padding: 32px 0 50px; --accent: var(--blue); }
.content-article[data-side="cn"] { --accent: var(--gold); }
.perspective-label { margin: 0 0 14px; color: var(--accent); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.content-heading h2 { margin: 0 0 30px; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.15; font-weight: 350; letter-spacing: -.015em; }
.content-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 70px); }
.content-summary { margin: 0; padding: 2px 0 0; list-style: none; }
.content-summary li { padding: 0 0 0 17px; margin: 0 0 20px; position: relative; font-size: 1rem; line-height: 1.6; color: rgba(234,242,255,.85); }
.content-summary li::before { content: ""; width: 4px; height: 4px; background: var(--accent); position: absolute; left: 0; top: .7em; border-radius: 50%; }
.content-copy p { margin: 0 0 20px; font-size: 1.0625rem; line-height: 1.85; color: rgba(239,245,255,.9); text-align: justify; text-align-last: left; hyphens: auto; overflow-wrap: break-word; }
.noscript { padding: 24px; text-align: center; }
@media (max-width: 900px) {
  :root { --menu-width: 39%; }
  .brand { top: 16px; width: 45%; }
  .menu-items { grid-template-rows: repeat(6, var(--menu-row-height)); }
  .menu-link { font-size: .9375rem; }
  .content-region { width: calc(100% - 48px); }
}
@media (max-width: 600px) {
  :root { --scene-height: min(calc(43.2vw + 114px), 60svh); --start-map-size: min(43.2vw, calc(var(--start-scene-height) - 106px)); --europe-y: 96px; --china-y: 96px; --bridge-y: calc(96px + var(--continent-size) * .202); --menu-top: calc(var(--scene-height) - 50px); --menu-width: calc((100% - var(--edge-gap) * 2 - 10px) / 2); }
  .brand { top: 18px; width: min(80%, 360px); }
  .menu-zone { padding-bottom: 14px; }
  .target { width: 100%; gap: 6px; padding-inline: 3px; }
  .target-label { font-size: .875rem; letter-spacing: 0; }
  .target-mark { flex: none; width: 24px; height: 24px; }
  .target-mark::after { top: 9px; left: 9px; width: 4px; height: 4px; }
  .menu-panel { padding: 8px 6px; border-radius: 8px; }
  .menu-heading { min-height: 96px; align-items: flex-start; gap: 0; position: relative; padding: 8px 3px 44px; }
  .menu-region { font-size: .875rem; letter-spacing: .06em; }
  .menu-audience { font-size: .875rem; line-height: 1.4; }
  .pin { position: absolute; right: 0; bottom: 3px; width: 36px; height: 36px; }
  .menu-items { grid-template-rows: repeat(6, var(--menu-row-height)); gap: 4px; }
  .menu-link { padding: 9px 5px; gap: 7px; font-size: .875rem; overflow-wrap: anywhere; }
  .menu-number { font-size: .875rem; }
  .content-region { width: calc(100% - 36px); min-height: 18px; }
  .content-article { padding: 24px 0 28px; }
  .content-heading h2 { margin-bottom: 24px; }
  .content-body { grid-template-columns: 1fr; gap: 16px; }
  .content-copy p { font-size: 1rem; }
  .content-summary li { margin-bottom: 15px; }
  }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Variante A: einmaliger weicher Wechsel zur kompakten Leseansicht. */
html.content-mode {
  --scene-height: clamp(180px, 22svh, 220px);
  --continent-size: calc(var(--start-map-size) * 1.2);
}
.landscape { transition: height .6s cubic-bezier(.22,.61,.36,1); }
.landscape-image { transition: width .6s cubic-bezier(.22,.61,.36,1), height .6s cubic-bezier(.22,.61,.36,1), left .6s cubic-bezier(.22,.61,.36,1), right .6s cubic-bezier(.22,.61,.36,1), top .6s cubic-bezier(.22,.61,.36,1); }
.visual-frame { transition: height .6s cubic-bezier(.22,.61,.36,1); }
.content-region { transition: margin-top .6s cubic-bezier(.22,.61,.36,1); }
.content-article.content-enter { animation: content-enter .65s ease both; }
@keyframes content-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1100px) {
  html.content-mode .content-region { width: min(820px, calc(100% - (var(--menu-width) + var(--edge-gap) + 24px) * 2)); }
  html.content-mode .content-body { grid-template-columns: 1fr; gap: 12px; }
  html.content-mode .content-summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
}
@media (max-width: 600px) {
  :root { --start-scene-height: min(calc(43.2vw + 114px), 60svh); --scene-height: var(--start-scene-height); --menu-top: calc(var(--start-scene-height) - 50px); }
  html.content-mode { --scene-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .landscape, .landscape-image, .visual-frame, .content-region { transition: none; }
  .content-article.content-enter { animation: none; }
}

/* Variante C: kompakter Kopf + hellere, transparentere Lesefläche. */
html.content-mode .content-article {
  margin: 20px 0 30px;
  padding: 0;
  display: grid;
  gap: 20px;
}
html.content-mode .content-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
html.content-mode .content-heading,
html.content-mode .content-summary,
html.content-mode .content-copy {
  padding: clamp(22px, 2.4vw, 36px);
  background: rgba(33, 56, 79, .58);
  border: 1px solid rgba(223, 239, 255, .26);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.content-mode .content-heading h2 { color: #fff; margin-bottom: 0; }
html.content-mode .content-summary { margin: 0; text-align: left; }
html.content-mode .content-summary li:last-child { margin-bottom: 0; }
html.content-mode .content-copy p:last-child { margin-bottom: 0; }
html.content-mode .content-copy p { color: #f4f7fb; }
html.content-mode .content-summary li { color: rgba(244, 247, 251, .94); }
@media (max-width: 600px) {
  html.content-mode .content-article { margin-top: 16px; gap: 16px; }
  html.content-mode .content-body { gap: 16px; }
  html.content-mode .content-heading,
  html.content-mode .content-summary,
  html.content-mode .content-copy { padding: 22px 18px; border-radius: 12px; }
}



/* Startablauf: Logo bleibt in Typografie, Größe und Position unverändert. */
:root { --brand-top: 22px; }
.start-control {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  top: calc(var(--brand-top) + clamp(3.4rem, 9vw, 7rem) * .95 + 14px + clamp(1.15rem, 2.5vw, 1.65rem) + 20px);
}
.start-button { display: grid; justify-items: center; gap: 10px; min-width: 72px; min-height: 70px; padding: 8px 14px; border: 0; color: var(--ink); background: transparent; font-size: .875rem; letter-spacing: .08em; cursor: pointer; }
.start-button:disabled { cursor: progress; opacity: .65; }
.start-mark { position: relative; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; animation: start-pulse 2s ease-in-out infinite; }
.start-mark::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.start-mark::after { content: ""; position: absolute; inset: 13px; background: white; border-radius: 50%; }
@keyframes start-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(101,184,255,.05); opacity: .65; } 50% { box-shadow: 0 0 18px 4px rgba(101,184,255,.22); opacity: 1; } }
.menu-zone { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
html.menus-ready .menu-zone { visibility: visible; opacity: 1; pointer-events: auto; }
.bridge-image { transition: opacity .65s ease, width .6s ease, height .6s ease, left .6s ease, top .6s ease; }
html.bridge-visible .bridge-image { opacity: 1; }

/* Eine Szene im Dokument: bei Content-Auswahl wandert sie unter den Text. */
.floor-scene { position: absolute; top: var(--floor-top, calc(100svh - 56.25vw)); left: 0; width: 100%; aspect-ratio: 16 / 9; z-index: 0; pointer-events: none; overflow: clip; transition: top .6s ease; }
.floor-scene .scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* Gemeinsame Vergrößerung entfernt die transparenten Seitenränder aller vier Motive.
   Die Wasserzeichen-Ebene bleibt außerhalb dieses skalierenden Containers. */
.scene-artwork { position: absolute; inset: 0; transform: scale(1.2); transform-origin: 50% 84%; }
.layer-floor { z-index: 0; }
.foreground-stage { position: absolute; inset: 0; z-index: 1; transform: translateY(2.222222%); }
/* Der sichtbare Wagen inklusive Spiegelung liegt in der Quelle bei x=876..1575.
   +54,5 / 2560 = 2,12890625 % richtet seine Mitte auf die Szenenmitte aus. */
:root { --vehicle-stop-x: 2.12890625%; }
.layer-vehicle { z-index: 1; opacity: 0; transform: translateX(75%); transition: transform 2s cubic-bezier(.2,.65,.3,1), opacity .25s ease; }
.layer-components { z-index: 2; opacity: 0; transition: opacity 1.5s ease; }
.layer-light { z-index: 3; opacity: 0; transition: opacity 1.5s ease; }
.layer-watermark { z-index: 4; }
html.vehicle-visible .layer-vehicle { opacity: 1; transform: translateX(var(--vehicle-stop-x)); }
html.components-visible .layer-components, html.light-visible .layer-light { opacity: 1; }
.floor-space { flex: none; height: 0; }
html.content-mode .floor-space { height: max(160px, 28vw); }
.site-footer { position: relative; z-index: 2; min-height: 60px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; padding: 18px 24px; background: transparent; border: 0; }
.site-footer a { color: rgba(239,245,255,.72); font-size: .875rem; text-decoration: none; }
.site-footer a:hover { color: white; text-decoration: underline; }
@media (max-width: 900px) { :root { --brand-top: 16px; } }
@media (max-width: 600px) { :root { --brand-top: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .start-mark { animation: none; opacity: 1; }
  .scene-layer, .landscape-image, .menu-zone { transition: none !important; }
}

/* Eine einzige, vollbreite Szene. Die Kartenebene schneidet keine Komponenten ab. */
.landscape, .visual-frame { background: transparent; }
.visual-frame { overflow: visible; }
.landscape::after { display: none; }
.europe-image, .china-image { opacity: 0; visibility: hidden; transition: opacity 1s ease, width .6s ease, height .6s ease, left .6s ease, right .6s ease, top .6s ease; }
html.europe-visible .europe-image, html.china-visible .china-image { opacity: 1; visibility: visible; }
html.content-mode .content-region { clip-path: inset(var(--reading-clip, 0px) 0 0 0); }

/* Karten liegen unter dem Content; Logo und beide Menüs bleiben darüber. */
.map-layer { position: fixed; top: 0; left: 0; width: 100%; height: var(--scene-height); z-index: 1; pointer-events: none; overflow: visible; }

/* Sprachgruppe rechts oben: Randabstände werden aus ihrer tatsächlichen Größe abgeleitet. */
.top-controls { position: fixed; z-index: 60; top: var(--language-group-height, 24px); right: var(--language-group-width, 100px); display: flex; align-items: center; justify-content: center; max-width: calc(100% - 16px); }
.site-footer [data-ecas-legal-footer] { display: flex; align-items: center; justify-content: center; gap: 12px 28px; flex-wrap: wrap; }
.menu-link { hyphens: auto; overflow-wrap: break-word; }
html:lang(zh-CN) .content-copy p { hyphens: none; line-break: strict; word-break: normal; }