/* Nerdschmie.de City Frontend Phase 2A 20260826 */
.page-cities #body-wrapper,
.page-city #body-wrapper { background: #07120f; }

.nsd-cities-page,
.nsd-city-page { max-width: 1180px; margin: 0 auto; padding-top: 1.4rem; padding-bottom: 3rem; color: #e9f4ef; }
.nsd-city-hero { position: relative; overflow: hidden; margin: 0 0 1.25rem; padding: clamp(1.35rem, 3vw, 2.35rem); border: 1px solid rgba(111,196,157,.25); border-radius: 18px; background: linear-gradient(145deg, rgba(17,49,38,.92), rgba(8,25,20,.96)); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.nsd-city-hero::after { content:""; position:absolute; inset:auto -70px -100px auto; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(78,190,137,.14),transparent 68%); pointer-events:none; }
.nsd-city-eyebrow { margin:0 0 .38rem; color:#8bd3b2; font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.nsd-city-hero h1 { margin:.1rem 0 .6rem; max-width:900px; color:#fff; font-size:clamp(1.75rem,5vw,3.25rem); line-height:1.05; overflow-wrap:anywhere; }
.nsd-city-lead,.nsd-city-fact-lead { max-width:820px; margin:.55rem 0 0; color:#c9d9d2; line-height:1.6; }
.nsd-city-state-line { margin:.25rem 0; font-weight:600; color:#b8d8c9; }
.nsd-city-state-line a { color:inherit; text-decoration:underline; text-decoration-color:rgba(184,216,201,.45); }
.nsd-city-hero-counts { margin:.8rem 0 0; }
.nsd-city-counts { display:inline-flex; flex-wrap:wrap; gap:.25rem; color:#eef9f4; font-weight:600; }

.nsd-city-section,.nsd-city-tools-panel { margin:1.35rem 0; padding:clamp(1rem,2.5vw,1.5rem); border:1px solid rgba(126,176,153,.18); border-radius:16px; background:rgba(12,31,25,.72); }
.nsd-city-section-head { margin-bottom:1rem; }
.nsd-city-section-head h2 { margin:.1rem 0 .3rem; color:#fff; font-size:clamp(1.3rem,3vw,1.8rem); }
@media (min-width: 701px) { .page-cities .nsd-city-section-head h2 { margin-bottom:var(--nsd-space-heading-after); color:var(--nsd-color-text); font-size:var(--nsd-type-section-size); font-weight:var(--nsd-type-section-weight); line-height:var(--nsd-type-section-line); letter-spacing:var(--nsd-type-section-tracking); text-transform:none; } }
.nsd-city-section-head p:last-child { margin:.35rem 0 0; color:#aebfb7; }

.nsd-city-search-row { display:flex; gap:.7rem; align-items:center; }
.nsd-city-search-field { flex:1 1 28rem; }
.nsd-city-search-field input,.nsd-city-state-filter select { width:100%; min-height:44px; border:1px solid rgba(132,194,165,.3); border-radius:10px; background:#081913; color:#f1f8f5; padding:.65rem .8rem; }
.nsd-city-search-field input:focus,.nsd-city-state-filter select:focus { outline:2px solid rgba(94,207,154,.55); outline-offset:1px; }
.nsd-city-reset,.nsd-city-filter-chip { min-height:40px; border:1px solid rgba(112,186,152,.32); border-radius:999px; background:#0d261d; color:#dcebe4; padding:.48rem .86rem; cursor:pointer; }
.nsd-city-filter-chip.is-active { background:#1b5d43; border-color:#4fc18d; color:#fff; }
.nsd-city-filter-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0; }
.nsd-city-state-filter { display:grid; gap:.35rem; max-width:340px; color:#c9d8d1; }
.nsd-city-filter-status { min-height:1.3em; margin:.7rem 0 0; color:#9fb7ac; }

.nsd-city-hotspot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.nsd-city-hotspot-card { position:relative; display:flex; min-width:0; flex-direction:column; gap:.4rem; padding:1rem; border:1px solid rgba(91,188,143,.28); border-radius:13px; background:#0a2018; color:#eaf6f0; text-decoration:none; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.nsd-city-hotspot-card:hover,.nsd-city-list-card:hover,.nsd-city-entity-card:hover { transform:translateY(-2px); border-color:rgba(89,209,153,.55); background:#0d281e; }
.nsd-city-hotspot-card__rank { position:absolute; top:.8rem; right:.8rem; color:#6da58b; font-size:.78rem; }
.nsd-city-hotspot-card__name { padding-right:2.5rem; font-size:1.2rem; overflow-wrap:anywhere; }
.nsd-city-hotspot-card__state,.nsd-city-list-card__state { color:#91aa9f; font-size:.88rem; }
.nsd-city-hotspot-card__counts,.nsd-city-list-card__counts { color:#c9ddd3; font-size:.9rem; line-height:1.45; }
.nsd-city-hotspot-card__score { margin-top:.25rem; color:#75d6aa; font-size:.86rem; font-weight:600; }

.nsd-city-az-nav,.nsd-city-anchor-nav { display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:thin; padding:.25rem 0 .65rem; }
.nsd-city-az-nav a,.nsd-city-anchor-nav a { flex:0 0 auto; border:1px solid rgba(108,181,147,.28); border-radius:999px; padding:.36rem .65rem; background:#0a2119; color:#dcebe4; text-decoration:none; }
.nsd-city-anchor-nav { position:sticky; top:4.5rem; z-index:4; margin:1rem 0; padding:.6rem; border-radius:12px; background:rgba(6,20,15,.95); border:1px solid rgba(103,172,140,.18); }
.nsd-city-letter-group { scroll-margin-top:6rem; margin:1rem 0 1.5rem; }
.nsd-city-letter-group > h3 { margin:0 0 .55rem; color:#7fd4ac; font-size:1.4rem; }
.nsd-city-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.nsd-city-list-card { min-width:0; display:flex; flex-direction:column; gap:.2rem; padding:.8rem .9rem; border:1px solid rgba(109,171,144,.2); border-radius:11px; background:#091c16; color:#edf7f2; text-decoration:none; transition:.16s ease; }
.nsd-city-list-card strong { overflow-wrap:anywhere; }
.nsd-city-empty-filter { padding:1rem; border-radius:10px; background:#10241d; color:#c4d3cc; }

.nsd-city-breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .8rem; color:#8fa69b; font-size:.88rem; }
.nsd-city-breadcrumb a { color:#b7d6c8; }
.nsd-city-section { scroll-margin-top:6rem; }
.nsd-city-upcoming-list { display:grid; gap:.65rem; }
.nsd-city-upcoming-card { padding:.85rem 1rem; border-left:3px solid #3e9e72; border-radius:8px; background:#091d16; }
.nsd-city-upcoming-card__meta { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; color:#9eb2a9; font-size:.85rem; }
.nsd-city-upcoming-card h3 { margin:.35rem 0 .1rem; font-size:1.05rem; }
.nsd-city-upcoming-card h3 a { color:#edf8f3; }
.nsd-city-type-badge,.nsd-city-status-chip,.nsd-city-running { display:inline-flex; align-items:center; min-height:22px; padding:.12rem .42rem; border-radius:999px; background:#153d2e; color:#8ce0b8; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

.nsd-city-entity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.nsd-city-entity-card { min-width:0; padding:.9rem 1rem; border:1px solid rgba(115,177,149,.2); border-radius:12px; background:#091d16; transition:.16s ease; }
.nsd-city-entity-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.nsd-city-entity-card h3 { margin:0 0 .45rem; color:#eef8f3; font-size:1.05rem; overflow-wrap:anywhere; }
.nsd-city-entity-card h3 a { color:inherit; }
.nsd-city-entity-card p { margin:.32rem 0; color:#b6c8bf; line-height:1.45; overflow-wrap:anywhere; }
.nsd-city-muted { color:#829a8f !important; }
.nsd-city-entity-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.65rem; }
.nsd-city-entity-actions a { color:#7bd5aa; font-weight:600; }

.nsd-city-more { margin-top:.8rem; }
.nsd-city-more summary { display:inline-flex; cursor:pointer; border:1px solid rgba(111,184,150,.32); border-radius:999px; padding:.45rem .75rem; color:#d5e7de; background:#0c261c; }
.nsd-city-more[open] summary { margin-bottom:.8rem; }
.nsd-city-score-components { display:flex; flex-wrap:wrap; gap:.5rem; }
.nsd-city-score-components span { padding:.38rem .6rem; border-radius:8px; background:#0b241a; color:#c6ddd2; font-size:.88rem; }
.nsd-city-shared-eventcards { min-width:0; }

@media (max-width: 900px) {
  .nsd-city-hotspot-grid,.nsd-city-list-grid,.nsd-city-entity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .nsd-cities-page,.nsd-city-page { padding-top:.75rem; }
  .nsd-city-hero,.nsd-city-section,.nsd-city-tools-panel { border-radius:12px; }
  .nsd-city-search-row { align-items:stretch; flex-direction:column; }
  .nsd-city-hotspot-grid,.nsd-city-list-grid,.nsd-city-entity-grid { grid-template-columns:1fr; }
  .nsd-city-anchor-nav { top:3.7rem; margin-left:-.25rem; margin-right:-.25rem; border-radius:9px; }
  .nsd-city-hotspot-card__name { font-size:1.1rem; }
}

/* Desktop Design Phase 8 – live City directory/detail corrections. */
@media (min-width: 701px) {
  .page-cities #body-wrapper,
  .page-city #body-wrapper { background: var(--nsd-color-bg) !important; }
  .page-cities .nsd-cities-page,
  .page-city .nsd-city-page { padding-top: 0; }
  .page-cities .nsd-city-tools-panel {
    margin-block: var(--nsd-space-4) var(--nsd-space-5) !important;
    padding: var(--nsd-space-3) 0 !important;
    border-width: 1px 0 !important;
    border-color: var(--nsd-border-subtle) !important;
  }
  .page-cities .nsd-city-search-row { gap: var(--nsd-space-2); align-items: end; }
  .page-cities .nsd-city-filter-row { margin: var(--nsd-space-2) 0; gap: var(--nsd-space-2); }
  .page-cities .nsd-city-reset,
  .page-cities .nsd-city-filter-chip { min-height: 2rem; padding: .3rem .6rem; border-radius: var(--nsd-radius-control); background: transparent; }
  .page-city .nsd-city-anchor-nav {
    position: static;
    margin: var(--nsd-space-4) 0 var(--nsd-space-5);
    padding: 0 0 var(--nsd-space-2);
    border: 0;
    border-bottom: 1px solid var(--nsd-border-subtle);
    border-radius: 0;
    background: transparent;
  }
  .page-city .nsd-city-anchor-nav a { border: 0; border-radius: 0; padding: .3rem .2rem; background: transparent; color: var(--nsd-color-text-muted); }
  .page-city .nsd-city-anchor-nav a:hover,
  .page-city .nsd-city-anchor-nav a:focus-visible { color: var(--nsd-color-accent); }
  .page-city .nsd-city-shared-storecards .csv-group > .nsd-section-heading--group { display: none; }
  .page-city .nsd-city-shared-storecards .ns-card-list--stores { width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
  .page-city .nsd-city-shared-storecards .ns-card--store { width: 100%; min-width: 0; grid-template-columns: 70px minmax(0,1fr); }
  .page-city .nsd-city-shared-storecards .ns-card__content--store { grid-column: 2; min-width: 0; width: auto; }
}