@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/figtree-variable.woff2) format('woff2');
}

:root {
  --ink: #000000;
  --gold: #D8BA79;
  --stone: #6E6A63;
  --parchment: #F5F2EB;
  --gold-1: #6E5526;
  --gold-2: #A3823F;
  --gold-3: #D8BA79;
  --gold-4: #F7ECCE;
  --gold-foil: linear-gradient(120deg, var(--gold-1), var(--gold-2) 35%, var(--gold-3) 70%, var(--gold-4));
  --gold-symmetric: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 20%, var(--gold-3) 38%, var(--gold-4) 50%, var(--gold-3) 62%, var(--gold-2) 80%, var(--gold-1) 100%);
  --gold-text: linear-gradient(90deg, var(--gold-4) 0%, var(--gold-3) 50%, var(--gold-4) 100%);
  --display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --body: 'Figtree', -apple-system, sans-serif;
  --edge: rgba(110, 85, 38, 0.4);
  --edge-strong: rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }

/* Compensates for the fixed header — without this, jumping to any #anchor
   (e.g. a "Jetzt unverbindlich anfragen" button linking straight to the
   contact form) scrolls the target right under the header, hiding it.
   Matched closely to the header's actual rendered height (~94px at most
   viewport widths) — a value larger than that leaves a gap where the
   PREVIOUS section peeks through, which also fools the header's own
   scroll-probe JS into keeping the old (e.g. dark) theme color. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h, 96px); }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
}

.u-container {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.u-eyebrow {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Small secondary note under a list or paragraph (e.g. the "verbotene
   Waffen" caveat on waffen-verkaufen) — same technique as the rest of the
   site's muted text (opacity on the inherited colour, not a new colour). */
.fine-print { font-size: 0.9rem; opacity: 0.7; margin: 1.6rem 0 2.2rem; }

/* ---------- Skip link / focus ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ================= HEADER ================= */
/* Light is the CSS default (not just a JS-applied state) because every
   page's first section is a light-header zone (homepage .hero or a subpage
   .page-hero both use data-header-theme="light") — matching that in the
   base rule means the header already looks right on first paint, before
   script.js's probe() runs, so there's no flash of the wrong header state
   while the page loads. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 2px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  background: var(--parchment);
  color: var(--ink);
  border-bottom-color: var(--edge);
}
.site-header[data-theme="dark"] {
  background: var(--ink);
  color: var(--parchment);
  border-bottom-color: #FFFFFF;
}
.site-header[data-theme="light"] {
  background: var(--parchment);
  color: var(--ink);
  border-bottom-color: var(--edge);
}
.site-header[data-theme="gold"] {
  background: var(--gold);
  color: var(--ink);
  border-bottom-color: #FFFFFF;
}
.logo-link { display: block; line-height: 0; }

/* ---------- Mobile nav toggle + slide-in panel ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 54;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 82vw);
  background: var(--ink);
  color: var(--parchment);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: clamp(6rem, 16vh, 7.5rem) 2rem 2rem;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 55;
  box-shadow: -18px 0 40px -20px rgba(0,0,0,0.5);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #FFFFFF;
  font-size: 2.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.mobile-nav a {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 2px solid rgba(216, 186, 121, 0.2);
  padding-bottom: 0.85rem;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold); }
.mobile-nav a.is-current { color: var(--gold); }
.mobile-nav .btn {
  border-bottom: 2px solid rgba(245,242,235,0.4);
  text-align: center;
  white-space: nowrap;
  font-size: clamp(0.68rem, 3.2vw, 0.86rem);
  padding: 0.85rem 1.2rem;
}

/* Raised from 960px: logo + 5 nav links + call button need roughly
   1180px+ to sit comfortably in one row without crowding/overlapping —
   960px left tablet/small-laptop widths squeezed and overlapping. */
