/* Rechenzentren-Seite (resources/views/datacenter.blade.php). Präfix dc-, Tokens aus ui.css. Der Baustein utils.datacenters hat eigene Stile. */
.dc-hero{padding:56px 0 64px;background:var(--ui-bg-soft);border-bottom:1px solid var(--ui-line);color:var(--ui-text);font-family:var(--ui-font)}
.dc-hero h1{font-size:clamp(2rem,4vw,2.9rem);font-weight:700;line-height:1.15;margin:0 0 1rem;color:var(--ui-text)}
.dc-hero-lead{max-width:560px;font-size:1.05rem;color:var(--ui-mute)}
.dc-hero-points{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 1.8rem;padding:0;list-style:none}
.dc-hero-points li{display:flex;gap:.45rem;align-items:center;border:1px solid var(--ui-line);background:var(--ui-card);border-radius:999px;padding:.35rem .8rem;font-size:.84rem}
.dc-hero-points i{color:var(--ui-y-ink)}

/* Schematische Karte: Dark-Fiber-Ring mit 400G, Peering und Transit an zwei Knotenpunkten */
.dc-map{background:var(--ui-ink);border-radius:22px;padding:18px;color:#fff;box-shadow:0 24px 60px rgba(10,14,23,.18)}
html[data-theme-mode='dark'] .dc-map{background:var(--ui-card);border:1px solid var(--ui-line)}
.dc-map svg{display:block;width:100%;height:auto}
.dc-map-river{fill:none;stroke:#1f3a5c;stroke-width:14;stroke-linecap:round}
.dc-map-ring{fill:none;stroke:var(--ui-y);stroke-width:2.5;stroke-linejoin:round}
/* Bewegung nur, wo sie stimmt: Verkehr läuft über die Anbindungen herein (Pfade beginnen am Kasten), der Filter in FR4 arbeitet. Der Ring bleibt ruhig. */
.dc-map-uplink{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 5;opacity:.85;animation:dc-inbound 1.2s linear infinite}
@keyframes dc-inbound{to{stroke-dashoffset:-20}}
.dc-map-shield{fill:none;stroke:var(--ui-y);stroke-width:2;stroke-dasharray:4 3;transform-box:fill-box;transform-origin:center;animation:dc-scan 8s linear infinite}
@keyframes dc-scan{to{transform:rotate(360deg)}}
.dc-map-shield-bg{fill:#fff;opacity:.08}
.dc-map-cap rect{fill:var(--ui-y)}
.dc-map-cap text{fill:#0a0e17;font:700 10px var(--ui-font)}
.dc-map-box{fill:var(--ui-ink);stroke:#fff;stroke-width:1.5}
html[data-theme-mode='dark'] .dc-map-box{fill:var(--ui-card)}
.dc-map-box-text{fill:#fff;font:600 13px var(--ui-font)}
.dc-map-dot{fill:var(--ui-y)}
.dc-map-halo{fill:var(--ui-y);opacity:.16}
.dc-map-name{fill:#fff;font:600 13px var(--ui-font)}
.dc-map-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 6px 0;font-size:.75rem;color:#9aa0ad}
.dc-map-note{margin-left:auto}
.dc-map-key{display:inline-block;width:18px;margin-right:.4rem;vertical-align:middle}
.dc-map-key--ring{border-top:2.5px solid var(--ui-y)}
.dc-map-key--uplink{border-top:2px dashed #fff}
.dc-map-key--shield{width:12px;height:12px;border-radius:50%;border:2px dashed var(--ui-y)}
.dc-map-legend a{color:#9aa0ad;text-decoration:underline}
.dc-map-legend a:hover,.dc-map-legend a:focus-visible{color:#fff}

/* Standorte */
#standorte{scroll-margin-top:84px}
.dc-site{display:flex;flex-direction:column;height:100%;border:1px solid var(--ui-line);border-radius:18px;overflow:hidden;background:var(--ui-card);color:var(--ui-text)}
.dc-site img,.dc-site-ph{display:block;width:100%;height:190px;object-fit:cover}
/* Ohne Foto: dunkle Kachel mit dem Kürzel des Standorts */
.dc-site-ph{position:relative;display:flex;flex-direction:column;gap:.3rem;align-items:center;justify-content:center;overflow:hidden;background:var(--ui-ink);color:#fff}
.dc-site-ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.dc-site-ph b{position:relative;font-size:3rem;line-height:1;color:var(--ui-y)}
.dc-site-ph span{position:relative;font-size:.85rem;color:#9aa0ad}
.dc-site-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.dc-site h3{font-size:1.25rem;font-weight:700;margin:0}
.dc-site-role{margin:.15rem 0 0;font-size:.9rem;font-weight:600;color:var(--ui-text)}
.dc-site-loc{margin:.15rem 0 .8rem;font-size:.85rem;color:var(--ui-mute)}
.dc-site-points{margin:0 0 1rem;padding:0;list-style:none;font-size:.9rem}
.dc-site-points li{display:flex;gap:.6rem;padding:.25rem 0}
.dc-site-points i{flex:none;width:16px;margin-top:.25rem;color:var(--ui-ok)}
.dc-site-runs{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--ui-line)}
.dc-site-runs b{display:block;margin-bottom:.35rem;font-size:.8rem;font-weight:600}
.dc-site-runs ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dc-site-runs li{border:1px solid var(--ui-line);border-radius:999px;padding:.12rem .6rem;font-size:.78rem}

/* Auf dem Handy schrumpft die Karte auf gut die Hälfte: Namen und Kasten größer, die 400G-Schilder stehen in der Legende */
@media (max-width:575.98px){.dc-map{padding:12px}.dc-map-name{font-size:22px}.dc-map-box-text{font-size:20px}.dc-map-cap{display:none}.dc-map-note{margin-left:0}}
@media (prefers-reduced-motion:reduce){.dc-map-uplink,.dc-map-shield{animation:none}}