/* Shared, stable contact controls. Hover changes paint, never sibling geometry. */
.side-nav { width: 44px; gap: 6px; }
.side-link, .side-link:hover, .side-link:focus-visible {
  width: 44px; height: 44px; flex: 0 0 44px;
  transition: background-color .18s ease, border-color .18s ease;
}
.side-link:hover { background-color: #493b2c; border-color: #d6a500; }
.side-link.whatsapp:hover { background-color: #1da851; }
#main-header a:focus-visible, #main-header button:focus-visible, .side-link:focus-visible {
  outline: 3px solid #d6a500; outline-offset: 3px;
}
.nav-mega-panel[hidden] { display: none !important; }
@media (min-width: 769px) {
  /* Floating UI anchors desktop panels; mobile keeps its full-screen layout. */
  .nav-mega { position: static; }
  .nav-mega-toggle { min-height: 44px; }
  .nav-mega-panel {
    top: var(--dropdown-top, 100%); left: var(--dropdown-left, 0);
    transform: none; max-height: var(--dropdown-max-height, calc(100dvh - 80px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-mega-link { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 768px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .side-nav {
    width: auto; inset: auto 0 0; transform: none; flex-direction: row; gap: 6px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--color-dark); box-sizing: border-box;
  }
  .side-link, .side-link:hover, .side-link:focus-visible { flex: 1 1 0; width: auto; height: 44px; border-radius: 3px; }
  body.nav-open .side-nav { visibility: hidden; }
  .nav-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #main-header *, .side-nav * { transition: none !important; }
  #hero *, #hero *::before, #hero *::after { animation: none !important; transition: none !important; }
}
/* One decorative checkmark; keep CSS-generated text out of the accessible name. */
.welcome-ticks li::before { content: none; }
.welcome-check {
  position: static; display: grid; place-items: center; flex: 0 0 1.2rem;
  width: 1.2rem; height: 1.2rem; color: #fff; background: var(--color-gold);
  border-radius: 50%; font-size: .7rem; font-weight: 800;
}

/* The service-area badge now carries the supported regions instead of a radius. */
.service-area-badge {
  width: 220px;
  min-height: 126px;
  aspect-ratio: auto;
  flex-basis: 220px;
  padding: 1rem;
  border-radius: 999px;
}
.service-area-badge strong {
  max-width: 12rem;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.service-area-badge small {
  max-width: 11rem;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: none;
}

/* Fill the label band when another card in the row wraps onto two lines. */
.purchase-card { display: flex; flex-direction: column; }
.purchase-card .card-label { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Shared keyboard entry point, including the homepage and legal pages. */
.skip-link { position: fixed; z-index: 1100; top: 8px; left: 8px; padding: .8rem 1.2rem; background: #fff; color: #1a1410; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
main { scroll-margin-top: 96px; }
.footer-bottom > p { opacity: 1; color: #a3a3a3; }
/* Preserve the chosen catalogue framing without cutting off the outer crowns. */
.card-image img[src$="/goldkontor/silberschmuck.webp"] { object-fit: cover; }
.card-image img[src$="/goldkontor/zahngold.webp"] { object-fit: contain; background: #fff; }

/* Restored client photograph from the former homepage contact area. */
.site-footer .footer-photo { margin: 2.5rem auto 0; }

/* Migrated location navigation, scoped to the preserved V5.2 footer. */
.footer-service-areas {
  padding-block: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.site-footer .footer-service-areas h2,
.site-footer .footer-city-group h3 {
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-footer .footer-service-areas h2 {
  margin: 0 0 1.75rem;
}
.footer-city-groups {
  display: grid;
  grid-template-columns: 1.1fr 1.8fr 1fr 1.25fr;
  gap: 2rem;
  text-align: left;
}
.footer-city-group { min-width: 0; }
.site-footer .footer-city-group h3 {
  margin: 0 0 .85rem;
}
.footer-city-group ul { list-style: none; margin: 0; padding: 0; }
.footer-city-group:nth-child(2) ul { columns: 2; column-gap: 1.25rem; }
.footer-city-group li { break-inside: avoid; }
.footer-city-group a, .footer-city-group span {
  display: inline-block;
  padding-block: .25rem;
  color: #d4d0c7;
  font-size: .9rem;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-city-group a:hover { color: #e0c180; text-decoration: underline; text-underline-offset: .2em; }
.footer-city-group a:focus-visible { outline: 2px solid #e0c180; outline-offset: 3px; }
@media (max-width: 1000px) {
  .footer-city-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
}
@media (max-width: 600px) {
  .footer-service-areas { padding-block: 2rem; }
  .footer-city-groups { grid-template-columns: 1fr; }
  .footer-city-group ul { columns: 2; column-gap: 1.25rem; }
  .footer-city-group a, .footer-city-group span { padding-block: .5rem; }
}

/* Contact map: loading requires an explicit action on every page visit. */
.map-placeholder { min-height:350px; padding:2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; background:#262626; color:#fff; }
.map-placeholder > svg { color:#d6a500; flex:none; }
.map-placeholder h3,.map-placeholder p { margin:0; }
.map-placeholder .map-privacy-note { max-width:38rem; font-size:.95rem; line-height:1.5; color:#e4e0d5; }
.map-placeholder .btn-primary { cursor:pointer; font:inherit; }
.map-placeholder .map-directions { color:#e1bd58; text-underline-offset:4px; }
.map-placeholder :focus-visible { outline:3px solid #fff; outline-offset:5px; }
.map-wrap iframe { display:block; width:100%; min-height:350px; border:0; }
@media(max-width:600px) { .map-placeholder { padding:1.5rem 1rem; } .map-placeholder .btn-primary { width:100%; } }