@media (max-width: 1180px) {
  .site-header .main-nav,
  .site-header .call { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1181px) {
  .mobile-nav, .nav-scrim { display: none; }
}
.site-header .brand-logo { width: clamp(210px, 22vw, 290px); display: block; }
.site-header nav { display: flex; gap: clamp(1.3rem, 3vw, 2.7rem); }
.site-header nav a {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header nav a:hover,
.site-header nav a:focus-visible { border-color: var(--gold); }
.site-header nav a.is-current { border-color: var(--gold); }
/* On the gold header theme, a gold underline barely shows against the gold
   background itself — white instead, for a clearly visible state change. */
.site-header[data-theme="gold"] nav a:hover,
.site-header[data-theme="gold"] nav a:focus-visible,
.site-header[data-theme="gold"] nav a.is-current { border-color: #FFFFFF; }
.site-header .call {
  display: none;
  /* Same type rules as the nav links next to it, not the generic .btn
     typography — keeps it visually consistent with the rest of the menu. */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Nav chrome, not a body CTA — exempt from .btn's 260px floor so it stays
     sized to fit the header bar. */
  min-width: 0;
}
/* Same breakpoint as .main-nav/.nav-toggle above (1180px/1181px) — the call
   button must never be visible at the same time as the hamburger; a lower
   breakpoint here left a tablet-width gap where both showed at once (the
   later min-width rule in source order was beating the earlier max-width
   one), and with .main-nav collapsed the button visually drifted into the
   middle of the header bar. */
@media (min-width: 1181px) {
  .site-header .call { display: inline; }
}
.site-header[data-theme="light"] .call.btn-ghost,
.site-header[data-theme="gold"] .call.btn-ghost { border-color: var(--ink); color: var(--ink); }
.site-header[data-theme="light"] .call.btn-ghost:hover,
.site-header[data-theme="gold"] .call.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ================= HERO (homepage only, dark cartridge cap) ================= */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  color: var(--parchment);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("../assets/pictures/hero-patronenhuelsen.webp");
  /* cover: the hero area must always be fully filled by the photo, no
     empty letterbox bands — contain guaranteed full-image visibility but
     left visible gaps whenever the container's aspect ratio didn't match
     the photo's. Source photo was already made taller/roomier so cover
     crops as little as possible while still filling the whole area. */
  background-size: cover;
  background-position: center 42%;
  opacity: 0.85;
}
@media (max-width: 700px) {
  /* Mobile keeps the original cover behaviour — contain was leaving a lot
     of empty vertical space on tall narrow screens, which (combined with
     the missing no-repeat before this fix) was tiling the photo twice. */
  .hero-media { background-size: cover; background-position: 65% 42%; }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Anchored on the bottom-left corner, sized generously to fully back the
     headline+text block (readability comes first) while still clearing
     well before the weapon on the right. */
  background: radial-gradient(ellipse 88% 78% at 2% 100%,
    #000 0%,
    #000 38%,
    rgba(0,0,0,0.93) 56%,
    rgba(0,0,0,0.55) 72%,
    rgba(0,0,0,0) 90%);
}
/* Mobile: the radial anchor no longer lines up with the stacked text
   block, so switch to a bottom-up scrim instead. Delayed further down
   than before (used to hit 86% by 46%) — the weapon sits in the image's
   lower half and was getting buried under the same darkening that's
   really only needed right behind the headline/text block near the
   very bottom. */
@media (max-width: 700px) {
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.18) 42%,
      rgba(0,0,0,0.5) 58%,
      rgba(0,0,0,0.88) 74%,
      rgba(0,0,0,0.94) 100%);
  }
}
.hero-inner {
  position: relative;
  width: 100%;
  padding: clamp(7rem, 16vw, 10rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}
.hero h1 {
  /* Calibrated so "Alles rechtssicher über einen Partner." (the longest
     line, ~38 characters) renders at ~50% of the content width at every
     viewport — same target width as the paragraph below it. Wide
     min/max bounds so that relationship holds across (almost) the
     whole responsive range, not just one middle zone. */
  font-size: clamp(1rem, 3vw, 5.6rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}
.hero h1 .force-line {
  display: block;
  white-space: nowrap;
}
/* Second line ("Für Erben, Sammler, Jäger und Sportschützen") is noticeably
   longer than the first — scaled down by roughly the same ratio as the two
   lines' character counts (~0.72) so it doesn't run wider than the first
   line and overflow. em, not a separate clamp(), so it tracks the first
   line's own responsive size automatically at every viewport. */
.hero h1 .force-line:last-of-type { font-size: 0.72em; }
/* Desktop rules above stay untouched. Mobile override placed AFTER them on
   purpose — identical selector specificity means source order decides,
   and this must win at narrow widths. Wrapping is allowed here, so text
   naturally fills the available width and can never overflow past it. */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .hero h1 .force-line { white-space: normal; }
}
.hero h1 .word-gold {
  color: var(--gold-4);
}
.hero h1 .word-white {
  color: var(--parchment);
}
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.word-reveal {
  display: inline-block;
  transform: translateY(115%);
  animation: word-in 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(var(--d) * 65ms + 150ms);
}
@keyframes word-in { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .word-reveal { animation: none; transform: none; }
}

/* Lede paragraph + CTA buttons fade up right after the headline words
   finish flying in (last word lands at ~1.44s), instead of just appearing
   instantly with the rest of the page. Scoped to .hero specifically since
   .hero-ctas is reused (with its own scroll-triggered .reveal) elsewhere. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .hero-headline-group p {
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: 0.25s;
}
.hero .hero-ctas .btn {
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hero .hero-ctas .btn:nth-child(1) { animation-delay: 0.35s; }
.hero .hero-ctas .btn:nth-child(2) { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-headline-group p,
  .hero .hero-ctas .btn { animation: none; opacity: 1; transform: none; }
}

/* ---------- Custom cursor accent: reticle (circle + crosshair) ----------
   Explicit per-ground colour, set by JS from the same zone data the header
   uses — NOT mix-blend-mode, which produced wrong/muddy colours depending
   on what sat underneath (e.g. gold differenced against white -> blue). */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.cursor-dot::before,
.cursor-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  transition: background 0.25s ease;
}
.cursor-dot::before { width: 38px; height: 1px; transform: translate(-50%, -50%); }
.cursor-dot::after { width: 1px; height: 38px; transform: translate(-50%, -50%); }
.cursor-dot.is-active { opacity: 1; }
.cursor-dot.is-hover { width: 20px; height: 20px; }

.cursor-dot[data-theme="light"] { border-color: var(--ink); }
.cursor-dot[data-theme="light"]::before,
.cursor-dot[data-theme="light"]::after { background: var(--ink); }
.cursor-dot[data-theme="gold"] { border-color: #FFFFFF; }
.cursor-dot[data-theme="gold"]::before,
.cursor-dot[data-theme="gold"]::after { background: #FFFFFF; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}

/* ---------- Leather look: shared "dark band" treatment ----------
   27.08.2026 rule: flat black is reserved for the homepage hero scrim and
   small fixed chrome (header, mobile-nav, marquee ribbon). Every other dark
   content band — page-intro header on subpages, the leather-band quote,
   the regional split, the closing CTA — uses this leder-1 texture instead,
   so black never appears as a plain section background in content. */
.on-leather {
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.58)),
    url("../assets/pictures/leder-1.webp");
  background-size: cover;
  background-position: center;
  color: var(--parchment);
  /* Every leather section gets its own top+bottom divider line — so any
     boundary between a leather section and a white/light one is always
     marked, regardless of what the neighbouring section does or doesn't
     declare on its own side. Solid, opaque gold (not the translucent
     --edge brown used elsewhere) — --edge nearly disappeared against the
     dark leather texture itself, too little contrast to read as a line. */
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
/* .on-leather's own background-size:cover scales the leather texture to
   this element's own height, so a tall section (this one: heading + 8
   icon rows + fine-print + button) ends up magnifying the grain much more
   than a short one like the homepage's "Verwurzelt in der Rhön" band —
   on mobile that difference is large enough to look like a different,
   coarser texture. Fixing the size to a percentage of the section's own
   width (not height) keeps the same grain scale as that shorter homepage
   section regardless of how tall this one grows, tiling vertically
   instead of stretching. Desktop/tablet aren't touched — the box is wide
   enough there that cover's own height-driven scale rarely runs away. */
@media (max-width: 700px) {
  #einlagerbare-waffen {
    background-size: 285% auto;
    background-repeat: repeat-y;
    background-position: center top;
  }
}

.hero p {
  max-width: 50%;
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
  color: #E7E2D6;
  margin: 0 0 2.1rem;
}
/* Desktop stays at 50% (matches the headline width) — this only widens
   it on mobile, placed after the base rule so it actually wins. */
