/* Rechenzentren (resources/views/utils/datacenters.blade.php). Präfix dc-. */
.dc-section{--dc-y:var(--ui-y);--dc-ink:var(--ui-ink);--dc-mute:var(--ui-mute);--dc-line:var(--ui-line);--dc-bg:var(--ui-bg-soft);--dc-card:var(--ui-card);--dc-text:var(--ui-text);background:var(--dc-bg);color:var(--dc-text);padding:72px 0;font-family:var(--ui-font)}
/* Immer dunkel, unabhängig vom Theme */
.dc-section--dark{--dc-mute:#9aa0ad;--dc-line:#232a3a;--dc-bg:#11161f;--dc-card:#121826;--dc-text:#f1f2f5}
.dc-section--dark .dc-feature{border:1px solid var(--dc-line)}
.dc-muted{color:var(--dc-mute)}
.dc-head{text-align:center;margin-bottom:2.5rem}
.dc-head h2{font-weight:700;color:var(--dc-text)}
.dc-head p{max-width:640px;margin:0 auto}
.dc-location{font-size:.875rem;color:var(--dc-mute)}
.dc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dc-chips li{background:var(--dc-card);border:1px solid var(--dc-line);font-size:.75rem;padding:.2rem .6rem;border-radius:999px}

/* Hervorgehobener Standort */
.dc-feature{border-radius:20px;overflow:hidden;background:var(--dc-ink);color:#fff;margin-bottom:1.5rem}
.dc-feature-img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}
.dc-feature-body{padding:28px 30px}
.dc-note{display:inline-block;background:var(--dc-y);color:#000;font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:6px;margin-bottom:.9rem}
.dc-feature h3{font-weight:700;color:#fff;margin:0}
.dc-feature .dc-location{color:#9aa0ad;margin:.2rem 0 1rem}
.dc-highlights{list-style:none;padding:0;margin:0 0 1rem}
.dc-highlights li{display:flex;gap:.6rem;margin-bottom:.45rem;color:#dfe1e6}
.dc-highlights i{color:var(--dc-y);margin-top:.3rem;width:16px;flex:none}
.dc-feature .dc-chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
html[data-theme-mode='dark'] .dc-feature{border:1px solid var(--dc-line)}

/* Kompakte Standorte */
.dc-compact{display:flex;gap:16px;align-items:center;border:1px solid var(--dc-line);border-radius:16px;padding:14px;height:100%;background:var(--dc-card)}
.dc-compact img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex:none}
.dc-compact h3{font-weight:700;font-size:1.05rem;margin:0 0 .15rem}
.dc-compact .dc-muted{font-size:.85rem}

/* Gleichwertige Karten */
.dc-facts{margin-bottom:2.5rem}
.dc-fact{display:flex;gap:.8rem;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--dc-card);height:100%}
.dc-fact-icon{flex:none;width:40px;height:40px;border-radius:10px;background:var(--dc-y);color:#000;display:flex;align-items:center;justify-content:center}
.dc-fact b{display:block;font-size:.98rem}
.dc-fact>div>span{display:block;font-size:.82rem;color:var(--dc-mute)} /* nur der Text, nicht der Icon-Kasten */
.dc-card{border:1px solid var(--dc-line);border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column;background:var(--dc-card);transition:box-shadow .2s ease}
.dc-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.08)}
.dc-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dc-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.dc-card h3{font-weight:700;font-size:1.2rem;margin:0}
.dc-card .dc-location{margin:.15rem 0 .7rem}
.dc-card .dc-muted{font-size:.88rem}
.dc-card .dc-chips{margin-top:auto}

.dc-more{text-align:center;margin:2rem 0 0}
@media (max-width:575.98px){
  .dc-compact{flex-direction:column;align-items:flex-start}
  .dc-compact img{width:100%;height:auto;aspect-ratio:16/9}
  .dc-feature-body{padding:22px 20px}
}

/* Standort ohne Foto (z. B. Equinix FR4, bis das Bild da ist): dunkle Kachel mit dem Kürzel */
.dc-ph{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ui-ink);color:var(--dc-y);font-weight:700;font-size:1.6rem}
.dc-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:18px 18px}
.dc-ph b{position:relative}
.dc-feature .dc-ph{font-size:3rem}
.dc-feature .dc-ph{height:100%;min-height:280px}
.dc-compact .dc-ph{width:120px;height:90px;border-radius:10px;flex:none}
.dc-card .dc-ph{aspect-ratio:16/9}
@media (max-width:575.98px){.dc-compact .dc-ph{width:100%;height:auto;aspect-ratio:16/9}}
/* Drei kompakte Standorte nebeneinander: zwischen 992 und 1199 px ist neben dem Bild zu wenig Platz, dort Bild über Text */
@media (min-width:992px) and (max-width:1199.98px){.dc-compact-row--3 .dc-compact{flex-direction:column;align-items:flex-start}.dc-compact-row--3 .dc-compact img,.dc-compact-row--3 .dc-compact .dc-ph{width:100%;height:auto;aspect-ratio:16/9}}