/* =========================================================
   Falkenberg – Goldankauf & Trauringstudio
   Eigenes Stylesheet (ergänzt Bootstrap 5)
   ========================================================= */

:root {
  --fk-cream: #f7f3ec;
  --fk-cream-dark: #efe8db;
  --fk-dark: #16130f;
  --fk-dark-2: #211c16;
  /* #8a6a3f statt eines helleren Golds: als Text auf hellem Grund und als
     Button-Hintergrund mit weißer Schrift erreicht dieser Ton ~5:1 Kontrast
     (WCAG AA verlangt 4.5:1 für normalen Text) - ein reineres/helleres Gold
     bestand diesen Test nicht (~3.5:1). --fk-gold-light bleibt heller, da es
     ausschließlich auf dunklem Grund (Footer, Topbar, Bild-Overlays) verwendet
     wird, wo der Kontrast ohnehin hoch ist. */
  --fk-gold: #8a6a3f;
  --fk-gold-light: #c9a06a;
  --fk-text: #2b2620;
  --fk-text-muted: #6b6255;
  --fk-white: #ffffff;
  --fk-serif: 'Roboto Serif', Georgia, serif;
  --fk-sans: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --fk-radius: 2px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fk-sans);
  color: var(--fk-text);
  background-color: var(--fk-white);
  padding-top: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--fk-dark);
  color: var(--fk-white);
  padding: 0.5rem 1rem;
}
.skip-link:focus { top: 0.5rem; }

h1, h2, h3, h4, h5, .display-font {
  font-family: var(--fk-serif);
  color: var(--fk-dark);
  font-weight: 600;
}

a { color: var(--fk-gold); text-decoration: none; }
a:hover { color: var(--fk-dark); }

/* ---------- Buttons ---------- */
.btn-gold {
  background-color: var(--fk-gold);
  border-color: var(--fk-gold);
  color: var(--fk-white);
  border-radius: var(--fk-radius);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.75rem 1.75rem;
}
.btn-gold:hover, .btn-gold:focus {
  background-color: var(--fk-dark);
  border-color: var(--fk-dark);
  color: var(--fk-white);
}
.btn-outline-dark-fk {
  border: 1px solid var(--fk-dark);
  color: var(--fk-dark);
  border-radius: var(--fk-radius);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.75rem 1.75rem;
  background: transparent;
}
.btn-outline-dark-fk:hover { background: var(--fk-dark); color: var(--fk-white); }
/* Für Buttons auf dunklem/foto-Hintergrund (z.B. Hero) - dieselbe Form wie
   .btn-outline-dark-fk, aber hell statt dunkel, damit sie unabhängig vom
   Bildinhalt darunter lesbar bleiben. */
.btn-outline-light-fk {
  border: 1px solid var(--fk-white);
  color: var(--fk-white);
  border-radius: var(--fk-radius);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.75rem 1.75rem;
  background: rgba(0,0,0,0.15);
}
.btn-outline-light-fk:hover { background: var(--fk-white); color: var(--fk-dark); }

/* ---------- Topbar ---------- */
.topbar {
  background-color: var(--fk-dark);
  color: #cfc8ba;
  font-size: 0.8rem;
  padding: 0.5rem 0;
}
.topbar-link { color: #cfc8ba; }
.topbar-link:hover { color: var(--fk-gold-light); }
.topbar-cta { color: var(--fk-gold-light); font-weight: 500; }
.topbar-note { color: #9a9284; }

/* ---------- Header / Nav ---------- */
.main-header { background: var(--fk-white); border-bottom: 1px solid #eee; }
.navbar { padding: 1rem 0; }
.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
}
.brand-mark { color: var(--fk-gold); font-size: 1.4rem; margin-bottom: 0.15rem; }
.brand-name {
  font-family: var(--fk-serif);
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  color: var(--fk-dark);
  font-weight: 700;
}
.brand-sub {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fk-gold);
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand .brand-mark { color: var(--fk-gold-light); font-size: 1.6rem; margin-bottom: 0; }
.footer-brand .brand-name { color: var(--fk-white); font-size: 1.4rem; }
.footer-brand .brand-sub { color: var(--fk-gold-light); }

/* white-space: nowrap + flex-shrink: 0 verhindern, dass z.B. "Über uns" bei
   bestimmten Zwischenbreiten (Tablet-Bereich) in zwei Zeilen umbricht, obwohl
   rechts noch sichtbar Platz frei ist - ohne das würde der Flex-Container die
   Nav-Items schmaler als ihren natürlichen Inhalt schrumpfen lassen. */
.navbar-nav .nav-item { flex-shrink: 0; }
.navbar-nav .nav-link {
  color: var(--fk-text);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem !important;
  white-space: nowrap;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--fk-gold); }

/* ---------- Dropdown (Goldankauf-Untermenü) ---------- */
.navbar-nav .dropdown-toggle::after { vertical-align: 0.1em; }
.dropdown-menu {
  border: 1px solid #ece4d4;
  border-radius: var(--fk-radius);
  box-shadow: 0 12px 30px rgba(22,19,15,0.12);
  padding: 0.5rem 0;
}
.dropdown-item {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--fk-text);
  padding: 0.5rem 1.25rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--fk-cream); color: var(--fk-gold); }