@media (max-width: 700px) {
  .hero p { max-width: 100%; font-size: 1.05rem; }
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
/* flex/min-width now just restate .btn's own 260px-floor default explicitly
   — kept here (rather than relying on the base rule alone) so the intent
   reads locally and survives if .btn's default ever changes. */
.hero-ctas .btn { flex: 0 1 auto; }
/* Scoped to the actual homepage hero only — slightly tighter horizontal
   padding than the site-wide default, fitting the hero's larger buttons. */
.hero .hero-ctas .btn { padding-left: 1.4rem; padding-right: 1.4rem; }
/* Hero "Anrufen" button: solid menu-white outline at rest instead of the
   base .btn-ghost's translucent one, hover stays the default gold. */
.hero .hero-ctas .btn-ghost { border-color: var(--parchment); }
/* The rule above is more specific than the base .btn-ghost:hover rule, so
   without this it would also win on hover and pin the border white —
   explicit override to restore the normal gold hover here too. */
.hero .hero-ctas .btn-ghost:hover,
.hero .hero-ctas .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
/* Nachlass section CTA: same solid menu-white outline at rest, but hovers
   to black instead of gold — sits on a gold background, so gold-on-hover
   would disappear into it. */
.trust-copy .hero-ctas .btn-ghost { border-color: var(--ink); color: var(--ink); }
.trust-copy .hero-ctas .btn-ghost:hover,
.trust-copy .hero-ctas .btn-ghost:focus-visible { border-color: var(--parchment); color: var(--parchment); }
@media (max-width: 700px) {
  /* Hero buttons now stack full-width here too, same as every other
     .hero-ctas usage on the page — no hero-specific override left. */
  .hero-ctas .btn { max-width: none; flex-basis: 100%; }
}

/* ---------- Page-hero: compact intro band for the 5 subpages ----------
   Same role as .hero on the homepage, but not full-bleed/100vh — a page
   needs to get to its content fast. Breadcrumb + H1 + short lede on the
   shared leather band. */
.page-hero {
  padding: clamp(7.5rem, 16vw, 9.5rem) 0 clamp(3rem, 6vw, 4rem);
  /* .page-hero is always the first section on the page — .on-leather's
     border-top would otherwise show through the transparent header as a
     stray gold line with no previous section for it to divide from. */
  border-top: none;
}
.page-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #cfc9bb;
  margin: 0 0 1.3rem;
  list-style: none;
  padding: 0;
}
.page-hero .breadcrumb li { display: flex; gap: 0.4rem; align-items: center; }
.page-hero .breadcrumb a { color: #cfc9bb; text-decoration: none; }
.page-hero .breadcrumb a:hover { color: var(--gold); }
.page-hero .breadcrumb li:last-child { color: var(--gold-4); }
.page-hero h1 {
  font-size: clamp(1.75rem, 3.8vw, 2.9rem);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 0 1rem;
  text-wrap: balance;
}
/* Full-width variant (waffen-verkaufen) — headline and lede span the whole
   .u-container instead of the default capped reading width; scoped to this
   modifier so waffen-einlagern's .page-hero keeps its narrower default. */
/* .page-hero.page-hero--wide (both classes), not just .page-hero--wide —
   matches the base .page-hero h1 / .page-hero p.lede rules' own specificity
   exactly, so this reliably wins regardless of source order. */
.page-hero.page-hero--wide h1 { max-width: none; }
/* Not fully unconstrained like the h1 — full container width read as too
   wide for body copy, pulled back in a bit per explicit request. */
.page-hero.page-hero--wide p.lede { max-width: 85%; }
/* Same gold as the homepage hero's second line (.hero h1 .word-gold) — that
   rule is scoped to .hero, so it needs repeating here for .page-hero. */
.page-hero--wide h1 .word-gold { color: var(--gold-4); }
/* Same button treatment as the homepage .hero (solid parchment ghost
   border instead of the base translucent one, matching padding) — "1:1
   die Buttons aus dem Hero der Startseite" per explicit request. */
.page-hero--wide .hero-ctas .btn { padding-left: 1.4rem; padding-right: 1.4rem; }
.page-hero--wide .hero-ctas .btn-ghost { border-color: var(--parchment); }
.page-hero--wide .hero-ctas .btn-ghost:hover,
.page-hero--wide .hero-ctas .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
.page-hero p.lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: #E7E2D6;
  max-width: 62ch;
  margin: 0;
}

/* Site-wide, there are now only two button widths: this 260px floor (every
   .btn defaults to it, content-hugging above that), and .geo-side's own
   ~335px (100% of its grid column, on "Termin vor Ort anfragen") — nothing
   else sets a width/min-width/flex-basis on a .btn any more except the
   header's own "Kontakt" call button, deliberately excluded below since
   it's nav chrome, not a body CTA. */
.btn {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  /* Explicit, not inherited — native <button> elements (the form's submit
     button) don't pick up body's line-height through normal inheritance,
     a long-standing form-control quirk, and were rendering shorter than
     every <a class="btn"> as a result. */
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 260px;
  transition: transform 0.25s ease, translate 0.25s ease, scale 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  /* Transparent, not none — border-box means a bordered button (.btn-ghost,
     .btn-gold-bordered) is naturally 4px taller than one with no border at
     all. Reserving that same 2px on every button, even ones that never show
     it, is what actually keeps every button the same height regardless of
     which variant it is or whether a flex row happens to stretch it against
     a bordered sibling. */
  border: 2px solid transparent;
}
.btn-gold {
  background: var(--gold-text);
  color: var(--ink);
}
/* translate/scale (not transform) — the hero buttons also have a
   forwards-filled entrance animation on transform, which would otherwise
   permanently pin transform and block this hover/active effect there. */
.btn-gold:hover, .btn-gold:focus-visible { translate: 0 -2px; box-shadow: 0 10px 26px -10px rgba(216,186,121,0.55); }
.btn-gold:active { translate: 0 0; scale: 0.97; box-shadow: 0 4px 12px -6px rgba(216,186,121,0.5); }
/* Modifier for a gold button that also carries a black outline (on light
   sections, for contrast) — the outline turns gold on hover instead of
   staying black. Uses a class, not inline border-color, so :hover can reach it. */
