/* =========================================================
   Standort (city) pages — visual alignment to site DS
   All selectors scoped under .standort-page so this file
   loads only on /de/spanndecken-in-ihrer-naehe[-top]/* pages.
   Uses --pa-* tokens from design-system.css. Visual only:
   no content, SEO, schema, route or markup-structure changes.
   ========================================================= */

/* ── Section rhythm + alternating background bands ─────── */
.standort-page .content-section {
  padding:    40px 0;
  background: #ffffff;
}
.standort-page .content-section + .content-section {
  border-top: 1px solid var(--pa-border);
}
.standort-page .content-section:nth-of-type(even) {
  background: var(--pa-bg-alt);
}
/* Neutralise the legacy inner .section padding (we own the rhythm now) */
.standort-page .content-section .section {
  padding: 0;
}

/* ── Hero: contained dark card with gold eyebrow ───────── */
.standort-page .content-section:first-child {
  padding-top: 32px;
}
.standort-page .page-title {
  width:          auto;
  max-width:      none;
  margin:         0;
  border:         none;
  background:     linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border-radius:  16px;
  padding:        48px 40px;
  text-align:     center;
  box-shadow:     0 10px 30px rgba(23, 34, 50, .16);
  position:       relative;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.standort-page .page-title::before {
  /* Double space after \00b7 escape: first is consumed as escape terminator, second renders. */
  content:        "Regional \00b7  seit 2012";
  display:        block;
  width:          max-content;
  max-width:      100%;
  margin:         0 auto 12px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--pa-accent);
}
.standort-page .page-title h1 {
  margin:         0;
  max-width:      100%;
  color:          #ffffff;
  font-size:      clamp(26px, 4vw, 40px);
  font-weight:    700;
  line-height:    1.18;
  letter-spacing: -.01em;
  text-align:     center;
}
.standort-page .page-title h1::after {
  content:       "";
  display:       block;
  width:         64px;
  height:        3px;
  border-radius: 2px;
  background:    var(--pa-accent);
  margin:        18px auto 0;
}

/* ── Readable body column + typography ─────────────────── */
.standort-page .section-text {
  max-width: 820px;
  margin:    0 auto;
}
.standort-page .section-text p {
  font-size:   16px;
  line-height: 1.75;
  color:       var(--pa-text);
  margin:      0 0 14px;
}
.standort-page .section-text p:last-child { margin-bottom: 0; }

.standort-page .section-text h2 {
  margin:         28px 0 16px;
  font-size:      clamp(22px, 2.4vw, 30px);
  font-weight:    700;
  color:          var(--pa-primary);
  line-height:    1.25;
  letter-spacing: -.01em;
}
.standort-page .section-text > h2:first-child { margin-top: 0; }

.standort-page .section-text h3 {
  margin:      22px 0 10px;
  font-size:   18px;
  font-weight: 700;
  color:       var(--pa-primary);
  line-height: 1.3;
}

.standort-page .section-text ul {
  margin:       0 0 16px;
  padding-left: 20px;
}
.standort-page .section-text li {
  font-size:   16px;
  line-height: 1.7;
  color:       var(--pa-text);
  margin:      0 0 6px;
}
.standort-page .section-text strong { color: var(--pa-text); }

/* Inline content links: keep DS colors, add focus affordance */
.standort-page .section-text a:not(.link-btn) { text-underline-offset: 2px; }
.standort-page .section-text a:not(.link-btn):focus-visible {
  outline:        2px solid var(--pa-accent);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ── Primary CTA buttons (calculator) → gold ─────────────
       a11y: dark anthracite text on gold = 7:1 (white text was 2.3) */
.standort-page .link-btn {
  display:         inline-block;
  background:      var(--pa-accent);
  border:          1px solid var(--pa-accent);
  border-radius:   var(--pa-radius-btn);
  padding:         13px 26px;
  color:           var(--pa-text-on-gold, #1f2937) !important;
  font-size:       16px;
  font-weight:     600;
  line-height:     1.2;
  text-align:      center;
  text-decoration: none;
  text-shadow:     none;
  transition:      background .18s ease, border-color .18s ease,
                   transform .15s ease, box-shadow .18s ease;
}
.standort-page .link-btn:hover,
.standort-page .link-btn:focus {
  background:    var(--pa-accent-dark);
  border-color:  var(--pa-accent-dark);
  color:         var(--pa-text-on-gold, #1f2937) !important;
  transform:     translateY(-1px);
  box-shadow:    0 6px 16px rgba(0, 0, 0, .14);
}
.standort-page .link-btn:focus-visible {
  outline:        3px solid rgba(201, 166, 102, .5);
  outline-offset: 2px;
}

/* ── City gallery: hover polish (no inline-style overrides) ── */
.standort-page .city-gallery a span {
  transition: transform .25s ease;
}
.standort-page .city-gallery a:hover span {
  transform: translateY(-4px);
}
.standort-page .city-gallery img {
  transition: transform .4s ease;
}
.standort-page .city-gallery a:hover img {
  transform: scale(1.04);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 767px) {
  .standort-page .content-section { padding: 28px 0; }
  .standort-page .content-section:first-child { padding-top: 24px; }
  .standort-page .page-title { padding: 36px 24px; }
  .standort-page .section-text p,
  .standort-page .section-text li { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .standort-page .content-section { padding: 22px 0; }
  .standort-page .page-title { padding: 30px 18px; }
  .standort-page .link-btn { display: block; width: 100%; }
}