/* Standortkoordinaten sind Geometrie des gelieferten Kartenentwurfs. */
.network-visual { padding-bottom: var(--space-xl); color: var(--black); background-color: var(--gray-20); background-image: linear-gradient(color-mix(in srgb,var(--white) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--white) 18%,transparent) 1px,transparent 1px); background-size: 90px 60px; }
.network-visual__heading { width: min(calc(100% - var(--space-l) - var(--space-l)),1600px); padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.network-visual__heading h1 { color: var(--black); }
.variante-new .network-visual__heading { width: min(calc(100% - var(--space-l) - var(--space-l)), var(--content-width)); }
.variante-new .network-visual__heading h1 { max-width: 780px; }
.variante-new .network-visual__heading .body-subline { margin-top: var(--space-l); }
.network-map__viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.network-map__viewport:focus-visible { outline: 2px solid var(--black); outline-offset: calc(0px - var(--space-2xs)); }
.network-map__canvas { position: relative; width: min(100%,1600px); min-width: 1240px; aspect-ratio: 1600 / 570; margin-inline: auto; }
.variante-new .network-visual { display: flex; flex-direction: column; min-height: calc(100svh - var(--mobile-header)); }
.variante-new .network-map__viewport { margin-block: auto; }
.variante-new .network-map__canvas { width: 100%; }
@media (min-width:1171px) {
    .variante-new .network-visual {
        display: grid;
        /* Die Infoboxen brauchen auch in kurzen Fenstern genügend Platz auf der Karte. */
        grid-template-rows: auto minmax(calc(1080px * 570 / 1600), 1fr) auto;
        min-height: calc(100svh - var(--utility-height) - var(--primary-height));
    }
    .variante-new .network-map__viewport { display: grid; place-items: center; height: 100%; margin-block: 0; container-type: size; }
    .variante-new .network-map__canvas { width: min(100%,calc(100cqh * 1600 / 570)); min-width: 0; }
}
@media (min-width:1171px) and (max-width:1200px) {
    .variante-new .network-visual { min-height: calc(100svh - var(--mobile-header)); }
}
.network-map__world, .network-map__japan { position: absolute; height: auto; filter: drop-shadow(0 3px 3px color-mix(in srgb,var(--black) 35%,transparent)); }
.network-map__world { left: 0; top: 9%; width: 79%; }
.network-map__japan { left: 81%; top: 6%; width: 17%; }
.network-map__connection { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gray-60); stroke-width: 1; pointer-events: none; }
.network-map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-marker { position: absolute; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; color: var(--yellow); background: transparent; transform: translate(-50%,-50%); }
button.network-marker { cursor: pointer; }
.network-marker svg { width: 24px; height: 24px; overflow: visible; }
.network-marker__shape { fill: currentColor; stroke: var(--black); stroke-width: 1; }
.network-marker__pulse { fill: none; stroke: var(--white); stroke-width: 2; opacity: 0; transform-origin: center; }
.network-marker--headquarters { color: var(--map-kobe); }
.network-marker--headquarters .network-marker__shape, .network-marker:is(.is-active,.is-highlighted) .network-marker__shape { stroke: var(--white); stroke-width: 4; }
.network-marker--headquarters svg, .network-marker:is(.is-active,.is-highlighted) svg { width: 32px; height: 32px; }
/* Gleiche sichtbare Kreisfläche trotz stärkerem Rand am aktiven Marker. */
.variante-new .network-marker--development:is(.is-active,.is-highlighted) .network-marker__shape circle { r: 8.375px; }
.network-marker.is-active .network-marker__pulse,
.variante-new .network-map__canvas .network-marker--headquarters .network-marker__pulse { animation: network-location-pulse 1.2s ease-out 2; }
.variante-new .network-map__canvas .network-marker:is(.is-active, .is-highlighted, .network-marker--headquarters) .network-marker__pulse { animation: network-location-pulse 1.2s ease-out infinite; }
.network-marker:focus-visible { z-index: 3; outline: 2px solid var(--black); outline-offset: var(--space-2xs); }
.variante-new .network-map__canvas .network-marker { place-content: center; }
.network-marker--development[data-location="china-changshu"] { width: 18px; height: 18px; }
.network-marker--development[data-location="china-changshu"] svg { pointer-events: none; }
/* Izumiotsu bleibt neben dem nahe gelegenen Hauptsitz auswählbar. */
.network-marker--offset { margin-top: 19px; }
.network-marker--mini { z-index: 2; width: 7px; height: 7px; pointer-events: none; }
.network-marker--mini svg { width: 7px; height: 7px; }
.network-marker--mini.network-marker--headquarters { z-index: 3; }
.network-marker--mini.network-marker--headquarters svg { width: 12px; height: 12px; }
.network-card { position: absolute; z-index: 4; width: 238px; padding: var(--space-m) var(--space-l); background: var(--yellow); }
.network-card strong, .network-card span { display: block; }
.variante-new .network-card { font-size: 12px; }
.variante-new .network-card [data-location-lines] > span { font-weight: 500; }
.network-card--kobe { color: var(--white); background: var(--map-kobe); }
.network-card__link { display: inline-block; margin-top: var(--space-s); color: inherit; font-weight: 400; text-underline-offset: var(--space-2xs); }
.network-details { width: min(400px, calc(100% - 2 * var(--space-l))); max-width: calc(100% - 2 * var(--space-l)); max-height: calc(100% - 2 * var(--space-l)); padding: 44px var(--space-l) var(--space-l); border: 0; color: var(--black); background: var(--white); font-size: var(--body-small); font-weight: 400; line-height: 1.5; }
.network-details::backdrop { background: color-mix(in srgb, var(--black) 75%, transparent); }
.network-details__close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; color: var(--black); background: var(--white); font-size: 30px; cursor: pointer; }
.network-details__close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.network-details__image { display: block; width: auto; max-width: 100%; max-height: 200px; height: auto; margin-inline: auto; }
.network-details__image[src$="/standort-nayoro.webp"] { width: 100%; height: 200px; object-fit: cover; object-position: center 70%; }
.network-details__content h2 { margin-top: var(--space-l); font: inherit; font-weight: 700; }
.network-details__copy { margin-block: var(--space-l); white-space: pre-line; hyphens: none; }
.network-details__link { display: inline-block; margin-top: var(--space-l); color: inherit; overflow-wrap: anywhere; }
.network-details__link[hidden] { display: none; }
.network-card__link:focus-visible { outline: 2px solid currentColor; outline-offset: var(--space-2xs); }
.network-card__link[hidden] { display: none; }
.network-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-l) var(--space-2xl); padding: var(--space-l) 0 0; margin-block: 0; list-style: none; }
.network-legend li { display: flex; align-items: center; gap: var(--space-s); }
.network-legend__button { appearance: none; display: flex; align-items: center; gap: var(--space-s); min-height: 28px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.network-legend__label { display: block; white-space: nowrap; }
.network-legend__button:focus-visible { outline: 2px solid var(--black); outline-offset: var(--space-2xs); }
.network-marker--legend { position: static; flex: 0 0 auto; transform: none; }
.network-location-list { margin-top: var(--space-l); }
.network-location-list summary { width: fit-content; cursor: pointer; }
.network-location-list ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-s); padding: var(--space-l) 0 0; margin: 0; list-style: none; }
.network-location-list button { width: 100%; min-height: 44px; padding: var(--space-m); border: 1px solid var(--gray-60); color: var(--black); background: var(--white); text-align: left; cursor: pointer; }
.network-location-list button[aria-pressed="true"] { background: var(--yellow); border-color: var(--black); }
.network-location-list button:focus-visible, .network-location-list summary:focus-visible { outline: 2px solid var(--black); outline-offset: var(--space-2xs); }
@keyframes network-location-pulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@media (max-width:800px) {
    .variante-new .network-card--kobe { transform: translateY(var(--space-xl)); }
    .network-location-list ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce), print { .network-marker.is-active .network-marker__pulse, .variante-new .network-map__canvas .network-marker:is(.is-active, .is-highlighted, .network-marker--headquarters) .network-marker__pulse { animation: none; } }