.btn-gold-bordered { border: 2px solid var(--ink); }
.btn-gold-bordered:hover, .btn-gold-bordered:focus-visible { border-color: var(--gold); }
.btn-ghost {
  border: 2px solid rgba(245,242,235,0.4);
  color: var(--parchment);
  background: transparent;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn-ghost:active { transform: scale(0.97); }
/* Modifier for a ghost button placed on a light/parchment section (instead of
   inline color overrides, which would freeze the hover state — inline styles
   beat even :hover rules in specificity, silently killing the hover effect). */
.btn-ghost-dark { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark:hover, .btn-ghost-dark:focus-visible { border-color: var(--gold); color: var(--gold); }
/* Same idea, but for a ghost button placed directly on the gold band —
   hovering to gold there would nearly vanish against the gold background,
   so this hovers to white instead for a clearly visible change. */
.btn-ghost-on-gold { border-color: var(--ink); color: var(--ink); }
.btn-ghost-on-gold:hover, .btn-ghost-on-gold:focus-visible { border-color: #FFFFFF; color: #FFFFFF; }
/* ================= SECTION SCAFFOLD ================= */
section.body-section {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  border-top: 2px solid var(--edge-strong);
}
/* Higher specificity than either single-class rule above, so a section that
   is both .body-section and .on-leather (e.g. a subpage's Regional band)
   reliably gets the more visible leather-appropriate border colour instead
   of the faint default. */
.body-section.on-leather { border-top: 2px solid var(--gold); }
/* No seam between the icon row and the FAQ right after it — both are
   plain parchment sections back to back, so the usual border-top would
   just be a stray line between two same-colour blocks. Their shared gap
   (icon section's own bottom padding + FAQ's own top padding) is also
   halved from the default body-section padding, per explicit request to
   bring the two sections closer together — only the sides facing each
   other are touched, so the gap above the icons and below the FAQ stay
   at the default rhythm. */
#faq { border-top: none; padding-top: clamp(0.28125rem, 0.5625vw, 0.46875rem); }
.icon-features-section { padding-bottom: clamp(0.28125rem, 0.5625vw, 0.46875rem); }
/* Homepage services section ("Vom geerbten Jagdgewehr...") — noticeably
   lower than the default body-section, on top of the already-compacted
   row padding, per explicit request to bring the whole section's height down. */
#ankauf { padding: clamp(2.5rem, 5vw, 4rem) 0; }
#ankauf .section-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.section-head {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* Tighter variant for a heading-only section-head immediately followed by
   plain body copy (a list/paragraph in a sibling .prose) — the default gap
   is tuned for bigger content below it (index lists, process steps) and
   reads as too much air before a simple paragraph or list. */
.section-head--tight { margin-bottom: 1.1rem; }
.section-head .u-eyebrow { color: var(--gold-2); }
.section-head h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* Forces a specific headline onto one line — only above the point where the
   container is wide enough for that to fit without overflowing; on
   narrower/mobile widths it wraps normally like every other section-head. */
@media (min-width: 860px) {
  .u-nowrap-desktop { white-space: nowrap; }
}
.section-head p {
  color: var(--stone);
  font-size: 1.05rem;
  max-width: 54ch;
  margin: 0;
}

/* ---------- Services: editorial index list with cursor-follow image reveal ---------- */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.index-row { border-bottom: 2px solid var(--edge); }
.index-row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.3rem 1.6rem;
  padding: clamp(0.5rem, 1.1vw, 0.8rem) 0.25rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.index-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0.3rem 0 0;
  /* Same size as every other real h3 on the page (.faq-group h3) — this is
     marked up as an h3, and used to read close to h2 size (clamp
     1.5–2.15rem), blurring the two levels together. */
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--gold-1);
  transition: color 0.3s ease, transform 0.3s ease;
}
.index-arrow {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border: 2px solid var(--gold-1);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--gold-1);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.index-row-link:hover .index-title,
.index-row-link:focus-visible .index-title { color: var(--gold); transform: translateX(0.25rem); }
.index-row-link:hover .index-arrow,
.index-row-link:focus-visible .index-arrow,
.index-row-link:active .index-arrow {
  transform: translateX(0.4rem);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.index-row-link:active .index-title { transform: translateX(0.1rem) scale(0.99); }

.index-row:nth-child(1) { transition-delay: 0ms; }
.index-row:nth-child(2) { transition-delay: 100ms; }
.index-row:nth-child(3) { transition-delay: 200ms; }

/* Reticle-framed preview: crosshair lines through a circular photo, echoing the cursor mark */
.hover-preview {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  height: 280px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.92);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-preview.is-active { opacity: 1; }
.hp-line { position: absolute; background: var(--gold); }
.hp-line--h { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.hp-line--v { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.hp-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 168px; height: 168px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 22px 46px -16px rgba(0,0,0,0.5);
  background: var(--ink);
}
.hp-circle img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hp-circle img.is-loaded { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .hover-preview { display: none; }
}

/* ---------- Gold band (process) ---------- */
.gold-band {
  background: var(--gold);
  color: var(--ink);
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.gold-band::before,
.gold-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--gold-foil);
}
.gold-band::before { top: 0; }
.gold-band::after { bottom: 0; }
.gold-band .section-head { max-width: 40rem; }
/* Doubled from the shared .section-head--tight default, just for this one
   heading (waffen-verkaufen: "Welche Waffen kaufen wir an?") — other pages'
   .section-head--tight usages keep the normal 1.1rem. */
.gold-band .section-head--tight { margin-bottom: 2.2rem; }
.gold-band .section-head .u-eyebrow { color: rgba(0,0,0,0.62); }
.gold-band .section-head p { color: rgba(0,0,0,0.68); }
/* Plain list directly on the gold band (waffen-verkaufen: Ankaufsortiment)
   — no colour override needed, .gold-band's own color:var(--ink) already
   reads correctly here; just the same left indent every other list on the
   site gets from .prose ul. */
.gold-band ul { padding-left: 1.2rem; }
/* Tabular chip grid (waffen-verkaufen: "Welche Waffen kaufen wir an?") —
   same bordered-chip technique as .geo-accordion's regional cards on the
   homepage, recoloured for this section's light/gold ground instead of
   that component's dark leather one. Single column on mobile (each item
   full-width, stacked), 4 columns from tablet up. */
ul.buy-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 700px) {
  ul.buy-grid { grid-template-columns: repeat(4, 1fr); }
}
.buy-grid li {
  /* Grid items default to min-width:auto, which respects the content's own
     min-content width — for long unbroken German compound words (e.g.
     "Sportschützenzubehör") that's wider than a narrow-viewport 1fr column,
     which pushed the whole grid past the container. min-width:0 lets the
     column actually shrink to the track size; overflow-wrap then lets that
     one long word itself break instead of overflowing the box. */
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
}
/* Same stroke-icon technique as .icon-feature-icon elsewhere on the site
   (e.g. the "Faire Bewertung" scales icon) — outline-only, coloured via
   currentColor rather than the flat fills the source icon set used, so
   these read as this site's icons rather than a pasted-in set. */
.buy-icon {
  width: 64px;
  height: 64px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink);
}
/* Dark/leather-ground usage (waffen-einlagern: "Welche Waffen lagern wir
   ein?") — black is invisible against black leather, so this swaps it for
   parchment. */
.on-leather .buy-icon {
  color: var(--parchment);
}
.process {
  display: grid;
  gap: 2.25rem 1.75rem;
  counter-reset: step;
}
@media (min-width: 720px) {
  .process { grid-template-columns: repeat(5, 1fr); }
}
.process li {
  list-style: none;
  counter-increment: step;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0,0,0,0.55);
  position: relative;
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}
.process li:nth-child(1) { transition-delay: 0ms; }
.process li:nth-child(2) { transition-delay: 90ms; }
.process li:nth-child(3) { transition-delay: 180ms; }
.process li:nth-child(4) { transition-delay: 270ms; }
.process li:nth-child(5) { transition-delay: 360ms; }
.process li h4 {
  font-size: 1.08rem;
  margin: 0 0 0.4rem;
}
.process li p { margin: 0; font-size: 0.92rem; color: rgba(0,0,0,0.72); }

/* ---------- Icon features row ("Darauf können Sie sich verlassen") ----------
   4 → 2 columns (only the ≥900px breakpoint switches to 4; tablet and
   mobile both stay 2×2, per spec — no separate tablet step needed). */
.icon-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 900px) {
  .icon-features { grid-template-columns: repeat(4, 1fr); }
}
.icon-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
}
.icon-feature-icon {
  width: 96px;
  height: 96px;
  /* --gold-1, not the paler --gold/--gold-4 used on dark sections — same
     darker gold already proven for contrast on parchment elsewhere
     (.index-title, .index-arrow). */
  color: var(--gold-1);
  transition: color 0.3s ease;
}
@media (max-width: 699px) {
  .icon-feature-icon { width: 81px; height: 81px; }
}
.icon-feature h3 {
  font-size: 1.2rem;
  margin: 0;
}
/* Same hover technique as the services index list just above this section
   on the page (.index-title/.index-arrow: --gold-1 brightening to --gold)
   — reused here rather than a new animation, just on the icon. */