.dropdown-item.active { background: var(--fk-cream); color: var(--fk-gold); font-weight: 600; }
.dropdown-divider { border-color: #ece4d4; margin: 0.4rem 0; }
@media (max-width: 991.98px) {
  /* Im eingeklappten Mobil-Menü soll das Untermenü wie eine normale
     Menüsektion wirken statt wie ein schwebendes Popup-Panel. */
  .navbar-nav .dropdown-menu {
    border: none;
    box-shadow: none;
    background: var(--fk-cream);
    padding-left: 1rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-color: var(--fk-cream-dark);
  background-size: cover;
  background-position: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
/* Links kräftig abgedunkelt (für Text/Buttons), rechts klar (Ring-Foto sichtbar) -
   garantiert lesbaren Kontrast unabhängig davon, was im Foto an dieser Stelle zu
   sehen ist, statt sich auf einen einzigen schwachen Halbton-Overlay zu verlassen. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15,12,8,0.75) 0%,
    rgba(15,12,8,0.6) 30%,
    rgba(15,12,8,0.25) 55%,
    rgba(15,12,8,0.02) 75%,
    rgba(15,12,8,0) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 620px; }
/* --fk-gold-light statt --fk-gold: Letzteres ist auf ~5:1-Kontrast für HELLE
   Flächen abgestimmt (siehe Definition der Farbvariablen oben) - auf dem
   dunklen Hero-Bildüberlagerung wäre es kaum lesbar. */
.hero-eyebrow { color: var(--fk-gold-light); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.hero-content h1 { font-size: 3rem; line-height: 1.1; color: var(--fk-white); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hero-content .lede { font-size: 1.1rem; color: #e9e3d6; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }

@media (max-width: 767.98px) {
  .hero-content h1 { font-size: 2.1rem; }
  /* Auf Schmalbildschirmen zeigt der Hintergrund oft nur noch den linken,
     absichtlich leeren Bildbereich - der Gradient darf dort nicht komplett
     transparent werden, sonst fehlt der Kontrast für Text/Buttons. */
  .hero-overlay { background: rgba(15,12,8,0.68); }
  /* Bei background-size:cover zeigt "background-position:center" auf
     schmalen (Hochformat-)Viewports nur den leeren mittleren Stoffbereich
     des breiten 16:9-Fotos - die Ringe (rechtes Bilddrittel) fallen aus dem
     sichtbaren Ausschnitt. Denselben Bildausschnitt einfach weiter nach
     rechts verschieben zeigt die Ringe, ohne ein zweites Bild vorzuhalten
     oder Auflösung zu verlieren (der Browser skaliert ohnehin dieselbe
     Originaldatei). Kein !important nötig: die Inline-Style in index.php
     setzt nur background-image, position bleibt regulär überschreibbar. */
  .hero { background-position: right center; }
}

/* ---------- Icon feature row ---------- */
.feature-strip { background: var(--fk-cream); }
.feature-item i { font-size: 2rem; color: var(--fk-gold); }

/* ---------- Icon feature grid (Vorteils-Kacheln innerhalb einer .card-fk-
   Sektion, z.B. auf Trauringe/Verlobungsringe/Goldankauf-Seiten) - Icon-
   Kreis oben, Text zentriert darunter, ohne eigenen Kachel-Hintergrund (die
   umgebende Card-fk liefert bereits die Fläche). */
.icon-feature-grid { margin-top: 1.75rem; }
.icon-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  height: 100%;
}
.icon-feature .icon-feature-icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fk-cream);
  color: var(--fk-gold);
  font-size: 1.35rem;
}
.icon-feature span:last-child { font-size: 0.85rem; color: var(--fk-text); line-height: 1.4; }

/* ---------- Card-Sektion mit Eyebrow (umschließt Intro + Vorteils-Grid,
   z.B. "UNSERE TRAURINGE" über der Überschrift) ---------- */
.content-card-section { padding: 2rem 1.5rem; }
@media (min-width: 768px) { .content-card-section { padding: 2.75rem 3rem; } }

/* ---------- Terminvereinbarung-CTA-Box am Ende jeder .content-card-section -
   weicher, warmer Foto-Hintergrund statt Flächenfarbe. Die halbtransparente
   Creme-Wäsche über dem Foto sichert Lesbarkeit des dunklen Texts unabhängig
   davon, welcher Bildausschnitt bei "cover" gerade sichtbar ist. */
.cta-booking-box {
  position: relative;
  background:
    linear-gradient(rgba(247,243,236,0.6), rgba(247,243,236,0.6)),
    url('/assets/img/cta-booking-bg.jpg');
  background-size: cover;
  background-position: center;
  border-radius: var(--fk-radius);
  padding: 1.75rem;
}
@media (max-width: 575.98px) {
  .cta-booking-box { padding: 1.5rem; }
}
.feature-item h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0.75rem 0 0.35rem; }
.feature-item p { color: var(--fk-text-muted); font-size: 0.9rem; margin: 0; }

/* ---------- Category cards ---------- */
.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--fk-white);
  min-height: 320px;
  background: linear-gradient(160deg, #cbb48a, #8f6a3f);
}
.category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,12,8,0.78) 10%, rgba(15,12,8,0) 55%);
}
/* margin-top: auto reicht, um den Textblock im Column-Flex-Container nach
   unten zu schieben. Ein zusätzliches align-self: flex-end (Querachse =
   horizontal bei flex-direction: column!) schrumpfte die Box früher auf
   ihre Inhaltsbreite und richtete sie rechts aus - dadurch stand kurzer
   Text (z.B. "Trauringe") optisch mittig, während langer Text (z.B.
   "Verlobungsringe") am linken Rand begann. Ohne align-self bleibt die Box
   auf voller Breite (Default: stretch) und der Text startet überall gleich
   links. */
