/* Brand tokens matched to https://china-industrie.com/ homepage, 2026-09-18.
   Chinese copy keeps the platform's Chinese sans-serif fallback. */
@font-face{font-family:'Manrope Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url('assets/fonts/manrope-latin-variable.woff2') format('woff2')}
@font-face{font-family:'Outfit Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('assets/fonts/outfit-latin-variable.woff2') format('woff2')}
:root{color-scheme:dark;--ink:#151515;--china-red:#a20d25;--china-red-bright:#de2910;--germany-gold:#ffcc00;--white:#fff;--muted:#b8b8b8;--line:#ffffff2b;--map-fill:#292929;--sans:'Manrope Variable',Manrope,Arial,'PingFang SC','Microsoft YaHei',sans-serif;--display:'Outfit Variable',Outfit,var(--sans)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}
body{font-family:var(--sans);color:var(--white);-webkit-font-smoothing:antialiased}
#map{position:relative;isolation:isolate;width:100%;height:100svh;overflow:hidden;display:grid;place-items:center;touch-action:manipulation;background:var(--ink)}
#map::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 88%)}
#atlas{display:block;width:100%;height:calc(100% - 68px);max-width:1440px;align-self:start;outline:none;overflow:hidden}
.province{fill:var(--map-fill);stroke:#626262;stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .3s}
.province[data-name='']{fill:#777;stroke:#999;stroke-width:.5}
.province.chosen{fill:#661f2c;stroke:#ac6673}
.city{cursor:pointer;outline:none}
.city-hit{fill:transparent}
.city-dot{fill:var(--china-red-bright);stroke:#f2e4e6;stroke-width:1.3}
.city-halo{fill:#a20d251c;stroke:#de29104d;stroke-width:.8;transition:fill .2s,stroke .2s}
.city-name{font-family:var(--display);font-size:17px;font-weight:600;fill:var(--white);paint-order:stroke;stroke:var(--map-fill);stroke-width:4px;stroke-linejoin:round;pointer-events:auto;transition:fill .15s}
.city-industry{fill:#c4c4c4;font-size:11px;paint-order:stroke;stroke:var(--map-fill);stroke-width:3px;stroke-linejoin:round;pointer-events:auto;transition:fill .15s}
.city-connector{fill:none;stroke:#939393;stroke-width:.75;pointer-events:none}
.city:hover .city-name,.city:focus-visible .city-name,.city[aria-pressed=true] .city-name{fill:var(--germany-gold)}
.city:hover .city-industry,.city:focus-visible .city-industry,.city[aria-pressed=true] .city-industry{fill:#fff}
.city:hover .city-halo,.city:focus-visible .city-halo,.city[aria-pressed=true] .city-halo{fill:#ffcc0012;stroke:var(--germany-gold)}
.city[aria-pressed=true] .city-dot{fill:var(--germany-gold);stroke:var(--ink)}
.city:focus-visible .city-hit{stroke:var(--germany-gold);stroke-width:1;stroke-dasharray:3 3}
.city.filtered-out{opacity:.16;pointer-events:none}
.city.filtered-out .city-name,.city.filtered-out .city-industry,.city.filtered-out .city-connector{visibility:hidden}
.province-label{font-size:12px;fill:#929292;letter-spacing:4px;pointer-events:none}
.region-label{font-size:12px;fill:#a1a1a1;letter-spacing:3px;pointer-events:none}




.compass{fill:#adadad;pointer-events:none}
.compass text{font-family:var(--display);font-size:11px}
.industry-filters{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;white-space:nowrap}
.industry-filters button{font:inherit;font-size:13px;font-weight:500;border:1px solid #ffffff40;background:var(--ink);color:#d0d0d0;cursor:pointer;padding:10px 18px;border-radius:999px;transition:background .2s,border-color .2s,color .2s}
.industry-filters button:hover{border-color:#ffffff9c;color:var(--white)}
.industry-filters button[aria-pressed=true]{background:var(--china-red);border-color:var(--china-red);color:var(--white);font-weight:700}
.industry-filters button:focus-visible{outline:2px solid var(--germany-gold);outline-offset:3px}
.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}
@media(max-width:650px){.city-name{font-size:23px}.city-industry{font-size:16px}.province-label{font-size:18px}.region-label{font-size:16px}.industry-filters{gap:6px;bottom:18px;max-width:96%}.industry-filters button{font-size:11px;padding:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Extra manufacturing category stays reachable on narrow screens. */
@media(max-width:650px){.industry-filters{width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}.industry-filters button{padding:9px 10px}#atlas{height:calc(100% - 110px)}}

/* Both language versions share the same data and interaction state. */
.language-switch{position:absolute;top:24px;left:32px;z-index:2;display:flex;gap:12px;align-items:center;color:#777;background:#151515e6}
.language-switch button{font:inherit;font-size:13px;color:#aaa;border:0;border-bottom:2px solid transparent;padding:8px 0;background:transparent;cursor:pointer}
.language-switch button[aria-pressed=true]{color:#fff;border-bottom-color:var(--germany-gold)}
.language-switch button:focus-visible{outline:2px solid var(--germany-gold);outline-offset:4px}
html[lang=de] .city-name{font-size:16px}
html[lang=de] .city-industry{font-size:9.5px}
html[lang=de] .province-label,html[lang=de] .region-label{font-size:10px;letter-spacing:.7px}

@media(max-width:850px){html[lang=de] .industry-filters{width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}html[lang=de] #atlas{height:calc(100% - 116px)}}
@media(max-width:650px){.language-switch{top:12px;left:18px}html[lang=de] .industry-filters button{font-size:10px;padding:9px}html[lang=de] .city-name{font-size:19px}html[lang=de] .city-industry{font-size:11px}}

/* All six filters remain reachable without horizontal overflow. */
.industry-filters{width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
@media(max-width:1100px){html[lang=de] #atlas{height:calc(100% - 116px)}}

/* Language and category count determine the required footer space. */
#atlas,html[lang=de] #atlas{height:calc(100% - var(--controls-space,100px))}

/* Phone users can select dense city clusters without aiming at tiny SVG dots. */
.city-picker{display:none}
@media(max-width:650px){.city-picker{display:block;position:absolute;top:14px;right:14px;z-index:3;max-width:145px;min-height:40px;color:#fff;background:#151515;border:1px solid #ffffff40;border-radius:0;padding:8px;font:inherit;font-size:12px}.city-picker:focus-visible{outline:2px solid var(--germany-gold);outline-offset:3px}}

.city-detail{display:none}
@media(max-width:650px){.city-detail:not([hidden]){display:grid;gap:5px;position:absolute;bottom:var(--controls-space,150px);left:14px;right:14px;padding:14px;background:#151515f5;border-left:2px solid var(--germany-gold);pointer-events:none}.city-detail strong{font-size:17px}.city-detail span{font-size:12px;line-height:1.5;color:#c4c4c4}}

/* Explicit reset keeps navigation discoverable; Escape and blank-map clicks still work. */
.map-reset{position:absolute;z-index:3;top:24px;right:32px;min-height:40px;padding:8px 14px;border:1px solid #ffffff40;background:#151515ed;color:#e5e5e5;font:inherit;font-size:12px;cursor:pointer}
.map-reset:hover{border-color:var(--germany-gold);color:var(--germany-gold)}
.map-reset:focus-visible{outline:2px solid var(--germany-gold);outline-offset:3px}
@media(min-width:651px){.industry-filters button{font-size:12px;padding:10px 14px;min-height:40px}#map[data-view=city] .compass{visibility:hidden}}
@media(max-width:650px){.map-reset{top:64px;right:14px;min-height:40px}.industry-filters button,html[lang=de] .industry-filters button{font-size:11px;min-height:40px}}

/* The directory page opens city profiles; the homepage retains zoom exploration. */
html[data-navigation=pages] .language-switch { display:none; }
html[data-navigation=pages] .city { text-decoration:none; }
html[data-navigation=pages] .city-picker { display:block; }
@media(min-width:651px){html[data-navigation=pages] .city-picker{position:absolute;top:12px;left:20px;z-index:3;max-width:200px;min-height:40px;background:#151515;color:#fff;border:1px solid #ffffff40;padding:8px;font:inherit;font-size:13px}}

/* Opt-in homepage light theme: preserve the directory page and original atlas. */
html[data-theme=light] { color-scheme:light; --ink:#f7f8f6; --map-fill:#dce4e4; --muted:#53676e; --line:#d4dfdc; --germany-gold:#9e2033; }
html[data-theme=light] body { color:#26383e; }
html[data-theme=light] #map { background:radial-gradient(ellipse at 70% 35%,#fff,transparent 75%),#f7f8f6; }
html[data-theme=light] #map::before { background-image:linear-gradient(#304d5806 1px,transparent 1px),linear-gradient(90deg,#304d5806 1px,transparent 1px); }
html[data-theme=light] .province { stroke:#95a8ad; }
html[data-theme=light] .province--featured { fill:var(--province-accent); }
html[data-theme=light] .province.chosen { fill:var(--province-accent,var(--map-fill)); stroke:#9e2033; stroke-width:1.8; }
html[data-theme=light] .province[data-name=''] { fill:#afbdc0;stroke:#afbdc0; }
html[data-theme=light] .city-name { fill:#263e47;stroke:#f7f8f6;stroke-width:3px; }
html[data-theme=light] .city-industry { fill:#455c63;stroke:#f7f8f6;stroke-width:2.5px; }
html[data-theme=light] .city-connector { stroke:#71898f; }
html[data-theme=light] .city:hover .city-name,
html[data-theme=light] .city:focus-visible .city-name,
html[data-theme=light] .city[aria-pressed=true] .city-name { fill:#9e2033; }
html[data-theme=light] .city:hover .city-industry,
html[data-theme=light] .city[aria-pressed=true] .city-industry { fill:#26383e; }
html[data-theme=light] .province-label,
html[data-theme=light] .region-label,
html[data-theme=light] .compass { fill:#6a8085; }
html[data-theme=light] .industry-filters button { color:#344d55;background:#fff;border-color:#b6c6c7; }
html[data-theme=light] .industry-filters button:hover { border-color:#9e2033;color:#9e2033; }
html[data-theme=light] .industry-filters button[aria-pressed=true] { background:#a20d25;border-color:#a20d25;color:#fff; }
html[data-theme=light] .language-switch { background:#f7f8f6e6;color:#53676e; }
html[data-theme=light] .language-switch button { color:#53676e; }
html[data-theme=light] .language-switch button[aria-pressed=true] { color:#9e2033; }
html[data-theme=light] .city-picker,
html[data-theme=light] .map-reset { color:#26383e;background:#fff;border-color:#b6c6c7;border-radius:8px; }
html[data-theme=light] .city-detail:not([hidden]) { background:#fffffff5; }
html[data-theme=light] .city-detail span { color:#455c63; }