.icon-feature:hover .icon-feature-icon { color: var(--gold); }

/* ---------- Trust / credentials split ---------- */
.trust {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* stretch (not center) so .trust-media can match the text column's
     rendered height exactly instead of being sized independently via a
     fixed aspect-ratio. */
  align-items: stretch;
}
@media (min-width: 900px) {
  .trust { grid-template-columns: 1.4fr 0.6fr; }
  /* Image-first-in-markup variant (image column stays narrow, just on the
     left instead of the right) — mirrors the Nachlass section above it. */
  .trust--mirror { grid-template-columns: 0.6fr 1.4fr; }
}
@media (max-width: 899px) {
  /* Single-column mobile stack: image always first, text/headline below it
     — .trust-copy is first in the Nachlass section's markup (for the
     desktop text-left layout), so it needs reordering here; .trust--mirror
     already has the image first in markup, this is a no-op there. */
  .trust-media { order: -1; }
}
/* h2's default browser top margin would otherwise push it visibly below
   the image's top edge even though both sit in the same grid row —
   .u-eyebrow used to be the first element (and needed the same fix) but
   was removed from this section. Font size/line-height match
   .section-head h2 so every H2 on the page reads at the same scale. */
.trust-copy h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
  margin-top: 0;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.trust-list { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.trust-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding-top: 1.1rem;
}
.trust-list .num {
  font-family: var(--display);
  color: var(--gold-2);
  font-size: 0.85rem;
  font-weight: 700;
}
.trust-list strong { display: block; font-size: 1rem; }
/* Same look as .trust-list strong — for the waffen-verkaufen rebuild's use
   of .trust-list as a real, heading-level card list (proper H3s for
   correct document structure), instead of the visual-only <strong> used
   where the surrounding content already supplies its own H2/H3. */
.trust-list h3 { display: block; font-size: 1rem; margin: 0; }
.trust-list span.detail { color: var(--stone); font-size: 0.92rem; }
.trust-media {
  position: relative;
  /* No fixed aspect-ratio — height instead matches the text column's own
     rendered height exactly (via .trust's align-items:stretch), so the
     image is never taller or shorter than the content beside it. */
  height: 100%;
  min-height: 260px;
  overflow: hidden;
}
.trust-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}
.trust-media::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(216,186,121,0.4);
}
/* ---------- Image effect: photo develops into focus ---------- */
.trust-media--develop img {
  filter: grayscale(1) blur(7px) brightness(0.82) saturate(0.92) contrast(1.03);
  transform: scale(1.06);
  opacity: 0.92;
  transition: filter 1.2s ease 0.1s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 0.5s ease;
}
.trust-media--develop.is-visible img {
  filter: grayscale(0) blur(0) brightness(1) saturate(0.92) contrast(1.03);
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .trust-media--develop img { filter: saturate(0.92) contrast(1.03); transform: none; opacity: 1; transition: none; }
}

/* ---------- Design test: oversized scope reticle bleeding off a section's
   corner, purely decorative (no photo, unlike the waffen-verkaufen scope
   cards). .corner-scope-host clips it so the intentional right/bottom
   bleed never creates a horizontal scrollbar. ---------- */
.corner-scope-host { position: relative; overflow: hidden; }
.corner-scope {
  position: absolute;
  right: -140px;
  bottom: -185px;
  width: 460px;
  height: 460px;
  opacity: 0.5;
  pointer-events: none;
}
/* Same 2px weight as the site's own .btn border, so this reads as drawn
   with the same "pen" as the rest of the corporate design. */
.corner-scope::before,
.corner-scope::after {
  content: "";
  position: absolute;
  background: var(--gold-2);
}
.corner-scope::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.corner-scope::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.corner-scope-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  height: 68%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold-2);
  border-radius: 50%;
}
@media (max-width: 700px) {
  .corner-scope { display: none; }
}
/* Larger variant (waffen-verkaufen: "Warum Sie Ihre Waffen an uns verkaufen
   sollten") — same reticle, scaled up ~3x with proportional corner offsets,
   scoped so the homepage's own corner-scope size is untouched. */
.corner-scope--large {
  right: -260px;
  bottom: -345px;
  width: 860px;
  height: 860px;
}

/* ---------- Comparison cards (waffen-verkaufen: Direktankauf/Kommission) ----------
   Editorial cards instead of the framed .regional text box. The photo sits
   inside a small rifle-scope reticle (round lens, crosshair, gold bezel) —
   at rest a small "glimpse", on hover the lens itself grows. Sized in the
   layout at its hover (large) footprint and shown small via transform:
   scale() at rest, so growing it on hover never shifts the heading/text
   below (a width/height transition would). */
.compare-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
@media (min-width: 700px) {
  .compare-grid { grid-template-columns: 1fr 1fr; }
}
/* Same proportions/technique as the homepage's own cursor-following
   .hover-preview reticle (.hp-line/.hp-circle: a box notably bigger than
   the circle, with full-length crosshair lines through it) — just static
   here instead of following the cursor, and scaled down at rest. Own
   class names (not .hp-line/.hp-circle) since those are wired to specific
   homepage JS/markup (#hover-preview-img) this page doesn't have. */