.category-card .card-text-block { position: relative; z-index: 2; padding: 1.5rem; margin-top: auto; }
.category-card { display: flex; flex-direction: column; }
.category-card h3 { color: var(--fk-white); font-size: 1.4rem; margin-bottom: 0.25rem; }
.category-card p { color: #e7ddca; font-size: 0.9rem; }
.category-card .cta-link { color: var(--fk-gold-light); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.category-card:hover .cta-link { color: var(--fk-white); }

/* ---------- Trust / About section ---------- */
/* .eyebrow ist bewusst NICHT auf .trust-section beschränkt (früher war das
   so, wodurch z.B. die "Uhrenankauf"-Übertitel-Zeile auf der Startseite -
   außerhalb von .trust-section - ungestylt blieb und nicht wie die anderen
   Übertitel golden erschien). Gilt jetzt überall gleich, wie .section-eyebrow. */
.eyebrow { color: var(--fk-gold); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; }
.trust-image-wrap { position: relative; min-height: 380px; background: linear-gradient(135deg, #2a241c, #4a3c28); border-radius: var(--fk-radius); overflow: hidden; }
.trust-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Service strip ---------- */
.service-strip { background: var(--fk-cream); border-top: 1px solid #e9e1d2; }
.service-item { display: block; color: var(--fk-text); }
.service-item i { font-size: 1.6rem; color: var(--fk-gold); }
.service-item h3 { font-size: 0.95rem; margin: 0.65rem 0 0.35rem; }
.service-item p { color: var(--fk-text-muted); font-size: 0.85rem; }
.service-link { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fk-gold); }
.service-item:hover h3 { color: var(--fk-gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--fk-dark); color: #b9b1a1; }
.footer-heading { color: var(--fk-white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.footer-text a { color: #b9b1a1; }
.footer-text a:hover { color: var(--fk-gold-light); }
.footer-text li { margin-bottom: 0.4rem; }
.footer-bottom { background: #0f0d0a; color: #8a8375; }
.footer-bottom a, .footer-link-btn { color: #8a8375; background: none; border: none; padding: 0; }
.footer-bottom a:hover, .footer-link-btn:hover { color: var(--fk-gold-light); }

/* ---------- Floating action buttons ---------- */
.floating-actions {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fab {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.fab:hover { transform: scale(1.08); color: #fff; }
.fab-call { background-color: var(--fk-gold); }
.fab-whatsapp { background-color: #25D366; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2000;
  background: var(--fk-white);
  border-top: 3px solid var(--fk-gold);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
}
.cookie-banner-inner { max-width: 960px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.cookie-banner p, .cookie-banner label { color: var(--fk-text); }

/* ---------- Generic content sections ---------- */
.section-eyebrow { color: var(--fk-gold); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; }
.page-hero {
  background: var(--fk-cream-dark);
  padding: 5.46rem 0 3.9rem; /* +30% ggü. vorher (4.2rem/3rem, davor bereits +20% ggü. 3.5rem/2.5rem) */
  border-bottom: 1px solid #e9e1d2;
}
.page-hero h1 { margin-bottom: 0.5rem; }

/* Foto-Variante des Seiten-Headers (Trauringe/Verlobungsringe/Goldankauf/
   Uhrenankauf): dieselbe Höhe wie .page-hero (identisches Padding), aber
   mit Hintergrundfoto + mittelstark schwarz-transparentem Overlay für
   Lesbarkeit, daher heller Text statt der Standard-.page-hero-Textfarben. */
.page-hero-photo {
  position: relative;
  background-size: cover;
  /* "center" schnitt bei allen vier Fotos den eigentlichen Blickfang (Ringe/
     Diamant/Uhr) ab, da er in diesen Kompositionen im unteren Bildbereich
     liegt, während oben nur unscharfer Hintergrund ist - deshalb den
     sichtbaren Ausschnitt zum unteren Bildrand hin verschieben statt echt
     mittig zu zentrieren. */
  background-position: center bottom;
  color: var(--fk-white);
  overflow: hidden;
}
.page-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.5);
}
.page-hero-photo .container { position: relative; z-index: 1; }
.page-hero-photo h1 { color: var(--fk-white); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.page-hero-photo .lead { color: #ede6d6; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.page-hero-photo .breadcrumb-fk a { color: #cfc8ba; }
.page-hero-photo .breadcrumb-fk .current { color: var(--fk-gold-light); }
.breadcrumb-fk a { color: var(--fk-text-muted); }
.breadcrumb-fk .current { color: var(--fk-gold); }

.card-fk {
  border: 1px solid #ece4d4;
  border-radius: var(--fk-radius);
  background: var(--fk-white);
}

.disclaimer-box {
  background: var(--fk-cream);
  border-left: 4px solid var(--fk-gold);
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--fk-text-muted);
}
.important-box {
  background: #fff7ea;
  border: 1px solid var(--fk-gold-light);
  border-radius: var(--fk-radius);
  padding: 1.25rem 1.5rem;
}
.important-box i { color: var(--fk-gold); }

.list-buy-back {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-buy-back li {
  background: var(--fk-cream);
  border: 1px solid #e9e1d2;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--fk-text);
}

/* ---------- Configurator ---------- */
.configurator { background: var(--fk-cream); border-radius: var(--fk-radius); padding: 2rem; }
.ring-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.ring-preview-img {
  width: 260px;
  height: 260px;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--fk-radius);
  box-shadow: 0 12px 30px rgba(22,19,15,0.15);
  transition: opacity 0.2s ease;
}
.ring-preview-img.is-swapping { opacity: 0; }
.ring-preview-3d {
  width: 480px;
  max-width: 100%;
  height: 480px;
  border-radius: var(--fk-radius);
  box-shadow: 0 12px 30px rgba(22,19,15,0.15);
  --poster-color: transparent;
}

/* ---------- Kollektion: Galerie-Kacheln ---------- */
.collection-thumb {
  display: block;
  width: 100%;
  border: 1px solid #ece4d4;
  border-radius: var(--fk-radius);
  background: var(--fk-white);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.collection-thumb:hover, .collection-thumb:focus-visible {
  border-color: var(--fk-gold);
  transform: translateY(-2px);
}
.collection-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.collection-thumb .thumb-caption {
  display: block;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  color: var(--fk-text-muted);
  text-align: center;
  border-top: 1px solid #ece4d4;
}
.metal-swatch {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-block;
}
.metal-swatch.active { border-color: var(--fk-dark); }
.metal-swatch:focus-visible { outline: 2px solid var(--fk-gold); outline-offset: 2px; }

.config-summary dt { color: var(--fk-text-muted); font-weight: 400; font-size: 0.85rem; }
.config-summary dd { font-weight: 500; margin-bottom: 0.5rem; }

/* ---------- Gold calculator ---------- */
.price-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--fk-text-muted);
}
.price-ticker .value { color: var(--fk-dark); font-weight: 600; }
.calc-result {
  background: var(--fk-white);
  border: 1px solid #ece4d4;
  border-radius: var(--fk-radius);
  padding: 1.5rem;
}
.calc-result .amount { font-family: var(--fk-serif); font-size: 2.2rem; color: var(--fk-gold); font-weight: 700; }

/* Feingehalt-Auswahl als Buttons statt Dropdown (angelehnt an gängige
   Goldrechner-UX: große, direkt anklickbare Kacheln statt <select>). */
.fineness-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.fineness-btn {
  border: 1px solid #e9e1d2;
  background: var(--fk-white);
  color: var(--fk-text);
  border-radius: var(--fk-radius);
  padding: 0.75rem 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fineness-btn:hover { border-color: var(--fk-gold); }
.fineness-btn.active {
  background: var(--fk-gold);
  border-color: var(--fk-gold);
  color: var(--fk-white);
  font-weight: 600;
}
.fineness-btn:focus-visible { outline: 2px solid var(--fk-gold); outline-offset: 2px; }
.fineness-btn[data-fineness-value="zahngold"] { grid-column: 1 / -1; }

/* ---------- Gewicht: Schieberegler + präzises Zahlenfeld ---------- */
.weight-control { display: flex; align-items: center; gap: 1rem; }
.weight-control .form-range { flex: 1 1 auto; accent-color: var(--fk-gold); }
.weight-readout {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-width: 5.5rem;
  justify-content: flex-end;
}
.weight-readout input[type="number"] {
  font-family: var(--fk-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fk-dark);
  border: none;
  background: transparent;
  width: 4.5rem;
  text-align: right;
  padding: 0;
}
.weight-readout input[type="number"]:focus { outline: none; box-shadow: none; color: var(--fk-gold); }
.weight-readout .unit { color: var(--fk-text-muted); font-size: 1rem; }

/* ---------- Uhrenankauf: Marken-Auswahl ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.brand-btn {
  border: 1px solid #e9e1d2;
  background: var(--fk-white);
  color: var(--fk-text);
  border-radius: var(--fk-radius);
  padding: 1rem 0.75rem;
  font-family: var(--fk-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.brand-btn:hover { border-color: var(--fk-gold); transform: translateY(-2px); }
.brand-btn.active {
  background: var(--fk-gold);
  border-color: var(--fk-gold);
  color: var(--fk-white);
}
.brand-btn:focus-visible { outline: 2px solid var(--fk-gold); outline-offset: 2px; }
.brand-btn.brand-btn-other { font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--fk-text-muted); }

/* ---------- FAQ ---------- */
.accordion-button:not(.collapsed) { color: var(--fk-dark); background-color: var(--fk-cream); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(138,106,63,0.25); }

/* ---------- Utility ---------- */
.text-gold { color: var(--fk-gold) !important; }
.bg-cream { background-color: var(--fk-cream) !important; }
.bg-dark-fk { background-color: var(--fk-dark) !important; }
.rounded-fk { border-radius: var(--fk-radius) !important; }
.section-py { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (max-width: 767.98px) {
  .section-py { padding-top: 3rem; padding-bottom: 3rem; }
}