/* Social links sit above the fixed navigation and scroll away with the page. */
.site-social-strip {
  position: relative;
  z-index: 1001;
  height: 44px;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
  background: #303438;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .12);
}
.site-social-links { display: flex; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.site-social-icon {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  color: #fff; transition: color .18s ease, background-color .18s ease;
}
.site-social-icon:hover, .site-social-icon:focus-visible { color: var(--color-gold); background: rgba(255, 255, 255, .05); }
.site-social-icon:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -4px; }
.site-social-icon--pending, .site-social-icon--pending:hover, .site-social-icon--pending:focus-visible { color: #9ca1a6; cursor: default; }
.site-social-tooltip {
  position: absolute; top: calc(100% + 8px); right: 0; padding: .45rem .7rem;
  color: #fff; background: #303438; border: 1px solid rgba(255, 255, 255, .2);
  font-size: .75rem; line-height: 1.4; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none;
}
.site-social-icon--pending:not([data-tooltip-dismissed]):hover .site-social-tooltip,
.site-social-icon--pending:not([data-tooltip-dismissed]):focus-visible .site-social-tooltip { visibility: visible; opacity: 1; }
.site-social-strip + #main-header { top: var(--social-strip-offset, 44px); }
@media (min-width: 769px) and (max-width: 1120px) {
  .site-social-strip { padding-inline: 1.5rem; }
}
@media (max-width: 768px) {
  .site-social-strip { padding-inline: 1rem; }
  body.nav-open .site-social-strip { visibility: hidden; }
  body.nav-open .site-social-strip + #main-header { top: 0; }
}

/* 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 *, .site-social-icon { 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; }

/* Shared city navigation follows the reference footer's visible service-area lists. */
.footer-service-areas {
  padding-block: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.site-footer .footer-heading,
.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 {
  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 { padding-block: .5rem; }
}