.compare-card-media {
  display: block;
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.6rem;
  transform: scale(0.62);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-card:hover .compare-card-media { transform: scale(1); }
.cm-line { position: absolute; background: var(--gold); }
.cm-line--h { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.cm-line--v { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.cm-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  height: 168px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 22px 46px -16px rgba(0,0,0,0.5);
  background: var(--ink);
}
.compare-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-card:hover .compare-card-media img { transform: scale(1.12); }
.compare-card h3 {
  color: var(--gold);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin: 0 0 0.7rem;
}
.compare-card p { margin: 0 auto; max-width: 34ch; color: #cfc9bb; }

/* ---------- FAQ accordion (native <details>, indexable without JS) ---------- */
.faq-list {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
.faq-list details {
  border-bottom: 2px solid var(--edge);
  padding: 1.3rem 0;
}
.faq-list summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--gold-1);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
/* > (direct child), not a descendant selector — with the homepage's
   nested .faq-list (a .faq-list of groups, each containing its own
   .faq-list of questions), the descendant form matched every question's
   marker the moment the outer accordion opened, not just the one actually
   expanded. Harmless on the subpages' flat, single-level .faq-list, where
   every details is already a direct child anyway. */
.faq-list > details[open] > summary::after { transform: rotate(45deg); }
.faq-list .faq-a {
  margin: 0.9rem 0 0;
  color: var(--stone);
  max-width: 62ch;
}
/* Homepage-only extension: the whole FAQ hides behind one outer <details>
   ("Fragen? Wir haben Antworten.") — that row reuses .faq-list's own
   details/summary row as-is (it's just one more direct child <details>),
   so it reads as an unobtrusive extra question rather than a new
   component. Inside it, three labeled groups each get their OWN nested
   .faq-list — same component again, not a restyle — this just adds the
   group heading and the spacing between groups. */
/* The outer <details> already has 1.3rem of its own padding above this
   content (from .faq-list details), so the first group only needs 1.2rem
   more to reach the same visual 2.5rem gap the later groups get in full —
   otherwise "Allgemein" would sit visibly closer to the summary above it
   than "Waffen geerbt" sits to the group before it. */
.faq-group:first-of-type { margin-top: 1.2rem; }
.faq-group + .faq-group { margin-top: 2.5rem; }
/* Between the FAQ questions' own size (clamp 1.05–1.25rem, from .faq-list
   summary) and the outer h2 below (clamp 1.65–2.35rem) — a real h3, sized
   accordingly rather than reusing either neighbour's size. */
.faq-group h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--gold-1); margin-bottom: 0.75rem; }
.faq-a + .btn { margin-top: 0.75rem; }
/* Same size as .index-title ("Waffen & Munition verkaufen" etc.) even
   though it's a <summary>'s h2, not an .index-title — this is the new
   section's actual heading, just triggering the whole FAQ open/closed. */
.faq-outer > summary h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
/* Same font-family/weight/size as that heading (waffen-verkaufen: the
   "lagern Sie Ihre Waffen..." hint right above the FAQ), on a plain <p>
   rather than an h2 — see .pre-faq-gap below for the matching FAQ gap. */
.lagern-hint { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.lagern-hint a { color: var(--gold-1); }
/* Same gap as the homepage's icon-features-section → #faq transition —
   the shared #faq rule (border-top:none + tight padding-top) already
   applies here too, since waffen-verkaufen's own FAQ section now reuses
   that same id. This is just the matching padding-bottom for the section
   right before it. */
.pre-faq-gap { padding-bottom: clamp(0.28125rem, 0.5625vw, 0.46875rem); }
/* .faq-outer: only the outer trigger's own marker swaps the shared +/×
   for a plain chevron (same drawing technique as .geo-toggle's), so it
   reads as "expand this whole section" rather than one more question —
   the 20 real questions inside keep the ordinary +/× from .faq-list. */
.faq-outer > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold-1);
  border-bottom: 2px solid var(--gold-1);
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin-top 0.25s ease;
}
.faq-outer[open] > summary::after { transform: rotate(225deg); margin-top: 6px; }

/* "Verwurzelt in der Rhön..." section: intro text left, regional accordion
   right — right side is deliberately small/dezent, it exists for SEO/GEO
   crawling, not as a feature a visitor is meant to actually browse.
   The heading sits in its own full-width row; the paragraph and .geo-side
   (holding just the "Termin vor Ort anfragen" button) share the row below
   it. .geo-toggle stays in normal flow as its own full-width row below
   that — so opening it correctly pushes the footer down instead of
   overlapping it — with a calculated negative margin-top pulling it up so
   the trigger's OWN bottom edge lands exactly on the paragraph's bottom
   edge; the margin only depends on the trigger's own (fixed) height and
   the grid gap, never on the accordion content, so opening/closing it can
   never move the trigger. .geo-side is bottom-anchored to that same
   paragraph-bottom line and then pushed back up by its own height plus a
   small fixed gap, so the two buttons form a tight stack sitting directly
   above the trigger — not stretched apart across the paragraph's full
   height. */
.einsatzgebiet-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  /* Same column ratio as .trust, so the left text block matches the
     Nachlass section's text width exactly. */
  .einsatzgebiet-grid { grid-template-columns: 1.4fr 0.6fr; }
  .einsatzgebiet-grid .section-head { grid-column: 1 / -1; }
  .einsatzgebiet-copy { grid-column: 1; }
  /* position:relative + top (not margin) for every offset below — a
     margin-based shift feeds back into CSS Grid's own row auto-sizing
     (shrinking or inflating a row's computed height depending on the
     margin's sign), which made .geo-side and .geo-toggle's "how far to
     shift" fight each other and the actual row heights, so the old
     margin-only version drifted out of alignment. top: is purely visual —
     it never changes what height the grid thinks a row is — so each
     offset below only ever depends on fixed values (the 1.1rem heading
     gap, the trigger's own fixed height, the small button-to-button gap,
     the grid's own gap) and stays exact regardless of paragraph length. */
  .geo-side {
    grid-column: 2;
    align-self: end;
    position: relative;
    /* Same breakdown as .geo-toggle's offset below, plus the small gap
       between the two buttons — .geo-side's own natural (align-self:end)
       position already sits flush against row 2's bottom (one grid-gap
       from the heading row), so only one gap needs cancelling here,
       versus two for .geo-toggle one row further down. */
    top: calc(1.1rem - (1.9rem + 4px + 0.95rem * 1.55) - 0.6rem - clamp(2.5rem, 5vw, 4rem));
  }
  .geo-toggle { grid-column: 1 / -1; }
}
/* Pulls the paragraph up to sit a tight, fixed 1.1rem below the heading —
   matching every other .section-head's heading-to-copy rhythm —
   regardless of viewport. top: (not margin-top) so the shift is purely
   visual and never changes what height the grid thinks this row is —
   see the big comment above .geo-side for why that distinction matters. */
/* margin:0 matters here beyond the usual reset — the default UA <p> margin
   (1em top + bottom) is invisible in getBoundingClientRect() but still
   counts toward this row's auto-height in the grid above, throwing off
   every offset calc anchored to "the paragraph's own height". */
.einsatzgebiet-copy { position: relative; top: calc(1.1rem - clamp(2.5rem, 5vw, 4rem)); margin: 0; font-size: 1.05rem; }
.geo-side > .btn { width: 100%; max-width: none; justify-content: center; }
/* Outer toggle wrapping the whole regional grid — collapsed by default, so
   the section doesn't take up a wall of space; the 14 individual regions
   only appear once someone actually opens it. Styled 1:1 like the "Jetzt
   Wert ermitteln" button (.btn/.btn-ghost: height, padding, font, border
   width) — only the color deviates, to white/parchment for this dark
   section instead of that button's ink, and the label sits centered
   rather than left-aligned. */
.geo-toggle > summary {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--parchment);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 2px solid var(--parchment);
  border-radius: 2px;
  padding: 0.95rem 1.8rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.geo-toggle > summary:hover { border-color: var(--gold); color: var(--gold); }
/* Custom focus ring instead of the browser's default blue one — kept
   subtle/white rather than the hover gold, so focus and hover stay
   visually distinct while both remain clearly visible. */
.geo-toggle > summary:focus { outline: none; }
.geo-toggle > summary:focus-visible { outline: 2px solid var(--parchment); outline-offset: 3px; }
.geo-toggle > summary h3 { font: inherit; margin: 0; }
.geo-toggle .geo-accordion { margin-top: 1.2rem; }
/* Collapsed, this section ends right after the trigger button with a lot
   of empty leather before the next section — half the standard
   section-bottom padding closes that up to match every other section's
   rhythm. Only while collapsed: opened, the padding is already right. */
.body-section:has(> .u-container .geo-toggle:not([open])) {
  padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}
@media (max-width: 899px) {
  /* .geo-side and .geo-toggle are separate rows of .einsatzgebiet-grid
     here, so the grid's own row-gap (clamp 2.5rem–4rem) sits between them
     by default — cancelling it down to a net 0.6rem is what actually
     makes the two buttons sit close together, matching the desktop
     spacing, instead of the same margin-top just adding onto that gap. */
  .geo-toggle { margin-top: calc(0.6rem - clamp(2.5rem, 5vw, 4rem)); margin-bottom: 18px; }
}
@media (min-width: 900px) {
  /* NOT display:grid here — confirmed by isolated reproduction that Chrome
     mis-sizes a multi-column-spanning grid child specifically when its
     parent grid container is a <details> element (the child's width
     collapses to just the first track, no matter how it's told to span
     or stretch). So .geo-toggle stays a plain block, and the summary is
     positioned/sized with the equivalent percentage math instead — the
     same 1.4:0.6 split, just expressed without grid. .geo-accordion needs
     nothing extra: block-level, it's 100% of .geo-toggle's width (the
     full content area) by default. */
  .geo-toggle {
    position: relative;
    /* The trigger's own height is fixed by its CSS above (never by the
       accordion, which sits after it in normal flow once open): 2 ×
       0.95rem padding + 2 × 2px border + one line at 0.95rem × the body's
       1.55 line-height. .geo-toggle's natural (unshifted) position already
       crosses two grid-gaps below the heading (heading→paragraph row,
       then paragraph row→this row), so both need cancelling, alongside
       the 1.1rem heading gap and the trigger's own height, to land its
       bottom exactly on the paragraph's bottom. */
    top: calc(1.1rem - (1.9rem + 4px + 0.95rem * 1.55) - 2 * clamp(2.5rem, 5vw, 4rem));
    /* top: shifts what's painted, but the outer grid still reserves this
       row's full *unshifted* height — as the last row, that leaves a gap
       below the (opened) accordion equal to the shift above. The negative
       margin-bottom cancels that reserved-but-unused space, so the grid's
       own height (and the section padding that follows it) tracks the
       accordion's real, visible bottom edge; +18px is a small measured
       correction (a fixed, viewport-independent remainder confirmed at
       both 1440px and 1024px — not derived from any single property
       above) rather than a value traceable to one exact rule. */
    margin-bottom: calc(1.1rem - (1.9rem + 4px + 0.95rem * 1.55) - 2 * clamp(2.5rem, 5vw, 4rem) + 18px);
  }
  /* Same 1.4fr:0.6fr ratio as .einsatzgebiet-grid's columns, expressed as
     percentages of .geo-toggle's own width (which equals that grid's full
     content width) instead of grid tracks: column 1's share of the
     gap-adjusted width, plus the gap itself, is where column 2 — and so
     the trigger — starts; its own width is column 2's share of that same
     gap-adjusted width. Lines up pixel-for-pixel with .geo-side above. */
  .geo-toggle > summary {
    margin-left: calc(1.4 / 2 * (100% - clamp(2.5rem, 5vw, 4rem)) + clamp(2.5rem, 5vw, 4rem));
    width: calc(0.6 / 2 * (100% - clamp(2.5rem, 5vw, 4rem)));
  }
}
/* Compact regional-coverage grid — deliberately a different visual language
   from the real FAQ accordion further down the page (bordered chips in a
   responsive grid instead of one long divided list), so the two don't read
   as the same component. Collapsed and expanded text share the same size
   throughout — normal body-text size, not shrunk down. A real grid (not
   multi-column flow) so column count is explicit and predictable, and each
   region's own content (Regionen/Städte) stays a simple single-column
   stack within its box. */
/* display:grid here would otherwise override the browser's native
   details-content hiding (an author rule always beats the UA stylesheet,
   regardless of specificity) — so the grid display only applies once
   [open] makes it the actually-visible state; closed stays display:none. */
.geo-toggle[open] .geo-accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .geo-toggle[open] .geo-accordion { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .geo-toggle[open] .geo-accordion { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .geo-toggle[open] .geo-accordion { grid-template-columns: repeat(4, 1fr); }
}
.geo-accordion details {
  border: 2px solid rgba(216,186,121,0.35);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  background: rgba(0,0,0,0.15);
}
.geo-accordion summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--parchment);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
/* min-width:0 lets the heading actually shrink/wrap inside the flex row
   instead of the flex item refusing to go below its content's natural
   width — without it, a narrow box forces ugly, overly-tight wrapping. */
.geo-accordion summary h3 { font: inherit; margin: 0; min-width: 0; }
.geo-accordion .faq-a {
  font-size: 0.95rem;
  color: #cfc9bb;
  margin: 0.6rem 0 0;
}
.geo-accordion .faq-a strong { color: var(--parchment); }
/* Plain down-chevron for every expandable element in this section (outer
   toggle + the 14 regional boxes) instead of a +/× glyph — drawn with CSS
   borders, not a font character, so it renders identically everywhere.
   Also explicitly kills the native <details> marker in every browser
   (list-style alone doesn't fully suppress it in Firefox). */
.geo-toggle > summary,
.geo-accordion summary { list-style: none; }
.geo-toggle > summary::-webkit-details-marker,
.geo-accordion summary::-webkit-details-marker { display: none; }
.geo-toggle > summary::marker,
.geo-accordion summary::marker { content: ""; display: none; }
.geo-toggle > summary::after,
.geo-accordion summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin-top 0.25s ease, border-color 0.25s ease;
}
/* Outer trigger's arrow is white/parchment (matching its outline/text) and
   follows the same hover-to-gold change; the 14 inner region arrows stay
   gold, unchanged. */
.geo-toggle > summary::after { border-right: 2px solid var(--parchment); border-bottom: 2px solid var(--parchment); }
.geo-toggle > summary:hover::after { border-color: var(--gold); }
.geo-accordion summary::after { border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
/* > (direct child), not a descendant selector — without it this also
   matched every nested region's own summary the moment the outer trigger
   opened, flipping all 14 arrows up before any individual region was ever
   clicked. Each region's own arrow flips only via the second rule, scoped
   to that specific details[open]. */
.geo-toggle[open] > summary::after,
.geo-accordion details[open] > summary::after { transform: rotate(225deg); margin-top: 6px; }

/* ---------- Content page prose (legal pages, plain sections) ---------- */
.prose h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  margin: 2.2rem 0 0.8rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(1.05rem, 1.75vw, 1.3rem);
  margin: 0 0 0.6rem;
}
.prose p, .prose li { color: var(--stone); font-size: 1rem; }
.prose ul { padding-left: 1.2rem; }
/* :not(.btn) so buttons placed inside .prose (e.g. mid-paragraph CTAs) keep
   their own .btn-gold/.btn-ghost styling instead of being overridden by
   this higher-specificity rule — was silently breaking their appearance. */
.prose a:not(.btn) { color: var(--gold-1); text-decoration: underline; }

/* ================= CLOSING CTA — leather band ================= */
.closing {
  padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 4rem);
  text-align: center;
  /* .closing is always the last section on the page — .on-leather's
     border-bottom would otherwise leave a stray gold line under the
     footer with no next section for it to divide from. */
  border-bottom: none;
}
.closing h2 {
  /* Same size as .index-title ("Waffen & Munition verkaufen" etc.). */
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  /* Wide enough that the explicit <br> line breaks in the markup are the
     only wraps that happen — the old 20ch cap was narrower than the
     longest of the three forced lines and re-wrapped it a second time. */
  max-width: 34ch;
  margin: 0 auto 1.2rem;
  text-wrap: balance;
}
.closing h2 .word-gold { color: var(--gold-4); }
/* Headline left, button right, no frame — overrides .closing's centered
   text-align for just this block. */
.closing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  text-align: left;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.closing-cta h2 {
  /* Same size as .index-title ("Waffen & Munition verkaufen" etc.). */
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  max-width: 30ch;
  margin: 0;
  text-wrap: balance;
}
.closing-cta .hero-ctas { flex-shrink: 0; }
@media (max-width: 700px) {
  /* .hero-ctas itself also needs to go full-width here — the button's own
     flex-basis:100% (generic mobile rule) is 100% of THIS box, not of
     .closing-cta, so without this the button was only ever as wide as its
     own content let .hero-ctas shrink to. */
  .closing-cta .hero-ctas { flex-basis: 100%; }
}
.closing p.lede { color: #cfc9bb; max-width: 42ch; margin: 0 auto 2.3rem; }
.closing .hero-ctas { justify-content: center; }
.closing footer {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-top: 1.75rem;
  border-top: 2px solid rgba(255,255,255,0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 600;
  color: #FFFFFF;
  text-align: left;
}
.closing footer a { text-decoration: none; color: #FFFFFF; font-weight: 600; }
.closing footer a:hover { color: var(--gold); }

/* ---------- Logo colour system: ONE logo element, recoloured by the ground behind it ----------
   - On white/light ground:  untouched, original colours (default, no override needed)
   - On black/leather ground: black shapes -> white; gold shapes stay gold (gold already reads on dark)
   - On gold ground:         gold shapes -> white; black shapes stay black (black already reads on gold) */
.logo-mark path.cls-1 { fill: var(--gold); }
.logo-mark path.cls-2 { fill: #bca16d; }
.logo-mark path.cls-3 { fill: #fff; opacity: 0.3; }

/* header: dark ground -> black shapes white */
.site-header[data-theme="dark"] .logo-mark path:not(.cls-1):not(.cls-2):not(.cls-3) { fill: #FFFFFF; }
/* header: gold ground -> gold shapes white */
.site-header[data-theme="gold"] .logo-mark path.cls-1,
.site-header[data-theme="gold"] .logo-mark path.cls-2 { fill: #FFFFFF; }
/* header: default (no attribute) + light ground -> untouched original colours, no rule needed */
/* the shell's shine-stripe (.cls-3) is designed to show against the shell's
   normally-black body — once that body flips white on a dark header, the
   stripe should just disappear rather than being recoloured */
.site-header[data-theme="dark"] .logo-mark path.cls-3 { opacity: 0; }

/* ================= WHATSAPP CHAT WIDGET ================= */
#wa-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* This container's own box spans from the top of #wa-chat down to the
     bubble — including the gap between them — with no background of its
     own. Without this, that whole (mostly empty) box still intercepted
     clicks meant for whatever sits behind/below it (e.g. the footer's
     Impressum/Datenschutz links, whenever they happen to fall under it),
     since an element blocks pointer events under its box by default
     regardless of visible content. #wa-bubble opts back in below; #wa-chat
     already toggles its own pointer-events via .hidden/.visible. */
  pointer-events: none;
}
#wa-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-left: auto;
  position: relative;
  pointer-events: auto;
}
#wa-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
}
#wa-bubble svg { width: 34px; height: 34px; fill: #fff; }
#wa-bubble .notif-dot {
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: #ff3b30;
  border-radius: 50%;
  border: 2px solid #fff;
}
#wa-chat {
  width: 340px;
  max-width: calc(100vw - 48px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  margin-bottom: 12px;
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#wa-chat.hidden { opacity: 0; transform: scale(0.85) translateY(12px); pointer-events: none; }
#wa-chat.visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: all; }
#wa-header {
  background: var(--gold);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.wa-avatar-wrap { position: relative; flex-shrink: 0; }
#wa-avatar {
  width: 55px; height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink);
  display: block;
  background: #fff;
}
#wa-header-info { flex: 1; }
#wa-header-name { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.2; }
#wa-header-status { color: rgba(0,0,0,0.65); font-size: 12px; font-weight: 600; margin-top: 2px; }
#wa-close {
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.15s;
  user-select: none;
}
#wa-close:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
#wa-body {
  background: #ECE5DD;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8beb4' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  padding: 16px 12px;
  min-height: 100px;
}
.wa-msg {
  background: #fff;
  border-radius: 2px 8px 8px 8px;
  padding: 9px 12px 18px;
  max-width: 88%;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  font-size: 14px;
  line-height: 1.45;
  color: #303030;
  animation: fadeInMsg 0.3s ease;
}
.wa-msg::before {
  content: '';
  position: absolute;
  left: -8px; top: 0;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
.wa-msg-time { position: absolute; bottom: 5px; right: 10px; font-size: 10px; color: #999; }
@keyframes fadeInMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.wa-typing {
  background: #fff;
  border-radius: 8px 8px 8px 2px;
  padding: 10px 14px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.wa-typing span {
  width: 7px; height: 7px;
  background: #aaa;
  border-radius: 50%;
  display: inline-block;
  animation: blink 1.4s infinite both;
}
.wa-typing span:nth-child(2) { animation-delay: 0.2s; }
.wa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
#wa-footer { background: #f0f2f5; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
#wa-input {
  flex: 1;
  border: 1px solid #e0e0e0;
  padding: 10px 16px;
  border-radius: 22px;
  outline: none;
  font-size: 13.5px;
  background: #fff;
  font-family: inherit;
  transition: border-color 0.2s;
}
#wa-input:focus { border-color: var(--gold); }
#wa-send {
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
#wa-send:hover { background: var(--gold-2); transform: scale(1.08); }
#wa-send svg { width: 18px; height: 18px; fill: #fff; }